design

Featured

Design workflows — UX copy, design systems, design critique, accessibility review, design handoff, user research synthesis. Use when writing UI copy, reviewing designs, building component systems, checking accessibility, or preparing developer handoffs.

Web & Frontend 419 stars 44 forks Updated 2 days ago MIT

Install

View on GitHub

Quality Score: 92/100

Stars 20%
87
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Design Umbrella skill for design workflows: UX copy, design systems, critique, accessibility review, developer handoff, and user research synthesis. Each mode loads its own reference files on demand. --- ## Mode Detection Classify into one mode before proceeding. | Mode | Signal Phrases | Reference | |------|---------------|-----------| | **UX-COPY** | write copy, button text, error message, empty state, onboarding copy, tooltip text, confirmation dialog, notification copy | `references/ux-copy.md` | | **DESIGN-SYSTEM** | design tokens, component library, naming conventions, audit components, document component, extend system, theme architecture | `references/design-systems.md` | | **CRITIQUE** | review design, critique mockup, design feedback, evaluate screen, visual hierarchy, usability review | `references/design-critique.md` | | **ACCESSIBILITY** | WCAG, accessibility audit, color contrast, keyboard navigation, screen reader, a11y, focus management, ARIA | `references/accessibility-review.md` | | **HANDOFF** | developer handoff, spec sheet, handoff doc, implementation spec, design-to-dev, responsive spec | `references/design-handoff.md` | | **RESEARCH** | synthesize research, interview analysis, usability findings, survey results, user segments, research themes | (inline — see workflow) | If the request spans modes, pick the primary mode and note the secondary. --- ## Workflow by Mode ### UX-COPY Mode **Load**: `references/ux-copy.md`, `references/llm-design-f...

Details

Author
notque
Repository
notque/vexjoy-agent
Created
5 months ago
Last Updated
2 days ago
Language
Python
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

design

Audit and fix the design of interfaces that already exist in files, across 17 modes (checkup, smell, review, deslop, typeset, recolor, motion, interaction, relayout, responsive, redesign, tokenize, setup, finish, refine, voice, surface). Use this whenever the user types "/design" or "design" followed by a mode name or a target file. Also use it, without waiting for the word "design", whenever someone says a screen looks generic, AI-generated, templated, sloppy, boring, flat, weak, unfinished, or "like every other landing page", or asks to audit, critique, review, de-slop, restyle, recolor, retype, relayout, tighten, polish, or ship-check an existing page or component. Trigger on complaints about a hero, feature cards, spacing, type hierarchy, color palette, motion, hover or focus states, empty and error states, dark mode, or responsive behavior in code that is already written. For inventing a brand new interface from nothing, prefer the frontend-design skill; this skill is for UI that is already in files.

0 Updated 1 months ago
adnanalpolink
Web & Frontend Listed

design-craft

UI/UX craft + design-decision communication skill, distilled from Albert Chipman's *UX/UI Design 2022* and Tom Greever's *Articulating Design Decisions*. Five modes: AUDIT a screen/component against visual-hierarchy, typography, readability, alignment/grid, consistency and microcopy rules; RATIONALE — write the 'Big Three' justification for any design decision (what problem it solves, how it affects the user, why it beats the alternative); RESPOND to design feedback or a stakeholder request with the IDEAL response (Thank→Repeat→Prepare, strategy, tactics, ask for agreement); PREP a design review (anticipated objections, alternatives, data, follow-up); INTAKE a new design project (goals, users, metrics, decision-maker). Use when the user says 'audit this UI', 'design review', 'looks amateur/unprofessional/AI-made', 'why did you design it this way', 'justify this design', 'the client/stakeholder wants X', 'present this design', 'readability', 'typography', 'visual hierarchy', 'microcopy', 'design rationale', or

0 Updated 3 weeks ago
emamulmursalin47
Web & Frontend Listed

design

One keyless, offline-first front door for design. Routes a design intent to a mode and renders it as self-contained HTML/SVG (no CDN, no paid keys): UI screens and flows, clickable prototypes, design systems and tokens (including brand identity, BRAND.md), architecture/flow/ER diagrams, infographics and data-stories, slide decks, vector assets (OG cards, SVG logos, icon sets, posters), critique of an existing screen, and anticipating a flow's dead-ends. True raster (photo, illustration, painterly cover) is an optional layer that degrades to a spec plus an editable placeholder rather than hard-failing. Every mode loads design-core first (hierarchy, WCAG AA contrast, colorblind-safe palettes, brand-probe, the anti-tells catalog of what makes a design look AI-generated, precise non-marketing copy, render/screenshot/critique verification). Triggers on: design a screen/page/UI, mock up, prototype, design system, tokens, brand, BRAND.md, wireframe, diagram this, infographic, dataviz, slide deck, logo, OG image, soc

0 Updated today
phnx-labs