mirror of
https://github.com/wshobson/agents.git
synced 2026-03-18 17:47:16 +00:00
feat(ui-design): add comprehensive UI/UX design plugin v1.0.0
New plugin covering mobile (iOS, Android, React Native) and web applications with modern design patterns, accessibility, and design systems. Components: - 9 skills: design-system-patterns, accessibility-compliance, responsive-design, mobile-ios-design, mobile-android-design, react-native-design, web-component-design, interaction-design, visual-design-foundations - 4 commands: design-review, create-component, accessibility-audit, design-system-setup - 3 agents: ui-designer, accessibility-expert, design-system-architect Marketplace updated: - Version bumped to 1.3.4 - 102 agents (+3), 116 skills (+9)
This commit is contained in:
Seth Hobson
479
plugins/ui-design/commands/accessibility-audit.md
Normal file
479
plugins/ui-design/commands/accessibility-audit.md
Normal file
@@ -0,0 +1,479 @@
|
||||
---
|
||||
description: "Audit UI code for WCAG compliance"
|
||||
argument-hint: "[file-path|component-name|--level AA|AAA]"
|
||||
---
|
||||
|
||||
# Accessibility Audit
|
||||
|
||||
Comprehensive audit of UI code for WCAG 2.1/2.2 compliance. Identifies accessibility issues and provides actionable remediation guidance.
|
||||
|
||||
## Pre-flight Checks
|
||||
|
||||
1. Check if `.ui-design/` directory exists:
|
||||
- If not: Create `.ui-design/` directory
|
||||
- Create `.ui-design/audits/` subdirectory for audit results
|
||||
|
||||
2. Load project context:
|
||||
- Check for `conductor/tech-stack.md` for framework info
|
||||
- Check for `.ui-design/design-system.json` for color tokens
|
||||
- Detect testing framework for a11y test suggestions
|
||||
|
||||
## Target and Level Configuration
|
||||
|
||||
### If argument provided:
|
||||
|
||||
- Parse for file path or component name
|
||||
- Parse for `--level` flag (AA or AAA)
|
||||
- Default to WCAG 2.1 Level AA if not specified
|
||||
|
||||
### If no argument:
|
||||
|
||||
**Q1: Audit Target**
|
||||
|
||||
```
|
||||
What would you like to audit?
|
||||
|
||||
1. A specific component (provide name or path)
|
||||
2. A page/route (provide path)
|
||||
3. All components in a directory
|
||||
4. The entire application
|
||||
5. Recent changes only (last commit)
|
||||
|
||||
Enter number or provide a file path:
|
||||
```
|
||||
|
||||
**Q2: Compliance Level**
|
||||
|
||||
```
|
||||
What WCAG compliance level should I audit against?
|
||||
|
||||
1. Level A - Minimum accessibility (must-fix issues)
|
||||
2. Level AA - Standard compliance (recommended, most common target)
|
||||
3. Level AAA - Enhanced accessibility (highest standard)
|
||||
|
||||
Note: Each level includes all requirements from previous levels.
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
**Q3: Focus Areas (optional)**
|
||||
|
||||
```
|
||||
Any specific areas to focus on? (Press enter to audit all)
|
||||
|
||||
1. Color contrast and visual presentation
|
||||
2. Keyboard navigation and focus management
|
||||
3. Screen reader compatibility
|
||||
4. Forms and input validation
|
||||
5. Dynamic content and ARIA
|
||||
6. All areas
|
||||
|
||||
Enter numbers (comma-separated) or press enter:
|
||||
```
|
||||
|
||||
## State Management
|
||||
|
||||
Create `.ui-design/audits/audit_state.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"audit_id": "{target}_{YYYYMMDD_HHMMSS}",
|
||||
"target": "{file_path_or_scope}",
|
||||
"wcag_level": "AA",
|
||||
"focus_areas": ["all"],
|
||||
"status": "in_progress",
|
||||
"started_at": "ISO_TIMESTAMP",
|
||||
"files_audited": 0,
|
||||
"issues_found": {
|
||||
"critical": 0,
|
||||
"serious": 0,
|
||||
"moderate": 0,
|
||||
"minor": 0
|
||||
},
|
||||
"criteria_checked": 0,
|
||||
"criteria_passed": 0
|
||||
}
|
||||
```
|
||||
|
||||
## Audit Execution
|
||||
|
||||
### 1. File Discovery
|
||||
|
||||
Identify all files to audit:
|
||||
|
||||
- If single file: Audit that file
|
||||
- If component: Find all related files (component, styles, tests)
|
||||
- If directory: Recursively find UI files (`.tsx`, `.vue`, `.svelte`, etc.)
|
||||
- If application: Audit all component and page files
|
||||
|
||||
### 2. Static Code Analysis
|
||||
|
||||
For each file, check against WCAG criteria:
|
||||
|
||||
#### Perceivable (WCAG 1.x)
|
||||
|
||||
**1.1 Text Alternatives:**
|
||||
- [ ] Images have `alt` attributes
|
||||
- [ ] Decorative images use `alt=""` or `role="presentation"`
|
||||
- [ ] Complex images have extended descriptions
|
||||
- [ ] Icon buttons have accessible names
|
||||
|
||||
**1.2 Time-based Media:**
|
||||
- [ ] Videos have captions
|
||||
- [ ] Audio has transcripts
|
||||
- [ ] Media players are keyboard accessible
|
||||
|
||||
**1.3 Adaptable:**
|
||||
- [ ] Semantic HTML structure (headings, lists, landmarks)
|
||||
- [ ] Proper heading hierarchy (h1 > h2 > h3)
|
||||
- [ ] Form inputs have associated labels
|
||||
- [ ] Tables have proper headers
|
||||
- [ ] Reading order is logical
|
||||
|
||||
**1.4 Distinguishable:**
|
||||
- [ ] Color contrast meets requirements (4.5:1 normal, 3:1 large)
|
||||
- [ ] Color is not sole means of conveying information
|
||||
- [ ] Text can be resized to 200%
|
||||
- [ ] Focus indicators are visible
|
||||
- [ ] Content reflows at 320px width (AA)
|
||||
|
||||
#### Operable (WCAG 2.x)
|
||||
|
||||
**2.1 Keyboard Accessible:**
|
||||
- [ ] All interactive elements are keyboard accessible
|
||||
- [ ] No keyboard traps
|
||||
- [ ] Focus order is logical
|
||||
- [ ] Custom widgets follow ARIA patterns
|
||||
|
||||
**2.2 Enough Time:**
|
||||
- [ ] Time limits can be extended/disabled
|
||||
- [ ] Auto-updating content can be paused
|
||||
- [ ] No content times out unexpectedly
|
||||
|
||||
**2.3 Seizures:**
|
||||
- [ ] No content flashes more than 3 times/second
|
||||
- [ ] Animations can be disabled (prefers-reduced-motion)
|
||||
|
||||
**2.4 Navigable:**
|
||||
- [ ] Skip links present
|
||||
- [ ] Page has descriptive title
|
||||
- [ ] Focus visible on all elements
|
||||
- [ ] Link purpose is clear
|
||||
- [ ] Multiple ways to find pages
|
||||
|
||||
**2.5 Input Modalities:**
|
||||
- [ ] Touch targets are at least 44x44px (AAA: 44px, AA: 24px)
|
||||
- [ ] Functionality not dependent on motion
|
||||
- [ ] Dragging has alternative
|
||||
|
||||
#### Understandable (WCAG 3.x)
|
||||
|
||||
**3.1 Readable:**
|
||||
- [ ] Language is specified (`lang` attribute)
|
||||
- [ ] Unusual words are defined
|
||||
- [ ] Abbreviations are expanded
|
||||
|
||||
**3.2 Predictable:**
|
||||
- [ ] Focus doesn't trigger unexpected changes
|
||||
- [ ] Input doesn't trigger unexpected changes
|
||||
- [ ] Navigation is consistent
|
||||
- [ ] Components behave consistently
|
||||
|
||||
**3.3 Input Assistance:**
|
||||
- [ ] Error messages are descriptive
|
||||
- [ ] Labels or instructions provided
|
||||
- [ ] Error suggestions provided
|
||||
- [ ] Important submissions can be reviewed
|
||||
|
||||
#### Robust (WCAG 4.x)
|
||||
|
||||
**4.1 Compatible:**
|
||||
- [ ] HTML validates (no duplicate IDs)
|
||||
- [ ] Custom components have proper ARIA
|
||||
- [ ] Status messages announced to screen readers
|
||||
|
||||
### 3. Pattern Detection
|
||||
|
||||
Identify common accessibility anti-patterns:
|
||||
|
||||
```javascript
|
||||
// Anti-patterns to detect
|
||||
const antiPatterns = [
|
||||
// Missing alt text
|
||||
/<img(?![^>]*alt=)[^>]*>/,
|
||||
|
||||
// onClick without keyboard handler
|
||||
/onClick={[^}]+}(?!.*onKeyDown)/,
|
||||
|
||||
// Div/span with click handlers (likely needs role)
|
||||
/<(?:div|span)[^>]*onClick/,
|
||||
|
||||
// Non-semantic buttons
|
||||
/<(?:div|span)[^>]*role="button"/,
|
||||
|
||||
// Missing form labels
|
||||
/<input(?![^>]*(?:aria-label|aria-labelledby|id))[^>]*>/,
|
||||
|
||||
// Positive tabindex (disrupts natural order)
|
||||
/tabIndex={[1-9]/,
|
||||
|
||||
// Empty links
|
||||
/<a[^>]*>[\s]*<\/a>/,
|
||||
|
||||
// Missing lang attribute
|
||||
/<html(?![^>]*lang=)/,
|
||||
|
||||
// Autofocus (usually bad for a11y)
|
||||
/autoFocus/,
|
||||
];
|
||||
```
|
||||
|
||||
### 4. Color Contrast Analysis
|
||||
|
||||
If design tokens or CSS available:
|
||||
|
||||
- Extract color combinations used in text/background
|
||||
- Calculate contrast ratios using WCAG formula
|
||||
- Flag combinations that fail requirements:
|
||||
- Normal text: 4.5:1 (AA), 7:1 (AAA)
|
||||
- Large text (18pt+ or 14pt bold): 3:1 (AA), 4.5:1 (AAA)
|
||||
- UI components: 3:1 (AA)
|
||||
|
||||
### 5. ARIA Validation
|
||||
|
||||
Check ARIA usage:
|
||||
|
||||
- Verify ARIA roles are valid
|
||||
- Check required ARIA attributes are present
|
||||
- Verify ARIA values are valid
|
||||
- Check for redundant ARIA (e.g., `role="button"` on `<button>`)
|
||||
- Validate ARIA references (aria-labelledby, aria-describedby)
|
||||
|
||||
## Output Format
|
||||
|
||||
Generate audit report in `.ui-design/audits/{audit_id}.md`:
|
||||
|
||||
```markdown
|
||||
# Accessibility Audit Report
|
||||
|
||||
**Audit ID:** {audit_id}
|
||||
**Date:** {YYYY-MM-DD HH:MM}
|
||||
**Target:** {target}
|
||||
**WCAG Level:** {level}
|
||||
**Standard:** WCAG 2.1
|
||||
|
||||
## Executive Summary
|
||||
|
||||
**Compliance Status:** {Passing | Needs Improvement | Failing}
|
||||
|
||||
| Severity | Count | % of Issues |
|
||||
|----------|-------|-------------|
|
||||
| Critical | {n} | {%} |
|
||||
| Serious | {n} | {%} |
|
||||
| Moderate | {n} | {%} |
|
||||
| Minor | {n} | {%} |
|
||||
|
||||
**Criteria Checked:** {n}
|
||||
**Criteria Passed:** {n} ({%})
|
||||
**Files Audited:** {n}
|
||||
|
||||
## Critical Issues (Must Fix)
|
||||
|
||||
These issues prevent users with disabilities from using the interface.
|
||||
|
||||
### Issue 1: {Title}
|
||||
|
||||
**WCAG Criterion:** {number} - {name} (Level {A|AA|AAA})
|
||||
**Severity:** Critical
|
||||
**Location:** `{file}:{line}`
|
||||
**Element:** `{element_snippet}`
|
||||
|
||||
**Problem:**
|
||||
{Description of the issue}
|
||||
|
||||
**Impact:**
|
||||
{Who is affected and how}
|
||||
|
||||
**Remediation:**
|
||||
{Step-by-step fix instructions}
|
||||
|
||||
**Code Fix:**
|
||||
```{language}
|
||||
// Before
|
||||
{current_code}
|
||||
|
||||
// After
|
||||
{fixed_code}
|
||||
```
|
||||
|
||||
**Testing:**
|
||||
- Manual: {how to manually verify}
|
||||
- Automated: {suggested test}
|
||||
|
||||
---
|
||||
|
||||
### Issue 2: ...
|
||||
|
||||
## Serious Issues
|
||||
|
||||
These issues create significant barriers for some users.
|
||||
|
||||
### Issue 3: ...
|
||||
|
||||
## Moderate Issues
|
||||
|
||||
These issues may cause difficulty for some users.
|
||||
|
||||
### Issue 4: ...
|
||||
|
||||
## Minor Issues
|
||||
|
||||
These are best practice improvements.
|
||||
|
||||
### Issue 5: ...
|
||||
|
||||
## Passed Criteria
|
||||
|
||||
The following WCAG criteria passed:
|
||||
|
||||
| Criterion | Name | Level |
|
||||
|-----------|------|-------|
|
||||
| 1.1.1 | Non-text Content | A |
|
||||
| 1.3.1 | Info and Relationships | A |
|
||||
| ... | ... | ... |
|
||||
|
||||
## Recommendations
|
||||
|
||||
### Quick Wins (< 1 hour each)
|
||||
|
||||
1. {Quick fix 1}
|
||||
2. {Quick fix 2}
|
||||
|
||||
### Medium Effort (1-4 hours each)
|
||||
|
||||
1. {Medium fix 1}
|
||||
2. {Medium fix 2}
|
||||
|
||||
### Significant Effort (> 4 hours)
|
||||
|
||||
1. {Larger fix 1}
|
||||
|
||||
## Testing Resources
|
||||
|
||||
### Automated Testing
|
||||
|
||||
Add these tests to catch regressions:
|
||||
|
||||
```javascript
|
||||
// Example jest-axe test
|
||||
import { axe, toHaveNoViolations } from 'jest-axe';
|
||||
|
||||
expect.extend(toHaveNoViolations);
|
||||
|
||||
test('component has no accessibility violations', async () => {
|
||||
const { container } = render(<Component />);
|
||||
const results = await axe(container);
|
||||
expect(results).toHaveNoViolations();
|
||||
});
|
||||
```
|
||||
|
||||
### Manual Testing Checklist
|
||||
|
||||
- [ ] Navigate entire page using only keyboard
|
||||
- [ ] Test with screen reader (VoiceOver/NVDA)
|
||||
- [ ] Zoom to 200% and verify usability
|
||||
- [ ] Test with high contrast mode
|
||||
- [ ] Verify focus indicators are visible
|
||||
- [ ] Test with prefers-reduced-motion
|
||||
|
||||
### Recommended Tools
|
||||
|
||||
- axe DevTools browser extension
|
||||
- WAVE Web Accessibility Evaluator
|
||||
- Lighthouse accessibility audit
|
||||
- Color contrast analyzers
|
||||
|
||||
---
|
||||
|
||||
_Generated by UI Design Accessibility Audit_
|
||||
_WCAG Reference: https://www.w3.org/WAI/WCAG21/quickref/_
|
||||
```
|
||||
|
||||
## Completion
|
||||
|
||||
Update `audit_state.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"status": "complete",
|
||||
"completed_at": "ISO_TIMESTAMP",
|
||||
"compliance_status": "needs_improvement",
|
||||
"issues_found": {
|
||||
"critical": 2,
|
||||
"serious": 5,
|
||||
"moderate": 8,
|
||||
"minor": 3
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Display summary:
|
||||
|
||||
```
|
||||
Accessibility Audit Complete!
|
||||
|
||||
Target: {target}
|
||||
WCAG Level: {level}
|
||||
Compliance Status: {status}
|
||||
|
||||
Issues Found:
|
||||
- {n} Critical (must fix)
|
||||
- {n} Serious
|
||||
- {n} Moderate
|
||||
- {n} Minor
|
||||
|
||||
Full report: .ui-design/audits/{audit_id}.md
|
||||
|
||||
What would you like to do next?
|
||||
1. View details for critical issues
|
||||
2. Start fixing issues (guided)
|
||||
3. Generate automated tests
|
||||
4. Export report for stakeholders
|
||||
5. Audit another component
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
## Guided Fix Mode
|
||||
|
||||
If user selects "Start fixing issues":
|
||||
|
||||
```
|
||||
Let's fix accessibility issues starting with critical ones.
|
||||
|
||||
Issue 1 of {n}: {Issue Title}
|
||||
WCAG {criterion}: {criterion_name}
|
||||
Location: {file}:{line}
|
||||
|
||||
{Show current code}
|
||||
|
||||
The fix is:
|
||||
{Explain the fix}
|
||||
|
||||
Should I:
|
||||
1. Apply this fix automatically
|
||||
2. Show me the fixed code first
|
||||
3. Skip this issue
|
||||
4. Stop fixing
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
Apply fixes one at a time, re-validating after each fix.
|
||||
|
||||
## Error Handling
|
||||
|
||||
- If file not found: Suggest alternatives, offer to search
|
||||
- If not UI code: Explain limitation, suggest correct target
|
||||
- If color extraction fails: Note in report, suggest manual check
|
||||
- If audit incomplete: Save partial results, offer to resume
|
||||
471
plugins/ui-design/commands/create-component.md
Normal file
471
plugins/ui-design/commands/create-component.md
Normal file
@@ -0,0 +1,471 @@
|
||||
---
|
||||
description: "Guided component creation with proper patterns"
|
||||
argument-hint: "[component-name]"
|
||||
---
|
||||
|
||||
# Create Component
|
||||
|
||||
Guided workflow for creating new UI components following established patterns and best practices.
|
||||
|
||||
## Pre-flight Checks
|
||||
|
||||
1. Check if `.ui-design/` directory exists:
|
||||
- If not: Create `.ui-design/` directory
|
||||
- Create `.ui-design/components/` subdirectory for component tracking
|
||||
|
||||
2. Detect project configuration:
|
||||
- Scan for framework (React, Vue, Svelte, Angular)
|
||||
- Scan for styling approach (CSS Modules, Tailwind, styled-components, etc.)
|
||||
- Check for existing component patterns in `src/components/` or similar
|
||||
- Load `.ui-design/design-system.json` if exists
|
||||
|
||||
3. Load project context:
|
||||
- Check for `conductor/tech-stack.md`
|
||||
- Check for existing component conventions
|
||||
|
||||
4. If no framework detected:
|
||||
```
|
||||
I couldn't detect a UI framework. What are you using?
|
||||
|
||||
1. React
|
||||
2. Vue 3
|
||||
3. Svelte
|
||||
4. Angular
|
||||
5. Vanilla JavaScript/HTML
|
||||
6. Other (specify)
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
## Component Specification
|
||||
|
||||
**CRITICAL RULES:**
|
||||
|
||||
- Ask ONE question per turn
|
||||
- Wait for user response before proceeding
|
||||
- Build complete specification before generating code
|
||||
|
||||
### Q1: Component Name (if not provided)
|
||||
|
||||
```
|
||||
What should this component be called?
|
||||
|
||||
Guidelines:
|
||||
- Use PascalCase (e.g., UserCard, DataTable)
|
||||
- Be descriptive but concise
|
||||
- Avoid generic names like "Component" or "Widget"
|
||||
|
||||
Enter component name:
|
||||
```
|
||||
|
||||
### Q2: Component Purpose
|
||||
|
||||
```
|
||||
What is this component's primary purpose?
|
||||
|
||||
1. Display content (cards, lists, text blocks)
|
||||
2. Collect input (forms, selects, toggles)
|
||||
3. Navigation (menus, tabs, breadcrumbs)
|
||||
4. Feedback (alerts, toasts, modals)
|
||||
5. Layout (containers, grids, sections)
|
||||
6. Data visualization (charts, graphs, indicators)
|
||||
7. Other (describe)
|
||||
|
||||
Enter number or description:
|
||||
```
|
||||
|
||||
### Q3: Component Complexity
|
||||
|
||||
```
|
||||
What is the component's complexity level?
|
||||
|
||||
1. Simple - Single responsibility, minimal props, no internal state
|
||||
2. Compound - Multiple parts, some internal state, few props
|
||||
3. Complex - Multiple subcomponents, state management, many props
|
||||
4. Composite - Orchestrates other components, significant logic
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
### Q4: Props/Inputs Specification
|
||||
|
||||
```
|
||||
What props/inputs should this component accept?
|
||||
|
||||
For each prop, provide:
|
||||
- Name (camelCase)
|
||||
- Type (string, number, boolean, function, object, array)
|
||||
- Required or optional
|
||||
- Default value (if optional)
|
||||
|
||||
Example format:
|
||||
title: string, required
|
||||
variant: "primary" | "secondary", optional, default: "primary"
|
||||
onClick: function, optional
|
||||
|
||||
Enter props (one per line, empty line when done):
|
||||
```
|
||||
|
||||
### Q5: State Requirements
|
||||
|
||||
```
|
||||
Does this component need internal state?
|
||||
|
||||
1. Stateless - Pure presentational, all data via props
|
||||
2. Local state - Simple internal state (open/closed, hover, etc.)
|
||||
3. Controlled - State managed by parent, component reports changes
|
||||
4. Uncontrolled - Manages own state, exposes refs for parent access
|
||||
5. Hybrid - Supports both controlled and uncontrolled modes
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
### Q6: Composition Pattern (if complexity > Simple)
|
||||
|
||||
```
|
||||
How should child content be handled?
|
||||
|
||||
1. No children - Self-contained component
|
||||
2. Simple children - Accepts children prop for content
|
||||
3. Named slots - Multiple content areas (header, body, footer)
|
||||
4. Compound components - Exports subcomponents (e.g., Card.Header, Card.Body)
|
||||
5. Render props - Accepts render function for flexibility
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
### Q7: Accessibility Requirements
|
||||
|
||||
```
|
||||
What accessibility features are needed?
|
||||
|
||||
1. Basic - Semantic HTML, aria-labels where needed
|
||||
2. Keyboard navigation - Full keyboard support, focus management
|
||||
3. Screen reader optimized - Live regions, announcements
|
||||
4. Full WCAG AA - All applicable success criteria
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
### Q8: Styling Approach
|
||||
|
||||
```
|
||||
How should this component be styled?
|
||||
|
||||
Detected: {detected_approach}
|
||||
|
||||
1. Use detected approach ({detected_approach})
|
||||
2. CSS Modules
|
||||
3. Tailwind CSS
|
||||
4. Styled Components / Emotion
|
||||
5. Plain CSS/SCSS
|
||||
6. Other (specify)
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
## State Management
|
||||
|
||||
Create `.ui-design/components/{component_name}.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "{ComponentName}",
|
||||
"created_at": "ISO_TIMESTAMP",
|
||||
"purpose": "{purpose}",
|
||||
"complexity": "{level}",
|
||||
"props": [
|
||||
{
|
||||
"name": "{prop_name}",
|
||||
"type": "{type}",
|
||||
"required": true,
|
||||
"default": null,
|
||||
"description": "{description}"
|
||||
}
|
||||
],
|
||||
"state_pattern": "{pattern}",
|
||||
"composition": "{pattern}",
|
||||
"accessibility_level": "{level}",
|
||||
"styling": "{approach}",
|
||||
"files_created": [],
|
||||
"status": "in_progress"
|
||||
}
|
||||
```
|
||||
|
||||
## Component Generation
|
||||
|
||||
### 1. Create Directory Structure
|
||||
|
||||
Based on detected patterns or ask user:
|
||||
|
||||
```
|
||||
Where should this component be created?
|
||||
|
||||
Detected component directories:
|
||||
1. src/components/{ComponentName}/
|
||||
2. app/components/{ComponentName}/
|
||||
3. components/{ComponentName}/
|
||||
4. Other (specify path)
|
||||
|
||||
Enter number or path:
|
||||
```
|
||||
|
||||
Create structure:
|
||||
|
||||
```
|
||||
{component_path}/
|
||||
├── index.ts # Barrel export
|
||||
├── {ComponentName}.tsx # Main component
|
||||
├── {ComponentName}.test.tsx # Tests (if testing detected)
|
||||
├── {ComponentName}.styles.{ext} # Styles (based on approach)
|
||||
└── types.ts # TypeScript types (if TS project)
|
||||
```
|
||||
|
||||
### 2. Generate Component Code
|
||||
|
||||
Generate component based on gathered specifications.
|
||||
|
||||
**For React/TypeScript example:**
|
||||
|
||||
```tsx
|
||||
// {ComponentName}.tsx
|
||||
import { forwardRef } from 'react';
|
||||
import type { {ComponentName}Props } from './types';
|
||||
import styles from './{ComponentName}.styles.module.css';
|
||||
|
||||
/**
|
||||
* {ComponentName}
|
||||
*
|
||||
* {Purpose description}
|
||||
*/
|
||||
export const {ComponentName} = forwardRef<HTML{Element}Element, {ComponentName}Props>(
|
||||
({ prop1, prop2 = 'default', children, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={styles.root}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
{ComponentName}.displayName = '{ComponentName}';
|
||||
```
|
||||
|
||||
### 3. Generate Types
|
||||
|
||||
```tsx
|
||||
// types.ts
|
||||
import type { HTMLAttributes, ReactNode } from 'react';
|
||||
|
||||
export interface {ComponentName}Props extends HTMLAttributes<HTMLDivElement> {
|
||||
/** {prop1 description} */
|
||||
prop1: string;
|
||||
|
||||
/** {prop2 description} */
|
||||
prop2?: 'primary' | 'secondary';
|
||||
|
||||
/** Component children */
|
||||
children?: ReactNode;
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Generate Styles
|
||||
|
||||
Based on styling approach:
|
||||
|
||||
**CSS Modules:**
|
||||
```css
|
||||
/* {ComponentName}.styles.module.css */
|
||||
.root {
|
||||
/* Base styles */
|
||||
}
|
||||
|
||||
.variant-primary {
|
||||
/* Primary variant */
|
||||
}
|
||||
|
||||
.variant-secondary {
|
||||
/* Secondary variant */
|
||||
}
|
||||
```
|
||||
|
||||
**Tailwind:**
|
||||
```tsx
|
||||
// Inline in component
|
||||
className={cn(
|
||||
'base-classes',
|
||||
variant === 'primary' && 'primary-classes',
|
||||
className
|
||||
)}
|
||||
```
|
||||
|
||||
### 5. Generate Tests (if testing framework detected)
|
||||
|
||||
```tsx
|
||||
// {ComponentName}.test.tsx
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { {ComponentName} } from './{ComponentName}';
|
||||
|
||||
describe('{ComponentName}', () => {
|
||||
it('renders without crashing', () => {
|
||||
render(<{ComponentName} prop1="test" />);
|
||||
expect(screen.getByRole('...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies variant styles correctly', () => {
|
||||
// Variant tests
|
||||
});
|
||||
|
||||
it('handles user interaction', async () => {
|
||||
const user = userEvent.setup();
|
||||
// Interaction tests
|
||||
});
|
||||
|
||||
it('meets accessibility requirements', () => {
|
||||
// A11y tests
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### 6. Generate Barrel Export
|
||||
|
||||
```tsx
|
||||
// index.ts
|
||||
export { {ComponentName} } from './{ComponentName}';
|
||||
export type { {ComponentName}Props } from './types';
|
||||
```
|
||||
|
||||
## User Review
|
||||
|
||||
After generating files:
|
||||
|
||||
```
|
||||
I've created the {ComponentName} component:
|
||||
|
||||
Files created:
|
||||
- {path}/index.ts
|
||||
- {path}/{ComponentName}.tsx
|
||||
- {path}/{ComponentName}.test.tsx
|
||||
- {path}/{ComponentName}.styles.module.css
|
||||
- {path}/types.ts
|
||||
|
||||
Would you like to:
|
||||
1. Review the generated code
|
||||
2. Make modifications
|
||||
3. Add more props or features
|
||||
4. Generate Storybook stories
|
||||
5. Done, keep as-is
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
### If modifications requested:
|
||||
|
||||
```
|
||||
What would you like to modify?
|
||||
|
||||
1. Add a new prop
|
||||
2. Change styling approach
|
||||
3. Add a variant
|
||||
4. Modify component structure
|
||||
5. Add accessibility features
|
||||
6. Other (describe)
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
## Storybook Integration (Optional)
|
||||
|
||||
If Storybook detected or user requests:
|
||||
|
||||
```tsx
|
||||
// {ComponentName}.stories.tsx
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { {ComponentName} } from './{ComponentName}';
|
||||
|
||||
const meta: Meta<typeof {ComponentName}> = {
|
||||
title: 'Components/{ComponentName}',
|
||||
component: {ComponentName},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: 'select',
|
||||
options: ['primary', 'secondary'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof {ComponentName}>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
prop1: 'Example',
|
||||
},
|
||||
};
|
||||
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
variant: 'primary',
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
variant: 'secondary',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Completion
|
||||
|
||||
Update `.ui-design/components/{component_name}.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"status": "complete",
|
||||
"files_created": [
|
||||
"{path}/index.ts",
|
||||
"{path}/{ComponentName}.tsx",
|
||||
"{path}/{ComponentName}.test.tsx",
|
||||
"{path}/{ComponentName}.styles.module.css",
|
||||
"{path}/types.ts"
|
||||
],
|
||||
"completed_at": "ISO_TIMESTAMP"
|
||||
}
|
||||
```
|
||||
|
||||
Display summary:
|
||||
|
||||
```
|
||||
Component Created Successfully!
|
||||
|
||||
Component: {ComponentName}
|
||||
Location: {path}/
|
||||
Files: {count} files created
|
||||
|
||||
Quick reference:
|
||||
Import: import { {ComponentName} } from '{import_path}';
|
||||
Usage: <{ComponentName} prop1="value" />
|
||||
|
||||
Next steps:
|
||||
1. Run /ui-design:design-review {path} to validate
|
||||
2. Run /ui-design:accessibility-audit {path} for a11y check
|
||||
3. Add to your page/layout
|
||||
|
||||
Need to create another component? Run /ui-design:create-component
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
- If component name conflicts: Suggest alternatives, offer to overwrite
|
||||
- If directory creation fails: Report error, suggest manual creation
|
||||
- If framework not supported: Provide generic template, explain limitations
|
||||
- If file write fails: Save to temp location, provide recovery instructions
|
||||
349
plugins/ui-design/commands/design-review.md
Normal file
349
plugins/ui-design/commands/design-review.md
Normal file
@@ -0,0 +1,349 @@
|
||||
---
|
||||
description: "Review existing UI for issues and improvements"
|
||||
argument-hint: "[file-path|component-name]"
|
||||
---
|
||||
|
||||
# Design Review
|
||||
|
||||
Review existing UI code for design issues, usability problems, and improvement opportunities. Provides actionable recommendations.
|
||||
|
||||
## Pre-flight Checks
|
||||
|
||||
1. Check if `.ui-design/` directory exists:
|
||||
- If not: Create `.ui-design/` directory
|
||||
- Create `.ui-design/reviews/` subdirectory for storing review results
|
||||
|
||||
2. Load project context if available:
|
||||
- Check for `conductor/product.md` for product context
|
||||
- Check for `conductor/tech-stack.md` for framework info
|
||||
- Check for `.ui-design/design-system.json` for design tokens
|
||||
|
||||
## Target Identification
|
||||
|
||||
### If argument provided:
|
||||
|
||||
- If file path: Validate file exists, read the file
|
||||
- If component name: Search codebase for matching component files
|
||||
- If not found: Display error with suggestions
|
||||
|
||||
### If no argument:
|
||||
|
||||
Ask user to specify target:
|
||||
|
||||
```
|
||||
What would you like me to review?
|
||||
|
||||
1. A specific component (provide name or path)
|
||||
2. A page/route (provide path)
|
||||
3. The entire UI directory
|
||||
4. Recent changes (last commit)
|
||||
|
||||
Enter number or provide a file path:
|
||||
```
|
||||
|
||||
## Interactive Review Configuration
|
||||
|
||||
**CRITICAL RULES:**
|
||||
|
||||
- Ask ONE question per turn
|
||||
- Wait for user response before proceeding
|
||||
- Gather context to provide relevant feedback
|
||||
|
||||
### Q1: Review Focus
|
||||
|
||||
```
|
||||
What aspects should I focus on?
|
||||
|
||||
1. Visual design (spacing, alignment, typography, colors)
|
||||
2. Usability (interaction patterns, accessibility basics)
|
||||
3. Code quality (patterns, maintainability, reusability)
|
||||
4. Performance (render optimization, bundle size)
|
||||
5. Comprehensive (all of the above)
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
### Q2: Design Context (if visual/usability selected)
|
||||
|
||||
```
|
||||
What is this UI's primary purpose?
|
||||
|
||||
1. Data display (dashboards, tables, reports)
|
||||
2. Data entry (forms, wizards, editors)
|
||||
3. Navigation (menus, sidebars, breadcrumbs)
|
||||
4. Content consumption (articles, media, feeds)
|
||||
5. E-commerce (product display, checkout)
|
||||
6. Other (describe)
|
||||
|
||||
Enter number or description:
|
||||
```
|
||||
|
||||
### Q3: Target Platform
|
||||
|
||||
```
|
||||
What platform(s) should I consider?
|
||||
|
||||
1. Desktop only
|
||||
2. Mobile only
|
||||
3. Responsive (desktop + mobile)
|
||||
4. All platforms (desktop, tablet, mobile)
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
## State Management
|
||||
|
||||
Create/update `.ui-design/reviews/review_state.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"review_id": "{target}_{YYYYMMDD_HHMMSS}",
|
||||
"target": "{file_path_or_component}",
|
||||
"focus_areas": ["visual", "usability", "code", "performance"],
|
||||
"context": "{purpose}",
|
||||
"platform": "{platform}",
|
||||
"status": "in_progress",
|
||||
"started_at": "ISO_TIMESTAMP",
|
||||
"issues_found": 0,
|
||||
"severity_counts": {
|
||||
"critical": 0,
|
||||
"major": 0,
|
||||
"minor": 0,
|
||||
"suggestion": 0
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Review Execution
|
||||
|
||||
### 1. Code Analysis
|
||||
|
||||
Read and analyze the target files:
|
||||
|
||||
- Parse component structure
|
||||
- Identify styling approach (CSS, Tailwind, styled-components, etc.)
|
||||
- Detect framework (React, Vue, Svelte, etc.)
|
||||
- Note component composition patterns
|
||||
|
||||
### 2. Visual Design Review
|
||||
|
||||
Check for:
|
||||
|
||||
**Spacing & Layout:**
|
||||
- Inconsistent margins/padding
|
||||
- Misaligned elements
|
||||
- Unbalanced whitespace
|
||||
- Magic numbers vs. design tokens
|
||||
|
||||
**Typography:**
|
||||
- Font size consistency
|
||||
- Line height appropriateness
|
||||
- Text contrast ratios
|
||||
- Font weight usage
|
||||
|
||||
**Colors:**
|
||||
- Color contrast accessibility
|
||||
- Consistent color usage
|
||||
- Semantic color application
|
||||
- Dark mode support (if applicable)
|
||||
|
||||
**Visual Hierarchy:**
|
||||
- Clear primary actions
|
||||
- Appropriate emphasis
|
||||
- Scannable content structure
|
||||
|
||||
### 3. Usability Review
|
||||
|
||||
Check for:
|
||||
|
||||
**Interaction Patterns:**
|
||||
- Clear clickable/tappable areas
|
||||
- Appropriate hover/focus states
|
||||
- Loading state indicators
|
||||
- Error state handling
|
||||
- Empty state handling
|
||||
|
||||
**User Flow:**
|
||||
- Logical tab order
|
||||
- Clear call-to-action
|
||||
- Predictable behavior
|
||||
- Feedback on actions
|
||||
|
||||
**Cognitive Load:**
|
||||
- Information density
|
||||
- Progressive disclosure
|
||||
- Clear labels and instructions
|
||||
- Consistent patterns
|
||||
|
||||
### 4. Code Quality Review
|
||||
|
||||
Check for:
|
||||
|
||||
**Component Patterns:**
|
||||
- Single responsibility
|
||||
- Prop drilling depth
|
||||
- State management appropriateness
|
||||
- Component reusability
|
||||
|
||||
**Styling Patterns:**
|
||||
- Consistent naming conventions
|
||||
- Reusable style definitions
|
||||
- Media query organization
|
||||
- CSS specificity issues
|
||||
|
||||
**Maintainability:**
|
||||
- Clear component boundaries
|
||||
- Documentation/comments
|
||||
- Test coverage
|
||||
- Accessibility attributes
|
||||
|
||||
### 5. Performance Review
|
||||
|
||||
Check for:
|
||||
|
||||
**Render Optimization:**
|
||||
- Unnecessary re-renders
|
||||
- Missing memoization
|
||||
- Large component trees
|
||||
- Expensive computations in render
|
||||
|
||||
**Asset Optimization:**
|
||||
- Image sizes and formats
|
||||
- Icon implementation
|
||||
- Font loading strategy
|
||||
- Code splitting opportunities
|
||||
|
||||
## Output Format
|
||||
|
||||
Generate review report in `.ui-design/reviews/{review_id}.md`:
|
||||
|
||||
```markdown
|
||||
# Design Review: {Component/File Name}
|
||||
|
||||
**Review ID:** {review_id}
|
||||
**Reviewed:** {YYYY-MM-DD HH:MM}
|
||||
**Target:** {file_path}
|
||||
**Focus:** {focus_areas}
|
||||
|
||||
## Summary
|
||||
|
||||
{2-3 sentence overview of findings}
|
||||
|
||||
**Issues Found:** {total_count}
|
||||
- Critical: {count}
|
||||
- Major: {count}
|
||||
- Minor: {count}
|
||||
- Suggestions: {count}
|
||||
|
||||
## Critical Issues
|
||||
|
||||
### Issue 1: {Title}
|
||||
|
||||
**Severity:** Critical
|
||||
**Location:** {file}:{line}
|
||||
**Category:** {Visual|Usability|Code|Performance}
|
||||
|
||||
**Problem:**
|
||||
{Description of the issue}
|
||||
|
||||
**Impact:**
|
||||
{Why this matters for users/maintainability}
|
||||
|
||||
**Recommendation:**
|
||||
{Specific fix suggestion}
|
||||
|
||||
**Code Example:**
|
||||
```{language}
|
||||
// Before
|
||||
{current_code}
|
||||
|
||||
// After
|
||||
{suggested_code}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Major Issues
|
||||
|
||||
### Issue 2: {Title}
|
||||
...
|
||||
|
||||
## Minor Issues
|
||||
|
||||
### Issue 3: {Title}
|
||||
...
|
||||
|
||||
## Suggestions
|
||||
|
||||
### Suggestion 1: {Title}
|
||||
...
|
||||
|
||||
## Positive Observations
|
||||
|
||||
{List things done well to reinforce good patterns}
|
||||
|
||||
- {Positive observation 1}
|
||||
- {Positive observation 2}
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. {Prioritized action 1}
|
||||
2. {Prioritized action 2}
|
||||
3. {Prioritized action 3}
|
||||
|
||||
---
|
||||
|
||||
_Generated by UI Design Review. Run `/ui-design:design-review` again after fixes._
|
||||
```
|
||||
|
||||
## Completion
|
||||
|
||||
After generating report:
|
||||
|
||||
1. Update `review_state.json`:
|
||||
- Set `status: "complete"`
|
||||
- Update issue counts
|
||||
|
||||
2. Display summary:
|
||||
|
||||
```
|
||||
Design Review Complete!
|
||||
|
||||
Target: {component/file}
|
||||
Issues Found: {total}
|
||||
- {critical} Critical
|
||||
- {major} Major
|
||||
- {minor} Minor
|
||||
- {suggestions} Suggestions
|
||||
|
||||
Full report: .ui-design/reviews/{review_id}.md
|
||||
|
||||
What would you like to do next?
|
||||
1. View detailed findings for a specific issue
|
||||
2. Start implementing fixes
|
||||
3. Export report (markdown/JSON)
|
||||
4. Review another component
|
||||
```
|
||||
|
||||
## Follow-up Actions
|
||||
|
||||
If user selects "Start implementing fixes":
|
||||
|
||||
```
|
||||
Which issues would you like to address?
|
||||
|
||||
1. All critical issues first
|
||||
2. All issues in current file
|
||||
3. Specific issue (enter number)
|
||||
4. Generate a fix plan for all issues
|
||||
|
||||
Enter choice:
|
||||
```
|
||||
|
||||
Guide user through fixes one at a time, updating the review report as issues are resolved.
|
||||
|
||||
## Error Handling
|
||||
|
||||
- If target file not found: Suggest similar files, offer to search
|
||||
- If file is not UI code: Explain and ask for correct target
|
||||
- If review fails mid-way: Save partial results, offer to resume
|
||||
632
plugins/ui-design/commands/design-system-setup.md
Normal file
632
plugins/ui-design/commands/design-system-setup.md
Normal file
@@ -0,0 +1,632 @@
|
||||
---
|
||||
description: "Initialize a design system with tokens"
|
||||
argument-hint: "[--preset minimal|standard|comprehensive]"
|
||||
---
|
||||
|
||||
# Design System Setup
|
||||
|
||||
Initialize a design system with design tokens, component patterns, and documentation. Creates a foundation for consistent UI development.
|
||||
|
||||
## Pre-flight Checks
|
||||
|
||||
1. Check if `.ui-design/` directory exists:
|
||||
- If exists with `design-system.json`: Ask to update or reinitialize
|
||||
- If not: Create `.ui-design/` directory
|
||||
|
||||
2. Detect existing design system indicators:
|
||||
- Check for `tailwind.config.js` with custom theme
|
||||
- Check for CSS custom properties in global styles
|
||||
- Check for existing token files (tokens.json, theme.ts, etc.)
|
||||
- Check for design system packages (chakra, radix, shadcn, etc.)
|
||||
|
||||
3. Load project context:
|
||||
- Read `conductor/tech-stack.md` if exists
|
||||
- Detect styling approach (CSS, Tailwind, styled-components, etc.)
|
||||
- Detect TypeScript usage
|
||||
|
||||
4. If existing design system detected:
|
||||
```
|
||||
I detected an existing design system configuration:
|
||||
|
||||
- {detected_system}
|
||||
|
||||
Would you like to:
|
||||
1. Integrate with existing system (add missing tokens)
|
||||
2. Replace with new design system
|
||||
3. View current configuration
|
||||
4. Cancel
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
## Interactive Configuration
|
||||
|
||||
**CRITICAL RULES:**
|
||||
|
||||
- Ask ONE question per turn
|
||||
- Wait for user response before proceeding
|
||||
- Build complete specification before generating files
|
||||
|
||||
### Q1: Design System Preset (if not provided)
|
||||
|
||||
```
|
||||
What level of design system do you need?
|
||||
|
||||
1. Minimal - Colors, typography, spacing only
|
||||
Best for: Small projects, rapid prototyping
|
||||
|
||||
2. Standard - Colors, typography, spacing, shadows, borders, breakpoints
|
||||
Best for: Most projects, good balance of flexibility
|
||||
|
||||
3. Comprehensive - Full token system with semantic naming, component tokens,
|
||||
animation, and documentation
|
||||
Best for: Large projects, design teams, long-term maintenance
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
### Q2: Brand Colors
|
||||
|
||||
```
|
||||
Let's define your brand colors.
|
||||
|
||||
Enter your primary brand color (hex code, e.g., #3B82F6):
|
||||
```
|
||||
|
||||
After receiving primary:
|
||||
|
||||
```
|
||||
Primary color: {color}
|
||||
|
||||
Now enter your secondary/accent color (or press enter to auto-generate):
|
||||
```
|
||||
|
||||
### Q3: Color Mode Support
|
||||
|
||||
```
|
||||
What color modes should the design system support?
|
||||
|
||||
1. Light mode only
|
||||
2. Dark mode only
|
||||
3. Light and dark modes
|
||||
4. Light, dark, and system preference
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
### Q4: Typography
|
||||
|
||||
```
|
||||
What font family should be used?
|
||||
|
||||
1. System fonts (fastest loading, native feel)
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', ...
|
||||
|
||||
2. Inter (modern, highly readable)
|
||||
3. Open Sans (friendly, versatile)
|
||||
4. Roboto (clean, Google standard)
|
||||
5. Custom (provide name)
|
||||
|
||||
Enter number or font name:
|
||||
```
|
||||
|
||||
### Q5: Spacing Scale
|
||||
|
||||
```
|
||||
What spacing scale philosophy?
|
||||
|
||||
1. Linear (4px base)
|
||||
4, 8, 12, 16, 20, 24, 32, 40, 48, 64
|
||||
|
||||
2. Geometric (4px base, 1.5x multiplier)
|
||||
4, 6, 9, 14, 21, 32, 48, 72
|
||||
|
||||
3. Tailwind-compatible
|
||||
0, 1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64
|
||||
|
||||
4. Custom (provide values)
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
### Q6: Border Radius
|
||||
|
||||
```
|
||||
What corner radius style?
|
||||
|
||||
1. Sharp - 0px (no rounding)
|
||||
2. Subtle - 4px (slight rounding)
|
||||
3. Moderate - 8px (noticeable rounding)
|
||||
4. Rounded - 12px (significant rounding)
|
||||
5. Pill - 9999px for buttons, 16px for cards
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
### Q7: Output Format
|
||||
|
||||
```
|
||||
How should the design tokens be output?
|
||||
|
||||
1. CSS Custom Properties (works everywhere)
|
||||
2. Tailwind config (tailwind.config.js extension)
|
||||
3. JavaScript/TypeScript module
|
||||
4. JSON tokens (Design Token Community Group format)
|
||||
5. Multiple formats (all of the above)
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
### Q8: Component Guidelines (Comprehensive only)
|
||||
|
||||
If comprehensive preset selected:
|
||||
|
||||
```
|
||||
Should I generate component design guidelines?
|
||||
|
||||
These include:
|
||||
- Button variants and states
|
||||
- Form input patterns
|
||||
- Card/container patterns
|
||||
- Typography hierarchy
|
||||
- Icon usage guidelines
|
||||
|
||||
1. Yes, generate all guidelines
|
||||
2. Yes, but let me select which ones
|
||||
3. No, tokens only
|
||||
|
||||
Enter number:
|
||||
```
|
||||
|
||||
## State Management
|
||||
|
||||
Create `.ui-design/setup_state.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"status": "in_progress",
|
||||
"preset": "standard",
|
||||
"colors": {
|
||||
"primary": "#3B82F6",
|
||||
"secondary": "#8B5CF6"
|
||||
},
|
||||
"color_modes": ["light", "dark"],
|
||||
"typography": {
|
||||
"family": "Inter",
|
||||
"scale": "1.25"
|
||||
},
|
||||
"spacing": "linear",
|
||||
"radius": "moderate",
|
||||
"output_formats": ["css", "tailwind"],
|
||||
"current_step": 1,
|
||||
"started_at": "ISO_TIMESTAMP"
|
||||
}
|
||||
```
|
||||
|
||||
## Token Generation
|
||||
|
||||
### 1. Generate Color Palette
|
||||
|
||||
From primary and secondary colors, generate:
|
||||
|
||||
```json
|
||||
{
|
||||
"colors": {
|
||||
"primary": {
|
||||
"50": "#EFF6FF",
|
||||
"100": "#DBEAFE",
|
||||
"200": "#BFDBFE",
|
||||
"300": "#93C5FD",
|
||||
"400": "#60A5FA",
|
||||
"500": "#3B82F6",
|
||||
"600": "#2563EB",
|
||||
"700": "#1D4ED8",
|
||||
"800": "#1E40AF",
|
||||
"900": "#1E3A8A",
|
||||
"950": "#172554"
|
||||
},
|
||||
"secondary": { ... },
|
||||
"neutral": {
|
||||
"50": "#F9FAFB",
|
||||
"100": "#F3F4F6",
|
||||
"200": "#E5E7EB",
|
||||
"300": "#D1D5DB",
|
||||
"400": "#9CA3AF",
|
||||
"500": "#6B7280",
|
||||
"600": "#4B5563",
|
||||
"700": "#374151",
|
||||
"800": "#1F2937",
|
||||
"900": "#111827",
|
||||
"950": "#030712"
|
||||
},
|
||||
"semantic": {
|
||||
"success": "#22C55E",
|
||||
"warning": "#F59E0B",
|
||||
"error": "#EF4444",
|
||||
"info": "#3B82F6"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Generate Typography Scale
|
||||
|
||||
```json
|
||||
{
|
||||
"typography": {
|
||||
"fontFamily": {
|
||||
"sans": "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
||||
"mono": "ui-monospace, 'Fira Code', monospace"
|
||||
},
|
||||
"fontSize": {
|
||||
"xs": "0.75rem",
|
||||
"sm": "0.875rem",
|
||||
"base": "1rem",
|
||||
"lg": "1.125rem",
|
||||
"xl": "1.25rem",
|
||||
"2xl": "1.5rem",
|
||||
"3xl": "1.875rem",
|
||||
"4xl": "2.25rem",
|
||||
"5xl": "3rem"
|
||||
},
|
||||
"fontWeight": {
|
||||
"normal": "400",
|
||||
"medium": "500",
|
||||
"semibold": "600",
|
||||
"bold": "700"
|
||||
},
|
||||
"lineHeight": {
|
||||
"tight": "1.25",
|
||||
"normal": "1.5",
|
||||
"relaxed": "1.75"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Generate Spacing Scale
|
||||
|
||||
```json
|
||||
{
|
||||
"spacing": {
|
||||
"0": "0",
|
||||
"1": "0.25rem",
|
||||
"2": "0.5rem",
|
||||
"3": "0.75rem",
|
||||
"4": "1rem",
|
||||
"5": "1.25rem",
|
||||
"6": "1.5rem",
|
||||
"8": "2rem",
|
||||
"10": "2.5rem",
|
||||
"12": "3rem",
|
||||
"16": "4rem",
|
||||
"20": "5rem",
|
||||
"24": "6rem"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Generate Additional Tokens
|
||||
|
||||
```json
|
||||
{
|
||||
"borderRadius": {
|
||||
"none": "0",
|
||||
"sm": "0.125rem",
|
||||
"base": "0.25rem",
|
||||
"md": "0.375rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"2xl": "1rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"boxShadow": {
|
||||
"sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
||||
"base": "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||
"md": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
|
||||
"lg": "0 10px 15px -3px rgb(0 0 0 / 0.1)",
|
||||
"xl": "0 20px 25px -5px rgb(0 0 0 / 0.1)"
|
||||
},
|
||||
"breakpoints": {
|
||||
"sm": "640px",
|
||||
"md": "768px",
|
||||
"lg": "1024px",
|
||||
"xl": "1280px",
|
||||
"2xl": "1536px"
|
||||
},
|
||||
"animation": {
|
||||
"duration": {
|
||||
"fast": "150ms",
|
||||
"normal": "300ms",
|
||||
"slow": "500ms"
|
||||
},
|
||||
"easing": {
|
||||
"ease": "cubic-bezier(0.4, 0, 0.2, 1)",
|
||||
"easeIn": "cubic-bezier(0.4, 0, 1, 1)",
|
||||
"easeOut": "cubic-bezier(0, 0, 0.2, 1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## File Generation
|
||||
|
||||
### Core Design System File
|
||||
|
||||
Create `.ui-design/design-system.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "{project_name} Design System",
|
||||
"version": "1.0.0",
|
||||
"created": "ISO_TIMESTAMP",
|
||||
"preset": "{preset}",
|
||||
"tokens": {
|
||||
"colors": { ... },
|
||||
"typography": { ... },
|
||||
"spacing": { ... },
|
||||
"borderRadius": { ... },
|
||||
"boxShadow": { ... },
|
||||
"breakpoints": { ... },
|
||||
"animation": { ... }
|
||||
},
|
||||
"colorModes": ["light", "dark"],
|
||||
"outputFormats": ["css", "tailwind"]
|
||||
}
|
||||
```
|
||||
|
||||
### CSS Custom Properties
|
||||
|
||||
Create `.ui-design/tokens/tokens.css`:
|
||||
|
||||
```css
|
||||
/* Design System Tokens - Generated */
|
||||
/* Do not edit directly. Regenerate with /ui-design:design-system-setup */
|
||||
|
||||
:root {
|
||||
/* Colors - Primary */
|
||||
--color-primary-50: #EFF6FF;
|
||||
--color-primary-100: #DBEAFE;
|
||||
--color-primary-500: #3B82F6;
|
||||
--color-primary-600: #2563EB;
|
||||
--color-primary-700: #1D4ED8;
|
||||
|
||||
/* Colors - Neutral */
|
||||
--color-neutral-50: #F9FAFB;
|
||||
--color-neutral-100: #F3F4F6;
|
||||
--color-neutral-500: #6B7280;
|
||||
--color-neutral-900: #111827;
|
||||
|
||||
/* Colors - Semantic */
|
||||
--color-success: #22C55E;
|
||||
--color-warning: #F59E0B;
|
||||
--color-error: #EF4444;
|
||||
--color-info: #3B82F6;
|
||||
|
||||
/* Typography */
|
||||
--font-family-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-family-mono: ui-monospace, 'Fira Code', monospace;
|
||||
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-1: 0.25rem;
|
||||
--spacing-2: 0.5rem;
|
||||
--spacing-4: 1rem;
|
||||
--spacing-6: 1.5rem;
|
||||
--spacing-8: 2rem;
|
||||
|
||||
/* Border Radius */
|
||||
--radius-sm: 0.125rem;
|
||||
--radius-base: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
|
||||
/* Animation */
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 300ms;
|
||||
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-neutral-50: #111827;
|
||||
--color-neutral-100: #1F2937;
|
||||
--color-neutral-500: #9CA3AF;
|
||||
--color-neutral-900: #F9FAFB;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-neutral-50: #111827;
|
||||
--color-neutral-100: #1F2937;
|
||||
--color-neutral-500: #9CA3AF;
|
||||
--color-neutral-900: #F9FAFB;
|
||||
}
|
||||
```
|
||||
|
||||
### Tailwind Config Extension
|
||||
|
||||
Create `.ui-design/tokens/tailwind.config.js`:
|
||||
|
||||
```javascript
|
||||
// Design System Tailwind Extension
|
||||
// Import and spread in your tailwind.config.js
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#EFF6FF',
|
||||
100: '#DBEAFE',
|
||||
200: '#BFDBFE',
|
||||
300: '#93C5FD',
|
||||
400: '#60A5FA',
|
||||
500: '#3B82F6',
|
||||
600: '#2563EB',
|
||||
700: '#1D4ED8',
|
||||
800: '#1E40AF',
|
||||
900: '#1E3A8A',
|
||||
950: '#172554',
|
||||
},
|
||||
// ... other colors
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
|
||||
mono: ['ui-monospace', 'Fira Code', 'monospace'],
|
||||
},
|
||||
// ... other tokens
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### TypeScript Module
|
||||
|
||||
Create `.ui-design/tokens/tokens.ts`:
|
||||
|
||||
```typescript
|
||||
// Design System Tokens - Generated
|
||||
// Do not edit directly.
|
||||
|
||||
export const colors = {
|
||||
primary: {
|
||||
50: '#EFF6FF',
|
||||
// ... full palette
|
||||
},
|
||||
// ... other color groups
|
||||
} as const;
|
||||
|
||||
export const typography = {
|
||||
fontFamily: {
|
||||
sans: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif',
|
||||
mono: "ui-monospace, 'Fira Code', monospace",
|
||||
},
|
||||
fontSize: {
|
||||
xs: '0.75rem',
|
||||
// ... full scale
|
||||
},
|
||||
} as const;
|
||||
|
||||
export const spacing = {
|
||||
1: '0.25rem',
|
||||
// ... full scale
|
||||
} as const;
|
||||
|
||||
// Type exports for TypeScript consumers
|
||||
export type ColorToken = keyof typeof colors;
|
||||
export type SpacingToken = keyof typeof spacing;
|
||||
```
|
||||
|
||||
## Documentation Generation (Comprehensive preset)
|
||||
|
||||
Create `.ui-design/docs/design-system.md`:
|
||||
|
||||
```markdown
|
||||
# Design System Documentation
|
||||
|
||||
## Overview
|
||||
|
||||
This design system provides the foundation for consistent UI development.
|
||||
|
||||
## Colors
|
||||
|
||||
### Primary Palette
|
||||
| Token | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
| primary-500 | #3B82F6 | Primary actions, links |
|
||||
| primary-600 | #2563EB | Hover state |
|
||||
| primary-700 | #1D4ED8 | Active state |
|
||||
|
||||
### Semantic Colors
|
||||
| Token | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
| success | #22C55E | Success messages, positive actions |
|
||||
| warning | #F59E0B | Warning messages, caution |
|
||||
| error | #EF4444 | Error messages, destructive actions |
|
||||
|
||||
## Typography
|
||||
|
||||
### Scale
|
||||
| Name | Size | Usage |
|
||||
|------|------|-------|
|
||||
| xs | 0.75rem | Captions, labels |
|
||||
| sm | 0.875rem | Secondary text |
|
||||
| base | 1rem | Body text |
|
||||
| lg | 1.125rem | Emphasized body |
|
||||
| xl | 1.25rem | Subheadings |
|
||||
|
||||
## Spacing
|
||||
|
||||
Use spacing tokens for consistent margins and padding:
|
||||
- `spacing-1` (4px): Tight spacing
|
||||
- `spacing-2` (8px): Compact spacing
|
||||
- `spacing-4` (16px): Default spacing
|
||||
- `spacing-6` (24px): Comfortable spacing
|
||||
- `spacing-8` (32px): Loose spacing
|
||||
|
||||
## Usage
|
||||
|
||||
### CSS Custom Properties
|
||||
```css
|
||||
.button {
|
||||
background: var(--color-primary-500);
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
```
|
||||
|
||||
### Tailwind
|
||||
```html
|
||||
<button class="bg-primary-500 px-4 py-2 rounded-md">
|
||||
Click me
|
||||
</button>
|
||||
```
|
||||
```
|
||||
|
||||
## Completion
|
||||
|
||||
Update state and display summary:
|
||||
|
||||
```
|
||||
Design System Setup Complete!
|
||||
|
||||
Created files:
|
||||
- .ui-design/design-system.json (master configuration)
|
||||
- .ui-design/tokens/tokens.css (CSS custom properties)
|
||||
- .ui-design/tokens/tailwind.config.js (Tailwind extension)
|
||||
- .ui-design/tokens/tokens.ts (TypeScript module)
|
||||
- .ui-design/docs/design-system.md (documentation)
|
||||
|
||||
Quick start:
|
||||
1. CSS: @import '.ui-design/tokens/tokens.css';
|
||||
2. Tailwind: Spread in your tailwind.config.js
|
||||
3. TypeScript: import { colors } from '.ui-design/tokens/tokens';
|
||||
|
||||
Next steps:
|
||||
1. Review and customize tokens as needed
|
||||
2. Run /ui-design:create-component to build with your design system
|
||||
3. Run /ui-design:design-review to validate existing UI against tokens
|
||||
|
||||
Need to modify tokens? Run /ui-design:design-system-setup --preset {preset}
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
- If conflicting config detected: Offer merge strategies
|
||||
- If file write fails: Report error, suggest manual creation
|
||||
- If color generation fails: Provide manual palette input option
|
||||
- If tailwind not detected: Skip tailwind output, inform user
|
||||
Reference in New Issue
Block a user