initial commit
This commit is contained in:
@@ -0,0 +1,110 @@
|
||||
---
|
||||
name: 'step-01-load-context'
|
||||
description: 'Load design system components, tokens, and page context for UI element asset generation'
|
||||
nextStepFile: './step-02-inventory.md'
|
||||
---
|
||||
|
||||
# Step 1: Load Context
|
||||
|
||||
## STEP GOAL:
|
||||
|
||||
Load the design system components, design tokens, and page context needed to generate UI element assets — establishing the complete component library generation context.
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
### Universal Rules:
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
- 📖 CRITICAL: Read the complete step file before taking any action
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
|
||||
- 📋 YOU ARE A FACILITATOR, not a content generator
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config `{communication_language}`
|
||||
|
||||
### Role Reinforcement:
|
||||
|
||||
- ✅ You are a creative production partner loading UI component context
|
||||
- ✅ If you already have been given a name, communication_style and identity, continue to use those while playing this new role
|
||||
- ✅ We engage in collaborative dialogue, not command-response
|
||||
- ✅ You bring component system expertise, user brings project specifics
|
||||
|
||||
### Step-Specific Rules:
|
||||
|
||||
- 🎯 Focus ONLY on loading and summarizing UI element context
|
||||
- 🚫 FORBIDDEN to generate UI elements or select styles in this step
|
||||
- 💬 Load both component definitions and design tokens
|
||||
- 📋 Present clear context summary before proceeding
|
||||
|
||||
## EXECUTION PROTOCOLS:
|
||||
|
||||
- 🎯 Follow the Sequence of Instructions exactly
|
||||
- 💾 Document context summary
|
||||
- 🚫 FORBIDDEN to skip any context source
|
||||
|
||||
## CONTEXT BOUNDARIES:
|
||||
|
||||
- Available context: Design system components and tokens, page specifications
|
||||
- Focus: Loading all inputs for UI element generation
|
||||
- Limits: Do not start generating — just load context
|
||||
- Dependencies: Design system must exist
|
||||
|
||||
## Sequence of Instructions (Do not deviate, skip, or optimize)
|
||||
|
||||
### 1. Load Design System Components
|
||||
|
||||
Read component definitions: button variants, card patterns, form elements, navigation components, feedback components.
|
||||
|
||||
### 2. Load Design Tokens
|
||||
|
||||
Read tokens affecting rendering: color tokens (per state), typography tokens, spacing tokens, border tokens, shadow tokens, transition tokens.
|
||||
|
||||
### 3. Load Page Context
|
||||
|
||||
From page specs, identify which components are used where: which button variants, form patterns, card layouts per page.
|
||||
|
||||
### 4. Present Context Summary
|
||||
|
||||
```
|
||||
UI Element Context:
|
||||
- Component types defined: [count]
|
||||
- Design tokens loaded: [count]
|
||||
- States to generate: default, hover, focus, active, disabled
|
||||
- Pages referencing components: [count]
|
||||
```
|
||||
|
||||
### 5. Present MENU OPTIONS
|
||||
|
||||
Display: **"Select an Option:** [C] Continue"
|
||||
|
||||
#### Menu Handling Logic:
|
||||
|
||||
- IF C: Save context, then load, read entire file, then execute {nextStepFile}
|
||||
- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#5-present-menu-options)
|
||||
|
||||
#### EXECUTION RULES:
|
||||
|
||||
- ALWAYS halt and wait for user input after presenting menu
|
||||
- ONLY proceed to next step when user selects 'C'
|
||||
|
||||
## CRITICAL STEP COMPLETION NOTE
|
||||
|
||||
ONLY WHEN C is selected and context is summarized will you load {nextStepFile} to begin building the UI element inventory.
|
||||
|
||||
---
|
||||
|
||||
## 🚨 SYSTEM SUCCESS/FAILURE METRICS
|
||||
|
||||
### ✅ SUCCESS:
|
||||
|
||||
- Component definitions loaded
|
||||
- Design tokens loaded
|
||||
- Page context loaded
|
||||
- Context summary presented
|
||||
|
||||
### ❌ SYSTEM FAILURE:
|
||||
|
||||
- Starting generation without context
|
||||
- Missing component categories
|
||||
- Not loading design tokens
|
||||
- Not waiting for user input at menu
|
||||
|
||||
**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
name: 'step-02-inventory'
|
||||
description: 'Create a complete inventory of UI elements organized by component type, variant, and state'
|
||||
nextStepFile: './step-03-select-style.md'
|
||||
---
|
||||
|
||||
# Step 2: Asset Inventory
|
||||
|
||||
## STEP GOAL:
|
||||
|
||||
Create a complete inventory of UI elements to generate, organized by component type, variant, and state — with priority levels and scope selection.
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
### Universal Rules:
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
- 📖 CRITICAL: Read the complete step file before taking any action
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
|
||||
- 📋 YOU ARE A FACILITATOR, not a content generator
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config `{communication_language}`
|
||||
|
||||
### Role Reinforcement:
|
||||
|
||||
- ✅ You are a creative production partner organizing component inventory
|
||||
- ✅ If you already have been given a name, communication_style and identity, continue to use those while playing this new role
|
||||
- ✅ We engage in collaborative dialogue, not command-response
|
||||
- ✅ You bring component library organization expertise, user brings scope decisions
|
||||
|
||||
### Step-Specific Rules:
|
||||
|
||||
- 🎯 Focus ONLY on cataloging UI elements for generation
|
||||
- 🚫 FORBIDDEN to generate elements in this step
|
||||
- 💬 Calculate total assets (variants x states)
|
||||
- 📋 Wait for user scope selection
|
||||
|
||||
## EXECUTION PROTOCOLS:
|
||||
|
||||
- 🎯 Follow the Sequence of Instructions exactly
|
||||
- 💾 Document inventory with total asset count
|
||||
- 📖 Check `{output_folder}/E-Assets/ui-elements/` for existing assets
|
||||
- 🚫 FORBIDDEN to proceed without user scope selection
|
||||
|
||||
## CONTEXT BOUNDARIES:
|
||||
|
||||
- Available context: UI element context from Step 1
|
||||
- Focus: Organizing elements into a generation-ready inventory
|
||||
- Limits: Do not generate — just catalog
|
||||
- Dependencies: Context from Step 1
|
||||
|
||||
## Sequence of Instructions (Do not deviate, skip, or optimize)
|
||||
|
||||
### 1. List Component Types
|
||||
|
||||
Table: component, variants, states, total assets (variants x states).
|
||||
|
||||
### 2. Prioritize
|
||||
|
||||
[H] High (used every page: buttons, inputs, navigation), [M] Medium (multiple pages: cards, alerts), [L] Low (specific pages: specialized components).
|
||||
|
||||
### 3. Check Existing Assets
|
||||
|
||||
Scan `{output_folder}/E-Assets/ui-elements/` for already-generated components.
|
||||
|
||||
### 4. Present Inventory
|
||||
|
||||
Show: component types count, total variants x states, already generated, need generation. Present scope: [A] All, [H] High priority only, [S] Select specific.
|
||||
|
||||
### 5. Present MENU OPTIONS
|
||||
|
||||
Display: **"Select an Option:** [C] Continue"
|
||||
|
||||
#### Menu Handling Logic:
|
||||
|
||||
- IF C: Save inventory and scope, then load, read entire file, then execute {nextStepFile}
|
||||
- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#5-present-menu-options)
|
||||
|
||||
#### EXECUTION RULES:
|
||||
|
||||
- ALWAYS halt and wait for user input after presenting menu
|
||||
- ONLY proceed to next step when user selects 'C'
|
||||
|
||||
## CRITICAL STEP COMPLETION NOTE
|
||||
|
||||
ONLY WHEN C is selected and scope is confirmed will you load {nextStepFile} to begin selecting rendering style.
|
||||
|
||||
---
|
||||
|
||||
## 🚨 SYSTEM SUCCESS/FAILURE METRICS
|
||||
|
||||
### ✅ SUCCESS:
|
||||
|
||||
- All component types cataloged with variants and states
|
||||
- Priority levels assigned
|
||||
- Existing assets checked
|
||||
- User selected scope
|
||||
|
||||
### ❌ SYSTEM FAILURE:
|
||||
|
||||
- Starting generation without inventory
|
||||
- Not calculating total assets
|
||||
- Not checking existing assets
|
||||
- Not waiting for user scope selection
|
||||
|
||||
**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
name: 'step-03-select-style'
|
||||
description: 'Confirm rendering approach, state visualization, and design system token mapping for UI elements'
|
||||
nextStepFile: './step-04-generate.md'
|
||||
---
|
||||
|
||||
# Step 3: Select Style
|
||||
|
||||
## STEP GOAL:
|
||||
|
||||
Confirm the visual style for UI element generation — rendering approach, state visualization method, design system token mapping, and output parameters.
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
### Universal Rules:
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
- 📖 CRITICAL: Read the complete step file before taking any action
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
|
||||
- 📋 YOU ARE A FACILITATOR, not a content generator
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config `{communication_language}`
|
||||
|
||||
### Role Reinforcement:
|
||||
|
||||
- ✅ You are a creative production partner defining UI element rendering standards
|
||||
- ✅ If you already have been given a name, communication_style and identity, continue to use those while playing this new role
|
||||
- ✅ We engage in collaborative dialogue, not command-response
|
||||
- ✅ You bring component rendering expertise, user brings visual preferences
|
||||
|
||||
### Step-Specific Rules:
|
||||
|
||||
- 🎯 Focus ONLY on defining rendering style
|
||||
- 🚫 FORBIDDEN to generate elements in this step
|
||||
- 💬 Map design tokens to visual properties
|
||||
- 📋 Confirm complete configuration before proceeding
|
||||
|
||||
## EXECUTION PROTOCOLS:
|
||||
|
||||
- 🎯 Follow the Sequence of Instructions exactly
|
||||
- 💾 Document style configuration
|
||||
- 🚫 FORBIDDEN to proceed without confirmed style
|
||||
|
||||
## CONTEXT BOUNDARIES:
|
||||
|
||||
- Available context: UI inventory (Step 2), design system tokens
|
||||
- Focus: Defining rendering parameters
|
||||
- Limits: Do not generate — just define style
|
||||
- Dependencies: Inventory and scope from Step 2
|
||||
|
||||
## Sequence of Instructions (Do not deviate, skip, or optimize)
|
||||
|
||||
### 1. Select Rendering Approach
|
||||
|
||||
[V] Vector/CSS (clean, scalable, code-ready), [R] Realistic (shadows, depth, presentation-quality), [F] Flat (minimal, no shadows, pure color blocks).
|
||||
|
||||
### 2. Select State Visualization
|
||||
|
||||
[G] Grid (all states in a grid, design system doc style), [I] Individual (each state as separate asset), [A] Animated (state transitions as sequence).
|
||||
|
||||
### 3. Apply Design System Tokens
|
||||
|
||||
Map tokens to visual properties: primary button colors, hover states, focus rings, shadows, etc.
|
||||
|
||||
### 4. Confirm Style
|
||||
|
||||
Present: rendering approach, state display, design system applied, background, scale.
|
||||
|
||||
### 5. Present MENU OPTIONS
|
||||
|
||||
Display: **"Select an Option:** [C] Continue"
|
||||
|
||||
#### Menu Handling Logic:
|
||||
|
||||
- IF C: Save style, then load, read entire file, then execute {nextStepFile}
|
||||
- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#5-present-menu-options)
|
||||
|
||||
#### EXECUTION RULES:
|
||||
|
||||
- ALWAYS halt and wait for user input after presenting menu
|
||||
- ONLY proceed to next step when user selects 'C'
|
||||
|
||||
## CRITICAL STEP COMPLETION NOTE
|
||||
|
||||
ONLY WHEN C is selected and style is confirmed will you load {nextStepFile} to begin generating UI elements.
|
||||
|
||||
---
|
||||
|
||||
## 🚨 SYSTEM SUCCESS/FAILURE METRICS
|
||||
|
||||
### ✅ SUCCESS:
|
||||
|
||||
- Rendering approach selected
|
||||
- State visualization method selected
|
||||
- Design tokens mapped to properties
|
||||
- Complete configuration confirmed
|
||||
|
||||
### ❌ SYSTEM FAILURE:
|
||||
|
||||
- Generating without defined style
|
||||
- Not mapping design tokens
|
||||
- Not waiting for user input at menu
|
||||
|
||||
**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
|
||||
@@ -0,0 +1,109 @@
|
||||
---
|
||||
name: 'step-04-generate'
|
||||
description: 'Generate UI element assets for all components in priority order'
|
||||
nextStepFile: './step-05-review.md'
|
||||
---
|
||||
|
||||
# Step 4: Generate UI Elements
|
||||
|
||||
## STEP GOAL:
|
||||
|
||||
Generate UI element assets for all components in the inventory, processing in priority order (buttons, inputs, cards, navigation, feedback) and using appropriate batch strategies per visualization mode.
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
### Universal Rules:
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
- 📖 CRITICAL: Read the complete step file before taking any action
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
|
||||
- 📋 YOU ARE A FACILITATOR, not a content generator
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config `{communication_language}`
|
||||
|
||||
### Role Reinforcement:
|
||||
|
||||
- ✅ You are a creative production partner executing component generation
|
||||
- ✅ If you already have been given a name, communication_style and identity, continue to use those while playing this new role
|
||||
- ✅ We engage in collaborative dialogue, not command-response
|
||||
- ✅ You bring component generation expertise, user brings approval decisions
|
||||
|
||||
### Step-Specific Rules:
|
||||
|
||||
- 🎯 Generate in priority order: buttons, inputs, cards, navigation, feedback
|
||||
- 🚫 FORBIDDEN to skip approval between component groups
|
||||
- 💬 Use grid prompts for grid-style state display, individual prompts otherwise
|
||||
- 📋 Track progress per component group
|
||||
|
||||
## EXECUTION PROTOCOLS:
|
||||
|
||||
- 🎯 Follow the Sequence of Instructions exactly
|
||||
- 💾 Track progress per component group
|
||||
- 📖 Use approved results as reference for consistency
|
||||
- 🚫 FORBIDDEN to batch-generate without group-level approval
|
||||
|
||||
## CONTEXT BOUNDARIES:
|
||||
|
||||
- Available context: Inventory (Step 2), style configuration (Step 3)
|
||||
- Focus: Prompt crafting and component generation
|
||||
- Limits: Generate only — full review in Step 5
|
||||
- Dependencies: Confirmed style and scoped inventory
|
||||
|
||||
## Sequence of Instructions (Do not deviate, skip, or optimize)
|
||||
|
||||
### 1. Build Component Prompt Template
|
||||
|
||||
Include: rendering approach, state, colors (hex), typography, dimensions, border radius, shadow, padding, style quality note.
|
||||
|
||||
### 2. Generate by Component Group
|
||||
|
||||
Process in priority order: Buttons (all variants and states), Form inputs (all types and states), Cards (all patterns), Navigation (all types), Feedback (alerts, toasts, modals).
|
||||
|
||||
### 3. Apply Batch Strategy
|
||||
|
||||
Grid style: generate all states of one variant in a single prompt. Individual style: generate one asset per prompt with reference chaining.
|
||||
|
||||
### 4. Select Service
|
||||
|
||||
[G] Generate via MCP or [E] Export prompts.
|
||||
|
||||
### 5. Track Progress
|
||||
|
||||
Display per-group completion counts.
|
||||
|
||||
### 6. Present MENU OPTIONS
|
||||
|
||||
Display: **"Select an Option:** [C] Continue"
|
||||
|
||||
#### Menu Handling Logic:
|
||||
|
||||
- IF C: Save generated elements, then load, read entire file, then execute {nextStepFile}
|
||||
- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#6-present-menu-options)
|
||||
|
||||
#### EXECUTION RULES:
|
||||
|
||||
- ALWAYS halt and wait for user input after presenting menu
|
||||
- ONLY proceed to next step when user selects 'C'
|
||||
|
||||
## CRITICAL STEP COMPLETION NOTE
|
||||
|
||||
ONLY WHEN C is selected and all scoped elements are generated will you load {nextStepFile} to begin reviewing the component library.
|
||||
|
||||
---
|
||||
|
||||
## 🚨 SYSTEM SUCCESS/FAILURE METRICS
|
||||
|
||||
### ✅ SUCCESS:
|
||||
|
||||
- Components generated in priority order
|
||||
- Appropriate batch strategy per visualization mode
|
||||
- Progress tracked per group
|
||||
- Approval between groups
|
||||
|
||||
### ❌ SYSTEM FAILURE:
|
||||
|
||||
- Batch-generating without approval
|
||||
- Wrong batch strategy for visualization mode
|
||||
- Not tracking progress
|
||||
- Not waiting for user input at menu
|
||||
|
||||
**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
|
||||
119
_bmad/wds/workflows/6-asset-generation/steps-u/step-05-review.md
Normal file
119
_bmad/wds/workflows/6-asset-generation/steps-u/step-05-review.md
Normal file
@@ -0,0 +1,119 @@
|
||||
---
|
||||
name: 'step-05-review'
|
||||
description: 'Review all UI elements for design system compliance, consistency, and accessibility'
|
||||
workflowFile: '../workflow.md'
|
||||
---
|
||||
|
||||
# Step 5: Review and Iterate
|
||||
|
||||
## STEP GOAL:
|
||||
|
||||
Review all generated UI elements for design system compliance, cross-component consistency, accessibility, and completeness — then save the approved component library.
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
### Universal Rules:
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
- 📖 CRITICAL: Read the complete step file before taking any action
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
|
||||
- 📋 YOU ARE A FACILITATOR, not a content generator
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config `{communication_language}`
|
||||
|
||||
### Role Reinforcement:
|
||||
|
||||
- ✅ You are a creative production partner conducting component quality review
|
||||
- ✅ If you already have been given a name, communication_style and identity, continue to use those while playing this new role
|
||||
- ✅ We engage in collaborative dialogue, not command-response
|
||||
- ✅ You bring design system compliance expertise, user brings final approval
|
||||
|
||||
### Step-Specific Rules:
|
||||
|
||||
- 🎯 Check three dimensions: design system compliance, cross-component consistency, accessibility
|
||||
- 🚫 FORBIDDEN to save without user approval
|
||||
- 💬 Show all variants side by side, all states for each
|
||||
- 📋 Verify WCAG AA contrast compliance
|
||||
|
||||
## EXECUTION PROTOCOLS:
|
||||
|
||||
- 🎯 Follow the Sequence of Instructions exactly
|
||||
- 💾 Save to `{output_folder}/E-Assets/ui-elements/`
|
||||
- 📖 Check: exact token values, visual weight balance, color contrast
|
||||
- 🚫 FORBIDDEN to skip accessibility check
|
||||
|
||||
## CONTEXT BOUNDARIES:
|
||||
|
||||
- Available context: All generated elements, design system, style configuration
|
||||
- Focus: Quality review, compliance, and accessibility
|
||||
- Limits: This is the final step — focus on quality and delivery
|
||||
- Dependencies: Generated elements from Step 4
|
||||
|
||||
## Sequence of Instructions (Do not deviate, skip, or optimize)
|
||||
|
||||
### 1. Present Component Library
|
||||
|
||||
Display grouped by type: all variants side by side, all states for each variant, compare hover/focus/active transitions.
|
||||
|
||||
### 2. Design System Compliance
|
||||
|
||||
For each component: colors match tokens, typography matches scale, border radius matches, shadows match elevation tokens, spacing matches padding/margin tokens, focus ring follows standard.
|
||||
|
||||
### 3. Cross-Component Consistency
|
||||
|
||||
Across full set: visual weight balanced, color usage consistent, radius values uniform, shadow levels distinguishable, disabled states follow same pattern.
|
||||
|
||||
### 4. Accessibility Check
|
||||
|
||||
Color contrast meets WCAG AA (4.5:1 text, 3:1 large text), focus states clearly visible, disabled states distinguishable but clearly inactive.
|
||||
|
||||
### 5. User Review
|
||||
|
||||
Present: [A] Approve all, [R] Regenerate specific, [T] Token adjust and regenerate affected, [C] Compare view.
|
||||
|
||||
### 6. Save Approved Set
|
||||
|
||||
Save to `{output_folder}/E-Assets/ui-elements/`: organized by type (`buttons/`, `inputs/`, `cards/`, etc.), `component-library-summary.md`.
|
||||
|
||||
### 7. Update Design Log
|
||||
|
||||
Record: components generated (types x variants x states), compliance status, accessibility status.
|
||||
|
||||
### 8. Present MENU OPTIONS
|
||||
|
||||
Display: **"Select an Option:** [M] Return to Activity Menu"
|
||||
|
||||
#### Menu Handling Logic:
|
||||
|
||||
- IF M: Save library, update design log, return to Activity Menu in {workflowFile}
|
||||
- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#8-present-menu-options)
|
||||
|
||||
#### EXECUTION RULES:
|
||||
|
||||
- ALWAYS halt and wait for user input after presenting menu
|
||||
|
||||
## CRITICAL STEP COMPLETION NOTE
|
||||
|
||||
This is the final step of the UI Elements workflow. When M is selected and library is saved, return to the Activity Menu.
|
||||
|
||||
---
|
||||
|
||||
## 🚨 SYSTEM SUCCESS/FAILURE METRICS
|
||||
|
||||
### ✅ SUCCESS:
|
||||
|
||||
- Full library reviewed
|
||||
- Design system compliance verified
|
||||
- Cross-component consistency verified
|
||||
- Accessibility checked
|
||||
- User approved
|
||||
- Saved to correct location
|
||||
- Design log updated
|
||||
|
||||
### ❌ SYSTEM FAILURE:
|
||||
|
||||
- Saving without user approval
|
||||
- Skipping accessibility check
|
||||
- Not verifying design system compliance
|
||||
- Not updating design log
|
||||
|
||||
**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
|
||||
Reference in New Issue
Block a user