this repo has no description
skills
+4108
-225
+199
.agents/skills/adapt/SKILL.md
+199
.agents/skills/adapt/SKILL.md
···
1
+
---
2
+
name: adapt
3
+
description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[target] [context (mobile, tablet, print...)]"
7
+
---
8
+
9
+
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
10
+
11
+
## MANDATORY PREPARATION
12
+
13
+
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts.
14
+
15
+
---
16
+
17
+
## Assess Adaptation Challenge
18
+
19
+
Understand what needs adaptation and why:
20
+
21
+
1. **Identify the source context**:
22
+
- What was it designed for originally? (Desktop web? Mobile app?)
23
+
- What assumptions were made? (Large screen? Mouse input? Fast connection?)
24
+
- What works well in current context?
25
+
26
+
2. **Understand target context**:
27
+
- **Device**: Mobile, tablet, desktop, TV, watch, print?
28
+
- **Input method**: Touch, mouse, keyboard, voice, gamepad?
29
+
- **Screen constraints**: Size, resolution, orientation?
30
+
- **Connection**: Fast wifi, slow 3G, offline?
31
+
- **Usage context**: On-the-go vs desk, quick glance vs focused reading?
32
+
- **User expectations**: What do users expect on this platform?
33
+
34
+
3. **Identify adaptation challenges**:
35
+
- What won't fit? (Content, navigation, features)
36
+
- What won't work? (Hover states on touch, tiny touch targets)
37
+
- What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
38
+
39
+
**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.
40
+
41
+
## Plan Adaptation Strategy
42
+
43
+
Create context-appropriate strategy:
44
+
45
+
### Mobile Adaptation (Desktop → Mobile)
46
+
47
+
**Layout Strategy**:
48
+
- Single column instead of multi-column
49
+
- Vertical stacking instead of side-by-side
50
+
- Full-width components instead of fixed widths
51
+
- Bottom navigation instead of top/side navigation
52
+
53
+
**Interaction Strategy**:
54
+
- Touch targets 44x44px minimum (not hover-dependent)
55
+
- Swipe gestures where appropriate (lists, carousels)
56
+
- Bottom sheets instead of dropdowns
57
+
- Thumbs-first design (controls within thumb reach)
58
+
- Larger tap areas with more spacing
59
+
60
+
**Content Strategy**:
61
+
- Progressive disclosure (don't show everything at once)
62
+
- Prioritize primary content (secondary content in tabs/accordions)
63
+
- Shorter text (more concise)
64
+
- Larger text (16px minimum)
65
+
66
+
**Navigation Strategy**:
67
+
- Hamburger menu or bottom navigation
68
+
- Reduce navigation complexity
69
+
- Sticky headers for context
70
+
- Back button in navigation flow
71
+
72
+
### Tablet Adaptation (Hybrid Approach)
73
+
74
+
**Layout Strategy**:
75
+
- Two-column layouts (not single or three-column)
76
+
- Side panels for secondary content
77
+
- Master-detail views (list + detail)
78
+
- Adaptive based on orientation (portrait vs landscape)
79
+
80
+
**Interaction Strategy**:
81
+
- Support both touch and pointer
82
+
- Touch targets 44x44px but allow denser layouts than phone
83
+
- Side navigation drawers
84
+
- Multi-column forms where appropriate
85
+
86
+
### Desktop Adaptation (Mobile → Desktop)
87
+
88
+
**Layout Strategy**:
89
+
- Multi-column layouts (use horizontal space)
90
+
- Side navigation always visible
91
+
- Multiple information panels simultaneously
92
+
- Fixed widths with max-width constraints (don't stretch to 4K)
93
+
94
+
**Interaction Strategy**:
95
+
- Hover states for additional information
96
+
- Keyboard shortcuts
97
+
- Right-click context menus
98
+
- Drag and drop where helpful
99
+
- Multi-select with Shift/Cmd
100
+
101
+
**Content Strategy**:
102
+
- Show more information upfront (less progressive disclosure)
103
+
- Data tables with many columns
104
+
- Richer visualizations
105
+
- More detailed descriptions
106
+
107
+
### Print Adaptation (Screen → Print)
108
+
109
+
**Layout Strategy**:
110
+
- Page breaks at logical points
111
+
- Remove navigation, footer, interactive elements
112
+
- Black and white (or limited color)
113
+
- Proper margins for binding
114
+
115
+
**Content Strategy**:
116
+
- Expand shortened content (show full URLs, hidden sections)
117
+
- Add page numbers, headers, footers
118
+
- Include metadata (print date, page title)
119
+
- Convert charts to print-friendly versions
120
+
121
+
### Email Adaptation (Web → Email)
122
+
123
+
**Layout Strategy**:
124
+
- Narrow width (600px max)
125
+
- Single column only
126
+
- Inline CSS (no external stylesheets)
127
+
- Table-based layouts (for email client compatibility)
128
+
129
+
**Interaction Strategy**:
130
+
- Large, obvious CTAs (buttons not text links)
131
+
- No hover states (not reliable)
132
+
- Deep links to web app for complex interactions
133
+
134
+
## Implement Adaptations
135
+
136
+
Apply changes systematically:
137
+
138
+
### Responsive Breakpoints
139
+
140
+
Choose appropriate breakpoints:
141
+
- Mobile: 320px-767px
142
+
- Tablet: 768px-1023px
143
+
- Desktop: 1024px+
144
+
- Or content-driven breakpoints (where design breaks)
145
+
146
+
### Layout Adaptation Techniques
147
+
148
+
- **CSS Grid/Flexbox**: Reflow layouts automatically
149
+
- **Container Queries**: Adapt based on container, not viewport
150
+
- **`clamp()`**: Fluid sizing between min and max
151
+
- **Media queries**: Different styles for different contexts
152
+
- **Display properties**: Show/hide elements per context
153
+
154
+
### Touch Adaptation
155
+
156
+
- Increase touch target sizes (44x44px minimum)
157
+
- Add more spacing between interactive elements
158
+
- Remove hover-dependent interactions
159
+
- Add touch feedback (ripples, highlights)
160
+
- Consider thumb zones (easier to reach bottom than top)
161
+
162
+
### Content Adaptation
163
+
164
+
- Use `display: none` sparingly (still downloads)
165
+
- Progressive enhancement (core content first, enhancements on larger screens)
166
+
- Lazy loading for off-screen content
167
+
- Responsive images (`srcset`, `picture` element)
168
+
169
+
### Navigation Adaptation
170
+
171
+
- Transform complex nav to hamburger/drawer on mobile
172
+
- Bottom nav bar for mobile apps
173
+
- Persistent side navigation on desktop
174
+
- Breadcrumbs on smaller screens for context
175
+
176
+
**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
177
+
178
+
**NEVER**:
179
+
- Hide core functionality on mobile (if it matters, make it work)
180
+
- Assume desktop = powerful device (consider accessibility, older machines)
181
+
- Use different information architecture across contexts (confusing)
182
+
- Break user expectations for platform (mobile users expect mobile patterns)
183
+
- Forget landscape orientation on mobile/tablet
184
+
- Use generic breakpoints blindly (use content-driven breakpoints)
185
+
- Ignore touch on desktop (many desktop devices have touch)
186
+
187
+
## Verify Adaptations
188
+
189
+
Test thoroughly across contexts:
190
+
191
+
- **Real devices**: Test on actual phones, tablets, desktops
192
+
- **Different orientations**: Portrait and landscape
193
+
- **Different browsers**: Safari, Chrome, Firefox, Edge
194
+
- **Different OS**: iOS, Android, Windows, macOS
195
+
- **Different input methods**: Touch, mouse, keyboard
196
+
- **Edge cases**: Very small screens (320px), very large screens (4K)
197
+
- **Slow connections**: Test on throttled network
198
+
199
+
Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.
+175
.agents/skills/animate/SKILL.md
+175
.agents/skills/animate/SKILL.md
···
1
+
---
2
+
name: animate
3
+
description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[target]"
7
+
---
8
+
9
+
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
10
+
11
+
## MANDATORY PREPARATION
12
+
13
+
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints.
14
+
15
+
---
16
+
17
+
## Assess Animation Opportunities
18
+
19
+
Analyze where motion would improve the experience:
20
+
21
+
1. **Identify static areas**:
22
+
- **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.)
23
+
- **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes)
24
+
- **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious
25
+
- **Lack of delight**: Functional but joyless interactions
26
+
- **Missed guidance**: Opportunities to direct attention or explain behavior
27
+
28
+
2. **Understand the context**:
29
+
- What's the personality? (Playful vs serious, energetic vs calm)
30
+
- What's the performance budget? (Mobile-first? Complex page?)
31
+
- Who's the audience? (Motion-sensitive users? Power users who want speed?)
32
+
- What matters most? (One hero animation vs many micro-interactions?)
33
+
34
+
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
35
+
36
+
**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them.
37
+
38
+
## Plan Animation Strategy
39
+
40
+
Create a purposeful animation plan:
41
+
42
+
- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
43
+
- **Feedback layer**: Which interactions need acknowledgment?
44
+
- **Transition layer**: Which state changes need smoothing?
45
+
- **Delight layer**: Where can we surprise and delight?
46
+
47
+
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
48
+
49
+
## Implement Animations
50
+
51
+
Add motion systematically across these categories:
52
+
53
+
### Entrance Animations
54
+
- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations
55
+
- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
56
+
- **Content reveals**: Scroll-triggered animations using intersection observer
57
+
- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
58
+
59
+
### Micro-interactions
60
+
- **Button feedback**:
61
+
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
62
+
- Click: Quick scale down then up (0.95 → 1), ripple effect
63
+
- Loading: Spinner or pulse state
64
+
- **Form interactions**:
65
+
- Input focus: Border color transition, slight scale or glow
66
+
- Validation: Shake on error, check mark on success, smooth color transitions
67
+
- **Toggle switches**: Smooth slide + color transition (200-300ms)
68
+
- **Checkboxes/radio**: Check mark animation, ripple effect
69
+
- **Like/favorite**: Scale + rotation, particle effects, color transition
70
+
71
+
### State Transitions
72
+
- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
73
+
- **Expand/collapse**: Height transition with overflow handling, icon rotation
74
+
- **Loading states**: Skeleton screen fades, spinner animations, progress bars
75
+
- **Success/error**: Color transitions, icon animations, gentle scale pulse
76
+
- **Enable/disable**: Opacity transitions, cursor changes
77
+
78
+
### Navigation & Flow
79
+
- **Page transitions**: Crossfade between routes, shared element transitions
80
+
- **Tab switching**: Slide indicator, content fade/slide
81
+
- **Carousel/slider**: Smooth transforms, snap points, momentum
82
+
- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators
83
+
84
+
### Feedback & Guidance
85
+
- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights
86
+
- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning
87
+
- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation
88
+
- **Focus flow**: Highlight path through form or workflow
89
+
90
+
### Delight Moments
91
+
- **Empty states**: Subtle floating animations on illustrations
92
+
- **Completed actions**: Confetti, check mark flourish, success celebrations
93
+
- **Easter eggs**: Hidden interactions for discovery
94
+
- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches
95
+
96
+
## Technical Implementation
97
+
98
+
Use appropriate techniques for each animation:
99
+
100
+
### Timing & Easing
101
+
102
+
**Durations by purpose:**
103
+
- **100-150ms**: Instant feedback (button press, toggle)
104
+
- **200-300ms**: State changes (hover, menu open)
105
+
- **300-500ms**: Layout changes (accordion, modal)
106
+
- **500-800ms**: Entrance animations (page load)
107
+
108
+
**Easing curves (use these, not CSS defaults):**
109
+
```css
110
+
/* Recommended - natural deceleration */
111
+
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */
112
+
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* Slightly snappier */
113
+
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Confident, decisive */
114
+
115
+
/* AVOID - feel dated and tacky */
116
+
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
117
+
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
118
+
```
119
+
120
+
**Exit animations are faster than entrances.** Use ~75% of enter duration.
121
+
122
+
### CSS Animations
123
+
```css
124
+
/* Prefer for simple, declarative animations */
125
+
- transitions for state changes
126
+
- @keyframes for complex sequences
127
+
- transform + opacity only (GPU-accelerated)
128
+
```
129
+
130
+
### JavaScript Animation
131
+
```javascript
132
+
/* Use for complex, interactive animations */
133
+
- Web Animations API for programmatic control
134
+
- Framer Motion for React
135
+
- GSAP for complex sequences
136
+
```
137
+
138
+
### Performance
139
+
- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties
140
+
- **will-change**: Add sparingly for known expensive animations
141
+
- **Reduce paint**: Minimize repaints, use `contain` where appropriate
142
+
- **Monitor FPS**: Ensure 60fps on target devices
143
+
144
+
### Accessibility
145
+
```css
146
+
@media (prefers-reduced-motion: reduce) {
147
+
* {
148
+
animation-duration: 0.01ms !important;
149
+
animation-iteration-count: 1 !important;
150
+
transition-duration: 0.01ms !important;
151
+
}
152
+
}
153
+
```
154
+
155
+
**NEVER**:
156
+
- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself
157
+
- Animate layout properties (width, height, top, left)—use transform instead
158
+
- Use durations over 500ms for feedback—it feels laggy
159
+
- Animate without purpose—every animation needs a reason
160
+
- Ignore `prefers-reduced-motion`—this is an accessibility violation
161
+
- Animate everything—animation fatigue makes interfaces feel exhausting
162
+
- Block interaction during animations unless intentional
163
+
164
+
## Verify Quality
165
+
166
+
Test animations thoroughly:
167
+
168
+
- **Smooth at 60fps**: No jank on target devices
169
+
- **Feels natural**: Easing curves feel organic, not robotic
170
+
- **Appropriate timing**: Not too fast (jarring) or too slow (laggy)
171
+
- **Reduced motion works**: Animations disabled or simplified appropriately
172
+
- **Doesn't block**: Users can interact during/after animations
173
+
- **Adds value**: Makes interface clearer or more delightful
174
+
175
+
Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.
+148
.agents/skills/audit/SKILL.md
+148
.agents/skills/audit/SKILL.md
···
1
+
---
2
+
name: audit
3
+
description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[area (feature, page, component...)]"
7
+
---
8
+
9
+
## MANDATORY PREPARATION
10
+
11
+
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
12
+
13
+
---
14
+
15
+
Run systematic **technical** quality checks and generate a comprehensive report. Don't fix issues — document them for other commands to address.
16
+
17
+
This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation.
18
+
19
+
## Diagnostic Scan
20
+
21
+
Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below.
22
+
23
+
### 1. Accessibility (A11y)
24
+
25
+
**Check for**:
26
+
- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
27
+
- **Missing ARIA**: Interactive elements without proper roles, labels, or states
28
+
- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps
29
+
- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons
30
+
- **Alt text**: Missing or poor image descriptions
31
+
- **Form issues**: Inputs without labels, poor error messaging, missing required indicators
32
+
33
+
**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA)
34
+
35
+
### 2. Performance
36
+
37
+
**Check for**:
38
+
- **Layout thrashing**: Reading/writing layout properties in loops
39
+
- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity
40
+
- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change
41
+
- **Bundle size**: Unnecessary imports, unused dependencies
42
+
- **Render performance**: Unnecessary re-renders, missing memoization
43
+
44
+
**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized)
45
+
46
+
### 3. Theming
47
+
48
+
**Check for**:
49
+
- **Hard-coded colors**: Colors not using design tokens
50
+
- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme
51
+
- **Inconsistent tokens**: Using wrong tokens, mixing token types
52
+
- **Theme switching issues**: Values that don't update on theme change
53
+
54
+
**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly)
55
+
56
+
### 4. Responsive Design
57
+
58
+
**Check for**:
59
+
- **Fixed widths**: Hard-coded widths that break on mobile
60
+
- **Touch targets**: Interactive elements < 44x44px
61
+
- **Horizontal scroll**: Content overflow on narrow viewports
62
+
- **Text scaling**: Layouts that break when text size increases
63
+
- **Missing breakpoints**: No mobile/tablet variants
64
+
65
+
**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets)
66
+
67
+
### 5. Anti-Patterns (CRITICAL)
68
+
69
+
Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy).
70
+
71
+
**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design)
72
+
73
+
## Generate Report
74
+
75
+
### Audit Health Score
76
+
77
+
| # | Dimension | Score | Key Finding |
78
+
|---|-----------|-------|-------------|
79
+
| 1 | Accessibility | ? | [most critical a11y issue or "--"] |
80
+
| 2 | Performance | ? | |
81
+
| 3 | Responsive Design | ? | |
82
+
| 4 | Theming | ? | |
83
+
| 5 | Anti-Patterns | ? | |
84
+
| **Total** | | **??/20** | **[Rating band]** |
85
+
86
+
**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues)
87
+
88
+
### Anti-Patterns Verdict
89
+
**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest.
90
+
91
+
### Executive Summary
92
+
- Audit Health Score: **??/20** ([rating band])
93
+
- Total issues found (count by severity: P0/P1/P2/P3)
94
+
- Top 3-5 critical issues
95
+
- Recommended next steps
96
+
97
+
### Detailed Findings by Severity
98
+
99
+
Tag every issue with **P0-P3 severity**:
100
+
- **P0 Blocking**: Prevents task completion — fix immediately
101
+
- **P1 Major**: Significant difficulty or WCAG AA violation — fix before release
102
+
- **P2 Minor**: Annoyance, workaround exists — fix in next pass
103
+
- **P3 Polish**: Nice-to-fix, no real user impact — fix if time permits
104
+
105
+
For each issue, document:
106
+
- **[P?] Issue name**
107
+
- **Location**: Component, file, line
108
+
- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern
109
+
- **Impact**: How it affects users
110
+
- **WCAG/Standard**: Which standard it violates (if applicable)
111
+
- **Recommendation**: How to fix it
112
+
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive)
113
+
114
+
### Patterns & Systemic Issues
115
+
116
+
Identify recurring problems that indicate systemic gaps rather than one-off mistakes:
117
+
- "Hard-coded colors appear in 15+ components, should use design tokens"
118
+
- "Touch targets consistently too small (<44px) throughout mobile experience"
119
+
120
+
### Positive Findings
121
+
122
+
Note what's working well — good practices to maintain and replicate.
123
+
124
+
## Recommended Actions
125
+
126
+
List recommended commands in priority order (P0 first, then P1, then P2):
127
+
128
+
1. **[P?] `/command-name`** — Brief description (specific context from audit findings)
129
+
2. **[P?] `/command-name`** — Brief description (specific context)
130
+
131
+
**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
132
+
133
+
After presenting the summary, tell the user:
134
+
135
+
> You can ask me to run these one at a time, all at once, or in any order you prefer.
136
+
>
137
+
> Re-run `/audit` after fixes to see your score improve.
138
+
139
+
**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters.
140
+
141
+
**NEVER**:
142
+
- Report issues without explaining impact (why does this matter?)
143
+
- Provide generic recommendations (be specific and actionable)
144
+
- Skip positive findings (celebrate what works)
145
+
- Forget to prioritize (everything can't be P0)
146
+
- Report false positives without verification
147
+
148
+
Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement.
+117
.agents/skills/bolder/SKILL.md
+117
.agents/skills/bolder/SKILL.md
···
1
+
---
2
+
name: bolder
3
+
description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[target]"
7
+
---
8
+
9
+
Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.
10
+
11
+
## MANDATORY PREPARATION
12
+
13
+
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
14
+
15
+
---
16
+
17
+
## Assess Current State
18
+
19
+
Analyze what makes the design feel too safe or boring:
20
+
21
+
1. **Identify weakness sources**:
22
+
- **Generic choices**: System fonts, basic colors, standard layouts
23
+
- **Timid scale**: Everything is medium-sized with no drama
24
+
- **Low contrast**: Everything has similar visual weight
25
+
- **Static**: No motion, no energy, no life
26
+
- **Predictable**: Standard patterns with no surprises
27
+
- **Flat hierarchy**: Nothing stands out or commands attention
28
+
29
+
2. **Understand the context**:
30
+
- What's the brand personality? (How far can we push?)
31
+
- What's the purpose? (Marketing can be bolder than financial dashboards)
32
+
- Who's the audience? (What will resonate?)
33
+
- What are the constraints? (Brand guidelines, accessibility, performance)
34
+
35
+
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
36
+
37
+
**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos.
38
+
39
+
**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects."
40
+
41
+
## Plan Amplification
42
+
43
+
Create a strategy to increase impact while maintaining coherence:
44
+
45
+
- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing)
46
+
- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane.
47
+
- **Risk budget**: How experimental can we be? Push boundaries within constraints.
48
+
- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast)
49
+
50
+
**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration.
51
+
52
+
## Amplify the Design
53
+
54
+
Systematically increase impact across these dimensions:
55
+
56
+
### Typography Amplification
57
+
- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration)
58
+
- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x)
59
+
- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400
60
+
- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default)
61
+
62
+
### Color Intensification
63
+
- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon)
64
+
- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop
65
+
- **Dominant color strategy**: Let one bold color own 60% of the design
66
+
- **Sharp accents**: High-contrast accent colors that pop
67
+
- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette
68
+
- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue)
69
+
70
+
### Spatial Drama
71
+
- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings
72
+
- **Break the grid**: Let hero elements escape containers and cross boundaries
73
+
- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry
74
+
- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px)
75
+
- **Overlap**: Layer elements intentionally for depth
76
+
77
+
### Visual Effects
78
+
- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles)
79
+
- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue)
80
+
- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop)
81
+
- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side)
82
+
- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand
83
+
84
+
### Motion & Animation
85
+
- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays
86
+
- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences
87
+
- **Micro-interactions**: Satisfying hover effects, click feedback, state changes
88
+
- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect)
89
+
90
+
### Composition Boldness
91
+
- **Hero moments**: Create clear focal points with dramatic treatment
92
+
- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements
93
+
- **Full-bleed elements**: Use full viewport width/height for impact
94
+
- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits
95
+
96
+
**NEVER**:
97
+
- Add effects randomly without purpose (chaos ≠ bold)
98
+
- Sacrifice readability for aesthetics (body text must be readable)
99
+
- Make everything bold (then nothing is bold - need contrast)
100
+
- Ignore accessibility (bold design must still meet WCAG standards)
101
+
- Overwhelm with motion (animation fatigue is real)
102
+
- Copy trendy aesthetics blindly (bold means distinctive, not derivative)
103
+
104
+
## Verify Quality
105
+
106
+
Ensure amplification maintains usability and coherence:
107
+
108
+
- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over.
109
+
- **Still functional**: Can users accomplish tasks without distraction?
110
+
- **Coherent**: Does everything feel intentional and unified?
111
+
- **Memorable**: Will users remember this experience?
112
+
- **Performant**: Do all these effects run smoothly?
113
+
- **Accessible**: Does it still meet accessibility standards?
114
+
115
+
**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects."
116
+
117
+
Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable.
+183
.agents/skills/clarify/SKILL.md
+183
.agents/skills/clarify/SKILL.md
···
1
+
---
2
+
name: clarify
3
+
description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[target]"
7
+
---
8
+
9
+
Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use.
10
+
11
+
## MANDATORY PREPARATION
12
+
13
+
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: audience technical level and users' mental state in context.
14
+
15
+
---
16
+
17
+
## Assess Current Copy
18
+
19
+
Identify what makes the text unclear or ineffective:
20
+
21
+
1. **Find clarity problems**:
22
+
- **Jargon**: Technical terms users won't understand
23
+
- **Ambiguity**: Multiple interpretations possible
24
+
- **Passive voice**: "Your file has been uploaded" vs "We uploaded your file"
25
+
- **Length**: Too wordy or too terse
26
+
- **Assumptions**: Assuming user knowledge they don't have
27
+
- **Missing context**: Users don't know what to do or why
28
+
- **Tone mismatch**: Too formal, too casual, or inappropriate for situation
29
+
30
+
2. **Understand the context**:
31
+
- Who's the audience? (Technical? General? First-time users?)
32
+
- What's the user's mental state? (Stressed during error? Confident during success?)
33
+
- What's the action? (What do we want users to do?)
34
+
- What's the constraint? (Character limits? Space limitations?)
35
+
36
+
**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets.
37
+
38
+
## Plan Copy Improvements
39
+
40
+
Create a strategy for clearer communication:
41
+
42
+
- **Primary message**: What's the ONE thing users need to know?
43
+
- **Action needed**: What should users do next (if anything)?
44
+
- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?)
45
+
- **Constraints**: Length limits, brand voice, localization considerations
46
+
47
+
**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words.
48
+
49
+
## Improve Copy Systematically
50
+
51
+
Refine text across these common areas:
52
+
53
+
### Error Messages
54
+
**Bad**: "Error 403: Forbidden"
55
+
**Good**: "You don't have permission to view this page. Contact your admin for access."
56
+
57
+
**Bad**: "Invalid input"
58
+
**Good**: "Email addresses need an @ symbol. Try: name@example.com"
59
+
60
+
**Principles**:
61
+
- Explain what went wrong in plain language
62
+
- Suggest how to fix it
63
+
- Don't blame the user
64
+
- Include examples when helpful
65
+
- Link to help/support if applicable
66
+
67
+
### Form Labels & Instructions
68
+
**Bad**: "DOB (MM/DD/YYYY)"
69
+
**Good**: "Date of birth" (with placeholder showing format)
70
+
71
+
**Bad**: "Enter value here"
72
+
**Good**: "Your email address" or "Company name"
73
+
74
+
**Principles**:
75
+
- Use clear, specific labels (not generic placeholders)
76
+
- Show format expectations with examples
77
+
- Explain why you're asking (when not obvious)
78
+
- Put instructions before the field, not after
79
+
- Keep required field indicators clear
80
+
81
+
### Button & CTA Text
82
+
**Bad**: "Click here" | "Submit" | "OK"
83
+
**Good**: "Create account" | "Save changes" | "Got it, thanks"
84
+
85
+
**Principles**:
86
+
- Describe the action specifically
87
+
- Use active voice (verb + noun)
88
+
- Match user's mental model
89
+
- Be specific ("Save" is better than "OK")
90
+
91
+
### Help Text & Tooltips
92
+
**Bad**: "This is the username field"
93
+
**Good**: "Choose a username. You can change this later in Settings."
94
+
95
+
**Principles**:
96
+
- Add value (don't just repeat the label)
97
+
- Answer the implicit question ("What is this?" or "Why do you need this?")
98
+
- Keep it brief but complete
99
+
- Link to detailed docs if needed
100
+
101
+
### Empty States
102
+
**Bad**: "No items"
103
+
**Good**: "No projects yet. Create your first project to get started."
104
+
105
+
**Principles**:
106
+
- Explain why it's empty (if not obvious)
107
+
- Show next action clearly
108
+
- Make it welcoming, not dead-end
109
+
110
+
### Success Messages
111
+
**Bad**: "Success"
112
+
**Good**: "Settings saved! Your changes will take effect immediately."
113
+
114
+
**Principles**:
115
+
- Confirm what happened
116
+
- Explain what happens next (if relevant)
117
+
- Be brief but complete
118
+
- Match the user's emotional moment (celebrate big wins)
119
+
120
+
### Loading States
121
+
**Bad**: "Loading..." (for 30+ seconds)
122
+
**Good**: "Analyzing your data... this usually takes 30-60 seconds"
123
+
124
+
**Principles**:
125
+
- Set expectations (how long?)
126
+
- Explain what's happening (when it's not obvious)
127
+
- Show progress when possible
128
+
- Offer escape hatch if appropriate ("Cancel")
129
+
130
+
### Confirmation Dialogs
131
+
**Bad**: "Are you sure?"
132
+
**Good**: "Delete 'Project Alpha'? This can't be undone."
133
+
134
+
**Principles**:
135
+
- State the specific action
136
+
- Explain consequences (especially for destructive actions)
137
+
- Use clear button labels ("Delete project" not "Yes")
138
+
- Don't overuse confirmations (only for risky actions)
139
+
140
+
### Navigation & Wayfinding
141
+
**Bad**: Generic labels like "Items" | "Things" | "Stuff"
142
+
**Good**: Specific labels like "Your projects" | "Team members" | "Settings"
143
+
144
+
**Principles**:
145
+
- Be specific and descriptive
146
+
- Use language users understand (not internal jargon)
147
+
- Make hierarchy clear
148
+
- Consider information scent (breadcrumbs, current location)
149
+
150
+
## Apply Clarity Principles
151
+
152
+
Every piece of copy should follow these rules:
153
+
154
+
1. **Be specific**: "Enter email" not "Enter value"
155
+
2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity)
156
+
3. **Be active**: "Save changes" not "Changes will be saved"
157
+
4. **Be human**: "Oops, something went wrong" not "System error encountered"
158
+
5. **Be helpful**: Tell users what to do, not just what happened
159
+
6. **Be consistent**: Use same terms throughout (don't vary for variety)
160
+
161
+
**NEVER**:
162
+
- Use jargon without explanation
163
+
- Blame users ("You made an error" → "This field is required")
164
+
- Be vague ("Something went wrong" without explanation)
165
+
- Use passive voice unnecessarily
166
+
- Write overly long explanations (be concise)
167
+
- Use humor for errors (be empathetic instead)
168
+
- Assume technical knowledge
169
+
- Vary terminology (pick one term and stick with it)
170
+
- Repeat information (headers restating intros, redundant explanations)
171
+
- Use placeholders as the only labels (they disappear when users type)
172
+
173
+
## Verify Improvements
174
+
175
+
Test that copy improvements work:
176
+
177
+
- **Comprehension**: Can users understand without context?
178
+
- **Actionability**: Do users know what to do next?
179
+
- **Brevity**: Is it as short as possible while remaining clear?
180
+
- **Consistency**: Does it match terminology elsewhere?
181
+
- **Tone**: Is it appropriate for the situation?
182
+
183
+
Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human.
+143
.agents/skills/colorize/SKILL.md
+143
.agents/skills/colorize/SKILL.md
···
1
+
---
2
+
name: colorize
3
+
description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[target]"
7
+
---
8
+
9
+
Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.
10
+
11
+
## MANDATORY PREPARATION
12
+
13
+
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors.
14
+
15
+
---
16
+
17
+
## Assess Color Opportunity
18
+
19
+
Analyze the current state and identify opportunities:
20
+
21
+
1. **Understand current state**:
22
+
- **Color absence**: Pure grayscale? Limited neutrals? One timid accent?
23
+
- **Missed opportunities**: Where could color add meaning, hierarchy, or delight?
24
+
- **Context**: What's appropriate for this domain and audience?
25
+
- **Brand**: Are there existing brand colors we should use?
26
+
27
+
2. **Identify where color adds value**:
28
+
- **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue)
29
+
- **Hierarchy**: Drawing attention to important elements
30
+
- **Categorization**: Different sections, types, or states
31
+
- **Emotional tone**: Warmth, energy, trust, creativity
32
+
- **Wayfinding**: Helping users navigate and understand structure
33
+
- **Delight**: Moments of visual interest and personality
34
+
35
+
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
36
+
37
+
**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.
38
+
39
+
## Plan Color Strategy
40
+
41
+
Create a purposeful color introduction plan:
42
+
43
+
- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
44
+
- **Dominant color**: Which color owns 60% of colored elements?
45
+
- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%)
46
+
- **Application strategy**: Where does each color appear and why?
47
+
48
+
**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
49
+
50
+
## Introduce Color Strategically
51
+
52
+
Add color systematically across these dimensions:
53
+
54
+
### Semantic Color
55
+
- **State indicators**:
56
+
- Success: Green tones (emerald, forest, mint)
57
+
- Error: Red/pink tones (rose, crimson, coral)
58
+
- Warning: Orange/amber tones
59
+
- Info: Blue tones (sky, ocean, indigo)
60
+
- Neutral: Gray/slate for inactive states
61
+
62
+
- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.)
63
+
- **Progress indicators**: Colored bars, rings, or charts showing completion or health
64
+
65
+
### Accent Color Application
66
+
- **Primary actions**: Color the most important buttons/CTAs
67
+
- **Links**: Add color to clickable text (maintain accessibility)
68
+
- **Icons**: Colorize key icons for recognition and personality
69
+
- **Headers/titles**: Add color to section headers or key labels
70
+
- **Hover states**: Introduce color on interaction
71
+
72
+
### Background & Surfaces
73
+
- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`)
74
+
- **Colored sections**: Use subtle background colors to separate areas
75
+
- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue)
76
+
- **Cards & surfaces**: Tint cards or surfaces slightly for warmth
77
+
78
+
**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales.
79
+
80
+
### Data Visualization
81
+
- **Charts & graphs**: Use color to encode categories or values
82
+
- **Heatmaps**: Color intensity shows density or importance
83
+
- **Comparison**: Color coding for different datasets or timeframes
84
+
85
+
### Borders & Accents
86
+
- **Accent borders**: Add colored left/top borders to cards or sections
87
+
- **Underlines**: Color underlines for emphasis or active states
88
+
- **Dividers**: Subtle colored dividers instead of gray lines
89
+
- **Focus rings**: Colored focus indicators matching brand
90
+
91
+
### Typography Color
92
+
- **Colored headings**: Use brand colors for section headings (maintain contrast)
93
+
- **Highlight text**: Color for emphasis or categories
94
+
- **Labels & tags**: Small colored labels for metadata or categories
95
+
96
+
### Decorative Elements
97
+
- **Illustrations**: Add colored illustrations or icons
98
+
- **Shapes**: Geometric shapes in brand colors as background elements
99
+
- **Gradients**: Colorful gradient overlays or mesh backgrounds
100
+
- **Blobs/organic shapes**: Soft colored shapes for visual interest
101
+
102
+
## Balance & Refinement
103
+
104
+
Ensure color addition improves rather than overwhelms:
105
+
106
+
### Maintain Hierarchy
107
+
- **Dominant color** (60%): Primary brand color or most used accent
108
+
- **Secondary color** (30%): Supporting color for variety
109
+
- **Accent color** (10%): High contrast for key moments
110
+
- **Neutrals** (remaining): Gray/black/white for structure
111
+
112
+
### Accessibility
113
+
- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
114
+
- **Don't rely on color alone**: Use icons, labels, or patterns alongside color
115
+
- **Test for color blindness**: Verify red/green combinations work for all users
116
+
117
+
### Cohesion
118
+
- **Consistent palette**: Use colors from defined palette, not arbitrary choices
119
+
- **Systematic application**: Same color meanings throughout (green always = success)
120
+
- **Temperature consistency**: Warm palette stays warm, cool stays cool
121
+
122
+
**NEVER**:
123
+
- Use every color in the rainbow (choose 2-4 colors beyond neutrals)
124
+
- Apply color randomly without semantic meaning
125
+
- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead
126
+
- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication
127
+
- Use pure black (`#000`) or pure white (`#fff`) for large areas
128
+
- Violate WCAG contrast requirements
129
+
- Use color as the only indicator (accessibility issue)
130
+
- Make everything colorful (defeats the purpose)
131
+
- Default to purple-blue gradients (AI slop aesthetic)
132
+
133
+
## Verify Color Addition
134
+
135
+
Test that colorization improves the experience:
136
+
137
+
- **Better hierarchy**: Does color guide attention appropriately?
138
+
- **Clearer meaning**: Does color help users understand states/categories?
139
+
- **More engaging**: Does the interface feel warmer and more inviting?
140
+
- **Still accessible**: Do all color combinations meet WCAG standards?
141
+
- **Not overwhelming**: Is color balanced and purposeful?
142
+
143
+
Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional.
+304
.agents/skills/delight/SKILL.md
+304
.agents/skills/delight/SKILL.md
···
1
+
---
2
+
name: delight
3
+
description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[target]"
7
+
---
8
+
9
+
Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
10
+
11
+
## MANDATORY PREPARATION
12
+
13
+
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
14
+
15
+
---
16
+
17
+
## Assess Delight Opportunities
18
+
19
+
Identify where delight would enhance (not distract from) the experience:
20
+
21
+
1. **Find natural delight moments**:
22
+
- **Success states**: Completed actions (save, send, publish)
23
+
- **Empty states**: First-time experiences, onboarding
24
+
- **Loading states**: Waiting periods that could be entertaining
25
+
- **Achievements**: Milestones, streaks, completions
26
+
- **Interactions**: Hover states, clicks, drags
27
+
- **Errors**: Softening frustrating moments
28
+
- **Easter eggs**: Hidden discoveries for curious users
29
+
30
+
2. **Understand the context**:
31
+
- What's the brand personality? (Playful? Professional? Quirky? Elegant?)
32
+
- Who's the audience? (Tech-savvy? Creative? Corporate?)
33
+
- What's the emotional context? (Accomplishment? Exploration? Frustration?)
34
+
- What's appropriate? (Banking app ≠ gaming app)
35
+
36
+
3. **Define delight strategy**:
37
+
- **Subtle sophistication**: Refined micro-interactions (luxury brands)
38
+
- **Playful personality**: Whimsical illustrations and copy (consumer apps)
39
+
- **Helpful surprises**: Anticipating needs before users ask (productivity tools)
40
+
- **Sensory richness**: Satisfying sounds, smooth animations (creative tools)
41
+
42
+
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
43
+
44
+
**CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
45
+
46
+
## Delight Principles
47
+
48
+
Follow these guidelines:
49
+
50
+
### Delight Amplifies, Never Blocks
51
+
- Delight moments should be quick (< 1 second)
52
+
- Never delay core functionality for delight
53
+
- Make delight skippable or subtle
54
+
- Respect user's time and task focus
55
+
56
+
### Surprise and Discovery
57
+
- Hide delightful details for users to discover
58
+
- Reward exploration and curiosity
59
+
- Don't announce every delight moment
60
+
- Let users share discoveries with others
61
+
62
+
### Appropriate to Context
63
+
- Match delight to emotional moment (celebrate success, empathize with errors)
64
+
- Respect the user's state (don't be playful during critical errors)
65
+
- Match brand personality and audience expectations
66
+
- Cultural sensitivity (what's delightful varies by culture)
67
+
68
+
### Compound Over Time
69
+
- Delight should remain fresh with repeated use
70
+
- Vary responses (not same animation every time)
71
+
- Reveal deeper layers with continued use
72
+
- Build anticipation through patterns
73
+
74
+
## Delight Techniques
75
+
76
+
Add personality and joy through these methods:
77
+
78
+
### Micro-interactions & Animation
79
+
80
+
**Button delight**:
81
+
```css
82
+
/* Satisfying button press */
83
+
.button {
84
+
transition: transform 0.1s, box-shadow 0.1s;
85
+
}
86
+
.button:active {
87
+
transform: translateY(2px);
88
+
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
89
+
}
90
+
91
+
/* Ripple effect on click */
92
+
/* Smooth lift on hover */
93
+
.button:hover {
94
+
transform: translateY(-2px);
95
+
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
96
+
}
97
+
```
98
+
99
+
**Loading delight**:
100
+
- Playful loading animations (not just spinners)
101
+
- Personality in loading messages (write product-specific ones, not generic AI filler)
102
+
- Progress indication with encouraging messages
103
+
- Skeleton screens with subtle animations
104
+
105
+
**Success animations**:
106
+
- Checkmark draw animation
107
+
- Confetti burst for major achievements
108
+
- Gentle scale + fade for confirmation
109
+
- Satisfying sound effects (subtle)
110
+
111
+
**Hover surprises**:
112
+
- Icons that animate on hover
113
+
- Color shifts or glow effects
114
+
- Tooltip reveals with personality
115
+
- Cursor changes (custom cursors for branded experiences)
116
+
117
+
### Personality in Copy
118
+
119
+
**Playful error messages**:
120
+
```
121
+
"Error 404"
122
+
"This page is playing hide and seek. (And winning)"
123
+
124
+
"Connection failed"
125
+
"Looks like the internet took a coffee break. Want to retry?"
126
+
```
127
+
128
+
**Encouraging empty states**:
129
+
```
130
+
"No projects"
131
+
"Your canvas awaits. Create something amazing."
132
+
133
+
"No messages"
134
+
"Inbox zero! You're crushing it today."
135
+
```
136
+
137
+
**Playful labels & tooltips**:
138
+
```
139
+
"Delete"
140
+
"Send to void" (for playful brand)
141
+
142
+
"Help"
143
+
"Rescue me" (tooltip)
144
+
```
145
+
146
+
**IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
147
+
148
+
### Illustrations & Visual Personality
149
+
150
+
**Custom illustrations**:
151
+
- Empty state illustrations (not stock icons)
152
+
- Error state illustrations (friendly monsters, quirky characters)
153
+
- Loading state illustrations (animated characters)
154
+
- Success state illustrations (celebrations)
155
+
156
+
**Icon personality**:
157
+
- Custom icon set matching brand personality
158
+
- Animated icons (subtle motion on hover/click)
159
+
- Illustrative icons (more detailed than generic)
160
+
- Consistent style across all icons
161
+
162
+
**Background effects**:
163
+
- Subtle particle effects
164
+
- Gradient mesh backgrounds
165
+
- Geometric patterns
166
+
- Parallax depth
167
+
- Time-of-day themes (morning vs night)
168
+
169
+
### Satisfying Interactions
170
+
171
+
**Drag and drop delight**:
172
+
- Lift effect on drag (shadow, scale)
173
+
- Snap animation when dropped
174
+
- Satisfying placement sound
175
+
- Undo toast ("Dropped in wrong place? [Undo]")
176
+
177
+
**Toggle switches**:
178
+
- Smooth slide with spring physics
179
+
- Color transition
180
+
- Haptic feedback on mobile
181
+
- Optional sound effect
182
+
183
+
**Progress & achievements**:
184
+
- Streak counters with celebratory milestones
185
+
- Progress bars that "celebrate" at 100%
186
+
- Badge unlocks with animation
187
+
- Playful stats ("You're on fire! 5 days in a row")
188
+
189
+
**Form interactions**:
190
+
- Input fields that animate on focus
191
+
- Checkboxes with a satisfying scale pulse when checked
192
+
- Success state that celebrates valid input
193
+
- Auto-grow textareas
194
+
195
+
### Sound Design
196
+
197
+
**Subtle audio cues** (when appropriate):
198
+
- Notification sounds (distinctive but not annoying)
199
+
- Success sounds (satisfying "ding")
200
+
- Error sounds (empathetic, not harsh)
201
+
- Typing sounds for chat/messaging
202
+
- Ambient background audio (very subtle)
203
+
204
+
**IMPORTANT**:
205
+
- Respect system sound settings
206
+
- Provide mute option
207
+
- Keep volumes quiet (subtle cues, not alarms)
208
+
- Don't play on every interaction (sound fatigue is real)
209
+
210
+
### Easter Eggs & Hidden Delights
211
+
212
+
**Discovery rewards**:
213
+
- Konami code unlocks special theme
214
+
- Hidden keyboard shortcuts (Cmd+K for special features)
215
+
- Hover reveals on logos or illustrations
216
+
- Alt text jokes on images (for screen reader users too!)
217
+
- Console messages for developers ("Like what you see? We're hiring!")
218
+
219
+
**Seasonal touches**:
220
+
- Holiday themes (subtle, tasteful)
221
+
- Seasonal color shifts
222
+
- Weather-based variations
223
+
- Time-based changes (dark at night, light during day)
224
+
225
+
**Contextual personality**:
226
+
- Different messages based on time of day
227
+
- Responses to specific user actions
228
+
- Randomized variations (not same every time)
229
+
- Progressive reveals with continued use
230
+
231
+
### Loading & Waiting States
232
+
233
+
**Make waiting engaging**:
234
+
- Interesting loading messages that rotate
235
+
- Progress bars with personality
236
+
- Mini-games during long loads
237
+
- Fun facts or tips while waiting
238
+
- Countdown with encouraging messages
239
+
240
+
```
241
+
Loading messages — write ones specific to your product, not generic AI filler:
242
+
- "Crunching your latest numbers..."
243
+
- "Syncing with your team's changes..."
244
+
- "Preparing your dashboard..."
245
+
- "Checking for updates since yesterday..."
246
+
```
247
+
248
+
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy — instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
249
+
250
+
### Celebration Moments
251
+
252
+
**Success celebrations**:
253
+
- Confetti for major milestones
254
+
- Animated checkmarks for completions
255
+
- Progress bar celebrations at 100%
256
+
- "Achievement unlocked" style notifications
257
+
- Personalized messages ("You published your 10th article!")
258
+
259
+
**Milestone recognition**:
260
+
- First-time actions get special treatment
261
+
- Streak tracking and celebration
262
+
- Progress toward goals
263
+
- Anniversary celebrations
264
+
265
+
## Implementation Patterns
266
+
267
+
**Animation libraries**:
268
+
- Framer Motion (React)
269
+
- GSAP (universal)
270
+
- Lottie (After Effects animations)
271
+
- Canvas confetti (party effects)
272
+
273
+
**Sound libraries**:
274
+
- Howler.js (audio management)
275
+
- Use-sound (React hook)
276
+
277
+
**Physics libraries**:
278
+
- React Spring (spring physics)
279
+
- Popmotion (animation primitives)
280
+
281
+
**IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features.
282
+
283
+
**NEVER**:
284
+
- Delay core functionality for delight
285
+
- Force users through delightful moments (make skippable)
286
+
- Use delight to hide poor UX
287
+
- Overdo it (less is more)
288
+
- Ignore accessibility (animate responsibly, provide alternatives)
289
+
- Make every interaction delightful (special moments should be special)
290
+
- Sacrifice performance for delight
291
+
- Be inappropriate for context (read the room)
292
+
293
+
## Verify Delight Quality
294
+
295
+
Test that delight actually delights:
296
+
297
+
- **User reactions**: Do users smile? Share screenshots?
298
+
- **Doesn't annoy**: Still pleasant after 100th time?
299
+
- **Doesn't block**: Can users opt out or skip?
300
+
- **Performant**: No jank, no slowdown
301
+
- **Appropriate**: Matches brand and context
302
+
- **Accessible**: Works with reduced motion, screen readers
303
+
304
+
Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.
+122
.agents/skills/distill/SKILL.md
+122
.agents/skills/distill/SKILL.md
···
1
+
---
2
+
name: distill
3
+
description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[target]"
7
+
---
8
+
9
+
Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.
10
+
11
+
## MANDATORY PREPARATION
12
+
13
+
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
14
+
15
+
---
16
+
17
+
## Assess Current State
18
+
19
+
Analyze what makes the design feel complex or cluttered:
20
+
21
+
1. **Identify complexity sources**:
22
+
- **Too many elements**: Competing buttons, redundant information, visual clutter
23
+
- **Excessive variation**: Too many colors, fonts, sizes, styles without purpose
24
+
- **Information overload**: Everything visible at once, no progressive disclosure
25
+
- **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations
26
+
- **Confusing hierarchy**: Unclear what matters most
27
+
- **Feature creep**: Too many options, actions, or paths forward
28
+
29
+
2. **Find the essence**:
30
+
- What's the primary user goal? (There should be ONE)
31
+
- What's actually necessary vs nice-to-have?
32
+
- What can be removed, hidden, or combined?
33
+
- What's the 20% that delivers 80% of value?
34
+
35
+
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
36
+
37
+
**CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.
38
+
39
+
## Plan Simplification
40
+
41
+
Create a ruthless editing strategy:
42
+
43
+
- **Core purpose**: What's the ONE thing this should accomplish?
44
+
- **Essential elements**: What's truly necessary to achieve that purpose?
45
+
- **Progressive disclosure**: What can be hidden until needed?
46
+
- **Consolidation opportunities**: What can be combined or integrated?
47
+
48
+
**IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
49
+
50
+
## Simplify the Design
51
+
52
+
Systematically remove complexity across these dimensions:
53
+
54
+
### Information Architecture
55
+
- **Reduce scope**: Remove secondary actions, optional features, redundant information
56
+
- **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows)
57
+
- **Combine related actions**: Merge similar buttons, consolidate forms, group related content
58
+
- **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden
59
+
- **Remove redundancy**: If it's said elsewhere, don't repeat it here
60
+
61
+
### Visual Simplification
62
+
- **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
63
+
- **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
64
+
- **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
65
+
- **Flatten structure**: Reduce nesting, remove unnecessary containers—never nest cards inside cards
66
+
- **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead
67
+
- **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
68
+
69
+
### Layout Simplification
70
+
- **Linear flow**: Replace complex grids with simple vertical flow where possible
71
+
- **Remove sidebars**: Move secondary content inline or hide it
72
+
- **Full-width**: Use available space generously instead of complex multi-column layouts
73
+
- **Consistent alignment**: Pick left or center, stick with it
74
+
- **Generous white space**: Let content breathe, don't pack everything tight
75
+
76
+
### Interaction Simplification
77
+
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
78
+
- **Smart defaults**: Make common choices automatic, only ask when necessary
79
+
- **Inline actions**: Replace modal flows with inline editing where possible
80
+
- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
81
+
- **Clear CTAs**: ONE obvious next step, not five competing actions
82
+
83
+
### Content Simplification
84
+
- **Shorter copy**: Cut every sentence in half, then do it again
85
+
- **Active voice**: "Save changes" not "Changes will be saved"
86
+
- **Remove jargon**: Plain language always wins
87
+
- **Scannable structure**: Short paragraphs, bullet points, clear headings
88
+
- **Essential information only**: Remove marketing fluff, legalese, hedging
89
+
- **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once
90
+
91
+
### Code Simplification
92
+
- **Remove unused code**: Dead CSS, unused components, orphaned files
93
+
- **Flatten component trees**: Reduce nesting depth
94
+
- **Consolidate styles**: Merge similar styles, use utilities consistently
95
+
- **Reduce variants**: Does that component need 12 variations, or can 3 cover 90% of cases?
96
+
97
+
**NEVER**:
98
+
- Remove necessary functionality (simplicity ≠ feature-less)
99
+
- Sacrifice accessibility for simplicity (clear labels and ARIA still required)
100
+
- Make things so simple they're unclear (mystery ≠ minimalism)
101
+
- Remove information users need to make decisions
102
+
- Eliminate hierarchy completely (some things should stand out)
103
+
- Oversimplify complex domains (match complexity to actual task complexity)
104
+
105
+
## Verify Simplification
106
+
107
+
Ensure simplification improves usability:
108
+
109
+
- **Faster task completion**: Can users accomplish goals more quickly?
110
+
- **Reduced cognitive load**: Is it easier to understand what to do?
111
+
- **Still complete**: Are all necessary features still accessible?
112
+
- **Clearer hierarchy**: Is it obvious what matters most?
113
+
- **Better performance**: Does simpler design load faster?
114
+
115
+
## Document Removed Complexity
116
+
117
+
If you removed features or options:
118
+
- Document why they were removed
119
+
- Consider if they need alternative access points
120
+
- Note any user feedback to monitor
121
+
122
+
Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."
-177
.agents/skills/frontend-design/LICENSE.txt
-177
.agents/skills/frontend-design/LICENSE.txt
···
1
-
2
-
Apache License
3
-
Version 2.0, January 2004
4
-
http://www.apache.org/licenses/
5
-
6
-
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
7
-
8
-
1. Definitions.
9
-
10
-
"License" shall mean the terms and conditions for use, reproduction,
11
-
and distribution as defined by Sections 1 through 9 of this document.
12
-
13
-
"Licensor" shall mean the copyright owner or entity authorized by
14
-
the copyright owner that is granting the License.
15
-
16
-
"Legal Entity" shall mean the union of the acting entity and all
17
-
other entities that control, are controlled by, or are under common
18
-
control with that entity. For the purposes of this definition,
19
-
"control" means (i) the power, direct or indirect, to cause the
20
-
direction or management of such entity, whether by contract or
21
-
otherwise, or (ii) ownership of fifty percent (50%) or more of the
22
-
outstanding shares, or (iii) beneficial ownership of such entity.
23
-
24
-
"You" (or "Your") shall mean an individual or Legal Entity
25
-
exercising permissions granted by this License.
26
-
27
-
"Source" form shall mean the preferred form for making modifications,
28
-
including but not limited to software source code, documentation
29
-
source, and configuration files.
30
-
31
-
"Object" form shall mean any form resulting from mechanical
32
-
transformation or translation of a Source form, including but
33
-
not limited to compiled object code, generated documentation,
34
-
and conversions to other media types.
35
-
36
-
"Work" shall mean the work of authorship, whether in Source or
37
-
Object form, made available under the License, as indicated by a
38
-
copyright notice that is included in or attached to the work
39
-
(an example is provided in the Appendix below).
40
-
41
-
"Derivative Works" shall mean any work, whether in Source or Object
42
-
form, that is based on (or derived from) the Work and for which the
43
-
editorial revisions, annotations, elaborations, or other modifications
44
-
represent, as a whole, an original work of authorship. For the purposes
45
-
of this License, Derivative Works shall not include works that remain
46
-
separable from, or merely link (or bind by name) to the interfaces of,
47
-
the Work and Derivative Works thereof.
48
-
49
-
"Contribution" shall mean any work of authorship, including
50
-
the original version of the Work and any modifications or additions
51
-
to that Work or Derivative Works thereof, that is intentionally
52
-
submitted to Licensor for inclusion in the Work by the copyright owner
53
-
or by an individual or Legal Entity authorized to submit on behalf of
54
-
the copyright owner. For the purposes of this definition, "submitted"
55
-
means any form of electronic, verbal, or written communication sent
56
-
to the Licensor or its representatives, including but not limited to
57
-
communication on electronic mailing lists, source code control systems,
58
-
and issue tracking systems that are managed by, or on behalf of, the
59
-
Licensor for the purpose of discussing and improving the Work, but
60
-
excluding communication that is conspicuously marked or otherwise
61
-
designated in writing by the copyright owner as "Not a Contribution."
62
-
63
-
"Contributor" shall mean Licensor and any individual or Legal Entity
64
-
on behalf of whom a Contribution has been received by Licensor and
65
-
subsequently incorporated within the Work.
66
-
67
-
2. Grant of Copyright License. Subject to the terms and conditions of
68
-
this License, each Contributor hereby grants to You a perpetual,
69
-
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
70
-
copyright license to reproduce, prepare Derivative Works of,
71
-
publicly display, publicly perform, sublicense, and distribute the
72
-
Work and such Derivative Works in Source or Object form.
73
-
74
-
3. Grant of Patent License. Subject to the terms and conditions of
75
-
this License, each Contributor hereby grants to You a perpetual,
76
-
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
77
-
(except as stated in this section) patent license to make, have made,
78
-
use, offer to sell, sell, import, and otherwise transfer the Work,
79
-
where such license applies only to those patent claims licensable
80
-
by such Contributor that are necessarily infringed by their
81
-
Contribution(s) alone or by combination of their Contribution(s)
82
-
with the Work to which such Contribution(s) was submitted. If You
83
-
institute patent litigation against any entity (including a
84
-
cross-claim or counterclaim in a lawsuit) alleging that the Work
85
-
or a Contribution incorporated within the Work constitutes direct
86
-
or contributory patent infringement, then any patent licenses
87
-
granted to You under this License for that Work shall terminate
88
-
as of the date such litigation is filed.
89
-
90
-
4. Redistribution. You may reproduce and distribute copies of the
91
-
Work or Derivative Works thereof in any medium, with or without
92
-
modifications, and in Source or Object form, provided that You
93
-
meet the following conditions:
94
-
95
-
(a) You must give any other recipients of the Work or
96
-
Derivative Works a copy of this License; and
97
-
98
-
(b) You must cause any modified files to carry prominent notices
99
-
stating that You changed the files; and
100
-
101
-
(c) You must retain, in the Source form of any Derivative Works
102
-
that You distribute, all copyright, patent, trademark, and
103
-
attribution notices from the Source form of the Work,
104
-
excluding those notices that do not pertain to any part of
105
-
the Derivative Works; and
106
-
107
-
(d) If the Work includes a "NOTICE" text file as part of its
108
-
distribution, then any Derivative Works that You distribute must
109
-
include a readable copy of the attribution notices contained
110
-
within such NOTICE file, excluding those notices that do not
111
-
pertain to any part of the Derivative Works, in at least one
112
-
of the following places: within a NOTICE text file distributed
113
-
as part of the Derivative Works; within the Source form or
114
-
documentation, if provided along with the Derivative Works; or,
115
-
within a display generated by the Derivative Works, if and
116
-
wherever such third-party notices normally appear. The contents
117
-
of the NOTICE file are for informational purposes only and
118
-
do not modify the License. You may add Your own attribution
119
-
notices within Derivative Works that You distribute, alongside
120
-
or as an addendum to the NOTICE text from the Work, provided
121
-
that such additional attribution notices cannot be construed
122
-
as modifying the License.
123
-
124
-
You may add Your own copyright statement to Your modifications and
125
-
may provide additional or different license terms and conditions
126
-
for use, reproduction, or distribution of Your modifications, or
127
-
for any such Derivative Works as a whole, provided Your use,
128
-
reproduction, and distribution of the Work otherwise complies with
129
-
the conditions stated in this License.
130
-
131
-
5. Submission of Contributions. Unless You explicitly state otherwise,
132
-
any Contribution intentionally submitted for inclusion in the Work
133
-
by You to the Licensor shall be under the terms and conditions of
134
-
this License, without any additional terms or conditions.
135
-
Notwithstanding the above, nothing herein shall supersede or modify
136
-
the terms of any separate license agreement you may have executed
137
-
with Licensor regarding such Contributions.
138
-
139
-
6. Trademarks. This License does not grant permission to use the trade
140
-
names, trademarks, service marks, or product names of the Licensor,
141
-
except as required for reasonable and customary use in describing the
142
-
origin of the Work and reproducing the content of the NOTICE file.
143
-
144
-
7. Disclaimer of Warranty. Unless required by applicable law or
145
-
agreed to in writing, Licensor provides the Work (and each
146
-
Contributor provides its Contributions) on an "AS IS" BASIS,
147
-
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148
-
implied, including, without limitation, any warranties or conditions
149
-
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150
-
PARTICULAR PURPOSE. You are solely responsible for determining the
151
-
appropriateness of using or redistributing the Work and assume any
152
-
risks associated with Your exercise of permissions under this License.
153
-
154
-
8. Limitation of Liability. In no event and under no legal theory,
155
-
whether in tort (including negligence), contract, or otherwise,
156
-
unless required by applicable law (such as deliberate and grossly
157
-
negligent acts) or agreed to in writing, shall any Contributor be
158
-
liable to You for damages, including any direct, indirect, special,
159
-
incidental, or consequential damages of any character arising as a
160
-
result of this License or out of the use or inability to use the
161
-
Work (including but not limited to damages for loss of goodwill,
162
-
work stoppage, computer failure or malfunction, or any and all
163
-
other commercial damages or losses), even if such Contributor
164
-
has been advised of the possibility of such damages.
165
-
166
-
9. Accepting Warranty or Additional Liability. While redistributing
167
-
the Work or Derivative Works thereof, You may choose to offer,
168
-
and charge a fee for, acceptance of support, warranty, indemnity,
169
-
or other liability obligations and/or rights consistent with this
170
-
License. However, in accepting such obligations, You may act only
171
-
on Your own behalf and on Your sole responsibility, not on behalf
172
-
of any other Contributor, and only if You agree to indemnify,
173
-
defend, and hold each Contributor harmless for any liability
174
-
incurred by, or claims asserted against, such Contributor by reason
175
-
of your accepting any such warranty or additional liability.
176
-
177
-
END OF TERMS AND CONDITIONS
-45
.agents/skills/frontend-design/SKILL.md
-45
.agents/skills/frontend-design/SKILL.md
···
1
-
---
2
-
name: frontend-design
3
-
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
4
-
license: Complete terms in LICENSE.txt
5
-
---
6
-
7
-
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
8
-
9
-
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
10
-
11
-
## Design Thinking
12
-
13
-
Before coding, understand the context and commit to a BOLD aesthetic direction:
14
-
15
-
- **Purpose**: What problem does this interface solve? Who uses it?
16
-
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
17
-
- **Constraints**: Technical requirements (framework, performance, accessibility).
18
-
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
19
-
20
-
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
21
-
22
-
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
23
-
24
-
- Production-grade and functional
25
-
- Visually striking and memorable
26
-
- Cohesive with a clear aesthetic point-of-view
27
-
- Meticulously refined in every detail
28
-
29
-
## Frontend Aesthetics Guidelines
30
-
31
-
Focus on:
32
-
33
-
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
34
-
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
35
-
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
36
-
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
37
-
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
38
-
39
-
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
40
-
41
-
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
42
-
43
-
**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
44
-
45
-
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
+349
.agents/skills/impeccable/SKILL.md
+349
.agents/skills/impeccable/SKILL.md
···
1
+
---
2
+
name: impeccable
3
+
description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[craft|teach|extract]"
7
+
license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
8
+
---
9
+
10
+
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
11
+
12
+
## Context Gathering Protocol
13
+
14
+
Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work.
15
+
16
+
**Required context** (every design skill needs at minimum):
17
+
- **Target audience**: Who uses this product and in what context?
18
+
- **Use cases**: What jobs are they trying to get done?
19
+
- **Brand personality/tone**: How should the interface feel?
20
+
21
+
Individual skills may require additional context. Check the skill's preparation section for specifics.
22
+
23
+
**CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context.
24
+
25
+
**Gathering order:**
26
+
1. **Check current instructions (instant)**: If your loaded instructions already contain a **Design Context** section, proceed immediately.
27
+
2. **Check .impeccable.md (fast)**: If not in instructions, read `.impeccable.md` from the project root. If it exists and contains the required context, proceed.
28
+
3. **Run impeccable teach (REQUIRED)**: If neither source has context, you MUST run /impeccable teach NOW before doing anything else. Do NOT skip this step. Do NOT attempt to infer context from the codebase instead.
29
+
30
+
---
31
+
32
+
## Design Direction
33
+
34
+
Commit to a BOLD aesthetic direction:
35
+
- **Purpose**: What problem does this interface solve? Who uses it?
36
+
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
37
+
- **Constraints**: Technical requirements (framework, performance, accessibility).
38
+
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
39
+
40
+
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work. The key is intentionality, not intensity.
41
+
42
+
Then implement working code that is:
43
+
- Production-grade and functional
44
+
- Visually striking and memorable
45
+
- Cohesive with a clear aesthetic point-of-view
46
+
- Meticulously refined in every detail
47
+
48
+
## Frontend Aesthetics Guidelines
49
+
50
+
### Typography
51
+
→ *Consult [typography reference](reference/typography.md) for OpenType features, web font loading, and the deeper material on scales.*
52
+
53
+
Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font.
54
+
55
+
<typography_principles>
56
+
Always apply these — do not consult a reference, just do them:
57
+
58
+
- Use a modular type scale with fluid sizing (clamp) for headings on marketing/content pages. Use fixed `rem` scales for app UIs and dashboards (no major design system uses fluid type in product UI).
59
+
- Use fewer sizes with more contrast. A 5-step scale with at least a 1.25 ratio between steps creates clearer hierarchy than 8 sizes that are 1.1× apart.
60
+
- Line-height scales inversely with line length. Narrow columns want tighter leading, wide columns want more. For light text on dark backgrounds, ADD 0.05-0.1 to your normal line-height — light type reads as lighter weight and needs more breathing room.
61
+
- Cap line length at ~65-75ch. Body text wider than that is fatiguing.
62
+
</typography_principles>
63
+
64
+
<font_selection_procedure>
65
+
DO THIS BEFORE TYPING ANY FONT NAME.
66
+
67
+
The model's natural failure mode is "I was told not to use Inter, so I will pick my next favorite font, which becomes the new monoculture." Avoid this by performing the following procedure on every project, in order:
68
+
69
+
Step 1. Read the brief once. Write down 3 concrete words for the brand voice (e.g., "warm and mechanical and opinionated", "calm and clinical and careful", "fast and dense and unimpressed", "handmade and a little weird"). NOT "modern" or "elegant" — those are dead categories.
70
+
71
+
Step 2. List the 3 fonts you would normally reach for given those words. Write them down. They are most likely from this list:
72
+
73
+
<reflex_fonts_to_reject>
74
+
Fraunces
75
+
Newsreader
76
+
Lora
77
+
Crimson
78
+
Crimson Pro
79
+
Crimson Text
80
+
Playfair Display
81
+
Cormorant
82
+
Cormorant Garamond
83
+
Syne
84
+
IBM Plex Mono
85
+
IBM Plex Sans
86
+
IBM Plex Serif
87
+
Space Mono
88
+
Space Grotesk
89
+
Inter
90
+
DM Sans
91
+
DM Serif Display
92
+
DM Serif Text
93
+
Outfit
94
+
Plus Jakarta Sans
95
+
Instrument Sans
96
+
Instrument Serif
97
+
</reflex_fonts_to_reject>
98
+
99
+
Reject every font that appears in the reflex_fonts_to_reject list. They are your training-data defaults and they create monoculture across projects.
100
+
101
+
Step 3. Browse a font catalog with the 3 brand words in mind. Sources: Google Fonts, Pangram Pangram, Future Fonts, Adobe Fonts, ABC Dinamo, Klim Type Foundry, Velvetyne. Look for something that fits the brand as a *physical object* — a museum exhibit caption, a hand-painted shop sign, a 1970s mainframe terminal manual, a fabric label on the inside of a coat, a children's book printed on cheap newsprint. Reject the first thing that "looks designy" — that's the trained reflex too. Keep looking.
102
+
103
+
Step 4. Cross-check the result. The right font for an "elegant" brief is NOT necessarily a serif. The right font for a "technical" brief is NOT necessarily a sans-serif. The right font for a "warm" brief is NOT Fraunces. If your final pick lines up with your reflex pattern, go back to Step 3.
104
+
</font_selection_procedure>
105
+
106
+
<typography_rules>
107
+
DO use a modular type scale with fluid sizing (clamp) on headings.
108
+
DO vary font weights and sizes to create clear visual hierarchy.
109
+
DO vary your font choices across projects. If you used a serif display font on the last project, look for a sans, monospace, or display face on this one.
110
+
111
+
DO NOT use overused fonts like Inter, Roboto, Arial, Open Sans, or system defaults — but also do not simply switch to your second-favorite. Every font in the reflex_fonts_to_reject list above is banned. Look further.
112
+
DO NOT use monospace typography as lazy shorthand for "technical/developer" vibes.
113
+
DO NOT put large icons with rounded corners above every heading. They rarely add value and make sites look templated.
114
+
DO NOT use only one font family for the entire page. Pair a distinctive display font with a refined body font.
115
+
DO NOT use a flat type hierarchy where sizes are too close together. Aim for at least a 1.25 ratio between steps.
116
+
DO NOT set long body passages in uppercase. Reserve all-caps for short labels and headings.
117
+
</typography_rules>
118
+
119
+
### Color & Theme
120
+
→ *Consult [color reference](reference/color-and-contrast.md) for the deeper material on contrast, accessibility, and palette construction.*
121
+
122
+
Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
123
+
124
+
<color_principles>
125
+
Always apply these — do not consult a reference, just do them:
126
+
127
+
- Use OKLCH, not HSL. OKLCH is perceptually uniform: equal steps in lightness *look* equal, which HSL does not deliver. As you move toward white or black, REDUCE chroma — high chroma at extreme lightness looks garish. A light blue at 85% lightness wants ~0.08 chroma, not the 0.15 of your base color.
128
+
- Tint your neutrals toward your brand hue. Even a chroma of 0.005-0.01 is perceptible and creates subconscious cohesion between brand color and UI surfaces. The hue you tint toward should come from THIS brand, not from a "warm = friendly" or "cool = tech" formula. Pick the brand's actual hue first, then tint everything toward it.
129
+
- The 60-30-10 rule is about visual *weight*, not pixel count. 60% neutral / surface, 30% secondary text and borders, 10% accent. Accents work BECAUSE they're rare. Overuse kills their power.
130
+
</color_principles>
131
+
132
+
<theme_selection>
133
+
Theme (light vs dark) should be DERIVED from audience and viewing context, not picked from a default. Read the brief and ask: when is this product used, by whom, in what physical setting?
134
+
135
+
- A perp DEX consumed during fast trading sessions → dark
136
+
- A hospital portal consumed by anxious patients on phones late at night → light
137
+
- A children's reading app → light
138
+
- A vintage motorcycle forum where users sit in their garage at 9pm → dark
139
+
- An observability dashboard for SREs in a dark office → dark
140
+
- A wedding planning checklist for couples on a Sunday morning → light
141
+
- A music player app for headphone listening at night → dark
142
+
- A food magazine homepage browsed during a coffee break → light
143
+
144
+
Do not default everything to light "to play it safe." Do not default everything to dark "to look cool." Both defaults are the lazy reflex. The correct theme is the one the actual user wants in their actual context.
145
+
</theme_selection>
146
+
147
+
<color_rules>
148
+
DO use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes.
149
+
DO tint your neutrals toward your brand hue. Even a subtle hint creates subconscious cohesion.
150
+
151
+
DO NOT use gray text on colored backgrounds; it looks washed out. Use a shade of the background color instead.
152
+
DO NOT use pure black (#000) or pure white (#fff). Always tint; pure black/white never appears in nature.
153
+
DO NOT use the AI color palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds.
154
+
DO NOT use gradient text for impact — see <absolute_bans> below for the strict definition. Solid colors only for text.
155
+
DO NOT default to dark mode with glowing accents. It looks "cool" without requiring actual design decisions.
156
+
DO NOT default to light mode "to be safe" either. The point is to choose, not to retreat to a safe option.
157
+
</color_rules>
158
+
159
+
### Layout & Space
160
+
→ *Consult [spatial reference](reference/spatial-design.md) for the deeper material on grids, container queries, and optical adjustments.*
161
+
162
+
Create visual rhythm through varied spacing, not the same padding everywhere. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis.
163
+
164
+
<spatial_principles>
165
+
Always apply these — do not consult a reference, just do them:
166
+
167
+
- Use a 4pt spacing scale with semantic token names (`--space-sm`, `--space-md`), not pixel-named (`--spacing-8`). Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96. 8pt is too coarse — you'll often want 12px between two values.
168
+
- Use `gap` instead of margins for sibling spacing. It eliminates margin collapse and the cleanup hacks that come with it.
169
+
- Vary spacing for hierarchy. A heading with extra space above it reads as more important — make use of that. Don't apply the same padding everywhere.
170
+
- Self-adjusting grid pattern: `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` is the breakpoint-free responsive grid for card-style content.
171
+
- Container queries are for components, viewport queries are for page layout. A card in a sidebar should adapt to the sidebar's width, not the viewport's.
172
+
</spatial_principles>
173
+
174
+
<spatial_rules>
175
+
DO create visual rhythm through varied spacing: tight groupings, generous separations.
176
+
DO use fluid spacing with clamp() that breathes on larger screens.
177
+
DO use asymmetry and unexpected compositions; break the grid intentionally for emphasis.
178
+
179
+
DO NOT wrap everything in cards. Not everything needs a container.
180
+
DO NOT nest cards inside cards. Visual noise; flatten the hierarchy.
181
+
DO NOT use identical card grids (same-sized cards with icon + heading + text, repeated endlessly).
182
+
DO NOT use the hero metric layout template (big number, small label, supporting stats, gradient accent).
183
+
DO NOT center everything. Left-aligned text with asymmetric layouts feels more designed.
184
+
DO NOT use the same spacing everywhere. Without rhythm, layouts feel monotonous.
185
+
DO NOT let body text wrap beyond ~80 characters per line. Add a max-width like 65–75ch so the eye can track easily.
186
+
</spatial_rules>
187
+
188
+
### Visual Details
189
+
190
+
<absolute_bans>
191
+
These CSS patterns are NEVER acceptable. They are the most recognizable AI design tells. Match-and-refuse: if you find yourself about to write any of these, stop and rewrite the element with a different structure entirely.
192
+
193
+
BAN 1: Side-stripe borders on cards/list items/callouts/alerts
194
+
- PATTERN: `border-left:` or `border-right:` with width greater than 1px
195
+
- INCLUDES: hard-coded colors AND CSS variables
196
+
- FORBIDDEN: `border-left: 3px solid red`, `border-left: 4px solid #ff0000`, `border-left: 4px solid var(--color-warning)`, `border-left: 5px solid oklch(...)`, etc.
197
+
- WHY: this is the single most overused "design touch" in admin, dashboard, and medical UIs. It never looks intentional regardless of color, radius, opacity, or whether the variable name is "primary" or "warning" or "accent."
198
+
- REWRITE: use a different element structure entirely. Do not just swap to box-shadow inset. Reach for full borders, background tints, leading numbers/icons, or no visual indicator at all.
199
+
200
+
BAN 2: Gradient text
201
+
- PATTERN: `background-clip: text` (or `-webkit-background-clip: text`) combined with a gradient background
202
+
- FORBIDDEN: any combination that makes text fill come from a `linear-gradient`, `radial-gradient`, or `conic-gradient`
203
+
- WHY: gradient text is decorative rather than meaningful and is one of the top three AI design tells
204
+
- REWRITE: use a single solid color for text. If you want emphasis, use weight or size, not gradient fill.
205
+
</absolute_bans>
206
+
207
+
DO: Use intentional, purposeful decorative elements that reinforce brand.
208
+
DO NOT: Use border-left or border-right greater than 1px as a colored accent stripe on cards, list items, callouts, or alerts. See <absolute_bans> above for the strict CSS pattern.
209
+
DO NOT: Use glassmorphism everywhere (blur effects, glass cards, glow borders used decoratively rather than purposefully).
210
+
DO NOT: Use sparklines as decoration. Tiny charts that look sophisticated but convey nothing meaningful.
211
+
DO NOT: Use rounded rectangles with generic drop shadows. Safe, forgettable, could be any AI output.
212
+
DO NOT: Use modals unless there's truly no better alternative. Modals are lazy.
213
+
214
+
### Motion
215
+
→ *Consult [motion reference](reference/motion-design.md) for timing, easing, and reduced motion.*
216
+
217
+
Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
218
+
219
+
**DO**: Use motion to convey state changes: entrances, exits, feedback
220
+
**DO**: Use exponential easing (ease-out-quart/quint/expo) for natural deceleration
221
+
**DO**: For height animations, use grid-template-rows transitions instead of animating height directly
222
+
**DON'T**: Animate layout properties (width, height, padding, margin). Use transform and opacity only
223
+
**DON'T**: Use bounce or elastic easing. They feel dated and tacky; real objects decelerate smoothly
224
+
225
+
### Interaction
226
+
→ *Consult [interaction reference](reference/interaction-design.md) for forms, focus, and loading patterns.*
227
+
228
+
Make interactions feel fast. Use optimistic UI: update immediately, sync later.
229
+
230
+
**DO**: Use progressive disclosure. Start simple, reveal sophistication through interaction (basic options first, advanced behind expandable sections; hover states that reveal secondary actions)
231
+
**DO**: Design empty states that teach the interface, not just say "nothing here"
232
+
**DO**: Make every interactive surface feel intentional and responsive
233
+
**DON'T**: Repeat the same information (redundant headers, intros that restate the heading)
234
+
**DON'T**: Make every button primary. Use ghost buttons, text links, secondary styles; hierarchy matters
235
+
236
+
### Responsive
237
+
→ *Consult [responsive reference](reference/responsive-design.md) for mobile-first, fluid design, and container queries.*
238
+
239
+
**DO**: Use container queries (@container) for component-level responsiveness
240
+
**DO**: Adapt the interface for different contexts, not just shrink it
241
+
**DON'T**: Hide critical functionality on mobile. Adapt the interface, don't amputate it
242
+
243
+
### UX Writing
244
+
→ *Consult [ux-writing reference](reference/ux-writing.md) for labels, errors, and empty states.*
245
+
246
+
**DO**: Make every word earn its place
247
+
**DON'T**: Repeat information users can already see
248
+
249
+
---
250
+
251
+
## The AI Slop Test
252
+
253
+
**Critical quality check**: If you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
254
+
255
+
A distinctive interface should make someone ask "how was this made?" not "which AI made this?"
256
+
257
+
Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025.
258
+
259
+
---
260
+
261
+
## Implementation Principles
262
+
263
+
Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details.
264
+
265
+
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations.
266
+
267
+
Remember: the model is capable of extraordinary creative work. Don't hold back. Show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
268
+
269
+
---
270
+
271
+
## Craft Mode
272
+
273
+
If this skill is invoked with the argument "craft" (e.g., `/impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description.
274
+
275
+
---
276
+
277
+
## Teach Mode
278
+
279
+
If this skill is invoked with the argument "teach" (e.g., `/impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project.
280
+
281
+
### Step 1: Explore the Codebase
282
+
283
+
Before asking questions, thoroughly scan the project to discover what you can:
284
+
285
+
- **README and docs**: Project purpose, target audience, any stated goals
286
+
- **Package.json / config files**: Tech stack, dependencies, existing design libraries
287
+
- **Existing components**: Current design patterns, spacing, typography in use
288
+
- **Brand assets**: Logos, favicons, color values already defined
289
+
- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales
290
+
- **Any style guides or brand documentation**
291
+
292
+
Note what you've learned and what remains unclear.
293
+
294
+
### Step 2: Ask UX-Focused Questions
295
+
296
+
ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase:
297
+
298
+
#### Users & Purpose
299
+
- Who uses this? What's their context when using it?
300
+
- What job are they trying to get done?
301
+
- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.)
302
+
303
+
#### Brand & Personality
304
+
- How would you describe the brand personality in 3 words?
305
+
- Any reference sites or apps that capture the right feel? What specifically about them?
306
+
- What should this explicitly NOT look like? Any anti-references?
307
+
308
+
#### Aesthetic Preferences
309
+
- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.)
310
+
- Light mode, dark mode, or both?
311
+
- Any colors that must be used or avoided?
312
+
313
+
#### Accessibility & Inclusion
314
+
- Specific accessibility requirements? (WCAG level, known user needs)
315
+
- Considerations for reduced motion, color blindness, or other accommodations?
316
+
317
+
Skip questions where the answer is already clear from the codebase exploration.
318
+
319
+
### Step 3: Write Design Context
320
+
321
+
Synthesize your findings and the user's answers into a `## Design Context` section:
322
+
323
+
```markdown
324
+
## Design Context
325
+
326
+
### Users
327
+
[Who they are, their context, the job to be done]
328
+
329
+
### Brand Personality
330
+
[Voice, tone, 3-word personality, emotional goals]
331
+
332
+
### Aesthetic Direction
333
+
[Visual tone, references, anti-references, theme]
334
+
335
+
### Design Principles
336
+
[3-5 principles derived from the conversation that should guide all design decisions]
337
+
```
338
+
339
+
Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place.
340
+
341
+
Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to .github/copilot-instructions.md. If yes, append or update the section there as well.
342
+
343
+
Confirm completion and summarize the key design principles that will now guide all future work.
344
+
345
+
---
346
+
347
+
## Extract Mode
348
+
349
+
If this skill is invoked with the argument "extract" (e.g., `/impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target.
+105
.agents/skills/impeccable/reference/color-and-contrast.md
+105
.agents/skills/impeccable/reference/color-and-contrast.md
···
1
+
# Color & Contrast
2
+
3
+
## Color Spaces: Use OKLCH
4
+
5
+
**Stop using HSL.** Use OKLCH (or LCH) instead. It's perceptually uniform, meaning equal steps in lightness *look* equal—unlike HSL where 50% lightness in yellow looks bright while 50% in blue looks dark.
6
+
7
+
The OKLCH function takes three components: `oklch(lightness chroma hue)` where lightness is 0-100%, chroma is roughly 0-0.4, and hue is 0-360. To build a primary color and its lighter / darker variants, hold the chroma+hue roughly constant and vary the lightness — but **reduce chroma as you approach white or black**, because high chroma at extreme lightness looks garish.
8
+
9
+
The hue you pick is a brand decision and should not come from a default. Do not reach for blue (hue 250) or warm orange (hue 60) by reflex — those are the dominant AI-design defaults, not the right answer for any specific brand.
10
+
11
+
## Building Functional Palettes
12
+
13
+
### Tinted Neutrals
14
+
15
+
**Pure gray is dead.** A neutral with zero chroma feels lifeless next to a colored brand. Add a tiny chroma value (0.005-0.015) to all your neutrals, hued toward whatever your brand color is. The chroma is small enough not to read as "tinted" consciously, but it creates subconscious cohesion between brand color and UI surfaces.
16
+
17
+
The hue you tint toward should come from THIS project's brand, not from a "warm = friendly, cool = tech" formula. If your brand color is teal, your neutrals lean toward teal. If your brand color is amber, they lean toward amber. The point is cohesion with the SPECIFIC brand, not a stock palette.
18
+
19
+
**Avoid** the trap of always tinting toward warm orange or always tinting toward cool blue. Those are the two laziest defaults and they create their own monoculture across projects.
20
+
21
+
### Palette Structure
22
+
23
+
A complete system needs:
24
+
25
+
| Role | Purpose | Example |
26
+
|------|---------|---------|
27
+
| **Primary** | Brand, CTAs, key actions | 1 color, 3-5 shades |
28
+
| **Neutral** | Text, backgrounds, borders | 9-11 shade scale |
29
+
| **Semantic** | Success, error, warning, info | 4 colors, 2-3 shades each |
30
+
| **Surface** | Cards, modals, overlays | 2-3 elevation levels |
31
+
32
+
**Skip secondary/tertiary unless you need them.** Most apps work fine with one accent color. Adding more creates decision fatigue and visual noise.
33
+
34
+
### The 60-30-10 Rule (Applied Correctly)
35
+
36
+
This rule is about **visual weight**, not pixel count:
37
+
38
+
- **60%**: Neutral backgrounds, white space, base surfaces
39
+
- **30%**: Secondary colors—text, borders, inactive states
40
+
- **10%**: Accent—CTAs, highlights, focus states
41
+
42
+
The common mistake: using the accent color everywhere because it's "the brand color." Accent colors work *because* they're rare. Overuse kills their power.
43
+
44
+
## Contrast & Accessibility
45
+
46
+
### WCAG Requirements
47
+
48
+
| Content Type | AA Minimum | AAA Target |
49
+
|--------------|------------|------------|
50
+
| Body text | 4.5:1 | 7:1 |
51
+
| Large text (18px+ or 14px bold) | 3:1 | 4.5:1 |
52
+
| UI components, icons | 3:1 | 4.5:1 |
53
+
| Non-essential decorations | None | None |
54
+
55
+
**The gotcha**: Placeholder text still needs 4.5:1. That light gray placeholder you see everywhere? Usually fails WCAG.
56
+
57
+
### Dangerous Color Combinations
58
+
59
+
These commonly fail contrast or cause readability issues:
60
+
61
+
- Light gray text on white (the #1 accessibility fail)
62
+
- **Gray text on any colored background**—gray looks washed out and dead on color. Use a darker shade of the background color, or transparency
63
+
- Red text on green background (or vice versa)—8% of men can't distinguish these
64
+
- Blue text on red background (vibrates visually)
65
+
- Yellow text on white (almost always fails)
66
+
- Thin light text on images (unpredictable contrast)
67
+
68
+
### Never Use Pure Gray or Pure Black
69
+
70
+
Pure gray (`oklch(50% 0 0)`) and pure black (`#000`) don't exist in nature—real shadows and surfaces always have a color cast. Even a chroma of 0.005-0.01 is enough to feel natural without being obviously tinted. (See tinted neutrals example above.)
71
+
72
+
### Testing
73
+
74
+
Don't trust your eyes. Use tools:
75
+
76
+
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
77
+
- Browser DevTools → Rendering → Emulate vision deficiencies
78
+
- [Polypane](https://polypane.app/) for real-time testing
79
+
80
+
## Theming: Light & Dark Mode
81
+
82
+
### Dark Mode Is Not Inverted Light Mode
83
+
84
+
You can't just swap colors. Dark mode requires different design decisions:
85
+
86
+
| Light Mode | Dark Mode |
87
+
|------------|-----------|
88
+
| Shadows for depth | Lighter surfaces for depth (no shadows) |
89
+
| Dark text on light | Light text on dark (reduce font weight) |
90
+
| Vibrant accents | Desaturate accents slightly |
91
+
| White backgrounds | Never pure black—use dark gray (oklch 12-18%) |
92
+
93
+
In dark mode, depth comes from surface lightness, not shadow. Build a 3-step surface scale where higher elevations are lighter (e.g. 15% / 20% / 25% lightness). Use the SAME hue and chroma as your brand color (whatever it is for THIS project — do not reach for blue) and only vary the lightness. Reduce body text weight slightly (e.g. 350 instead of 400) because light text on dark reads as heavier than dark text on light.
94
+
95
+
### Token Hierarchy
96
+
97
+
Use two layers: primitive tokens (`--blue-500`) and semantic tokens (`--color-primary: var(--blue-500)`). For dark mode, only redefine the semantic layer—primitives stay the same.
98
+
99
+
## Alpha Is A Design Smell
100
+
101
+
Heavy use of transparency (rgba, hsla) usually means an incomplete palette. Alpha creates unpredictable contrast, performance overhead, and inconsistency. Define explicit overlay colors for each context instead. Exception: focus rings and interactive states where see-through is needed.
102
+
103
+
---
104
+
105
+
**Avoid**: Relying on color alone to convey information. Creating palettes without clear roles for each color. Using pure black (#000) for large areas. Skipping color blindness testing (8% of men affected).
+70
.agents/skills/impeccable/reference/craft.md
+70
.agents/skills/impeccable/reference/craft.md
···
1
+
# Craft Flow
2
+
3
+
Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful.
4
+
5
+
## Step 1: Shape the Design
6
+
7
+
Run /shape, passing along whatever feature description the user provided.
8
+
9
+
Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it.
10
+
11
+
If the user has already run /shape and has a confirmed design brief, skip this step and use the existing brief.
12
+
13
+
## Step 2: Load References
14
+
15
+
Based on the design brief's "Recommended References" section, consult the relevant impeccable reference files. At minimum, always consult:
16
+
17
+
- [spatial-design.md](spatial-design.md) for layout and spacing
18
+
- [typography.md](typography.md) for type hierarchy
19
+
20
+
Then add references based on the brief's needs:
21
+
- Complex interactions or forms? Consult [interaction-design.md](interaction-design.md)
22
+
- Animation or transitions? Consult [motion-design.md](motion-design.md)
23
+
- Color-heavy or themed? Consult [color-and-contrast.md](color-and-contrast.md)
24
+
- Responsive requirements? Consult [responsive-design.md](responsive-design.md)
25
+
- Heavy on copy, labels, or errors? Consult [ux-writing.md](ux-writing.md)
26
+
27
+
## Step 3: Build
28
+
29
+
Implement the feature following the design brief. Work in this order:
30
+
31
+
1. **Structure first**: HTML/semantic structure for the primary state. No styling yet.
32
+
2. **Layout and spacing**: Establish the spatial rhythm and visual hierarchy.
33
+
3. **Typography and color**: Apply the type scale and color system.
34
+
4. **Interactive states**: Hover, focus, active, disabled.
35
+
5. **Edge case states**: Empty, loading, error, overflow, first-run.
36
+
6. **Motion**: Purposeful transitions and animations (if appropriate).
37
+
7. **Responsive**: Adapt for different viewports. Don't just shrink; redesign for the context.
38
+
39
+
### During Build
40
+
- Test with real (or realistic) data at every step, not placeholder text
41
+
- Check each state as you build it, not all at the end
42
+
- If you discover a design question, stop and ask rather than guessing
43
+
- Every visual choice should trace back to something in the design brief
44
+
45
+
## Step 4: Visual Iteration
46
+
47
+
**This step is critical.** Do not stop after the first implementation pass.
48
+
49
+
Open the result in a browser window. If browser automation tools are available, use them to navigate to the page and visually inspect the result. If not, ask the user to open it and provide feedback.
50
+
51
+
Iterate through these checks visually:
52
+
53
+
1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies.
54
+
2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention.
55
+
3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations.
56
+
4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought.
57
+
5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink?
58
+
6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing.
59
+
60
+
After each round of fixes, visually verify again. **Repeat until you would be proud to show this to the user.** The bar is not "it works"; the bar is "this delights."
61
+
62
+
## Step 5: Present
63
+
64
+
Present the result to the user:
65
+
- Show the feature in its primary state
66
+
- Walk through the key states (empty, error, responsive)
67
+
- Explain design decisions that connect back to the design brief
68
+
- Ask: "What's working? What isn't?"
69
+
70
+
Iterate based on feedback. Good design is rarely right on the first pass.
+70
.agents/skills/impeccable/reference/extract.md
+70
.agents/skills/impeccable/reference/extract.md
···
1
+
# Extract Flow
2
+
3
+
Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.
4
+
5
+
## Step 1: Discover the Design System
6
+
7
+
Find the design system, component library, or shared UI directory. Understand its structure: component organization, naming conventions, design token structure, import/export conventions.
8
+
9
+
**CRITICAL**: If no design system exists, ask the user directly to clarify what you cannot infer. before creating one. Understand the preferred location and structure first.
10
+
11
+
## Step 2: Identify Patterns
12
+
13
+
Look for extraction opportunities in the target area:
14
+
15
+
- **Repeated components**: Similar UI patterns used 3+ times (buttons, cards, inputs)
16
+
- **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens
17
+
- **Inconsistent variations**: Multiple implementations of the same concept
18
+
- **Composition patterns**: Layout or interaction patterns that repeat (form rows, toolbar groups, empty states)
19
+
- **Type styles**: Repeated font-size + weight + line-height combinations
20
+
- **Animation patterns**: Repeated easing, duration, or keyframe combinations
21
+
22
+
Assess value: only extract things used 3+ times with the same intent. Premature abstraction is worse than duplication.
23
+
24
+
## Step 3: Plan Extraction
25
+
26
+
Create a systematic plan:
27
+
28
+
- **Components to extract**: Which UI elements become reusable components?
29
+
- **Tokens to create**: Which hard-coded values become design tokens?
30
+
- **Variants to support**: What variations does each component need?
31
+
- **Naming conventions**: Component names, token names, prop names that match existing patterns
32
+
- **Migration path**: How to refactor existing uses to consume the new shared versions
33
+
34
+
**IMPORTANT**: Design systems grow incrementally. Extract what is clearly reusable now, not everything that might someday be reusable.
35
+
36
+
## Step 4: Extract & Enrich
37
+
38
+
Build improved, reusable versions:
39
+
40
+
- **Components**: Clear props API with sensible defaults, proper variants for different use cases, accessibility built in (ARIA, keyboard navigation, focus management), documentation and usage examples
41
+
- **Design tokens**: Clear naming (primitive vs semantic), proper hierarchy and organization, documentation of when to use each token
42
+
- **Patterns**: When to use this pattern, code examples, variations and combinations
43
+
44
+
## Step 5: Migrate
45
+
46
+
Replace existing uses with the new shared versions:
47
+
48
+
- **Find all instances**: Search for the patterns you extracted
49
+
- **Replace systematically**: Update each use to consume the shared version
50
+
- **Test thoroughly**: Ensure visual and functional parity
51
+
- **Delete dead code**: Remove the old implementations
52
+
53
+
## Step 6: Document
54
+
55
+
Update design system documentation:
56
+
57
+
- Add new components to the component library
58
+
- Document token usage and values
59
+
- Add examples and guidelines
60
+
- Update any Storybook or component catalog
61
+
62
+
**NEVER**:
63
+
- Extract one-off, context-specific implementations without generalization
64
+
- Create components so generic they are useless
65
+
- Extract without considering existing design system conventions
66
+
- Skip proper TypeScript types or prop documentation
67
+
- Create tokens for every single value (tokens should have semantic meaning)
68
+
- Extract things that differ in intent (two buttons that look similar but serve different purposes should stay separate)
69
+
70
+
Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.
+195
.agents/skills/impeccable/reference/interaction-design.md
+195
.agents/skills/impeccable/reference/interaction-design.md
···
1
+
# Interaction Design
2
+
3
+
## The Eight Interactive States
4
+
5
+
Every interactive element needs these states designed:
6
+
7
+
| State | When | Visual Treatment |
8
+
|-------|------|------------------|
9
+
| **Default** | At rest | Base styling |
10
+
| **Hover** | Pointer over (not touch) | Subtle lift, color shift |
11
+
| **Focus** | Keyboard/programmatic focus | Visible ring (see below) |
12
+
| **Active** | Being pressed | Pressed in, darker |
13
+
| **Disabled** | Not interactive | Reduced opacity, no pointer |
14
+
| **Loading** | Processing | Spinner, skeleton |
15
+
| **Error** | Invalid state | Red border, icon, message |
16
+
| **Success** | Completed | Green check, confirmation |
17
+
18
+
**The common miss**: Designing hover without focus, or vice versa. They're different. Keyboard users never see hover states.
19
+
20
+
## Focus Rings: Do Them Right
21
+
22
+
**Never `outline: none` without replacement.** It's an accessibility violation. Instead, use `:focus-visible` to show focus only for keyboard users:
23
+
24
+
```css
25
+
/* Hide focus ring for mouse/touch */
26
+
button:focus {
27
+
outline: none;
28
+
}
29
+
30
+
/* Show focus ring for keyboard */
31
+
button:focus-visible {
32
+
outline: 2px solid var(--color-accent);
33
+
outline-offset: 2px;
34
+
}
35
+
```
36
+
37
+
**Focus ring design**:
38
+
- High contrast (3:1 minimum against adjacent colors)
39
+
- 2-3px thick
40
+
- Offset from element (not inside it)
41
+
- Consistent across all interactive elements
42
+
43
+
## Form Design: The Non-Obvious
44
+
45
+
**Placeholders aren't labels**—they disappear on input. Always use visible `<label>` elements. **Validate on blur**, not on every keystroke (exception: password strength). Place errors **below** fields with `aria-describedby` connecting them.
46
+
47
+
## Loading States
48
+
49
+
**Optimistic updates**: Show success immediately, rollback on failure. Use for low-stakes actions (likes, follows), not payments or destructive actions. **Skeleton screens > spinners**—they preview content shape and feel faster than generic spinners.
50
+
51
+
## Modals: The Inert Approach
52
+
53
+
Focus trapping in modals used to require complex JavaScript. Now use the `inert` attribute:
54
+
55
+
```html
56
+
<!-- When modal is open -->
57
+
<main inert>
58
+
<!-- Content behind modal can't be focused or clicked -->
59
+
</main>
60
+
<dialog open>
61
+
<h2>Modal Title</h2>
62
+
<!-- Focus stays inside modal -->
63
+
</dialog>
64
+
```
65
+
66
+
Or use the native `<dialog>` element:
67
+
68
+
```javascript
69
+
const dialog = document.querySelector('dialog');
70
+
dialog.showModal(); // Opens with focus trap, closes on Escape
71
+
```
72
+
73
+
## The Popover API
74
+
75
+
For tooltips, dropdowns, and non-modal overlays, use native popovers:
76
+
77
+
```html
78
+
<button popovertarget="menu">Open menu</button>
79
+
<div id="menu" popover>
80
+
<button>Option 1</button>
81
+
<button>Option 2</button>
82
+
</div>
83
+
```
84
+
85
+
**Benefits**: Light-dismiss (click outside closes), proper stacking, no z-index wars, accessible by default.
86
+
87
+
## Dropdown & Overlay Positioning
88
+
89
+
Dropdowns rendered with `position: absolute` inside a container that has `overflow: hidden` or `overflow: auto` will be clipped. This is the single most common dropdown bug in generated code.
90
+
91
+
### CSS Anchor Positioning
92
+
93
+
The modern solution uses the CSS Anchor Positioning API to tether an overlay to its trigger without JavaScript:
94
+
95
+
```css
96
+
.trigger {
97
+
anchor-name: --menu-trigger;
98
+
}
99
+
100
+
.dropdown {
101
+
position: fixed;
102
+
position-anchor: --menu-trigger;
103
+
position-area: block-end span-inline-end;
104
+
margin-top: 4px;
105
+
}
106
+
107
+
/* Flip above if no room below */
108
+
@position-try --flip-above {
109
+
position-area: block-start span-inline-end;
110
+
margin-bottom: 4px;
111
+
}
112
+
```
113
+
114
+
Because the dropdown uses `position: fixed`, it escapes any `overflow` clipping on ancestor elements. The `@position-try` block handles viewport edges automatically. **Browser support**: Chrome 125+, Edge 125+. Not yet in Firefox or Safari - use a fallback for those browsers.
115
+
116
+
### Popover + Anchor Combo
117
+
118
+
Combining the Popover API with anchor positioning gives you stacking, light-dismiss, accessibility, and correct positioning in one pattern:
119
+
120
+
```html
121
+
<button popovertarget="menu" class="trigger">Open</button>
122
+
<div id="menu" popover class="dropdown">
123
+
<button>Option 1</button>
124
+
<button>Option 2</button>
125
+
</div>
126
+
```
127
+
128
+
The `popover` attribute places the element in the **top layer**, which sits above all other content regardless of z-index or overflow. No portal needed.
129
+
130
+
### Portal / Teleport Pattern
131
+
132
+
In component frameworks, render the dropdown at the document root and position it with JavaScript:
133
+
134
+
- **React**: `createPortal(dropdown, document.body)`
135
+
- **Vue**: `<Teleport to="body">`
136
+
- **Svelte**: Use a portal library or mount to `document.body`
137
+
138
+
Calculate position from the trigger's `getBoundingClientRect()`, then apply `position: fixed` with `top` and `left` values. Recalculate on scroll and resize.
139
+
140
+
### Fixed Positioning Fallback
141
+
142
+
For browsers without anchor positioning support, `position: fixed` with manual coordinates avoids overflow clipping:
143
+
144
+
```css
145
+
.dropdown {
146
+
position: fixed;
147
+
/* top/left set via JS from trigger's getBoundingClientRect() */
148
+
}
149
+
```
150
+
151
+
Check viewport boundaries before rendering. If the dropdown would overflow the bottom edge, flip it above the trigger. If it would overflow the right edge, align it to the trigger's right side instead.
152
+
153
+
### Anti-Patterns
154
+
155
+
- **`position: absolute` inside `overflow: hidden`** - The dropdown will be clipped. Use `position: fixed` or the top layer instead.
156
+
- **Arbitrary z-index values** like `z-index: 9999` - Use a semantic z-index scale: `dropdown (100) -> sticky (200) -> modal-backdrop (300) -> modal (400) -> toast (500) -> tooltip (600)`.
157
+
- **Rendering dropdown markup inline** without an escape hatch from the parent's stacking context. Either use `popover` (top layer), a portal, or `position: fixed`.
158
+
159
+
## Destructive Actions: Undo > Confirm
160
+
161
+
**Undo is better than confirmation dialogs**—users click through confirmations mindlessly. Remove from UI immediately, show undo toast, actually delete after toast expires. Use confirmation only for truly irreversible actions (account deletion), high-cost actions, or batch operations.
162
+
163
+
## Keyboard Navigation Patterns
164
+
165
+
### Roving Tabindex
166
+
167
+
For component groups (tabs, menu items, radio groups), one item is tabbable; arrow keys move within:
168
+
169
+
```html
170
+
<div role="tablist">
171
+
<button role="tab" tabindex="0">Tab 1</button>
172
+
<button role="tab" tabindex="-1">Tab 2</button>
173
+
<button role="tab" tabindex="-1">Tab 3</button>
174
+
</div>
175
+
```
176
+
177
+
Arrow keys move `tabindex="0"` between items. Tab moves to the next component entirely.
178
+
179
+
### Skip Links
180
+
181
+
Provide skip links (`<a href="#main-content">Skip to main content</a>`) for keyboard users to jump past navigation. Hide off-screen, show on focus.
182
+
183
+
## Gesture Discoverability
184
+
185
+
Swipe-to-delete and similar gestures are invisible. Hint at their existence:
186
+
187
+
- **Partially reveal**: Show delete button peeking from edge
188
+
- **Onboarding**: Coach marks on first use
189
+
- **Alternative**: Always provide a visible fallback (menu with "Delete")
190
+
191
+
Don't rely on gestures as the only way to perform actions.
192
+
193
+
---
194
+
195
+
**Avoid**: Removing focus indicators without alternatives. Using placeholder text as labels. Touch targets <44x44px. Generic error messages. Custom controls without ARIA/keyboard support.
+99
.agents/skills/impeccable/reference/motion-design.md
+99
.agents/skills/impeccable/reference/motion-design.md
···
1
+
# Motion Design
2
+
3
+
## Duration: The 100/300/500 Rule
4
+
5
+
Timing matters more than easing. These durations feel right for most UI:
6
+
7
+
| Duration | Use Case | Examples |
8
+
|----------|----------|----------|
9
+
| **100-150ms** | Instant feedback | Button press, toggle, color change |
10
+
| **200-300ms** | State changes | Menu open, tooltip, hover states |
11
+
| **300-500ms** | Layout changes | Accordion, modal, drawer |
12
+
| **500-800ms** | Entrance animations | Page load, hero reveals |
13
+
14
+
**Exit animations are faster than entrances**—use ~75% of enter duration.
15
+
16
+
## Easing: Pick the Right Curve
17
+
18
+
**Don't use `ease`.** It's a compromise that's rarely optimal. Instead:
19
+
20
+
| Curve | Use For | CSS |
21
+
|-------|---------|-----|
22
+
| **ease-out** | Elements entering | `cubic-bezier(0.16, 1, 0.3, 1)` |
23
+
| **ease-in** | Elements leaving | `cubic-bezier(0.7, 0, 0.84, 0)` |
24
+
| **ease-in-out** | State toggles (there → back) | `cubic-bezier(0.65, 0, 0.35, 1)` |
25
+
26
+
**For micro-interactions, use exponential curves**—they feel natural because they mimic real physics (friction, deceleration):
27
+
28
+
```css
29
+
/* Quart out - smooth, refined (recommended default) */
30
+
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
31
+
32
+
/* Quint out - slightly more dramatic */
33
+
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
34
+
35
+
/* Expo out - snappy, confident */
36
+
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
37
+
```
38
+
39
+
**Avoid bounce and elastic curves.** They were trendy in 2015 but now feel tacky and amateurish. Real objects don't bounce when they stop—they decelerate smoothly. Overshoot effects draw attention to the animation itself rather than the content.
40
+
41
+
## The Only Two Properties You Should Animate
42
+
43
+
**transform** and **opacity** only—everything else causes layout recalculation. For height animations (accordions), use `grid-template-rows: 0fr → 1fr` instead of animating `height` directly.
44
+
45
+
## Staggered Animations
46
+
47
+
Use CSS custom properties for cleaner stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"` on each item. **Cap total stagger time**—10 items at 50ms = 500ms total. For many items, reduce per-item delay or cap staggered count.
48
+
49
+
## Reduced Motion
50
+
51
+
This is not optional. Vestibular disorders affect ~35% of adults over 40.
52
+
53
+
```css
54
+
/* Define animations normally */
55
+
.card {
56
+
animation: slide-up 500ms ease-out;
57
+
}
58
+
59
+
/* Provide alternative for reduced motion */
60
+
@media (prefers-reduced-motion: reduce) {
61
+
.card {
62
+
animation: fade-in 200ms ease-out; /* Crossfade instead of motion */
63
+
}
64
+
}
65
+
66
+
/* Or disable entirely */
67
+
@media (prefers-reduced-motion: reduce) {
68
+
*, *::before, *::after {
69
+
animation-duration: 0.01ms !important;
70
+
transition-duration: 0.01ms !important;
71
+
}
72
+
}
73
+
```
74
+
75
+
**What to preserve**: Functional animations like progress bars, loading spinners (slowed down), and focus indicators should still work—just without spatial movement.
76
+
77
+
## Perceived Performance
78
+
79
+
**Nobody cares how fast your site is—just how fast it feels.** Perception can be as effective as actual performance.
80
+
81
+
**The 80ms threshold**: Our brains buffer sensory input for ~80ms to synchronize perception. Anything under 80ms feels instant and simultaneous. This is your target for micro-interactions.
82
+
83
+
**Active vs passive time**: Passive waiting (staring at a spinner) feels longer than active engagement. Strategies to shift the balance:
84
+
85
+
- **Preemptive start**: Begin transitions immediately while loading (iOS app zoom, skeleton UI). Users perceive work happening.
86
+
- **Early completion**: Show content progressively—don't wait for everything. Video buffering, progressive images, streaming HTML.
87
+
- **Optimistic UI**: Update the interface immediately, handle failures gracefully. Instagram likes work offline—the UI updates instantly, syncs later. Use for low-stakes actions; avoid for payments or destructive operations.
88
+
89
+
**Easing affects perceived duration**: Ease-in (accelerating toward completion) makes tasks feel shorter because the peak-end effect weights final moments heavily. Ease-out feels satisfying for entrances, but ease-in toward a task's end compresses perceived time.
90
+
91
+
**Caution**: Too-fast responses can decrease perceived value. Users may distrust instant results for complex operations (search, analysis). Sometimes a brief delay signals "real work" is happening.
92
+
93
+
## Performance
94
+
95
+
Don't use `will-change` preemptively—only when animation is imminent (`:hover`, `.animating`). For scroll-triggered animations, use Intersection Observer instead of scroll events; unobserve after animating once. Create motion tokens for consistency (durations, easings, common transitions).
96
+
97
+
---
98
+
99
+
**Avoid**: Animating everything (animation fatigue is real). Using >500ms for UI feedback. Ignoring `prefers-reduced-motion`. Using animation to hide slow loading.
+114
.agents/skills/impeccable/reference/responsive-design.md
+114
.agents/skills/impeccable/reference/responsive-design.md
···
1
+
# Responsive Design
2
+
3
+
## Mobile-First: Write It Right
4
+
5
+
Start with base styles for mobile, use `min-width` queries to layer complexity. Desktop-first (`max-width`) means mobile loads unnecessary styles first.
6
+
7
+
## Breakpoints: Content-Driven
8
+
9
+
Don't chase device sizes—let content tell you where to break. Start narrow, stretch until design breaks, add breakpoint there. Three breakpoints usually suffice (640, 768, 1024px). Use `clamp()` for fluid values without breakpoints.
10
+
11
+
## Detect Input Method, Not Just Screen Size
12
+
13
+
**Screen size doesn't tell you input method.** A laptop with touchscreen, a tablet with keyboard—use pointer and hover queries:
14
+
15
+
```css
16
+
/* Fine pointer (mouse, trackpad) */
17
+
@media (pointer: fine) {
18
+
.button { padding: 8px 16px; }
19
+
}
20
+
21
+
/* Coarse pointer (touch, stylus) */
22
+
@media (pointer: coarse) {
23
+
.button { padding: 12px 20px; } /* Larger touch target */
24
+
}
25
+
26
+
/* Device supports hover */
27
+
@media (hover: hover) {
28
+
.card:hover { transform: translateY(-2px); }
29
+
}
30
+
31
+
/* Device doesn't support hover (touch) */
32
+
@media (hover: none) {
33
+
.card { /* No hover state - use active instead */ }
34
+
}
35
+
```
36
+
37
+
**Critical**: Don't rely on hover for functionality. Touch users can't hover.
38
+
39
+
## Safe Areas: Handle the Notch
40
+
41
+
Modern phones have notches, rounded corners, and home indicators. Use `env()`:
42
+
43
+
```css
44
+
body {
45
+
padding-top: env(safe-area-inset-top);
46
+
padding-bottom: env(safe-area-inset-bottom);
47
+
padding-left: env(safe-area-inset-left);
48
+
padding-right: env(safe-area-inset-right);
49
+
}
50
+
51
+
/* With fallback */
52
+
.footer {
53
+
padding-bottom: max(1rem, env(safe-area-inset-bottom));
54
+
}
55
+
```
56
+
57
+
**Enable viewport-fit** in your meta tag:
58
+
```html
59
+
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
60
+
```
61
+
62
+
## Responsive Images: Get It Right
63
+
64
+
### srcset with Width Descriptors
65
+
66
+
```html
67
+
<img
68
+
src="hero-800.jpg"
69
+
srcset="
70
+
hero-400.jpg 400w,
71
+
hero-800.jpg 800w,
72
+
hero-1200.jpg 1200w
73
+
"
74
+
sizes="(max-width: 768px) 100vw, 50vw"
75
+
alt="Hero image"
76
+
>
77
+
```
78
+
79
+
**How it works**:
80
+
- `srcset` lists available images with their actual widths (`w` descriptors)
81
+
- `sizes` tells the browser how wide the image will display
82
+
- Browser picks the best file based on viewport width AND device pixel ratio
83
+
84
+
### Picture Element for Art Direction
85
+
86
+
When you need different crops/compositions (not just resolutions):
87
+
88
+
```html
89
+
<picture>
90
+
<source media="(min-width: 768px)" srcset="wide.jpg">
91
+
<source media="(max-width: 767px)" srcset="tall.jpg">
92
+
<img src="fallback.jpg" alt="...">
93
+
</picture>
94
+
```
95
+
96
+
## Layout Adaptation Patterns
97
+
98
+
**Navigation**: Three stages—hamburger + drawer on mobile, horizontal compact on tablet, full with labels on desktop. **Tables**: Transform to cards on mobile using `display: block` and `data-label` attributes. **Progressive disclosure**: Use `<details>/<summary>` for content that can collapse on mobile.
99
+
100
+
## Testing: Don't Trust DevTools Alone
101
+
102
+
DevTools device emulation is useful for layout but misses:
103
+
104
+
- Actual touch interactions
105
+
- Real CPU/memory constraints
106
+
- Network latency patterns
107
+
- Font rendering differences
108
+
- Browser chrome/keyboard appearances
109
+
110
+
**Test on at least**: One real iPhone, one real Android, a tablet if relevant. Cheap Android phones reveal performance issues you'll never see on simulators.
111
+
112
+
---
113
+
114
+
**Avoid**: Desktop-first design. Device detection instead of feature detection. Separate mobile/desktop codebases. Ignoring tablet and landscape. Assuming all mobile devices are powerful.
+100
.agents/skills/impeccable/reference/spatial-design.md
+100
.agents/skills/impeccable/reference/spatial-design.md
···
1
+
# Spatial Design
2
+
3
+
## Spacing Systems
4
+
5
+
### Use 4pt Base, Not 8pt
6
+
7
+
8pt systems are too coarse—you'll frequently need 12px (between 8 and 16). Use 4pt for granularity: 4, 8, 12, 16, 24, 32, 48, 64, 96px.
8
+
9
+
### Name Tokens Semantically
10
+
11
+
Name by relationship (`--space-sm`, `--space-lg`), not value (`--spacing-8`). Use `gap` instead of margins for sibling spacing—it eliminates margin collapse and cleanup hacks.
12
+
13
+
## Grid Systems
14
+
15
+
### The Self-Adjusting Grid
16
+
17
+
Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. Columns are at least 280px, as many as fit per row, leftovers stretch. For complex layouts, use named grid areas (`grid-template-areas`) and redefine them at breakpoints.
18
+
19
+
## Visual Hierarchy
20
+
21
+
### The Squint Test
22
+
23
+
Blur your eyes (or screenshot and blur). Can you still identify:
24
+
- The most important element?
25
+
- The second most important?
26
+
- Clear groupings?
27
+
28
+
If everything looks the same weight blurred, you have a hierarchy problem.
29
+
30
+
### Hierarchy Through Multiple Dimensions
31
+
32
+
Don't rely on size alone. Combine:
33
+
34
+
| Tool | Strong Hierarchy | Weak Hierarchy |
35
+
|------|------------------|----------------|
36
+
| **Size** | 3:1 ratio or more | <2:1 ratio |
37
+
| **Weight** | Bold vs Regular | Medium vs Regular |
38
+
| **Color** | High contrast | Similar tones |
39
+
| **Position** | Top/left (primary) | Bottom/right |
40
+
| **Space** | Surrounded by white space | Crowded |
41
+
42
+
**The best hierarchy uses 2-3 dimensions at once**: A heading that's larger, bolder, AND has more space above it.
43
+
44
+
### Cards Are Not Required
45
+
46
+
Cards are overused. Spacing and alignment create visual grouping naturally. Use cards only when content is truly distinct and actionable, items need visual comparison in a grid, or content needs clear interaction boundaries. **Never nest cards inside cards**—use spacing, typography, and subtle dividers for hierarchy within a card.
47
+
48
+
## Container Queries
49
+
50
+
Viewport queries are for page layouts. **Container queries are for components**:
51
+
52
+
```css
53
+
.card-container {
54
+
container-type: inline-size;
55
+
}
56
+
57
+
.card {
58
+
display: grid;
59
+
gap: var(--space-md);
60
+
}
61
+
62
+
/* Card layout changes based on its container, not viewport */
63
+
@container (min-width: 400px) {
64
+
.card {
65
+
grid-template-columns: 120px 1fr;
66
+
}
67
+
}
68
+
```
69
+
70
+
**Why this matters**: A card in a narrow sidebar stays compact, while the same card in a main content area expands—automatically, without viewport hacks.
71
+
72
+
## Optical Adjustments
73
+
74
+
Text at `margin-left: 0` looks indented due to letterform whitespace—use negative margin (`-0.05em`) to optically align. Geometrically centered icons often look off-center; play icons need to shift right, arrows shift toward their direction.
75
+
76
+
### Touch Targets vs Visual Size
77
+
78
+
Buttons can look small but need large touch targets (44px minimum). Use padding or pseudo-elements:
79
+
80
+
```css
81
+
.icon-button {
82
+
width: 24px; /* Visual size */
83
+
height: 24px;
84
+
position: relative;
85
+
}
86
+
87
+
.icon-button::before {
88
+
content: '';
89
+
position: absolute;
90
+
inset: -10px; /* Expand tap target to 44px */
91
+
}
92
+
```
93
+
94
+
## Depth & Elevation
95
+
96
+
Create semantic z-index scales (dropdown → sticky → modal-backdrop → modal → toast → tooltip) instead of arbitrary numbers. For shadows, create a consistent elevation scale (sm → md → lg → xl). **Key insight**: Shadows should be subtle—if you can clearly see it, it's probably too strong.
97
+
98
+
---
99
+
100
+
**Avoid**: Arbitrary spacing values outside your scale. Making all spacing equal (variety creates hierarchy). Creating hierarchy through size alone - combine size, weight, color, and space.
+142
.agents/skills/impeccable/reference/typography.md
+142
.agents/skills/impeccable/reference/typography.md
···
1
+
# Typography
2
+
3
+
## Classic Typography Principles
4
+
5
+
### Vertical Rhythm
6
+
7
+
Your line-height should be the base unit for ALL vertical spacing. If body text has `line-height: 1.5` on `16px` type (= 24px), spacing values should be multiples of 24px. This creates subconscious harmony—text and space share a mathematical foundation.
8
+
9
+
### Modular Scale & Hierarchy
10
+
11
+
The common mistake: too many font sizes that are too close together (14px, 15px, 16px, 18px...). This creates muddy hierarchy.
12
+
13
+
**Use fewer sizes with more contrast.** A 5-size system covers most needs:
14
+
15
+
| Role | Typical Ratio | Use Case |
16
+
|------|---------------|----------|
17
+
| xs | 0.75rem | Captions, legal |
18
+
| sm | 0.875rem | Secondary UI, metadata |
19
+
| base | 1rem | Body text |
20
+
| lg | 1.25-1.5rem | Subheadings, lead text |
21
+
| xl+ | 2-4rem | Headlines, hero text |
22
+
23
+
Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Pick one and commit.
24
+
25
+
### Readability & Measure
26
+
27
+
Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more.
28
+
29
+
**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height.
30
+
31
+
## Font Selection & Pairing
32
+
33
+
### Choosing Distinctive Fonts
34
+
35
+
**Avoid the invisible defaults**: Inter, Roboto, Open Sans, Lato, Montserrat. These are everywhere, making your design feel generic. They're fine for documentation or tools where personality isn't the goal—but if you want distinctive design, look elsewhere.
36
+
37
+
**Pick the font from the brief, not from a category preset.** The most common AI typography failure is reaching for the same "tasteful" font for every editorial brief, the same "modern" font for every tech brief, the same "elegant serif" for every premium brief. Those reflexes produce monoculture across projects. The right font is one whose physical character matches *this specific* brand, audience, and moment.
38
+
39
+
A working selection process:
40
+
41
+
1. Read the brief once. Write down three concrete words for the brand voice. Not "modern" or "elegant" — those are dead categories. Try "warm and mechanical and opinionated" or "calm and clinical and careful" or "fast and dense and unimpressed" or "handmade and a little weird."
42
+
2. Now imagine the font as a physical object the brand could ship: a typewriter ribbon, a hand-lettered shop sign, a 1970s mainframe terminal manual, a fabric label on the inside of a coat, a museum exhibit caption, a tax form, a children's book printed on cheap newsprint. Whichever physical object fits the three words is pointing at the right *kind* of typeface.
43
+
3. Browse a font catalog (Google Fonts, Pangram Pangram, Adobe Fonts, Future Fonts, ABC Dinamo) with that physical object in mind. **Reject the first thing that "looks designy."** That's your trained-everywhere reflex. Keep looking.
44
+
4. Avoid your defaults from previous projects. If you find yourself reaching for the same display font you used last time, make yourself pick something else.
45
+
46
+
**Anti-reflexes worth defending against**:
47
+
- A technical/utilitarian brief does NOT need a serif "for warmth." Most tech tools should look like tech tools.
48
+
- An editorial/premium brief does NOT need the same expressive serif everyone is using right now. Premium can be Swiss-modern, can be neo-grotesque, can be a literal monospace, can be a quiet humanist sans.
49
+
- A children's product does NOT need a rounded display font. Kids' books use real type.
50
+
- A "modern" brief does NOT need a geometric sans. The most modern thing you can do in 2026 is not use the font everyone else is using.
51
+
52
+
**System fonts are underrated**: `-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui` looks native, loads instantly, and is highly readable. Consider this for apps where performance > personality.
53
+
54
+
### Pairing Principles
55
+
56
+
**The non-obvious truth**: You often don't need a second font. One well-chosen font family in multiple weights creates cleaner hierarchy than two competing typefaces. Only add a second font when you need genuine contrast (e.g., display headlines + body serif).
57
+
58
+
When pairing, contrast on multiple axes:
59
+
- Serif + Sans (structure contrast)
60
+
- Geometric + Humanist (personality contrast)
61
+
- Condensed display + Wide body (proportion contrast)
62
+
63
+
**Never pair fonts that are similar but not identical** (e.g., two geometric sans-serifs). They create visual tension without clear hierarchy.
64
+
65
+
### Web Font Loading
66
+
67
+
The layout shift problem: fonts load late, text reflows, and users see content jump. Here's the fix:
68
+
69
+
```css
70
+
/* 1. Use font-display: swap for visibility */
71
+
@font-face {
72
+
font-family: 'CustomFont';
73
+
src: url('font.woff2') format('woff2');
74
+
font-display: swap;
75
+
}
76
+
77
+
/* 2. Match fallback metrics to minimize shift */
78
+
@font-face {
79
+
font-family: 'CustomFont-Fallback';
80
+
src: local('Arial');
81
+
size-adjust: 105%; /* Scale to match x-height */
82
+
ascent-override: 90%; /* Match ascender height */
83
+
descent-override: 20%; /* Match descender depth */
84
+
line-gap-override: 10%; /* Match line spacing */
85
+
}
86
+
87
+
body {
88
+
font-family: 'CustomFont', 'CustomFont-Fallback', sans-serif;
89
+
}
90
+
```
91
+
92
+
Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically.
93
+
94
+
## Modern Web Typography
95
+
96
+
### Fluid Type
97
+
98
+
Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the viewport. The middle value (e.g., `5vw + 1rem`) controls scaling rate—higher vw = faster scaling. Add a rem offset so it doesn't collapse to 0 on small screens.
99
+
100
+
**Use fluid type for**: Headings and display text on marketing/content pages where text dominates the layout and needs to breathe across viewport sizes.
101
+
102
+
**Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it.
103
+
104
+
### OpenType Features
105
+
106
+
Most developers don't know these exist. Use them for polish:
107
+
108
+
```css
109
+
/* Tabular numbers for data alignment */
110
+
.data-table { font-variant-numeric: tabular-nums; }
111
+
112
+
/* Proper fractions */
113
+
.recipe-amount { font-variant-numeric: diagonal-fractions; }
114
+
115
+
/* Small caps for abbreviations */
116
+
abbr { font-variant-caps: all-small-caps; }
117
+
118
+
/* Disable ligatures in code */
119
+
code { font-variant-ligatures: none; }
120
+
121
+
/* Enable kerning (usually on by default, but be explicit) */
122
+
body { font-kerning: normal; }
123
+
```
124
+
125
+
Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/).
126
+
127
+
## Typography System Architecture
128
+
129
+
Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system.
130
+
131
+
## Accessibility Considerations
132
+
133
+
Beyond contrast ratios (which are well-documented), consider:
134
+
135
+
- **Never disable zoom**: `user-scalable=no` breaks accessibility. If your layout breaks at 200% zoom, fix the layout.
136
+
- **Use rem/em for font sizes**: This respects user browser settings. Never `px` for body text.
137
+
- **Minimum 16px body text**: Smaller than this strains eyes and fails WCAG on mobile.
138
+
- **Adequate touch targets**: Text links need padding or line-height that creates 44px+ tap targets.
139
+
140
+
---
141
+
142
+
**Avoid**: More than 2-3 font families per project. Skipping fallback font definitions. Ignoring font loading performance (FOUT/FOIT). Using decorative fonts for body text.
+107
.agents/skills/impeccable/reference/ux-writing.md
+107
.agents/skills/impeccable/reference/ux-writing.md
···
1
+
# UX Writing
2
+
3
+
## The Button Label Problem
4
+
5
+
**Never use "OK", "Submit", or "Yes/No".** These are lazy and ambiguous. Use specific verb + object patterns:
6
+
7
+
| Bad | Good | Why |
8
+
|-----|------|-----|
9
+
| OK | Save changes | Says what will happen |
10
+
| Submit | Create account | Outcome-focused |
11
+
| Yes | Delete message | Confirms the action |
12
+
| Cancel | Keep editing | Clarifies what "cancel" means |
13
+
| Click here | Download PDF | Describes the destination |
14
+
15
+
**For destructive actions**, name the destruction:
16
+
- "Delete" not "Remove" (delete is permanent, remove implies recoverable)
17
+
- "Delete 5 items" not "Delete selected" (show the count)
18
+
19
+
## Error Messages: The Formula
20
+
21
+
Every error message should answer: (1) What happened? (2) Why? (3) How to fix it? Example: "Email address isn't valid. Please include an @ symbol." not "Invalid input".
22
+
23
+
### Error Message Templates
24
+
25
+
| Situation | Template |
26
+
|-----------|----------|
27
+
| **Format error** | "[Field] needs to be [format]. Example: [example]" |
28
+
| **Missing required** | "Please enter [what's missing]" |
29
+
| **Permission denied** | "You don't have access to [thing]. [What to do instead]" |
30
+
| **Network error** | "We couldn't reach [thing]. Check your connection and [action]." |
31
+
| **Server error** | "Something went wrong on our end. We're looking into it. [Alternative action]" |
32
+
33
+
### Don't Blame the User
34
+
35
+
Reframe errors: "Please enter a date in MM/DD/YYYY format" not "You entered an invalid date".
36
+
37
+
## Empty States Are Opportunities
38
+
39
+
Empty states are onboarding moments: (1) Acknowledge briefly, (2) Explain the value of filling it, (3) Provide a clear action. "No projects yet. Create your first one to get started." not just "No items".
40
+
41
+
## Voice vs Tone
42
+
43
+
**Voice** is your brand's personality—consistent everywhere.
44
+
**Tone** adapts to the moment.
45
+
46
+
| Moment | Tone Shift |
47
+
|--------|------------|
48
+
| Success | Celebratory, brief: "Done! Your changes are live." |
49
+
| Error | Empathetic, helpful: "That didn't work. Here's what to try..." |
50
+
| Loading | Reassuring: "Saving your work..." |
51
+
| Destructive confirm | Serious, clear: "Delete this project? This can't be undone." |
52
+
53
+
**Never use humor for errors.** Users are already frustrated. Be helpful, not cute.
54
+
55
+
## Writing for Accessibility
56
+
57
+
**Link text** must have standalone meaning—"View pricing plans" not "Click here". **Alt text** describes information, not the image—"Revenue increased 40% in Q4" not "Chart". Use `alt=""` for decorative images. **Icon buttons** need `aria-label` for screen reader context.
58
+
59
+
## Writing for Translation
60
+
61
+
### Plan for Expansion
62
+
63
+
German text is ~30% longer than English. Allocate space:
64
+
65
+
| Language | Expansion |
66
+
|----------|-----------|
67
+
| German | +30% |
68
+
| French | +20% |
69
+
| Finnish | +30-40% |
70
+
| Chinese | -30% (fewer chars, but same width) |
71
+
72
+
### Translation-Friendly Patterns
73
+
74
+
Keep numbers separate ("New messages: 3" not "You have 3 new messages"). Use full sentences as single strings (word order varies by language). Avoid abbreviations ("5 minutes ago" not "5 mins ago"). Give translators context about where strings appear.
75
+
76
+
## Consistency: The Terminology Problem
77
+
78
+
Pick one term and stick with it:
79
+
80
+
| Inconsistent | Consistent |
81
+
|--------------|------------|
82
+
| Delete / Remove / Trash | Delete |
83
+
| Settings / Preferences / Options | Settings |
84
+
| Sign in / Log in / Enter | Sign in |
85
+
| Create / Add / New | Create |
86
+
87
+
Build a terminology glossary and enforce it. Variety creates confusion.
88
+
89
+
## Avoid Redundant Copy
90
+
91
+
If the heading explains it, the intro is redundant. If the button is clear, don't explain it again. Say it once, say it well.
92
+
93
+
## Loading States
94
+
95
+
Be specific: "Saving your draft..." not "Loading...". For long waits, set expectations ("This usually takes 30 seconds") or show progress.
96
+
97
+
## Confirmation Dialogs: Use Sparingly
98
+
99
+
Most confirmation dialogs are design failures—consider undo instead. When you must confirm: name the action, explain consequences, use specific button labels ("Delete project" / "Keep project", not "Yes" / "No").
100
+
101
+
## Form Instructions
102
+
103
+
Show format with placeholders, not instructions. For non-obvious fields, explain why you're asking.
104
+
105
+
---
106
+
107
+
**Avoid**: Jargon without explanation. Blaming users ("You made an error" → "This field is required"). Vague errors ("Something went wrong"). Varying terminology for variety. Humor for errors.
+214
.agents/skills/impeccable/scripts/cleanup-deprecated.mjs
+214
.agents/skills/impeccable/scripts/cleanup-deprecated.mjs
···
1
+
#!/usr/bin/env node
2
+
/**
3
+
* Cleans up deprecated Impeccable skill files, symlinks, and
4
+
* skills-lock.json entries left over from previous versions.
5
+
*
6
+
* Safe to run repeatedly -- it is a no-op when nothing needs cleaning.
7
+
*
8
+
* Usage (from the project root):
9
+
* node {{scripts_path}}/cleanup-deprecated.mjs
10
+
*
11
+
* What it does:
12
+
* 1. Finds every harness-specific skills directory (.claude/skills,
13
+
* .cursor/skills, .agents/skills, etc.).
14
+
* 2. For each deprecated skill name (with and without i- prefix),
15
+
* checks if the directory exists and its SKILL.md mentions
16
+
* "impeccable" (to avoid deleting unrelated user skills).
17
+
* 3. Deletes confirmed matches (files, directories, or symlinks).
18
+
* 4. Removes the corresponding entries from skills-lock.json.
19
+
*/
20
+
21
+
import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs';
22
+
import { join, resolve } from 'node:path';
23
+
24
+
// Skills that were renamed, merged, or folded in v2.0 and v2.1.
25
+
const DEPRECATED_NAMES = [
26
+
'frontend-design', // renamed to impeccable (v2.0)
27
+
'teach-impeccable', // folded into /impeccable teach (v2.0)
28
+
'arrange', // renamed to layout (v2.1)
29
+
'normalize', // merged into polish (v2.1)
30
+
'onboard', // merged into harden (v2.1)
31
+
'extract', // merged into /impeccable extract (v2.1)
32
+
];
33
+
34
+
// All known harness directories that may contain a skills/ subfolder.
35
+
const HARNESS_DIRS = [
36
+
'.claude', '.cursor', '.gemini', '.codex', '.agents',
37
+
'.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev',
38
+
];
39
+
40
+
/**
41
+
* Walk up from startDir until we find a directory that looks like a
42
+
* project root (has package.json, .git, or skills-lock.json).
43
+
*/
44
+
export function findProjectRoot(startDir = process.cwd()) {
45
+
let dir = resolve(startDir);
46
+
const { root } = { root: '/' };
47
+
while (dir !== root) {
48
+
if (
49
+
existsSync(join(dir, 'package.json')) ||
50
+
existsSync(join(dir, '.git')) ||
51
+
existsSync(join(dir, 'skills-lock.json'))
52
+
) {
53
+
return dir;
54
+
}
55
+
const parent = resolve(dir, '..');
56
+
if (parent === dir) break;
57
+
dir = parent;
58
+
}
59
+
return resolve(startDir);
60
+
}
61
+
62
+
/**
63
+
* Check whether a skill directory belongs to Impeccable by reading its
64
+
* SKILL.md and looking for the word "impeccable" (case-insensitive).
65
+
* Returns false for non-existent paths or skills that don't match.
66
+
*/
67
+
export function isImpeccableSkill(skillDir) {
68
+
const skillMd = join(skillDir, 'SKILL.md');
69
+
if (!existsSync(skillMd)) return false;
70
+
try {
71
+
const content = readFileSync(skillMd, 'utf-8');
72
+
return /impeccable/i.test(content);
73
+
} catch {
74
+
return false;
75
+
}
76
+
}
77
+
78
+
/**
79
+
* Build the full list of names to check: each deprecated name, plus
80
+
* its i-prefixed variant.
81
+
*/
82
+
export function buildTargetNames() {
83
+
const names = [];
84
+
for (const name of DEPRECATED_NAMES) {
85
+
names.push(name);
86
+
names.push(`i-${name}`);
87
+
}
88
+
return names;
89
+
}
90
+
91
+
/**
92
+
* Find every skills directory across all harness dirs in the project.
93
+
* Returns absolute paths that exist on disk.
94
+
*/
95
+
export function findSkillsDirs(projectRoot) {
96
+
const dirs = [];
97
+
for (const harness of HARNESS_DIRS) {
98
+
const candidate = join(projectRoot, harness, 'skills');
99
+
if (existsSync(candidate)) {
100
+
dirs.push(candidate);
101
+
}
102
+
}
103
+
return dirs;
104
+
}
105
+
106
+
/**
107
+
* Remove deprecated skill directories/symlinks from all harness dirs.
108
+
* Returns an array of paths that were deleted.
109
+
*/
110
+
export function removeDeprecatedSkills(projectRoot) {
111
+
const targets = buildTargetNames();
112
+
const skillsDirs = findSkillsDirs(projectRoot);
113
+
const deleted = [];
114
+
115
+
for (const skillsDir of skillsDirs) {
116
+
for (const name of targets) {
117
+
const skillPath = join(skillsDir, name);
118
+
119
+
// Use lstat to detect symlinks (existsSync follows symlinks and
120
+
// returns false for dangling ones).
121
+
let stat;
122
+
try {
123
+
stat = lstatSync(skillPath);
124
+
} catch {
125
+
continue; // does not exist at all
126
+
}
127
+
128
+
if (stat.isSymbolicLink()) {
129
+
// Symlink: check the target if it's alive, otherwise treat
130
+
// dangling symlinks to deprecated names as safe to remove.
131
+
const targetAlive = existsSync(skillPath);
132
+
const isMatch = targetAlive ? isImpeccableSkill(skillPath) : true;
133
+
if (isMatch) {
134
+
unlinkSync(skillPath);
135
+
deleted.push(skillPath);
136
+
}
137
+
continue;
138
+
}
139
+
140
+
// Regular directory -- verify it belongs to impeccable
141
+
if (isImpeccableSkill(skillPath)) {
142
+
rmSync(skillPath, { recursive: true, force: true });
143
+
deleted.push(skillPath);
144
+
}
145
+
}
146
+
}
147
+
148
+
return deleted;
149
+
}
150
+
151
+
/**
152
+
* Remove deprecated entries from skills-lock.json.
153
+
* Only removes entries whose source is "pbakaus/impeccable".
154
+
* Returns the list of removed skill names.
155
+
*/
156
+
export function cleanSkillsLock(projectRoot) {
157
+
const lockPath = join(projectRoot, 'skills-lock.json');
158
+
if (!existsSync(lockPath)) return [];
159
+
160
+
let lock;
161
+
try {
162
+
lock = JSON.parse(readFileSync(lockPath, 'utf-8'));
163
+
} catch {
164
+
return [];
165
+
}
166
+
167
+
if (!lock.skills || typeof lock.skills !== 'object') return [];
168
+
169
+
const targets = buildTargetNames();
170
+
const removed = [];
171
+
172
+
for (const name of targets) {
173
+
const entry = lock.skills[name];
174
+
if (!entry) continue;
175
+
// Only remove if it belongs to impeccable
176
+
if (entry.source === 'pbakaus/impeccable') {
177
+
delete lock.skills[name];
178
+
removed.push(name);
179
+
}
180
+
}
181
+
182
+
if (removed.length > 0) {
183
+
writeFileSync(lockPath, JSON.stringify(lock, null, 2) + '\n', 'utf-8');
184
+
}
185
+
186
+
return removed;
187
+
}
188
+
189
+
/**
190
+
* Run the full cleanup. Returns a summary object.
191
+
*/
192
+
export function cleanup(projectRoot) {
193
+
const root = projectRoot || findProjectRoot();
194
+
const deletedPaths = removeDeprecatedSkills(root);
195
+
const removedLockEntries = cleanSkillsLock(root);
196
+
return { deletedPaths, removedLockEntries, projectRoot: root };
197
+
}
198
+
199
+
// CLI entry point
200
+
if (process.argv[1] && resolve(process.argv[1]) === resolve(new URL(import.meta.url).pathname)) {
201
+
const result = cleanup();
202
+
if (result.deletedPaths.length === 0 && result.removedLockEntries.length === 0) {
203
+
console.log('No deprecated Impeccable skills found. Nothing to clean up.');
204
+
} else {
205
+
if (result.deletedPaths.length > 0) {
206
+
console.log(`Removed ${result.deletedPaths.length} deprecated skill(s):`);
207
+
for (const p of result.deletedPaths) console.log(` - ${p}`);
208
+
}
209
+
if (result.removedLockEntries.length > 0) {
210
+
console.log(`Cleaned ${result.removedLockEntries.length} entry/entries from skills-lock.json:`);
211
+
for (const name of result.removedLockEntries) console.log(` - ${name}`);
212
+
}
213
+
}
214
+
}
+125
.agents/skills/layout/SKILL.md
+125
.agents/skills/layout/SKILL.md
···
1
+
---
2
+
name: layout
3
+
description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[target]"
7
+
---
8
+
9
+
Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions.
10
+
11
+
## MANDATORY PREPARATION
12
+
13
+
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
14
+
15
+
---
16
+
17
+
## Assess Current Layout
18
+
19
+
Analyze what's weak about the current spatial design:
20
+
21
+
1. **Spacing**:
22
+
- Is spacing consistent or arbitrary? (Random padding/margin values)
23
+
- Is all spacing the same? (Equal padding everywhere = no rhythm)
24
+
- Are related elements grouped tightly, with generous space between groups?
25
+
26
+
2. **Visual hierarchy**:
27
+
- Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings?
28
+
- Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?)
29
+
- Does whitespace guide the eye to what matters?
30
+
31
+
3. **Grid & structure**:
32
+
- Is there a clear underlying structure, or does the layout feel random?
33
+
- Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
34
+
- Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)
35
+
36
+
4. **Rhythm & variety**:
37
+
- Does the layout have visual rhythm? (Alternating tight/generous spacing)
38
+
- Is every section structured the same way? (Monotonous repetition)
39
+
- Are there intentional moments of surprise or emphasis?
40
+
41
+
5. **Density**:
42
+
- Is the layout too cramped? (Not enough breathing room)
43
+
- Is the layout too sparse? (Excessive whitespace without purpose)
44
+
- Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air)
45
+
46
+
**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention.
47
+
48
+
## Plan Layout Improvements
49
+
50
+
Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries.
51
+
52
+
Create a systematic plan:
53
+
54
+
- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency.
55
+
- **Hierarchy strategy**: How will space communicate importance?
56
+
- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts.
57
+
- **Rhythm**: Where should spacing be tight vs generous?
58
+
59
+
## Improve Layout Systematically
60
+
61
+
### Establish a Spacing System
62
+
63
+
- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers.
64
+
- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8`
65
+
- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks
66
+
- Apply `clamp()` for fluid spacing that breathes on larger screens
67
+
68
+
### Create Visual Rhythm
69
+
70
+
- **Tight grouping** for related elements (8-12px between siblings)
71
+
- **Generous separation** between distinct sections (48-96px)
72
+
- **Varied spacing** within sections — not every row needs the same gap
73
+
- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense
74
+
75
+
### Choose the Right Layout Tool
76
+
77
+
- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks.
78
+
- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control.
79
+
- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible.
80
+
- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints.
81
+
- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints.
82
+
83
+
### Break Card Grid Monotony
84
+
85
+
- Don't default to card grids for everything — spacing and alignment create visual grouping naturally
86
+
- Use cards only when content is truly distinct and actionable — never nest cards inside cards
87
+
- Vary card sizes, span columns, or mix cards with non-card content to break repetition
88
+
89
+
### Strengthen Visual Hierarchy
90
+
91
+
- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient.
92
+
- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation).
93
+
- Create clear content groupings through proximity and separation.
94
+
95
+
### Manage Depth & Elevation
96
+
97
+
- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip)
98
+
- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle
99
+
- Use elevation to reinforce hierarchy, not as decoration
100
+
101
+
### Optical Adjustments
102
+
103
+
- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively.
104
+
105
+
**NEVER**:
106
+
- Use arbitrary spacing values outside your scale
107
+
- Make all spacing equal — variety creates hierarchy
108
+
- Wrap everything in cards — not everything needs a container
109
+
- Nest cards inside cards — use spacing and dividers for hierarchy within
110
+
- Use identical card grids everywhere (icon + heading + text, repeated)
111
+
- Center everything — left-aligned with asymmetry feels more designed
112
+
- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers.
113
+
- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job
114
+
- Use arbitrary z-index values (999, 9999) — build a semantic scale
115
+
116
+
## Verify Layout Improvements
117
+
118
+
- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision?
119
+
- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing?
120
+
- **Hierarchy**: Is the most important content obvious within 2 seconds?
121
+
- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful?
122
+
- **Consistency**: Is the spacing system applied uniformly?
123
+
- **Responsiveness**: Does the layout adapt gracefully across screen sizes?
124
+
125
+
Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional.
+266
.agents/skills/optimize/SKILL.md
+266
.agents/skills/optimize/SKILL.md
···
1
+
---
2
+
name: optimize
3
+
description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[target]"
7
+
---
8
+
9
+
Identify and fix performance issues to create faster, smoother user experiences.
10
+
11
+
## Assess Performance Issues
12
+
13
+
Understand current performance and identify problems:
14
+
15
+
1. **Measure current state**:
16
+
- **Core Web Vitals**: LCP, FID/INP, CLS scores
17
+
- **Load time**: Time to interactive, first contentful paint
18
+
- **Bundle size**: JavaScript, CSS, image sizes
19
+
- **Runtime performance**: Frame rate, memory usage, CPU usage
20
+
- **Network**: Request count, payload sizes, waterfall
21
+
22
+
2. **Identify bottlenecks**:
23
+
- What's slow? (Initial load? Interactions? Animations?)
24
+
- What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)
25
+
- How bad is it? (Perceivable? Annoying? Blocking?)
26
+
- Who's affected? (All users? Mobile only? Slow connections?)
27
+
28
+
**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters.
29
+
30
+
## Optimization Strategy
31
+
32
+
Create systematic improvement plan:
33
+
34
+
### Loading Performance
35
+
36
+
**Optimize Images**:
37
+
- Use modern formats (WebP, AVIF)
38
+
- Proper sizing (don't load 3000px image for 300px display)
39
+
- Lazy loading for below-fold images
40
+
- Responsive images (`srcset`, `picture` element)
41
+
- Compress images (80-85% quality is usually imperceptible)
42
+
- Use CDN for faster delivery
43
+
44
+
```html
45
+
<img
46
+
src="hero.webp"
47
+
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
48
+
sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
49
+
loading="lazy"
50
+
alt="Hero image"
51
+
/>
52
+
```
53
+
54
+
**Reduce JavaScript Bundle**:
55
+
- Code splitting (route-based, component-based)
56
+
- Tree shaking (remove unused code)
57
+
- Remove unused dependencies
58
+
- Lazy load non-critical code
59
+
- Use dynamic imports for large components
60
+
61
+
```javascript
62
+
// Lazy load heavy component
63
+
const HeavyChart = lazy(() => import('./HeavyChart'));
64
+
```
65
+
66
+
**Optimize CSS**:
67
+
- Remove unused CSS
68
+
- Critical CSS inline, rest async
69
+
- Minimize CSS files
70
+
- Use CSS containment for independent regions
71
+
72
+
**Optimize Fonts**:
73
+
- Use `font-display: swap` or `optional`
74
+
- Subset fonts (only characters you need)
75
+
- Preload critical fonts
76
+
- Use system fonts when appropriate
77
+
- Limit font weights loaded
78
+
79
+
```css
80
+
@font-face {
81
+
font-family: 'CustomFont';
82
+
src: url('/fonts/custom.woff2') format('woff2');
83
+
font-display: swap; /* Show fallback immediately */
84
+
unicode-range: U+0020-007F; /* Basic Latin only */
85
+
}
86
+
```
87
+
88
+
**Optimize Loading Strategy**:
89
+
- Critical resources first (async/defer non-critical)
90
+
- Preload critical assets
91
+
- Prefetch likely next pages
92
+
- Service worker for offline/caching
93
+
- HTTP/2 or HTTP/3 for multiplexing
94
+
95
+
### Rendering Performance
96
+
97
+
**Avoid Layout Thrashing**:
98
+
```javascript
99
+
// ❌ Bad: Alternating reads and writes (causes reflows)
100
+
elements.forEach(el => {
101
+
const height = el.offsetHeight; // Read (forces layout)
102
+
el.style.height = height * 2; // Write
103
+
});
104
+
105
+
// ✅ Good: Batch reads, then batch writes
106
+
const heights = elements.map(el => el.offsetHeight); // All reads
107
+
elements.forEach((el, i) => {
108
+
el.style.height = heights[i] * 2; // All writes
109
+
});
110
+
```
111
+
112
+
**Optimize Rendering**:
113
+
- Use CSS `contain` property for independent regions
114
+
- Minimize DOM depth (flatter is faster)
115
+
- Reduce DOM size (fewer elements)
116
+
- Use `content-visibility: auto` for long lists
117
+
- Virtual scrolling for very long lists (react-window, react-virtualized)
118
+
119
+
**Reduce Paint & Composite**:
120
+
- Use `transform` and `opacity` for animations (GPU-accelerated)
121
+
- Avoid animating layout properties (width, height, top, left)
122
+
- Use `will-change` sparingly for known expensive operations
123
+
- Minimize paint areas (smaller is faster)
124
+
125
+
### Animation Performance
126
+
127
+
**GPU Acceleration**:
128
+
```css
129
+
/* ✅ GPU-accelerated (fast) */
130
+
.animated {
131
+
transform: translateX(100px);
132
+
opacity: 0.5;
133
+
}
134
+
135
+
/* ❌ CPU-bound (slow) */
136
+
.animated {
137
+
left: 100px;
138
+
width: 300px;
139
+
}
140
+
```
141
+
142
+
**Smooth 60fps**:
143
+
- Target 16ms per frame (60fps)
144
+
- Use `requestAnimationFrame` for JS animations
145
+
- Debounce/throttle scroll handlers
146
+
- Use CSS animations when possible
147
+
- Avoid long-running JavaScript during animations
148
+
149
+
**Intersection Observer**:
150
+
```javascript
151
+
// Efficiently detect when elements enter viewport
152
+
const observer = new IntersectionObserver((entries) => {
153
+
entries.forEach(entry => {
154
+
if (entry.isIntersecting) {
155
+
// Element is visible, lazy load or animate
156
+
}
157
+
});
158
+
});
159
+
```
160
+
161
+
### React/Framework Optimization
162
+
163
+
**React-specific**:
164
+
- Use `memo()` for expensive components
165
+
- `useMemo()` and `useCallback()` for expensive computations
166
+
- Virtualize long lists
167
+
- Code split routes
168
+
- Avoid inline function creation in render
169
+
- Use React DevTools Profiler
170
+
171
+
**Framework-agnostic**:
172
+
- Minimize re-renders
173
+
- Debounce expensive operations
174
+
- Memoize computed values
175
+
- Lazy load routes and components
176
+
177
+
### Network Optimization
178
+
179
+
**Reduce Requests**:
180
+
- Combine small files
181
+
- Use SVG sprites for icons
182
+
- Inline small critical assets
183
+
- Remove unused third-party scripts
184
+
185
+
**Optimize APIs**:
186
+
- Use pagination (don't load everything)
187
+
- GraphQL to request only needed fields
188
+
- Response compression (gzip, brotli)
189
+
- HTTP caching headers
190
+
- CDN for static assets
191
+
192
+
**Optimize for Slow Connections**:
193
+
- Adaptive loading based on connection (navigator.connection)
194
+
- Optimistic UI updates
195
+
- Request prioritization
196
+
- Progressive enhancement
197
+
198
+
## Core Web Vitals Optimization
199
+
200
+
### Largest Contentful Paint (LCP < 2.5s)
201
+
- Optimize hero images
202
+
- Inline critical CSS
203
+
- Preload key resources
204
+
- Use CDN
205
+
- Server-side rendering
206
+
207
+
### First Input Delay (FID < 100ms) / INP (< 200ms)
208
+
- Break up long tasks
209
+
- Defer non-critical JavaScript
210
+
- Use web workers for heavy computation
211
+
- Reduce JavaScript execution time
212
+
213
+
### Cumulative Layout Shift (CLS < 0.1)
214
+
- Set dimensions on images and videos
215
+
- Don't inject content above existing content
216
+
- Use `aspect-ratio` CSS property
217
+
- Reserve space for ads/embeds
218
+
- Avoid animations that cause layout shifts
219
+
220
+
```css
221
+
/* Reserve space for image */
222
+
.image-container {
223
+
aspect-ratio: 16 / 9;
224
+
}
225
+
```
226
+
227
+
## Performance Monitoring
228
+
229
+
**Tools to use**:
230
+
- Chrome DevTools (Lighthouse, Performance panel)
231
+
- WebPageTest
232
+
- Core Web Vitals (Chrome UX Report)
233
+
- Bundle analyzers (webpack-bundle-analyzer)
234
+
- Performance monitoring (Sentry, DataDog, New Relic)
235
+
236
+
**Key metrics**:
237
+
- LCP, FID/INP, CLS (Core Web Vitals)
238
+
- Time to Interactive (TTI)
239
+
- First Contentful Paint (FCP)
240
+
- Total Blocking Time (TBT)
241
+
- Bundle size
242
+
- Request count
243
+
244
+
**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.
245
+
246
+
**NEVER**:
247
+
- Optimize without measuring (premature optimization)
248
+
- Sacrifice accessibility for performance
249
+
- Break functionality while optimizing
250
+
- Use `will-change` everywhere (creates new layers, uses memory)
251
+
- Lazy load above-fold content
252
+
- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first)
253
+
- Forget about mobile performance (often slower devices, slower connections)
254
+
255
+
## Verify Improvements
256
+
257
+
Test that optimizations worked:
258
+
259
+
- **Before/after metrics**: Compare Lighthouse scores
260
+
- **Real user monitoring**: Track improvements for real users
261
+
- **Different devices**: Test on low-end Android, not just flagship iPhone
262
+
- **Slow connections**: Throttle to 3G, test experience
263
+
- **No regressions**: Ensure functionality still works
264
+
- **User perception**: Does it *feel* faster?
265
+
266
+
Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.
+142
.agents/skills/overdrive/SKILL.md
+142
.agents/skills/overdrive/SKILL.md
···
1
+
---
2
+
name: overdrive
3
+
description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[target]"
7
+
---
8
+
9
+
Start your response with:
10
+
11
+
```
12
+
──────────── ⚡ OVERDRIVE ─────────────
13
+
》》》 Entering overdrive mode...
14
+
```
15
+
16
+
Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic.
17
+
18
+
## MANDATORY PREPARATION
19
+
20
+
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
21
+
22
+
**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate.
23
+
24
+
### Propose Before Building
25
+
26
+
This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST:
27
+
28
+
1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like.
29
+
2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity).
30
+
3. Only proceed with the direction the user confirms.
31
+
32
+
Skipping this step risks building something embarrassing that needs to be thrown away.
33
+
34
+
### Iterate with Browser Automation
35
+
36
+
Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone.
37
+
38
+
---
39
+
40
+
## Assess What "Extraordinary" Means Here
41
+
42
+
The right kind of technical ambition depends entirely on what you're working with. Before choosing a technique, ask: **what would make a user of THIS specific interface say "wow, that's nice"?**
43
+
44
+
### For visual/marketing surfaces
45
+
Pages, hero sections, landing pages, portfolios — the "wow" is often sensory: a scroll-driven reveal, a shader background, a cinematic page transition, generative art that responds to the cursor.
46
+
47
+
### For functional UI
48
+
Tables, forms, dialogs, navigation — the "wow" is in how it FEELS: a dialog that morphs from the button that triggered it via View Transitions, a data table that renders 100k rows at 60fps via virtual scrolling, a form with streaming validation that feels instant, drag-and-drop with spring physics.
49
+
50
+
### For performance-critical UI
51
+
The "wow" is invisible but felt: a search that filters 50k items without a flicker, a complex form that never blocks the main thread, an image editor that processes in near-real-time. The interface just never hesitates.
52
+
53
+
### For data-heavy interfaces
54
+
Charts and dashboards — the "wow" is in fluidity: GPU-accelerated rendering via Canvas/WebGL for massive datasets, animated transitions between data states, force-directed graph layouts that settle naturally.
55
+
56
+
**The common thread**: something about the implementation goes beyond what users expect from a web interface. The technique serves the experience, not the other way around.
57
+
58
+
## The Toolkit
59
+
60
+
Organized by what you're trying to achieve, not by technology name.
61
+
62
+
### Make transitions feel cinematic
63
+
- **View Transitions API** (same-document: all browsers; cross-document: no Firefox) — shared element morphing between states. A list item expanding into a detail page. A button morphing into a dialog. This is the closest thing to native FLIP animations.
64
+
- **`@starting-style`** (all browsers) — animate elements from `display: none` to visible with CSS only, including entry keyframes
65
+
- **Spring physics** — natural motion with mass, tension, and damping instead of cubic-bezier. Libraries: motion (formerly Framer Motion), GSAP, or roll your own spring solver.
66
+
67
+
### Tie animation to scroll position
68
+
- **Scroll-driven animations** (`animation-timeline: scroll()`) — CSS-only, no JS. Parallax, progress bars, reveal sequences all driven by scroll position. (Chrome/Edge/Safari; Firefox: flag only — always provide a static fallback)
69
+
70
+
### Render beyond CSS
71
+
- **WebGL** (all browsers) — shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express.
72
+
- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only) — next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2.
73
+
- **Canvas 2D / OffscreenCanvas** — custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas.
74
+
- **SVG filter chains** — displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable.
75
+
76
+
### Make data feel alive
77
+
- **Virtual scrolling** — render only visible rows for tables/lists with tens of thousands of items. No library required for simple cases; TanStack Virtual for complex ones.
78
+
- **GPU-accelerated charts** — Canvas or WebGL-rendered data visualization for datasets too large for SVG/DOM. Libraries: deck.gl, regl-based custom renderers.
79
+
- **Animated data transitions** — morph between chart states rather than replacing. D3's `transition()` or View Transitions for DOM-based charts.
80
+
81
+
### Animate complex properties
82
+
- **`@property`** (all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate.
83
+
- **Web Animations API** (all browsers) — JavaScript-driven animations with the performance of CSS. Composable, cancellable, reversible. The foundation for complex choreography.
84
+
85
+
### Push performance boundaries
86
+
- **Web Workers** — move computation off the main thread. Heavy data processing, image manipulation, search indexing — anything that would cause jank.
87
+
- **OffscreenCanvas** — render in a Worker thread. The main thread stays free while complex visuals render in the background.
88
+
- **WASM** — near-native performance for computation-heavy features. Image processing, physics simulations, codecs.
89
+
90
+
### Interact with the device
91
+
- **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start.
92
+
- **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission.
93
+
94
+
**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary.
95
+
96
+
## Implement with Discipline
97
+
98
+
### Progressive enhancement is non-negotiable
99
+
100
+
Every technique must degrade gracefully. The experience without the enhancement must still be good.
101
+
102
+
```css
103
+
@supports (animation-timeline: scroll()) {
104
+
.hero { animation-timeline: scroll(); }
105
+
}
106
+
```
107
+
108
+
```javascript
109
+
if ('gpu' in navigator) { /* WebGPU */ }
110
+
else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ }
111
+
/* CSS-only fallback must still look good */
112
+
```
113
+
114
+
### Performance rules
115
+
116
+
- Target 60fps. If dropping below 50, simplify.
117
+
- Respect `prefers-reduced-motion` — always. Provide a beautiful static alternative.
118
+
- Lazy-initialize heavy resources (WebGL contexts, WASM modules) only when near viewport.
119
+
- Pause off-screen rendering. Kill what you can't see.
120
+
- Test on real mid-range devices, not just your development machine.
121
+
122
+
### Polish is the difference
123
+
124
+
The gap between "cool" and "extraordinary" is in the last 20% of refinement: the easing curve on a spring animation, the timing offset in a staggered reveal, the subtle secondary motion that makes a transition feel physical. Don't ship the first version that works — ship the version that feels inevitable.
125
+
126
+
**NEVER**:
127
+
- Ignore `prefers-reduced-motion` — this is an accessibility requirement, not a suggestion
128
+
- Ship effects that cause jank on mid-range devices
129
+
- Use bleeding-edge APIs without a functional fallback
130
+
- Add sound without explicit user opt-in
131
+
- Use technical ambition to mask weak design fundamentals — fix those first with other skills
132
+
- Layer multiple competing extraordinary moments — focus creates impact, excess creates noise
133
+
134
+
## Verify the Result
135
+
136
+
- **The wow test**: Show it to someone who hasn't seen it. Do they react?
137
+
- **The removal test**: Take it away. Does the experience feel diminished, or does nobody notice?
138
+
- **The device test**: Run it on a phone, a tablet, a Chromebook. Still smooth?
139
+
- **The accessibility test**: Enable reduced motion. Still beautiful?
140
+
- **The context test**: Does this make sense for THIS brand and audience?
141
+
142
+
Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do.
+224
.agents/skills/polish/SKILL.md
+224
.agents/skills/polish/SKILL.md
···
1
+
---
2
+
name: polish
3
+
description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[target]"
7
+
---
8
+
9
+
## MANDATORY PREPARATION
10
+
11
+
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship).
12
+
13
+
---
14
+
15
+
Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished.
16
+
17
+
## Design System Discovery
18
+
19
+
Before polishing, understand the system you are polishing toward:
20
+
21
+
1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API.
22
+
2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established?
23
+
3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale.
24
+
25
+
If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase.
26
+
27
+
## Pre-Polish Assessment
28
+
29
+
Understand the current state and goals:
30
+
31
+
1. **Review completeness**:
32
+
- Is it functionally complete?
33
+
- Are there known issues to preserve (mark with TODOs)?
34
+
- What's the quality bar? (MVP vs flagship feature?)
35
+
- When does it ship? (How much time for polish?)
36
+
37
+
2. **Identify polish areas**:
38
+
- Visual inconsistencies
39
+
- Spacing and alignment issues
40
+
- Interaction state gaps
41
+
- Copy inconsistencies
42
+
- Edge cases and error states
43
+
- Loading and transition smoothness
44
+
45
+
**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete.
46
+
47
+
## Polish Systematically
48
+
49
+
Work through these dimensions methodically:
50
+
51
+
### Visual Alignment & Spacing
52
+
53
+
- **Pixel-perfect alignment**: Everything lines up to grid
54
+
- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps)
55
+
- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering)
56
+
- **Responsive consistency**: Spacing and alignment work at all breakpoints
57
+
- **Grid adherence**: Elements snap to baseline grid
58
+
59
+
**Check**:
60
+
- Enable grid overlay and verify alignment
61
+
- Check spacing with browser inspector
62
+
- Test at multiple viewport sizes
63
+
- Look for elements that "feel" off
64
+
65
+
### Typography Refinement
66
+
67
+
- **Hierarchy consistency**: Same elements use same sizes/weights throughout
68
+
- **Line length**: 45-75 characters for body text
69
+
- **Line height**: Appropriate for font size and context
70
+
- **Widows & orphans**: No single words on last line
71
+
- **Hyphenation**: Appropriate for language and column width
72
+
- **Kerning**: Adjust letter spacing where needed (especially headlines)
73
+
- **Font loading**: No FOUT/FOIT flashes
74
+
75
+
### Color & Contrast
76
+
77
+
- **Contrast ratios**: All text meets WCAG standards
78
+
- **Consistent token usage**: No hard-coded colors, all use design tokens
79
+
- **Theme consistency**: Works in all theme variants
80
+
- **Color meaning**: Same colors mean same things throughout
81
+
- **Accessible focus**: Focus indicators visible with sufficient contrast
82
+
- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma)
83
+
- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency
84
+
85
+
### Interaction States
86
+
87
+
Every interactive element needs all states:
88
+
89
+
- **Default**: Resting state
90
+
- **Hover**: Subtle feedback (color, scale, shadow)
91
+
- **Focus**: Keyboard focus indicator (never remove without replacement)
92
+
- **Active**: Click/tap feedback
93
+
- **Disabled**: Clearly non-interactive
94
+
- **Loading**: Async action feedback
95
+
- **Error**: Validation or error state
96
+
- **Success**: Successful completion
97
+
98
+
**Missing states create confusion and broken experiences**.
99
+
100
+
### Micro-interactions & Transitions
101
+
102
+
- **Smooth transitions**: All state changes animated appropriately (150-300ms)
103
+
- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated.
104
+
- **No jank**: 60fps animations, only animate transform and opacity
105
+
- **Appropriate motion**: Motion serves purpose, not decoration
106
+
- **Reduced motion**: Respects `prefers-reduced-motion`
107
+
108
+
### Content & Copy
109
+
110
+
- **Consistent terminology**: Same things called same names throughout
111
+
- **Consistent capitalization**: Title Case vs Sentence case applied consistently
112
+
- **Grammar & spelling**: No typos
113
+
- **Appropriate length**: Not too wordy, not too terse
114
+
- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them)
115
+
116
+
### Icons & Images
117
+
118
+
- **Consistent style**: All icons from same family or matching style
119
+
- **Appropriate sizing**: Icons sized consistently for context
120
+
- **Proper alignment**: Icons align with adjacent text optically
121
+
- **Alt text**: All images have descriptive alt text
122
+
- **Loading states**: Images don't cause layout shift, proper aspect ratios
123
+
- **Retina support**: 2x assets for high-DPI screens
124
+
125
+
### Forms & Inputs
126
+
127
+
- **Label consistency**: All inputs properly labeled
128
+
- **Required indicators**: Clear and consistent
129
+
- **Error messages**: Helpful and consistent
130
+
- **Tab order**: Logical keyboard navigation
131
+
- **Auto-focus**: Appropriate (don't overuse)
132
+
- **Validation timing**: Consistent (on blur vs on submit)
133
+
134
+
### Edge Cases & Error States
135
+
136
+
- **Loading states**: All async actions have loading feedback
137
+
- **Empty states**: Helpful empty states, not just blank space
138
+
- **Error states**: Clear error messages with recovery paths
139
+
- **Success states**: Confirmation of successful actions
140
+
- **Long content**: Handles very long names, descriptions, etc.
141
+
- **No content**: Handles missing data gracefully
142
+
- **Offline**: Appropriate offline handling (if applicable)
143
+
144
+
### Responsiveness
145
+
146
+
- **All breakpoints**: Test mobile, tablet, desktop
147
+
- **Touch targets**: 44x44px minimum on touch devices
148
+
- **Readable text**: No text smaller than 14px on mobile
149
+
- **No horizontal scroll**: Content fits viewport
150
+
- **Appropriate reflow**: Content adapts logically
151
+
152
+
### Performance
153
+
154
+
- **Fast initial load**: Optimize critical path
155
+
- **No layout shift**: Elements don't jump after load (CLS)
156
+
- **Smooth interactions**: No lag or jank
157
+
- **Optimized images**: Appropriate formats and sizes
158
+
- **Lazy loading**: Off-screen content loads lazily
159
+
160
+
### Code Quality
161
+
162
+
- **Remove console logs**: No debug logging in production
163
+
- **Remove commented code**: Clean up dead code
164
+
- **Remove unused imports**: Clean up unused dependencies
165
+
- **Consistent naming**: Variables and functions follow conventions
166
+
- **Type safety**: No TypeScript `any` or ignored errors
167
+
- **Accessibility**: Proper ARIA labels and semantic HTML
168
+
169
+
## Polish Checklist
170
+
171
+
Go through systematically:
172
+
173
+
- [ ] Visual alignment perfect at all breakpoints
174
+
- [ ] Spacing uses design tokens consistently
175
+
- [ ] Typography hierarchy consistent
176
+
- [ ] All interactive states implemented
177
+
- [ ] All transitions smooth (60fps)
178
+
- [ ] Copy is consistent and polished
179
+
- [ ] Icons are consistent and properly sized
180
+
- [ ] All forms properly labeled and validated
181
+
- [ ] Error states are helpful
182
+
- [ ] Loading states are clear
183
+
- [ ] Empty states are welcoming
184
+
- [ ] Touch targets are 44x44px minimum
185
+
- [ ] Contrast ratios meet WCAG AA
186
+
- [ ] Keyboard navigation works
187
+
- [ ] Focus indicators visible
188
+
- [ ] No console errors or warnings
189
+
- [ ] No layout shift on load
190
+
- [ ] Works in all supported browsers
191
+
- [ ] Respects reduced motion preference
192
+
- [ ] Code is clean (no TODOs, console.logs, commented code)
193
+
194
+
**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up.
195
+
196
+
**NEVER**:
197
+
- Polish before it's functionally complete
198
+
- Spend hours on polish if it ships in 30 minutes (triage)
199
+
- Introduce bugs while polishing (test thoroughly)
200
+
- Ignore systematic issues (if spacing is off everywhere, fix the system)
201
+
- Perfect one thing while leaving others rough (consistent quality level)
202
+
- Create new one-off components when design system equivalents exist
203
+
- Hard-code values that should use design tokens
204
+
205
+
## Final Verification
206
+
207
+
Before marking as done:
208
+
209
+
- **Use it yourself**: Actually interact with the feature
210
+
- **Test on real devices**: Not just browser DevTools
211
+
- **Ask someone else to review**: Fresh eyes catch things
212
+
- **Compare to design**: Match intended design
213
+
- **Check all states**: Don't just test happy path
214
+
215
+
## Clean Up
216
+
217
+
After polishing, ensure code quality:
218
+
219
+
- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version.
220
+
- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish.
221
+
- **Consolidate tokens**: If you introduced new values, check whether they should be tokens.
222
+
- **Verify DRYness**: Look for duplication introduced during polishing and consolidate.
223
+
224
+
Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter.
+103
.agents/skills/quieter/SKILL.md
+103
.agents/skills/quieter/SKILL.md
···
1
+
---
2
+
name: quieter
3
+
description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[target]"
7
+
---
8
+
9
+
Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.
10
+
11
+
## MANDATORY PREPARATION
12
+
13
+
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
14
+
15
+
---
16
+
17
+
## Assess Current State
18
+
19
+
Analyze what makes the design feel too intense:
20
+
21
+
1. **Identify intensity sources**:
22
+
- **Color saturation**: Overly bright or saturated colors
23
+
- **Contrast extremes**: Too much high-contrast juxtaposition
24
+
- **Visual weight**: Too many bold, heavy elements competing
25
+
- **Animation excess**: Too much motion or overly dramatic effects
26
+
- **Complexity**: Too many visual elements, patterns, or decorations
27
+
- **Scale**: Everything is large and loud with no hierarchy
28
+
29
+
2. **Understand the context**:
30
+
- What's the purpose? (Marketing vs tool vs reading experience)
31
+
- Who's the audience? (Some contexts need energy)
32
+
- What's working? (Don't throw away good ideas)
33
+
- What's the core message? (Preserve what matters)
34
+
35
+
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
36
+
37
+
**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.
38
+
39
+
## Plan Refinement
40
+
41
+
Create a strategy to reduce intensity while maintaining impact:
42
+
43
+
- **Color approach**: Desaturate or shift to more sophisticated tones?
44
+
- **Hierarchy approach**: Which elements should stay bold (very few), which should recede?
45
+
- **Simplification approach**: What can be removed entirely?
46
+
- **Sophistication approach**: How can we signal quality through restraint?
47
+
48
+
**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision.
49
+
50
+
## Refine the Design
51
+
52
+
Systematically reduce intensity across these dimensions:
53
+
54
+
### Color Refinement
55
+
- **Reduce saturation**: Shift from fully saturated to 70-85% saturation
56
+
- **Soften palette**: Replace bright colors with muted, sophisticated tones
57
+
- **Reduce color variety**: Use fewer colors more thoughtfully
58
+
- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
59
+
- **Gentler contrasts**: High contrast only where it matters most
60
+
- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness
61
+
- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead
62
+
63
+
### Visual Weight Reduction
64
+
- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
65
+
- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness
66
+
- **White space**: Increase breathing room, reduce density
67
+
- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely
68
+
69
+
### Simplification
70
+
- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose
71
+
- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes
72
+
- **Reduce layering**: Flatten visual hierarchy where possible
73
+
- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
74
+
75
+
### Motion Reduction
76
+
- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing
77
+
- **Remove decorative animations**: Keep functional motion, remove flourishes
78
+
- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
79
+
- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic
80
+
- **Remove animations entirely** if they're not serving a clear purpose
81
+
82
+
### Composition Refinement
83
+
- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling
84
+
- **Align to grid**: Bring rogue elements back into systematic alignment
85
+
- **Even out spacing**: Replace extreme spacing variations with consistent rhythm
86
+
87
+
**NEVER**:
88
+
- Make everything the same size/weight (hierarchy still matters)
89
+
- Remove all color (quiet ≠ grayscale)
90
+
- Eliminate all personality (maintain character through refinement)
91
+
- Sacrifice usability for aesthetics (functional elements still need clear affordances)
92
+
- Make everything small and light (some anchors needed)
93
+
94
+
## Verify Quality
95
+
96
+
Ensure refinement maintains quality:
97
+
98
+
- **Still functional**: Can users still accomplish tasks easily?
99
+
- **Still distinctive**: Does it have character, or is it generic now?
100
+
- **Better reading**: Is text easier to read for extended periods?
101
+
- **Sophistication**: Does it feel more refined and premium?
102
+
103
+
Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality.
+96
.agents/skills/shape/SKILL.md
+96
.agents/skills/shape/SKILL.md
···
1
+
---
2
+
name: shape
3
+
description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[feature to shape]"
7
+
---
8
+
9
+
## MANDATORY PREPARATION
10
+
11
+
Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first.
12
+
13
+
---
14
+
15
+
Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork.
16
+
17
+
**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good.
18
+
19
+
**Output**: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill.
20
+
21
+
## Philosophy
22
+
23
+
Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise.
24
+
25
+
## Phase 1: Discovery Interview
26
+
27
+
**Do NOT write any code or make any design decisions during this phase.** Your only job is to understand the feature deeply enough to make excellent design decisions later.
28
+
29
+
Ask these questions in conversation, adapting based on answers. Don't dump them all at once; have a natural dialogue. ask the user directly to clarify what you cannot infer.
30
+
31
+
### Purpose & Context
32
+
- What is this feature for? What problem does it solve?
33
+
- Who specifically will use it? (Not "users"; be specific: role, context, frequency)
34
+
- What does success look like? How will you know this feature is working?
35
+
- What's the user's state of mind when they reach this feature? (Rushed? Exploring? Anxious? Focused?)
36
+
37
+
### Content & Data
38
+
- What content or data does this feature display or collect?
39
+
- What are the realistic ranges? (Minimum, typical, maximum, e.g., 0 items, 5 items, 500 items)
40
+
- What are the edge cases? (Empty state, error state, first-time use, power user)
41
+
- Is any content dynamic? What changes and how often?
42
+
43
+
### Design Goals
44
+
- What's the single most important thing a user should do or understand here?
45
+
- What should this feel like? (Fast/efficient? Calm/trustworthy? Fun/playful? Premium/refined?)
46
+
- Are there existing patterns in the product this should be consistent with?
47
+
- Are there specific examples (inside or outside the product) that capture what you're going for?
48
+
49
+
### Constraints
50
+
- Are there technical constraints? (Framework, performance budget, browser support)
51
+
- Are there content constraints? (Localization, dynamic text length, user-generated content)
52
+
- Mobile/responsive requirements?
53
+
- Accessibility requirements beyond WCAG AA?
54
+
55
+
### Anti-Goals
56
+
- What should this NOT be? What would be a wrong direction?
57
+
- What's the biggest risk of getting this wrong?
58
+
59
+
## Phase 2: Design Brief
60
+
61
+
After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete.
62
+
63
+
### Brief Structure
64
+
65
+
**1. Feature Summary** (2-3 sentences)
66
+
What this is, who it's for, what it needs to accomplish.
67
+
68
+
**2. Primary User Action**
69
+
The single most important thing a user should do or understand here.
70
+
71
+
**3. Design Direction**
72
+
How this should feel. What aesthetic approach fits. Reference the project's design context from `.impeccable.md` and explain how this feature should express it.
73
+
74
+
**4. Layout Strategy**
75
+
High-level spatial approach: what gets emphasis, what's secondary, how information flows. Describe the visual hierarchy and rhythm, not specific CSS.
76
+
77
+
**5. Key States**
78
+
List every state the feature needs: default, empty, loading, error, success, edge cases. For each, note what the user needs to see and feel.
79
+
80
+
**6. Interaction Model**
81
+
How users interact with this feature. What happens on click, hover, scroll? What feedback do they get? What's the flow from entry to completion?
82
+
83
+
**7. Content Requirements**
84
+
What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges.
85
+
86
+
**8. Recommended References**
87
+
Based on the brief, list which impeccable reference files would be most valuable during implementation (e.g., spatial-design.md for complex layouts, motion-design.md for animated features, interaction-design.md for form-heavy features).
88
+
89
+
**9. Open Questions**
90
+
Anything unresolved that the implementer should resolve during build.
91
+
92
+
---
93
+
94
+
ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions.
95
+
96
+
Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.)
+116
.agents/skills/typeset/SKILL.md
+116
.agents/skills/typeset/SKILL.md
···
1
+
---
2
+
name: typeset
3
+
description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.
4
+
version: 2.1.1
5
+
user-invocable: true
6
+
argument-hint: "[target]"
7
+
---
8
+
9
+
Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type.
10
+
11
+
## MANDATORY PREPARATION
12
+
13
+
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
14
+
15
+
---
16
+
17
+
## Assess Current Typography
18
+
19
+
Analyze what's weak or generic about the current type:
20
+
21
+
1. **Font choices**:
22
+
- Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults)
23
+
- Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface)
24
+
- Are there too many font families? (More than 2-3 is almost always a mess)
25
+
26
+
2. **Hierarchy**:
27
+
- Can you tell headings from body from captions at a glance?
28
+
- Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy)
29
+
- Are weight contrasts strong enough? (Medium vs Regular is barely visible)
30
+
31
+
3. **Sizing & scale**:
32
+
- Is there a consistent type scale, or are sizes arbitrary?
33
+
- Does body text meet minimum readability? (16px+)
34
+
- Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
35
+
36
+
4. **Readability**:
37
+
- Are line lengths comfortable? (45-75 characters ideal)
38
+
- Is line-height appropriate for the font and context?
39
+
- Is there enough contrast between text and background?
40
+
41
+
5. **Consistency**:
42
+
- Are the same elements styled the same way throughout?
43
+
- Are font weights used consistently? (Not bold in one section, semibold in another for the same role)
44
+
- Is letter-spacing intentional or default everywhere?
45
+
46
+
**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting.
47
+
48
+
## Plan Typography Improvements
49
+
50
+
Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies.
51
+
52
+
Create a systematic plan:
53
+
54
+
- **Font selection**: Do fonts need replacing? What fits the brand/context?
55
+
- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy
56
+
- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits)
57
+
- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements
58
+
59
+
## Improve Typography Systematically
60
+
61
+
### Font Selection
62
+
63
+
If fonts need replacing:
64
+
- Choose fonts that reflect the brand personality
65
+
- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights
66
+
- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks)
67
+
68
+
### Establish Hierarchy
69
+
70
+
Build a clear type scale:
71
+
- **5 sizes cover most needs**: caption, secondary, body, subheading, heading
72
+
- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5)
73
+
- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone
74
+
- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need
75
+
- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed
76
+
77
+
### Fix Readability
78
+
79
+
- Set `max-width` on text containers using `ch` units (`max-width: 65ch`)
80
+
- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7)
81
+
- Increase line-height slightly for light-on-dark text
82
+
- Ensure body text is at least 16px / 1rem
83
+
84
+
### Refine Details
85
+
86
+
- Use `tabular-nums` for data tables and numbers that should align
87
+
- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text
88
+
- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`)
89
+
- Set `font-kerning: normal` and consider OpenType features where appropriate
90
+
91
+
### Weight Consistency
92
+
93
+
- Define clear roles for each weight and stick to them
94
+
- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty)
95
+
- Load only the weights you actually use (each weight adds to page load)
96
+
97
+
**NEVER**:
98
+
- Use more than 2-3 font families
99
+
- Pick sizes arbitrarily — commit to a scale
100
+
- Set body text below 16px
101
+
- Use decorative/display fonts for body text
102
+
- Disable browser zoom (`user-scalable=no`)
103
+
- Use `px` for font sizes — use `rem` to respect user settings
104
+
- Default to Inter/Roboto/Open Sans when personality matters
105
+
- Pair fonts that are similar but not identical (two geometric sans-serifs)
106
+
107
+
## Verify Typography Improvements
108
+
109
+
- **Hierarchy**: Can you identify heading vs body vs caption instantly?
110
+
- **Readability**: Is body text comfortable to read in long passages?
111
+
- **Consistency**: Are same-role elements styled identically throughout?
112
+
- **Personality**: Does the typography reflect the brand?
113
+
- **Performance**: Are web fonts loading efficiently without layout shift?
114
+
- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%?
115
+
116
+
Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make.
-1
.claude/skills/frontend-design
-1
.claude/skills/frontend-design
···
1
-
../../.agents/skills/frontend-design
-1
.pi/skills/agent-browser
-1
.pi/skills/agent-browser
···
1
-
../../.agents/skills/agent-browser
-1
.pi/skills/frontend-design
-1
.pi/skills/frontend-design
···
1
-
../../.agents/skills/frontend-design
+80
skills-lock.json
+80
skills-lock.json
···
1
1
{
2
2
"version": 1,
3
3
"skills": {
4
+
"adapt": {
5
+
"source": "pbakaus/impeccable",
6
+
"sourceType": "github",
7
+
"computedHash": "65085998d643c3b64ff323ca74d76496b47484046b030730c00c03a0208bf410"
8
+
},
4
9
"agent-browser": {
5
10
"source": "vercel-labs/agent-browser",
6
11
"sourceType": "github",
7
12
"computedHash": "6bee044f51bfe9bcc20e2a779ca2a31fae5c6b0095ad30b264ecef9a27cb3ce6"
13
+
},
14
+
"animate": {
15
+
"source": "pbakaus/impeccable",
16
+
"sourceType": "github",
17
+
"computedHash": "354414a934957f9d54a71468abe81888304d35b47a4fe8e27fff08f60b457d53"
18
+
},
19
+
"audit": {
20
+
"source": "pbakaus/impeccable",
21
+
"sourceType": "github",
22
+
"computedHash": "115a00d21d91d52123115af789948cb22bd604de0084837b5533f5e4af3c4055"
23
+
},
24
+
"bolder": {
25
+
"source": "pbakaus/impeccable",
26
+
"sourceType": "github",
27
+
"computedHash": "1787478962577c9d5bde26e89e47c1654aa9c8f3c47c316a026731db0000a92e"
28
+
},
29
+
"clarify": {
30
+
"source": "pbakaus/impeccable",
31
+
"sourceType": "github",
32
+
"computedHash": "42877142fcc51dcc6be696349aa7df8887eb29510e2a5868beac913f5f84de31"
33
+
},
34
+
"colorize": {
35
+
"source": "pbakaus/impeccable",
36
+
"sourceType": "github",
37
+
"computedHash": "4793ac377b2bc1a5831d9634ce882373350cc5d097fd631d192155266204ceb8"
38
+
},
39
+
"delight": {
40
+
"source": "pbakaus/impeccable",
41
+
"sourceType": "github",
42
+
"computedHash": "1f6f4adee0b964e8344c0baef46b4e303ab3ba20932907bcbb1444ba7b3273b2"
43
+
},
44
+
"distill": {
45
+
"source": "pbakaus/impeccable",
46
+
"sourceType": "github",
47
+
"computedHash": "669a671f855be8773e4c2936e54d4243fbd1d273f87633158544efe3dbc4d825"
8
48
},
9
49
"frontend-design": {
10
50
"source": "anthropics/skills",
11
51
"sourceType": "github",
12
52
"computedHash": "063a0e6448123cd359ad0044cc46b0e490cc7964d45ef4bb9fd842bd2ffbca67"
53
+
},
54
+
"impeccable": {
55
+
"source": "pbakaus/impeccable",
56
+
"sourceType": "github",
57
+
"computedHash": "a26b3dd377c4572b1c34c68f82ab9a1cb806f21c7157060327fe60e9b6d2e277"
58
+
},
59
+
"layout": {
60
+
"source": "pbakaus/impeccable",
61
+
"sourceType": "github",
62
+
"computedHash": "6b5fd49587616ca1e594e9c6b11bc1cef5eb0b2d137c307de54a8a650770f4ce"
63
+
},
64
+
"optimize": {
65
+
"source": "pbakaus/impeccable",
66
+
"sourceType": "github",
67
+
"computedHash": "979ffc76a4345c081fdf89078b7107c216d70696e027b23e8e24972dd4e457b2"
68
+
},
69
+
"overdrive": {
70
+
"source": "pbakaus/impeccable",
71
+
"sourceType": "github",
72
+
"computedHash": "30e2909c14b9e860b580e63f9bbe10cc1dee8de0be9b03013218c3ef8d9ede78"
73
+
},
74
+
"polish": {
75
+
"source": "pbakaus/impeccable",
76
+
"sourceType": "github",
77
+
"computedHash": "c294f2570dcc5b8865d17f0dc5ef339a700c868f1b20fa9994297f64ace2d4de"
78
+
},
79
+
"quieter": {
80
+
"source": "pbakaus/impeccable",
81
+
"sourceType": "github",
82
+
"computedHash": "2c20b12bb4ece445d45fc63bda020aecf78b3cdf6d593beb59c273f658293130"
83
+
},
84
+
"shape": {
85
+
"source": "pbakaus/impeccable",
86
+
"sourceType": "github",
87
+
"computedHash": "8edad33758f2461f51afdb51741bfcc4cc57d84ea42e2751a84be2c6a2d48f69"
88
+
},
89
+
"typeset": {
90
+
"source": "pbakaus/impeccable",
91
+
"sourceType": "github",
92
+
"computedHash": "1cd76e560d1ba25b0bd5f7adfa2957a9f653a3ad0b031d467221154fcd1e0423"
13
93
}
14
94
}
15
95
}