mirror of
https://github.com/wshobson/agents.git
synced 2026-03-18 17:47:16 +00:00
style: format all files with prettier
This commit is contained in:
Seth Hobson
@@ -113,17 +113,20 @@ 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
|
||||
@@ -131,6 +134,7 @@ For each file, check against WCAG criteria:
|
||||
- [ ] 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%
|
||||
@@ -140,21 +144,25 @@ For each file, check against WCAG criteria:
|
||||
#### 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
|
||||
@@ -162,6 +170,7 @@ For each file, check against WCAG criteria:
|
||||
- [ ] 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
|
||||
@@ -169,17 +178,20 @@ For each file, check against WCAG criteria:
|
||||
#### 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
|
||||
@@ -188,6 +200,7 @@ For each file, check against WCAG criteria:
|
||||
#### Robust (WCAG 4.x)
|
||||
|
||||
**4.1 Compatible:**
|
||||
|
||||
- [ ] HTML validates (no duplicate IDs)
|
||||
- [ ] Custom components have proper ARIA
|
||||
- [ ] Status messages announced to screen readers
|
||||
@@ -253,7 +266,7 @@ Check ARIA usage:
|
||||
|
||||
Generate audit report in `.ui-design/audits/{audit_id}.md`:
|
||||
|
||||
```markdown
|
||||
````markdown
|
||||
# Accessibility Audit Report
|
||||
|
||||
**Audit ID:** {audit_id}
|
||||
@@ -267,7 +280,7 @@ Generate audit report in `.ui-design/audits/{audit_id}.md`:
|
||||
**Compliance Status:** {Passing | Needs Improvement | Failing}
|
||||
|
||||
| Severity | Count | % of Issues |
|
||||
|----------|-------|-------------|
|
||||
| -------- | ----- | ----------- |
|
||||
| Critical | {n} | {%} |
|
||||
| Serious | {n} | {%} |
|
||||
| Moderate | {n} | {%} |
|
||||
@@ -298,6 +311,7 @@ These issues prevent users with disabilities from using the interface.
|
||||
{Step-by-step fix instructions}
|
||||
|
||||
**Code Fix:**
|
||||
|
||||
```{language}
|
||||
// Before
|
||||
{current_code}
|
||||
@@ -305,8 +319,10 @@ These issues prevent users with disabilities from using the interface.
|
||||
// After
|
||||
{fixed_code}
|
||||
```
|
||||
````
|
||||
|
||||
**Testing:**
|
||||
|
||||
- Manual: {how to manually verify}
|
||||
- Automated: {suggested test}
|
||||
|
||||
@@ -336,11 +352,11 @@ These are best practice improvements.
|
||||
|
||||
The following WCAG criteria passed:
|
||||
|
||||
| Criterion | Name | Level |
|
||||
|-----------|------|-------|
|
||||
| 1.1.1 | Non-text Content | A |
|
||||
| 1.3.1 | Info and Relationships | A |
|
||||
| ... | ... | ... |
|
||||
| Criterion | Name | Level |
|
||||
| --------- | ---------------------- | ----- |
|
||||
| 1.1.1 | Non-text Content | A |
|
||||
| 1.3.1 | Info and Relationships | A |
|
||||
| ... | ... | ... |
|
||||
|
||||
## Recommendations
|
||||
|
||||
@@ -366,11 +382,11 @@ Add these tests to catch regressions:
|
||||
|
||||
```javascript
|
||||
// Example jest-axe test
|
||||
import { axe, toHaveNoViolations } from 'jest-axe';
|
||||
import { axe, toHaveNoViolations } from "jest-axe";
|
||||
|
||||
expect.extend(toHaveNoViolations);
|
||||
|
||||
test('component has no accessibility violations', async () => {
|
||||
test("component has no accessibility violations", async () => {
|
||||
const { container } = render(<Component />);
|
||||
const results = await axe(container);
|
||||
expect(results).toHaveNoViolations();
|
||||
@@ -397,7 +413,8 @@ test('component has no accessibility violations', async () => {
|
||||
|
||||
_Generated by UI Design Accessibility Audit_
|
||||
_WCAG Reference: https://www.w3.org/WAI/WCAG21/quickref/_
|
||||
```
|
||||
|
||||
````
|
||||
|
||||
## Completion
|
||||
|
||||
@@ -415,7 +432,7 @@ Update `audit_state.json`:
|
||||
"minor": 3
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
Display summary:
|
||||
|
||||
|
||||
@@ -24,6 +24,7 @@ Guided workflow for creating new UI components following established patterns an
|
||||
- Check for existing component conventions
|
||||
|
||||
4. If no framework detected:
|
||||
|
||||
```
|
||||
I couldn't detect a UI framework. What are you using?
|
||||
|
||||
@@ -278,6 +279,7 @@ export interface {ComponentName}Props extends HTMLAttributes<HTMLDivElement> {
|
||||
Based on styling approach:
|
||||
|
||||
**CSS Modules:**
|
||||
|
||||
```css
|
||||
/* {ComponentName}.styles.module.css */
|
||||
.root {
|
||||
@@ -294,6 +296,7 @@ Based on styling approach:
|
||||
```
|
||||
|
||||
**Tailwind:**
|
||||
|
||||
```tsx
|
||||
// Inline in component
|
||||
className={cn(
|
||||
|
||||
@@ -130,24 +130,28 @@ Read and analyze the target files:
|
||||
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
|
||||
@@ -157,6 +161,7 @@ Check for:
|
||||
Check for:
|
||||
|
||||
**Interaction Patterns:**
|
||||
|
||||
- Clear clickable/tappable areas
|
||||
- Appropriate hover/focus states
|
||||
- Loading state indicators
|
||||
@@ -164,12 +169,14 @@ Check for:
|
||||
- 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
|
||||
@@ -180,18 +187,21 @@ Check for:
|
||||
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
|
||||
@@ -202,12 +212,14 @@ Check for:
|
||||
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
|
||||
@@ -217,7 +229,7 @@ Check for:
|
||||
|
||||
Generate review report in `.ui-design/reviews/{review_id}.md`:
|
||||
|
||||
```markdown
|
||||
````markdown
|
||||
# Design Review: {Component/File Name}
|
||||
|
||||
**Review ID:** {review_id}
|
||||
@@ -230,6 +242,7 @@ Generate review report in `.ui-design/reviews/{review_id}.md`:
|
||||
{2-3 sentence overview of findings}
|
||||
|
||||
**Issues Found:** {total_count}
|
||||
|
||||
- Critical: {count}
|
||||
- Major: {count}
|
||||
- Minor: {count}
|
||||
@@ -253,6 +266,7 @@ Generate review report in `.ui-design/reviews/{review_id}.md`:
|
||||
{Specific fix suggestion}
|
||||
|
||||
**Code Example:**
|
||||
|
||||
```{language}
|
||||
// Before
|
||||
{current_code}
|
||||
@@ -260,22 +274,26 @@ Generate review report in `.ui-design/reviews/{review_id}.md`:
|
||||
// After
|
||||
{suggested_code}
|
||||
```
|
||||
````
|
||||
|
||||
---
|
||||
|
||||
## Major Issues
|
||||
|
||||
### Issue 2: {Title}
|
||||
|
||||
...
|
||||
|
||||
## Minor Issues
|
||||
|
||||
### Issue 3: {Title}
|
||||
|
||||
...
|
||||
|
||||
## Suggestions
|
||||
|
||||
### Suggestion 1: {Title}
|
||||
|
||||
...
|
||||
|
||||
## Positive Observations
|
||||
@@ -294,6 +312,7 @@ Generate review report in `.ui-design/reviews/{review_id}.md`:
|
||||
---
|
||||
|
||||
_Generated by UI Design Review. Run `/ui-design:design-review` again after fixes._
|
||||
|
||||
```
|
||||
|
||||
## Completion
|
||||
@@ -307,22 +326,26 @@ After generating report:
|
||||
2. Display summary:
|
||||
|
||||
```
|
||||
|
||||
Design Review Complete!
|
||||
|
||||
Target: {component/file}
|
||||
Issues Found: {total}
|
||||
- {critical} Critical
|
||||
- {major} Major
|
||||
- {minor} Minor
|
||||
- {suggestions} Suggestions
|
||||
|
||||
- {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
|
||||
@@ -330,6 +353,7 @@ What would you like to do next?
|
||||
If user selects "Start implementing fixes":
|
||||
|
||||
```
|
||||
|
||||
Which issues would you like to address?
|
||||
|
||||
1. All critical issues first
|
||||
@@ -338,6 +362,7 @@ Which issues would you like to address?
|
||||
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.
|
||||
@@ -347,3 +372,4 @@ Guide user through fixes one at a time, updating the review report as issues are
|
||||
- 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
|
||||
```
|
||||
|
||||
@@ -25,6 +25,7 @@ Initialize a design system with design tokens, component patterns, and documenta
|
||||
- Detect TypeScript usage
|
||||
|
||||
4. If existing design system detected:
|
||||
|
||||
```
|
||||
I detected an existing design system configuration:
|
||||
|
||||
@@ -385,27 +386,27 @@ Create `.ui-design/tokens/tokens.css`:
|
||||
|
||||
:root {
|
||||
/* Colors - Primary */
|
||||
--color-primary-50: #EFF6FF;
|
||||
--color-primary-100: #DBEAFE;
|
||||
--color-primary-500: #3B82F6;
|
||||
--color-primary-600: #2563EB;
|
||||
--color-primary-700: #1D4ED8;
|
||||
--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-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;
|
||||
--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-family-mono: ui-monospace, "Fira Code", monospace;
|
||||
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
@@ -442,17 +443,17 @@ Create `.ui-design/tokens/tokens.css`:
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-neutral-50: #111827;
|
||||
--color-neutral-100: #1F2937;
|
||||
--color-neutral-500: #9CA3AF;
|
||||
--color-neutral-900: #F9FAFB;
|
||||
--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;
|
||||
--color-neutral-100: #1f2937;
|
||||
--color-neutral-500: #9ca3af;
|
||||
--color-neutral-900: #f9fafb;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -470,23 +471,23 @@ module.exports = {
|
||||
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',
|
||||
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'],
|
||||
sans: ["Inter", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
|
||||
mono: ["ui-monospace", "Fira Code", "monospace"],
|
||||
},
|
||||
// ... other tokens
|
||||
},
|
||||
@@ -504,7 +505,7 @@ Create `.ui-design/tokens/tokens.ts`:
|
||||
|
||||
export const colors = {
|
||||
primary: {
|
||||
50: '#EFF6FF',
|
||||
50: "#EFF6FF",
|
||||
// ... full palette
|
||||
},
|
||||
// ... other color groups
|
||||
@@ -512,17 +513,17 @@ export const colors = {
|
||||
|
||||
export const typography = {
|
||||
fontFamily: {
|
||||
sans: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif',
|
||||
sans: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||
mono: "ui-monospace, 'Fira Code', monospace",
|
||||
},
|
||||
fontSize: {
|
||||
xs: '0.75rem',
|
||||
xs: "0.75rem",
|
||||
// ... full scale
|
||||
},
|
||||
} as const;
|
||||
|
||||
export const spacing = {
|
||||
1: '0.25rem',
|
||||
1: "0.25rem",
|
||||
// ... full scale
|
||||
} as const;
|
||||
|
||||
@@ -535,7 +536,7 @@ export type SpacingToken = keyof typeof spacing;
|
||||
|
||||
Create `.ui-design/docs/design-system.md`:
|
||||
|
||||
```markdown
|
||||
````markdown
|
||||
# Design System Documentation
|
||||
|
||||
## Overview
|
||||
@@ -545,33 +546,37 @@ This design system provides the foundation for consistent UI development.
|
||||
## Colors
|
||||
|
||||
### Primary Palette
|
||||
| Token | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
|
||||
| Token | Value | Usage |
|
||||
| ----------- | ------- | ---------------------- |
|
||||
| primary-500 | #3B82F6 | Primary actions, links |
|
||||
| primary-600 | #2563EB | Hover state |
|
||||
| primary-700 | #1D4ED8 | Active state |
|
||||
| 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 |
|
||||
|
||||
| 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 |
|
||||
|
||||
| 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
|
||||
@@ -581,6 +586,7 @@ Use spacing tokens for consistent margins and padding:
|
||||
## Usage
|
||||
|
||||
### CSS Custom Properties
|
||||
|
||||
```css
|
||||
.button {
|
||||
background: var(--color-primary-500);
|
||||
@@ -588,13 +594,14 @@ Use spacing tokens for consistent margins and padding:
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
### Tailwind
|
||||
|
||||
```html
|
||||
<button class="bg-primary-500 px-4 py-2 rounded-md">
|
||||
Click me
|
||||
</button>
|
||||
<button class="bg-primary-500 px-4 py-2 rounded-md">Click me</button>
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
## Completion
|
||||
@@ -602,26 +609,31 @@ Use spacing tokens for consistent margins and padding:
|
||||
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)
|
||||
|
||||
- .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
|
||||
@@ -630,3 +642,4 @@ Need to modify tokens? Run /ui-design:design-system-setup --preset {preset}
|
||||
- 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