npx claudepluginhub suriyel/longtaskforagent --plugin long-taskThis skill uses the workspace's default tool permissions.
Take the approved SRS as input. Analyze UI-related requirements, define visual style direction, and produce a UCD style guide containing text-to-image model prompts — so that all frontend features share a unified visual language.
Designs UI/UX interfaces: wireframes, design system tokens, UI components, navigation flows, WCAG accessibility, responsive breakpoints from product specs.
Generates architecture/design documents from approved SRS docs when no prior design exists, proposing 2-3 approaches with trade-offs and securing section-by-section approval.
Creates distinctive, non-generic UI designs with aesthetic direction and wireframes, or polishes existing UI code post-implementation. Use for UI design, layouts, wireframing, cleanup, or componentization.
Share bugs, ideas, or general feedback.
Take the approved SRS as input. Analyze UI-related requirements, define visual style direction, and produce a UCD style guide containing text-to-image model prompts — so that all frontend features share a unified visual language.
Do NOT invoke any design skill, implementation skill, write any code, scaffold any project, or take any implementation action until you have presented the UCD style guide and the user has approved it. This applies to EVERY project with UI features.This phase runs after SRS approval and before design. It applies when:
*-ucd.md) exists in docs/plans/If the SRS has NO UI features: announce "No UI features detected in SRS — skipping UCD phase" and immediately chain to design via long-task:long-task-design.
You MUST create a TodoWrite task for each of these items and complete them in order:
docs/plans/*-srs.mddocs/plans/YYYY-MM-DD-<topic>-ucd.md and commitlong-task:long-task-designThe terminal state is invoking long-task-design. Do NOT invoke any other skill.
docs/plans/*-srs.mdAskUserQuestion before proceedingPresent 2-3 visual style options to the user:
## Style A: [Name] (e.g., "Clean Corporate", "Bold Modern", "Soft Minimal")
**Mood**: [1-2 sentences describing the visual feel]
**Color direction**: [primary palette tendency — warm/cool/neutral, high/low contrast]
**Typography direction**: [serif/sans-serif, geometric/humanist, density]
**Layout direction**: [card-based/list-based, dense/spacious, fixed/fluid]
**Target persona fit**: [which SRS user personas this serves best]
**Reference style**: [existing design language this draws from — Material, Ant, Apple HIG, etc.]
## Style B: [Name]
...
## Recommendation: Style [X]
**Reason**: [why this fits the SRS personas, constraints, and NFRs best]
Wait for user to choose or provide direction. Incorporate feedback before proceeding.
Define the concrete design tokens that anchor the entire style system:
| Token | Hex | Usage | Contrast Ratio |
|-------|-----|-------|----------------|
| --color-primary | #XXXXXX | Primary actions, links, active states | >= 4.5:1 on white |
| --color-primary-hover | #XXXXXX | Hover state for primary | |
| --color-secondary | #XXXXXX | Secondary actions, accents | >= 4.5:1 on white |
| --color-bg-primary | #XXXXXX | Main background | |
| --color-bg-secondary | #XXXXXX | Card/section background | |
| --color-text-primary | #XXXXXX | Body text | >= 4.5:1 on bg-primary |
| --color-text-secondary | #XXXXXX | Captions, hints | >= 3:1 on bg-primary |
| --color-success | #XXXXXX | Success states | |
| --color-warning | #XXXXXX | Warning states | |
| --color-error | #XXXXXX | Error states, destructive actions | |
| --color-border | #XXXXXX | Default borders | |
| Token | Font Family | Size | Weight | Line Height | Usage |
|-------|-------------|------|--------|-------------|-------|
| --font-heading-1 | [family] | [size] | [weight] | [lh] | Page titles |
| --font-heading-2 | [family] | [size] | [weight] | [lh] | Section headings |
| --font-heading-3 | [family] | [size] | [weight] | [lh] | Card titles |
| --font-body | [family] | [size] | [weight] | [lh] | Body text |
| --font-body-small | [family] | [size] | [weight] | [lh] | Captions, hints |
| --font-label | [family] | [size] | [weight] | [lh] | Form labels, buttons |
| --font-code | [family] | [size] | [weight] | [lh] | Code snippets |
| Token | Value | Usage |
|-------|-------|-------|
| --space-xs | [value] | Tight inner padding |
| --space-sm | [value] | Default inner padding |
| --space-md | [value] | Section gaps |
| --space-lg | [value] | Page section margins |
| --space-xl | [value] | Major layout breaks |
| --radius-sm | [value] | Buttons, inputs |
| --radius-md | [value] | Cards |
| --radius-lg | [value] | Modals, dialogs |
| --shadow-sm | [value] | Subtle elevation |
| --shadow-md | [value] | Cards, dropdowns |
| --shadow-lg | [value] | Modals, overlays |
- **Icon style**: [outlined/filled/duotone] [rounded/sharp] [stroke weight]
- **Icon library**: [recommended library with version, e.g., Lucide Icons 0.263.0]
- **Illustration style**: [flat/isometric/3D/hand-drawn] [color treatment]
- **Photography treatment**: [if applicable — filters, overlays, cropping rules]
For each UI component type in the inventory, produce a text-to-image prompt that a generative image model (Midjourney, DALL-E, Stable Diffusion, etc.) can use to visualize the component.
Each component prompt follows this template:
### Component: [Component Name]
**SRS Trace**: [FR-xxx, NFR-xxx]
**Variants**: [list variants — default, hover, active, disabled, error, loading]
#### Base Prompt
> [Detailed text-to-image prompt describing the component's visual appearance in the approved style. Include: layout structure, color tokens by name, typography tokens, spacing, border treatment, shadow, state indicators. Be specific about proportions, alignment, and visual hierarchy.]
#### Variant Prompts
> **Hover state**: [prompt delta from base]
> **Error state**: [prompt delta from base]
> **Loading state**: [prompt delta from base]
> **Dark mode** (if applicable): [prompt delta from base]
#### Style Constraints
- [Constraint 1 — e.g., "Button height must be exactly 40px for touch targets"]
- [Constraint 2 — e.g., "Error text must appear below the input, never as tooltip"]
Generate prompts for at least these component types (skip only if truly absent from the UI inventory):
| Category | Components |
|---|---|
| Navigation | Header/navbar, sidebar, breadcrumb, tabs, pagination |
| Input | Text input, textarea, select/dropdown, checkbox, radio, toggle, date picker |
| Action | Primary button, secondary button, icon button, link button, FAB |
| Feedback | Alert/toast, modal/dialog, progress bar, skeleton loader, empty state |
| Data Display | Table, card, list item, badge/tag, avatar, tooltip |
| Layout | Page shell, form layout, grid/masonry, divider |
For each key page/screen identified in the UI inventory, produce a full-page text-to-image prompt.
### Page: [Page Name]
**SRS Trace**: [FR-xxx]
**User Persona**: [primary persona for this page]
**Entry Points**: [how users arrive at this page]
#### Layout Description
[Describe the page layout: header placement, content zones, sidebar (if any), footer. Specify grid structure, responsive behavior at key breakpoints.]
#### Full-Page Prompt
> [Detailed text-to-image prompt for the complete page. Reference component names defined in Step 4. Describe spatial relationships, visual hierarchy, content flow, key interactions. Include responsive notes for mobile/tablet if applicable.]
#### Key Interactions
- [Interaction 1 — e.g., "Clicking row in table opens detail panel on right"]
- [Interaction 2 — e.g., "Form validates on blur, shows inline errors"]
#### Responsive Behavior
- **Desktop (>= 1024px)**: [layout description]
- **Tablet (768-1023px)**: [layout changes]
- **Mobile (< 768px)**: [layout changes]
For non-trivial projects, present section by section:
Present each section. Wait for user feedback. Incorporate changes before moving to the next.
For simple projects (< 3 UI pages): combine all sections into a single approval step.
Save the approved UCD style guide to docs/plans/YYYY-MM-DD-<topic>-ucd.md.
Document structure:
# <Project Name> — UCD Style Guide
**Date**: YYYY-MM-DD
**Status**: Approved
**SRS Reference**: docs/plans/YYYY-MM-DD-<topic>-srs.md
## 1. Visual Style Direction
[Chosen style, rationale]
## 2. Style Tokens
### 2.1 Color Palette
### 2.2 Typography Scale
### 2.3 Spacing & Layout
### 2.4 Iconography & Imagery
## 3. Component Prompts
### 3.1 [Component Name]
...
## 4. Page Prompts
### 4.1 [Page Name]
...
## 5. Style Rules & Constraints
[Cross-cutting rules: accessibility, animation, responsive, dark mode]
Once the UCD document is saved and committed:
long-task:long-task-design to begin design| Project Size | UI Pages | Depth |
|---|---|---|
| Tiny | 1-3 | Style tokens + 3-5 core component prompts + page prompts; single approval step |
| Small | 3-8 | Full style tokens + component prompts for used components + all page prompts |
| Medium | 8-20 | Full UCD with all component variants + responsive page prompts |
| Large | 20+ | Full UCD + interaction state matrices + animation spec + dark mode variants |
| Rationalization | Correct Response |
|---|---|
| "The UI is simple, skip UCD" | Even simple UIs need a consistent style — run lightweight UCD |
| "I'll define styles during implementation" | Ad-hoc styling causes visual inconsistency across features |
| "The user will pick a UI library, that's enough" | UI libraries need configuration — UCD provides those values |
| "Style tokens are premature" | Tokens are cheaper to define now than to retrofit across 20 components |
| "Let me just use default Material/Ant styles" | Defaults are a valid starting point but must be documented as the explicit choice |
| "The SRS doesn't mention colors" | SRS defines WHAT; UCD defines the visual HOW; both are needed for UI projects |
Called by: using-long-task (when SRS exists, no UCD doc, no design doc, no feature-list.json — and SRS contains UI features) or long-task-requirements (Step 8 chains here)
Requires: Approved SRS at docs/plans/*-srs.md
Chains to: long-task-design (after UCD approval)
Produces: docs/plans/YYYY-MM-DD-<topic>-ucd.md
Referenced by: