skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-11 21:57:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

stubs and website

Browse Source
This commit is contained in:
Paul Bakaus
2025-11-16 18:52:23 -08:00
parent 7ba3f3fffd
commit 89d179143b
132 changed files with 18585 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+13 -9
View File
@@ -1,16 +1,20 @@
# Node.js
# Dependencies
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories
.vscode/
.idea/
# Generated files
dist/*.zip
# Build artifacts
*.log
# OS files
.DS_Store
Thumbs.db
# Keep dist/ - it's committed for distribution!
# dist/
# IDE
.vscode/
.idea/
# Environment
.env
.env.local
AGENTS.md
+41 -10
View File
@@ -45,10 +45,20 @@ vibe-design-plugins/
│ ├── prompts/*.md
│ ├── AGENTS.md
│ └── AGENTS.*.md
├── public/ # Website for impeccable.style
│ ├── index.html # Main page
│ ├── css/ # Modular CSS (9 files)
│ │ ├── main.css # Entry point with imports
│ │ ├── tokens.css # Design system
│ │ └── ... # Component styles
│ └── app.js # Vanilla JS
├── server/ # Bun server
│ └── index.js # Serves website + API routes
├── scripts/ # Build system (Bun)
│ ├── build.js # Main orchestrator
│ ├── lib/
│ │ ├── utils.js # Shared utilities
│ │ ├── zip.js # ZIP generation
│ │ └── transformers/ # Provider-specific transformers
│ │ ├── cursor.js
│ │ ├── claude-code.js
@@ -59,6 +69,29 @@ vibe-design-plugins/
└── package.json # Bun scripts
```
## Website (impeccable.style)
**Tech Stack:**
- Vanilla JavaScript (no frameworks)
- Modern CSS with Bun's bundler (nesting, OKLCH colors, @import)
- Bun server with HTML imports as routes
- Deployed on Vercel with Bun runtime
**Design:**
- Editorial precision aesthetic
- Cormorant Garamond (display) + Instrument Sans (body)
- OKLCH color space for vibrant, perceptually uniform colors
- Editorial sidebar layout (title left, content right)
- Modular CSS architecture (9 files)
**Routes:**
- `/` - Homepage
- `/api/skills` - JSON list
- `/api/commands` - JSON list
- `/api/download/skill/:provider/:id` - Individual file
- `/api/download/command/:provider/:id` - Individual file
- `/api/download/bundle/:provider` - ZIP bundle
## Source File Format
### Commands (`source/commands/*.md`)
@@ -152,6 +185,12 @@ End users can copy files directly without needing build tools.
- Gemini: Uses native `@file.md` import feature
- Codex: Uses routing pattern with AGENTS.md guide
### Why vanilla JS for website?
- No build complexity
- Bun handles everything natively
- Modern features (ES6+, CSS nesting, OKLCH colors)
- Fast, lean, maintainable
## Adding New Content
1. **Create source file** in `source/commands/` or `source/skills/`
@@ -161,14 +200,6 @@ End users can copy files directly without needing build tools.
5. **Test** with your provider
6. **Commit** both source and dist files
## Current Content
### Commands
- **normalize**: Normalize design to match design system
### Skills
- **frontend-design**: Create distinctive, production-grade frontend interfaces
## Important Notes
- **Source is truth**: Always edit `source/`, never edit `dist/` directly
@@ -178,9 +209,9 @@ End users can copy files directly without needing build tools.
## Documentation
- **README.md**: End user guide (installation, usage)
- **README.md**: End user guide (installation, usage, quick dev setup)
- **DEVELOP.md**: Contributor guide (architecture, build system, adding content)
- **This file**: Context for AI assistants and new developers
- **This file (AGENTS.md)**: Context for AI assistants and new developers
## Provider Documentation Links
README.md
+174 -15
View File
@@ -1,22 +1,112 @@
# vibe-design-plugins
# impeccable.style
Cross-provider design skills and commands for LLM-powered development tools.
> **🌐 Visit [impeccable.style](https://impeccable.style)** to download bundles, individual skills, or commands for your IDE/CLI.
## Quick Start
**Option 1: Download from Website (Recommended)**
Visit [impeccable.style](https://impeccable.style) and download the complete bundle for your tool:
- One-click ZIP downloads for Cursor, Claude Code, Gemini CLI, or Codex CLI
- Individual skill and command downloads
- Always up-to-date with the latest version
**Option 2: Clone from GitHub**
```bash
git clone https://github.com/pbakaus/vibe-design-plugins.git
cd vibe-design-plugins
```
Then copy the appropriate files from `dist/` to your IDE/CLI configuration directory (see [Installation](#installation) below).
## What's Included
### Commands
- **normalize** - Normalize your design to match your design system and ensure consistency
### Commands (15)
### Skills
- **frontend-design** - Create distinctive, production-grade frontend interfaces with exceptional design quality
**Core Workflow:**
- **normalize** - Align features with design system standards
- **audit** - Comprehensive quality audit with severity ratings and recommendations
**Quality & Polish:**
- **polish** - Final quality pass before shipping (alignment, spacing, consistency)
- **clarify** - Improve unclear UX copy and microcopy
- **optimize** - Performance improvements (loading, rendering, bundle size)
- **harden** - Error handling, i18n, text wrapping, edge cases
**Aesthetic Adjustment:**
- **quieter** - Tone down overly bold designs → refined sophistication
- **bolder** - Amplify boring designs → memorable impact
- **simplify** - Strip to essence → clarity through reduction
**Enhancement:**
- **animate** - Add purposeful motion and micro-interactions
- **colorize** - Introduce strategic color to monochromatic designs
- **delight** - Add moments of joy and personality
**System & Growth:**
- **extract** - Pull components/tokens into design system
- **adapt** - Adapt designs for different devices/contexts
- **onboard** - Design onboarding flows and empty states
### Skills (8)
- **frontend-design** - Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.
- **typography** - Master typography systems that balance timeless principles with modern web capabilities. Creates readable, systematically coherent typography that is both performant and aesthetically distinctive.
- **color-and-contrast** - Build sophisticated color systems balancing aesthetics with accessibility and function. Produces beautiful, accessible color implementations with systematic coherence across all theme variants.
- **spatial-design** - Master spatial design balancing systematic precision with artistic composition. Creates systematically organized layouts with compelling visual hierarchy and intentional spatial relationships.
- **motion-design** - Create purposeful motion that enhances usability and provides feedback without sacrificing performance. Produces smooth, delightful animations that guide attention and reinforce interactions while maintaining 60fps performance.
- **interaction-design** - Design intuitive interaction patterns that feel natural and provide clear feedback. Creates accessible, forgiving interfaces where every state is clear and every action provides immediate feedback.
- **responsive-design** - Create responsive interfaces that adapt beautifully across devices, screen sizes, and input methods. Produces fluid, performant experiences that feel native to each device while maintaining consistency.
- **ux-writing** - Write clear, helpful, and human interface copy that users understand immediately. Produces concise, empathetic copy that guides users confidently through tasks without confusion or frustration.
## Command & Skill Relationships
### Diagnostic Flow
1. **audit** (report issues) → Use specific commands to fix:
- Design system issues → **normalize** or **extract**
- Performance issues → **optimize**
- Edge cases → **harden**
- Responsiveness → **adapt**
- Copy clarity → **clarify**
### Aesthetic Direction Flow
- Too boring → **bolder** + **colorize** + **delight**
- Too intense → **quieter** + **simplify**
- Too cluttered → **simplify** + **normalize**
- Too static → **animate** + **delight**
### Production Flow
1. **Build** → Use skills (**frontend-design**, **typography**, **spatial-design**, etc.)
2. **Refine** → **normalize** + **clarify** + **adapt**
3. **Harden** → **harden** + **optimize**
4. **Audit** → **audit** to catch issues
5. **Polish** → **polish** final pass
6. **Enhance** → **delight** + **animate** (optional)
### Skills Support Commands
- **typography** skill → **normalize** typography across app
- **ux-writing** skill → **clarify** existing copy
- **responsive-design** skill → **adapt** for new device
- **motion-design** skill → **animate** static interface
## Installation
Choose your provider and copy the files to the appropriate location:
After downloading from [impeccable.style](https://impeccable.style) or cloning this repo, install for your provider:
### Cursor
Copy commands and rules to your project's `.cursor` directory:
**From Website**: Download the Cursor bundle ZIP from [impeccable.style](https://impeccable.style), unzip, and copy to your project:
```bash
# After unzipping the downloaded bundle
cp -r cursor/commands/* your-project/.cursor/commands/
cp -r cursor/rules/* your-project/.cursor/rules/
```
**From Repo**: Copy directly from the dist directory:
```bash
cp -r dist/cursor/commands/* .cursor/commands/
@@ -31,28 +121,45 @@ cp -r dist/cursor/rules/* .cursor/rules/
### Claude Code
Copy to your global Claude directory:
**From Website**: Download the Claude Code bundle ZIP from [impeccable.style](https://impeccable.style), unzip, and copy:
```bash
# Global installation
cp -r claude-code/commands/* ~/.claude/commands/
cp -r claude-code/skills/* ~/.claude/skills/
# Or project-specific
cp -r claude-code/commands/* .claude/commands/
cp -r claude-code/skills/* .claude/skills/
```
**From Repo**:
```bash
cp -r dist/claude-code/commands/* ~/.claude/commands/
cp -r dist/claude-code/skills/* ~/.claude/skills/
```
Or for project-specific use, copy to `.claude/` in your project root.
**Reference**:
- [Claude Code Slash Commands](https://code.claude.com/docs/en/slash-commands)
- [Anthropic Skills Documentation](https://github.com/anthropics/skills)
### Gemini CLI
Copy commands and skill files to your project:
**From Website**: Download the Gemini CLI bundle ZIP from [impeccable.style](https://impeccable.style), unzip, and copy:
```bash
# Commands (global for all projects)
cp -r dist/gemini/commands/* ~/.gemini/commands/
# Commands (global)
cp -r gemini/commands/* ~/.gemini/commands/
# Skills (project-specific - place at your project root)
# Skills (project-specific)
cp gemini/GEMINI*.md ~/your-project-root/
```
**From Repo**:
```bash
cp -r dist/gemini/commands/* ~/.gemini/commands/
cp dist/gemini/GEMINI*.md ~/your-project-root/
```
@@ -68,7 +175,17 @@ cp dist/gemini/GEMINI*.md ~/your-project-root/
### Codex CLI
Copy prompts and skill files:
**From Website**: Download the Codex CLI bundle ZIP from [impeccable.style](https://impeccable.style), unzip, and copy:
```bash
# Prompts (global)
cp -r codex/prompts/* ~/.codex/prompts/
# Skills (project-specific)
cp codex/AGENTS*.md ~/your-project-root/
```
**From Repo**:
```bash
cp -r dist/codex/prompts/* ~/.codex/prompts/
@@ -91,11 +208,14 @@ cp dist/codex/AGENTS*.md ~/your-project-root/
**Cursor, Claude Code**:
```
/normalize
/audit
/polish
```
**Gemini**:
```
/normalize <optional-feature-name>
/audit <optional-area>
```
**Codex**:
@@ -121,10 +241,49 @@ Skills are automatically available once installed. Refer to your provider's docu
| Frontmatter | ❌ | ✅ | ✅ (TOML) | ✅ |
| Modular Skills | ❌ | ❌ | ✅ | ✅ |
## Development
### Local Setup
```bash
# Clone the repo
git clone https://github.com/pbakaus/vibe-design-plugins.git
cd vibe-design-plugins
# Build distribution files
bun run build
# Start dev server
bun run dev
# Visit http://localhost:3000
```
### Project Structure
- `source/` - Edit these! Single source of truth for all content
- `dist/` - Generated provider-specific files (committed for users)
- `public/` - Website (HTML, CSS modules, vanilla JS)
- `server/` - Bun server for impeccable.style
- `scripts/` - Build system that transforms source → dist
### Deployment
The site runs on Vercel with Bun runtime. Just push to main and it auto-deploys.
```bash
# Production build
bun run build
bun run start # Uses --production flag
```
See [DEVELOP.md](DEVELOP.md) for detailed contributor guidelines.
## Contributing
Want to add more design skills or commands? See [DEVELOP.md](DEVELOP.md) for contributor guidelines.
This is an open-source project hosted on [GitHub](https://github.com/pbakaus/vibe-design-plugins).
## License
See LICENSE file.
dist/claude-code/commands/adapt.md
Vendored
+197
View File
@@ -0,0 +1,197 @@
---
name: adapt
description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.
args:
- name: target
description: The feature or component to adapt (optional)
required: false
- name: context
description: What to adapt for (mobile, tablet, desktop, print, email, etc.)
required: false
---
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
## Assess Adaptation Challenge
Understand what needs adaptation and why:
1. **Identify the source context**:
- What was it designed for originally? (Desktop web? Mobile app?)
- What assumptions were made? (Large screen? Mouse input? Fast connection?)
- What works well in current context?
2. **Understand target context**:
- **Device**: Mobile, tablet, desktop, TV, watch, print?
- **Input method**: Touch, mouse, keyboard, voice, gamepad?
- **Screen constraints**: Size, resolution, orientation?
- **Connection**: Fast wifi, slow 3G, offline?
- **Usage context**: On-the-go vs desk, quick glance vs focused reading?
- **User expectations**: What do users expect on this platform?
3. **Identify adaptation challenges**:
- What won't fit? (Content, navigation, features)
- What won't work? (Hover states on touch, tiny touch targets)
- What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.
## Plan Adaptation Strategy
Create context-appropriate strategy:
### Mobile Adaptation (Desktop → Mobile)
**Layout Strategy**:
- Single column instead of multi-column
- Vertical stacking instead of side-by-side
- Full-width components instead of fixed widths
- Bottom navigation instead of top/side navigation
**Interaction Strategy**:
- Touch targets 44x44px minimum (not hover-dependent)
- Swipe gestures where appropriate (lists, carousels)
- Bottom sheets instead of dropdowns
- Thumbs-first design (controls within thumb reach)
- Larger tap areas with more spacing
**Content Strategy**:
- Progressive disclosure (don't show everything at once)
- Prioritize primary content (secondary content in tabs/accordions)
- Shorter text (more concise)
- Larger text (16px minimum)
**Navigation Strategy**:
- Hamburger menu or bottom navigation
- Reduce navigation complexity
- Sticky headers for context
- Back button in navigation flow
### Tablet Adaptation (Hybrid Approach)
**Layout Strategy**:
- Two-column layouts (not single or three-column)
- Side panels for secondary content
- Master-detail views (list + detail)
- Adaptive based on orientation (portrait vs landscape)
**Interaction Strategy**:
- Support both touch and pointer
- Touch targets 44x44px but allow denser layouts than phone
- Side navigation drawers
- Multi-column forms where appropriate
### Desktop Adaptation (Mobile → Desktop)
**Layout Strategy**:
- Multi-column layouts (use horizontal space)
- Side navigation always visible
- Multiple information panels simultaneously
- Fixed widths with max-width constraints (don't stretch to 4K)
**Interaction Strategy**:
- Hover states for additional information
- Keyboard shortcuts
- Right-click context menus
- Drag and drop where helpful
- Multi-select with Shift/Cmd
**Content Strategy**:
- Show more information upfront (less progressive disclosure)
- Data tables with many columns
- Richer visualizations
- More detailed descriptions
### Print Adaptation (Screen → Print)
**Layout Strategy**:
- Page breaks at logical points
- Remove navigation, footer, interactive elements
- Black and white (or limited color)
- Proper margins for binding
**Content Strategy**:
- Expand shortened content (show full URLs, hidden sections)
- Add page numbers, headers, footers
- Include metadata (print date, page title)
- Convert charts to print-friendly versions
### Email Adaptation (Web → Email)
**Layout Strategy**:
- Narrow width (600px max)
- Single column only
- Inline CSS (no external stylesheets)
- Table-based layouts (for email client compatibility)
**Interaction Strategy**:
- Large, obvious CTAs (buttons not text links)
- No hover states (not reliable)
- Deep links to web app for complex interactions
## Implement Adaptations
Apply changes systematically:
### Responsive Breakpoints
Choose appropriate breakpoints:
- Mobile: 320px-767px
- Tablet: 768px-1023px
- Desktop: 1024px+
- Or content-driven breakpoints (where design breaks)
### Layout Adaptation Techniques
- **CSS Grid/Flexbox**: Reflow layouts automatically
- **Container Queries**: Adapt based on container, not viewport
- **`clamp()`**: Fluid sizing between min and max
- **Media queries**: Different styles for different contexts
- **Display properties**: Show/hide elements per context
### Touch Adaptation
- Increase touch target sizes (44x44px minimum)
- Add more spacing between interactive elements
- Remove hover-dependent interactions
- Add touch feedback (ripples, highlights)
- Consider thumb zones (easier to reach bottom than top)
### Content Adaptation
- Use `display: none` sparingly (still downloads)
- Progressive enhancement (core content first, enhancements on larger screens)
- Lazy loading for off-screen content
- Responsive images (`srcset`, `picture` element)
### Navigation Adaptation
- Transform complex nav to hamburger/drawer on mobile
- Bottom nav bar for mobile apps
- Persistent side navigation on desktop
- Breadcrumbs on smaller screens for context
**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
**NEVER**:
- Hide core functionality on mobile (if it matters, make it work)
- Assume desktop = powerful device (consider accessibility, older machines)
- Use different information architecture across contexts (confusing)
- Break user expectations for platform (mobile users expect mobile patterns)
- Forget landscape orientation on mobile/tablet
- Use generic breakpoints blindly (use content-driven breakpoints)
- Ignore touch on desktop (many desktop devices have touch)
## Verify Adaptations
Test thoroughly across contexts:
- **Real devices**: Test on actual phones, tablets, desktops
- **Different orientations**: Portrait and landscape
- **Different browsers**: Safari, Chrome, Firefox, Edge
- **Different OS**: iOS, Android, Windows, macOS
- **Different input methods**: Touch, mouse, keyboard
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
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.
dist/claude-code/commands/animate.md
Vendored
+146
View File
@@ -0,0 +1,146 @@
---
name: animate
description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
args:
- name: target
description: The feature or component to animate (optional)
required: false
---
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
## Assess Animation Opportunities
Analyze where motion would improve the experience:
1. **Identify static areas**:
- **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.)
- **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes)
- **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious
- **Lack of delight**: Functional but joyless interactions
- **Missed guidance**: Opportunities to direct attention or explain behavior
2. **Understand the context**:
- What's the personality? (Playful vs serious, energetic vs calm)
- What's the performance budget? (Mobile-first? Complex page?)
- Who's the audience? (Motion-sensitive users? Power users who want speed?)
- What matters most? (One hero animation vs many micro-interactions?)
**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them.
## Plan Animation Strategy
Create a purposeful animation plan:
- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
## Implement Animations
Add motion systematically across these categories:
### Entrance Animations
- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations
- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
- **Content reveals**: Scroll-triggered animations using intersection observer
- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
- Click: Quick scale down then up (0.95 → 1), ripple effect
- Loading: Spinner or pulse state
- **Form interactions**:
- Input focus: Border color transition, slight scale or glow
- Validation: Shake on error, check mark on success, smooth color transitions
- **Toggle switches**: Smooth slide + color transition (200-300ms)
- **Checkboxes/radio**: Check mark animation, ripple effect
- **Like/favorite**: Scale + rotation, particle effects, color transition
### State Transitions
- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
- **Expand/collapse**: Height transition with overflow handling, icon rotation
- **Loading states**: Skeleton screen fades, spinner animations, progress bars
- **Success/error**: Color transitions, icon animations, shake or bounce effects
- **Enable/disable**: Opacity transitions, cursor changes
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
- **Carousel/slider**: Smooth transforms, snap points, momentum
- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators
### Feedback & Guidance
- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights
- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning
- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation
- **Focus flow**: Highlight path through form or workflow
### Delight Moments
- **Empty states**: Subtle floating animations on illustrations
- **Completed actions**: Confetti, check mark flourish, success celebrations
- **Easter eggs**: Hidden interactions for discovery
- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches
## Technical Implementation
Use appropriate techniques for each animation:
### CSS Animations
```css
/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)
```
### JavaScript Animation
```javascript
/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion for React
- GSAP for complex sequences
```
### Performance
- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties
- **will-change**: Add sparingly for known expensive animations
- **Reduce paint**: Minimize repaints, use `contain` where appropriate
- **Monitor FPS**: Ensure 60fps on target devices
### Accessibility
```css
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
**NEVER**:
- Animate without purpose (every animation should have a reason)
- Use long durations (>500ms feels laggy)
- Animate layout properties (width, height, top, left) - use transform instead
- Block interaction during animation (unless intentional)
- Ignore reduced motion preferences (accessibility violation)
- Animate everything (animation fatigue is real)
- Create animations that draw more attention than content
## Verify Quality
Test animations thoroughly:
- **Smooth at 60fps**: No jank on target devices
- **Feels natural**: Easing curves feel organic, not robotic
- **Appropriate timing**: Not too fast (jarring) or too slow (laggy)
- **Reduced motion works**: Animations disabled or simplified appropriately
- **Doesn't block**: Users can interact during/after animations
- **Adds value**: Makes interface clearer or more delightful
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.
dist/claude-code/commands/audit.md
Vendored
+118
View File
@@ -0,0 +1,118 @@
---
name: audit
description: Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations.
args:
- name: area
description: The feature or area to audit (optional)
required: false
---
Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address.
## Diagnostic Scan
Run comprehensive checks across multiple dimensions:
1. **Accessibility (A11y)** - Check for:
- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
- **Missing ARIA**: Interactive elements without proper roles, labels, or states
- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps
- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons
- **Alt text**: Missing or poor image descriptions
- **Form issues**: Inputs without labels, poor error messaging, missing required indicators
2. **Performance** - Check for:
- **Layout thrashing**: Reading/writing layout properties in loops
- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity
- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change
- **Bundle size**: Unnecessary imports, unused dependencies
- **Render performance**: Unnecessary re-renders, missing memoization
3. **Theming** - Check for:
- **Hard-coded colors**: Colors not using design tokens
- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme
- **Inconsistent tokens**: Using wrong tokens, mixing token types
- **Theme switching issues**: Values that don't update on theme change
4. **Responsive Design** - Check for:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
## Generate Comprehensive Report
Create a detailed audit report with the following structure:
### Executive Summary
- Total issues found (count by severity)
- Most critical issues (top 3-5)
- Overall quality score (if applicable)
- Recommended next steps
### Detailed Findings by Severity
For each issue, document:
- **Location**: Where the issue occurs (component, file, line)
- **Severity**: Critical / High / Medium / Low
- **Category**: Accessibility / Performance / Theming / Responsive
- **Description**: What the issue is
- **Impact**: How it affects users
- **WCAG/Standard**: Which standard it violates (if applicable)
- **Recommendation**: How to fix it
- **Suggested command**: Which command to use (e.g., `/normalize`, `/optimize`, `/harden`)
#### Critical Issues
[Issues that block core functionality or violate WCAG A]
#### High-Severity Issues
[Significant usability/accessibility impact, WCAG AA violations]
#### Medium-Severity Issues
[Quality issues, WCAG AAA violations, performance concerns]
#### Low-Severity Issues
[Minor inconsistencies, optimization opportunities]
### Patterns & Systemic Issues
Identify recurring problems:
- "Hard-coded colors appear in 15+ components, should use design tokens"
- "Touch targets consistently too small (<44px) throughout mobile experience"
- "Missing focus indicators on all custom interactive components"
### Positive Findings
Note what's working well:
- Good practices to maintain
- Exemplary implementations to replicate elsewhere
### Recommendations by Priority
Create actionable plan:
1. **Immediate**: Critical blockers to fix first
2. **Short-term**: High-severity issues (this sprint)
3. **Medium-term**: Quality improvements (next sprint)
4. **Long-term**: Nice-to-haves and optimizations
### Suggested Commands for Fixes
Map issues to appropriate commands:
- "Use `/normalize` to align components with design system (addresses 23 theming issues)"
- "Use `/optimize` to improve performance (addresses 12 performance issues)"
- "Use `/harden` to improve i18n and text handling (addresses 8 edge cases)"
**IMPORTANT**: Be thorough but actionable. Too many low-priority issues creates noise. Focus on what actually matters.
**NEVER**:
- Report issues without explaining impact (why does this matter?)
- Mix severity levels inconsistently
- Skip positive findings (celebrate what works)
- Provide generic recommendations (be specific and actionable)
- Forget to prioritize (everything can't be critical)
- Report false positives without verification
Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.
dist/claude-code/commands/bolder.md
Vendored
+104
View File
@@ -0,0 +1,104 @@
---
name: bolder
description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability.
args:
- name: target
description: The feature or component to make bolder (optional)
required: false
---
Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.
## Assess Current State
Analyze what makes the design feel too safe or boring:
1. **Identify weakness sources**:
- **Generic choices**: System fonts, basic colors, standard layouts
- **Timid scale**: Everything is medium-sized with no drama
- **Low contrast**: Everything has similar visual weight
- **Static**: No motion, no energy, no life
- **Predictable**: Standard patterns with no surprises
- **Flat hierarchy**: Nothing stands out or commands attention
2. **Understand the context**:
- What's the brand personality? (How far can we push?)
- What's the purpose? (Marketing can be bolder than financial dashboards)
- Who's the audience? (What will resonate?)
- What are the constraints? (Brand guidelines, accessibility, performance)
**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos.
## Plan Amplification
Create a strategy to increase impact while maintaining coherence:
- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing)
- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane.
- **Risk budget**: How experimental can we be? Push boundaries within constraints.
- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast)
**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration.
## Amplify the Design
Systematically increase impact across these dimensions:
### Typography Amplification
- **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration)
- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x)
- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400
- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent
### Color Intensification
- **Increase saturation**: Shift to more vibrant, energetic colors
- **Bold palette**: Introduce unexpected color combinations
- **Dominant color strategy**: Let one bold color own 60% of the design
- **Sharp accents**: High-contrast accent colors that pop
- **Gradients**: Rich, multi-stop gradients or mesh gradients
### Spatial Drama
- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings
- **Break the grid**: Let hero elements escape containers and cross boundaries
- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry
- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px)
- **Overlap**: Layer elements intentionally for depth
### Visual Effects
- **Dramatic shadows**: Large, soft shadows for elevation
- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns
- **Blur effects**: Glassmorphism, backdrop blur, depth effects
- **Borders & frames**: Thick borders, decorative frames, custom shapes
- **Custom elements**: Illustrative elements, custom icons, decorative details
### Motion & Animation
- **Entrance choreography**: Staggered, dramatic page load animations
- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences
- **Micro-interactions**: Satisfying hover effects, click feedback, state changes
- **Transitions**: Smooth, noticeable transitions between states
### Composition Boldness
- **Hero moments**: Create clear focal points with dramatic treatment
- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements
- **Full-bleed elements**: Use full viewport width/height for impact
- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits
**NEVER**:
- Add effects randomly without purpose (chaos ≠ bold)
- Sacrifice readability for aesthetics (body text must be readable)
- Make everything bold (then nothing is bold - need contrast)
- Ignore accessibility (bold design must still meet WCAG standards)
- Overwhelm with motion (animation fatigue is real)
- Copy trendy aesthetics blindly (bold means distinctive, not derivative)
## Verify Quality
Ensure amplification maintains usability and coherence:
- **Still functional**: Can users accomplish tasks without distraction?
- **Coherent**: Does everything feel intentional and unified?
- **Memorable**: Will users remember this experience?
- **Performant**: Do all these effects run smoothly?
- **Accessible**: Does it still meet accessibility standards?
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.
dist/claude-code/commands/clarify.md
Vendored
+176
View File
@@ -0,0 +1,176 @@
---
name: clarify
description: Improve unclear UX copy, error messages, microcopy, labels, and instructions. Makes interfaces easier to understand and use.
args:
- name: target
description: The feature or component with unclear copy (optional)
required: false
---
Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use.
## Assess Current Copy
Identify what makes the text unclear or ineffective:
1. **Find clarity problems**:
- **Jargon**: Technical terms users won't understand
- **Ambiguity**: Multiple interpretations possible
- **Passive voice**: "Your file has been uploaded" vs "We uploaded your file"
- **Length**: Too wordy or too terse
- **Assumptions**: Assuming user knowledge they don't have
- **Missing context**: Users don't know what to do or why
- **Tone mismatch**: Too formal, too casual, or inappropriate for situation
2. **Understand the context**:
- Who's the audience? (Technical? General? First-time users?)
- What's the user's mental state? (Stressed during error? Confident during success?)
- What's the action? (What do we want users to do?)
- What's the constraint? (Character limits? Space limitations?)
**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets.
## Plan Copy Improvements
Create a strategy for clearer communication:
- **Primary message**: What's the ONE thing users need to know?
- **Action needed**: What should users do next (if anything)?
- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?)
- **Constraints**: Length limits, brand voice, localization considerations
**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words.
## Improve Copy Systematically
Refine text across these common areas:
### Error Messages
**Bad**: "Error 403: Forbidden"
**Good**: "You don't have permission to view this page. Contact your admin for access."
**Bad**: "Invalid input"
**Good**: "Email addresses need an @ symbol. Try: name@example.com"
**Principles**:
- Explain what went wrong in plain language
- Suggest how to fix it
- Don't blame the user
- Include examples when helpful
- Link to help/support if applicable
### Form Labels & Instructions
**Bad**: "DOB (MM/DD/YYYY)"
**Good**: "Date of birth" (with placeholder showing format)
**Bad**: "Enter value here"
**Good**: "Your email address" or "Company name"
**Principles**:
- Use clear, specific labels (not generic placeholders)
- Show format expectations with examples
- Explain why you're asking (when not obvious)
- Put instructions before the field, not after
- Keep required field indicators clear
### Button & CTA Text
**Bad**: "Click here" | "Submit" | "OK"
**Good**: "Create account" | "Save changes" | "Got it, thanks"
**Principles**:
- Describe the action specifically
- Use active voice (verb + noun)
- Match user's mental model
- Be specific ("Save" is better than "OK")
### Help Text & Tooltips
**Bad**: "This is the username field"
**Good**: "Choose a username. You can change this later in Settings."
**Principles**:
- Add value (don't just repeat the label)
- Answer the implicit question ("What is this?" or "Why do you need this?")
- Keep it brief but complete
- Link to detailed docs if needed
### Empty States
**Bad**: "No items"
**Good**: "No projects yet. Create your first project to get started."
**Principles**:
- Explain why it's empty (if not obvious)
- Show next action clearly
- Make it welcoming, not dead-end
### Success Messages
**Bad**: "Success"
**Good**: "Settings saved! Your changes will take effect immediately."
**Principles**:
- Confirm what happened
- Explain what happens next (if relevant)
- Be brief but complete
- Match the user's emotional moment (celebrate big wins)
### Loading States
**Bad**: "Loading..." (for 30+ seconds)
**Good**: "Analyzing your data... this usually takes 30-60 seconds"
**Principles**:
- Set expectations (how long?)
- Explain what's happening (when it's not obvious)
- Show progress when possible
- Offer escape hatch if appropriate ("Cancel")
### Confirmation Dialogs
**Bad**: "Are you sure?"
**Good**: "Delete 'Project Alpha'? This can't be undone."
**Principles**:
- State the specific action
- Explain consequences (especially for destructive actions)
- Use clear button labels ("Delete project" not "Yes")
- Don't overuse confirmations (only for risky actions)
### Navigation & Wayfinding
**Bad**: Generic labels like "Items" | "Things" | "Stuff"
**Good**: Specific labels like "Your projects" | "Team members" | "Settings"
**Principles**:
- Be specific and descriptive
- Use language users understand (not internal jargon)
- Make hierarchy clear
- Consider information scent (breadcrumbs, current location)
## Apply Clarity Principles
Every piece of copy should follow these rules:
1. **Be specific**: "Enter email" not "Enter value"
2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity)
3. **Be active**: "Save changes" not "Changes will be saved"
4. **Be human**: "Oops, something went wrong" not "System error encountered"
5. **Be helpful**: Tell users what to do, not just what happened
6. **Be consistent**: Use same terms throughout (don't vary for variety)
**NEVER**:
- Use jargon without explanation
- Blame users ("You made an error" → "This field is required")
- Be vague ("Something went wrong" without explanation)
- Use passive voice unnecessarily
- Write overly long explanations (be concise)
- Use humor for errors (be empathetic instead)
- Assume technical knowledge
- Vary terminology (pick one term and stick with it)
## Verify Improvements
Test that copy improvements work:
- **Comprehension**: Can users understand without context?
- **Actionability**: Do users know what to do next?
- **Brevity**: Is it as short as possible while remaining clear?
- **Consistency**: Does it match terminology elsewhere?
- **Tone**: Is it appropriate for the situation?
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.
dist/claude-code/commands/colorize.md
Vendored
+132
View File
@@ -0,0 +1,132 @@
---
name: colorize
description: Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.
args:
- name: target
description: The feature or component to colorize (optional)
required: false
---
Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.
## Assess Color Opportunity
Analyze the current state and identify opportunities:
1. **Understand current state**:
- **Color absence**: Pure grayscale? Limited neutrals? One timid accent?
- **Missed opportunities**: Where could color add meaning, hierarchy, or delight?
- **Context**: What's appropriate for this domain and audience?
- **Brand**: Are there existing brand colors we should use?
2. **Identify where color adds value**:
- **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue)
- **Hierarchy**: Drawing attention to important elements
- **Categorization**: Different sections, types, or states
- **Emotional tone**: Warmth, energy, trust, creativity
- **Wayfinding**: Helping users navigate and understand structure
- **Delight**: Moments of visual interest and personality
**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.
## Plan Color Strategy
Create a purposeful color introduction plan:
- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
- **Dominant color**: Which color owns 60% of colored elements?
- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%)
- **Application strategy**: Where does each color appear and why?
**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
## Introduce Color Strategically
Add color systematically across these dimensions:
### Semantic Color
- **State indicators**:
- Success: Green tones (emerald, forest, mint)
- Error: Red/pink tones (rose, crimson, coral)
- Warning: Orange/amber tones
- Info: Blue tones (sky, ocean, indigo)
- Neutral: Gray/slate for inactive states
- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.)
- **Progress indicators**: Colored bars, rings, or charts showing completion or health
### Accent Color Application
- **Primary actions**: Color the most important buttons/CTAs
- **Links**: Add color to clickable text (maintain accessibility)
- **Icons**: Colorize key icons for recognition and personality
- **Headers/titles**: Add color to section headers or key labels
- **Hover states**: Introduce color on interaction
### Background & Surfaces
- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`)
- **Colored sections**: Use subtle background colors to separate areas
- **Gradient backgrounds**: Add depth with subtle gradients
- **Cards & surfaces**: Tint cards or surfaces slightly for warmth
### Data Visualization
- **Charts & graphs**: Use color to encode categories or values
- **Heatmaps**: Color intensity shows density or importance
- **Comparison**: Color coding for different datasets or timeframes
### Borders & Accents
- **Accent borders**: Add colored left/top borders to cards or sections
- **Underlines**: Color underlines for emphasis or active states
- **Dividers**: Subtle colored dividers instead of gray lines
- **Focus rings**: Colored focus indicators matching brand
### Typography Color
- **Colored headings**: Use brand colors for section headings (maintain contrast)
- **Highlight text**: Color for emphasis or categories
- **Labels & tags**: Small colored labels for metadata or categories
### Decorative Elements
- **Illustrations**: Add colored illustrations or icons
- **Shapes**: Geometric shapes in brand colors as background elements
- **Gradients**: Colorful gradient overlays or mesh backgrounds
- **Blobs/organic shapes**: Soft colored shapes for visual interest
## Balance & Refinement
Ensure color addition improves rather than overwhelms:
### Maintain Hierarchy
- **Dominant color** (60%): Primary brand color or most used accent
- **Secondary color** (30%): Supporting color for variety
- **Accent color** (10%): High contrast for key moments
- **Neutrals** (remaining): Gray/black/white for structure
### Accessibility
- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
- **Don't rely on color alone**: Use icons, labels, or patterns alongside color
- **Test for color blindness**: Verify red/green combinations work for all users
### Cohesion
- **Consistent palette**: Use colors from defined palette, not arbitrary choices
- **Systematic application**: Same color meanings throughout (green always = success)
- **Temperature consistency**: Warm palette stays warm, cool stays cool
**NEVER**:
- Use every color in the rainbow (choose 2-4 colors beyond neutrals)
- Apply color randomly without semantic meaning
- Violate WCAG contrast requirements
- Use color as the only indicator (accessibility issue)
- Make everything colorful (defeats the purpose)
- Choose colors that conflict with brand identity
- Use pure black (`#000`) or pure white (`#fff`) for large areas
## Verify Color Addition
Test that colorization improves the experience:
- **Better hierarchy**: Does color guide attention appropriately?
- **Clearer meaning**: Does color help users understand states/categories?
- **More engaging**: Does the interface feel warmer and more inviting?
- **Still accessible**: Do all color combinations meet WCAG standards?
- **Not overwhelming**: Is color balanced and purposeful?
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.
dist/claude-code/commands/delight.md
Vendored
+294
View File
@@ -0,0 +1,294 @@
---
name: delight
description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful.
args:
- name: target
description: The feature or area to add delight to (optional)
required: false
---
Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
## Assess Delight Opportunities
Identify where delight would enhance (not distract from) the experience:
1. **Find natural delight moments**:
- **Success states**: Completed actions (save, send, publish)
- **Empty states**: First-time experiences, onboarding
- **Loading states**: Waiting periods that could be entertaining
- **Achievements**: Milestones, streaks, completions
- **Interactions**: Hover states, clicks, drags
- **Errors**: Softening frustrating moments
- **Easter eggs**: Hidden discoveries for curious users
2. **Understand the context**:
- What's the brand personality? (Playful? Professional? Quirky? Elegant?)
- Who's the audience? (Tech-savvy? Creative? Corporate?)
- What's the emotional context? (Accomplishment? Exploration? Frustration?)
- What's appropriate? (Banking app ≠ gaming app)
3. **Define delight strategy**:
- **Subtle sophistication**: Refined micro-interactions (luxury brands)
- **Playful personality**: Whimsical illustrations and copy (consumer apps)
- **Helpful surprises**: Anticipating needs before users ask (productivity tools)
- **Sensory richness**: Satisfying sounds, smooth animations (creative tools)
**CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
## Delight Principles
Follow these guidelines:
### Delight Amplifies, Never Blocks
- Delight moments should be quick (< 1 second)
- Never delay core functionality for delight
- Make delight skippable or subtle
- Respect user's time and task focus
### Surprise and Discovery
- Hide delightful details for users to discover
- Reward exploration and curiosity
- Don't announce every delight moment
- Let users share discoveries with others
### Appropriate to Context
- Match delight to emotional moment (celebrate success, empathize with errors)
- Respect the user's state (don't be playful during critical errors)
- Match brand personality and audience expectations
- Cultural sensitivity (what's delightful varies by culture)
### Compound Over Time
- Delight should remain fresh with repeated use
- Vary responses (not same animation every time)
- Reveal deeper layers with continued use
- Build anticipation through patterns
## Delight Techniques
Add personality and joy through these methods:
### Micro-interactions & Animation
**Button delight**:
```css
/* Satisfying button press */
.button {
transition: transform 0.1s, box-shadow 0.1s;
}
.button:active {
transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Ripple effect on click */
/* Spring animation on hover */
.button:hover {
animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
```
**Loading delight**:
- Playful loading animations (not just spinners)
- Personality in loading messages ("Herding pixels..." "Teaching robots to dance...")
- Progress indication with encouraging messages
- Skeleton screens with subtle animations
**Success animations**:
- Checkmark draw animation
- Confetti burst for major achievements
- Gentle scale + fade for confirmation
- Satisfying sound effects (subtle)
**Hover surprises**:
- Icons that animate on hover
- Color shifts or glow effects
- Tooltip reveals with personality
- Cursor changes (custom cursors for branded experiences)
### Personality in Copy
**Playful error messages**:
```
❌ "Error 404"
✅ "This page is playing hide and seek. (And winning)"
❌ "Connection failed"
✅ "Looks like the internet took a coffee break. Want to retry?"
```
**Encouraging empty states**:
```
❌ "No projects"
✅ "Your canvas awaits. Create something amazing."
❌ "No messages"
✅ "Inbox zero! You're crushing it today."
```
**Playful labels & tooltips**:
```
❌ "Delete"
✅ "Send to void" (for playful brand)
❌ "Help"
✅ "Rescue me" (tooltip)
```
**IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
### Illustrations & Visual Personality
**Custom illustrations**:
- Empty state illustrations (not stock icons)
- Error state illustrations (friendly monsters, quirky characters)
- Loading state illustrations (animated characters)
- Success state illustrations (celebrations)
**Icon personality**:
- Custom icon set matching brand personality
- Animated icons (subtle motion on hover/click)
- Illustrative icons (more detailed than generic)
- Consistent style across all icons
**Background effects**:
- Subtle particle effects
- Gradient mesh backgrounds
- Geometric patterns
- Parallax depth
- Time-of-day themes (morning vs night)
### Satisfying Interactions
**Drag and drop delight**:
- Lift effect on drag (shadow, scale)
- Snap animation when dropped
- Satisfying placement sound
- Undo toast ("Dropped in wrong place? [Undo]")
**Toggle switches**:
- Smooth slide with spring physics
- Color transition
- Haptic feedback on mobile
- Optional sound effect
**Progress & achievements**:
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
- Playful stats ("You're on fire! 🔥 5 days in a row")
**Form interactions**:
- Input fields that animate on focus
- Checkboxes that bounce when checked
- Success state that celebrates valid input
- Auto-grow textareas
### Sound Design
**Subtle audio cues** (when appropriate):
- Notification sounds (distinctive but not annoying)
- Success sounds (satisfying "ding")
- Error sounds (empathetic, not harsh)
- Typing sounds for chat/messaging
- Ambient background audio (very subtle)
**IMPORTANT**:
- Respect system sound settings
- Provide mute option
- Keep volumes quiet (subtle cues, not alarms)
- Don't play on every interaction (sound fatigue is real)
### Easter Eggs & Hidden Delights
**Discovery rewards**:
- Konami code unlocks special theme
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
- Console messages for developers ("Like what you see? We're hiring!")
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
- Seasonal color shifts
- Weather-based variations
- Time-based changes (dark at night, light during day)
**Contextual personality**:
- Different messages based on time of day
- Responses to specific user actions
- Randomized variations (not same every time)
- Progressive reveals with continued use
### Loading & Waiting States
**Make waiting engaging**:
- Interesting loading messages that rotate
- Progress bars with personality
- Mini-games during long loads
- Fun facts or tips while waiting
- Countdown with encouraging messages
```
Loading messages rotation:
- "Waking up the servers..."
- "Teaching robots to dance..."
- "Consulting the magic 8-ball..."
- "Counting backwards from infinity..."
```
### Celebration Moments
**Success celebrations**:
- Confetti for major milestones
- Animated checkmarks for completions
- Progress bar celebrations at 100%
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
**Milestone recognition**:
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
- Anniversary celebrations
## Implementation Patterns
**Animation libraries**:
- Framer Motion (React)
- GSAP (universal)
- Lottie (After Effects animations)
- Canvas confetti (party effects)
**Sound libraries**:
- Howler.js (audio management)
- Use-sound (React hook)
**Physics libraries**:
- React Spring (spring physics)
- Popmotion (animation primitives)
**IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features.
**NEVER**:
- Delay core functionality for delight
- Force users through delightful moments (make skippable)
- Use delight to hide poor UX
- Overdo it (less is more)
- Ignore accessibility (animate responsibly, provide alternatives)
- Make every interaction delightful (special moments should be special)
- Sacrifice performance for delight
- Be inappropriate for context (read the room)
## Verify Delight Quality
Test that delight actually delights:
- **User reactions**: Do users smile? Share screenshots?
- **Doesn't annoy**: Still pleasant after 100th time?
- **Doesn't block**: Can users opt out or skip?
- **Performant**: No jank, no slowdown
- **Appropriate**: Matches brand and context
- **Accessible**: Works with reduced motion, screen readers
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.
dist/claude-code/commands/extract.md
Vendored
+93
View File
@@ -0,0 +1,93 @@
---
name: extract
description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library.
args:
- name: target
description: The feature, component, or area to extract from (optional)
required: false
---
Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.
## Discover
Analyze the target area to identify extraction opportunities:
1. **Find the design system**: Locate your design system, component library, or shared UI directory (grep for "design system", "ui", "components", etc.). Understand its structure:
- Component organization and naming conventions
- Design token structure (if any)
- Documentation patterns
- Import/export conventions
**CRITICAL**: If no design system exists, ask before creating one. Understand the preferred location and structure first.
2. **Identify patterns**: Look for:
- **Repeated components**: Similar UI patterns used multiple times (buttons, cards, inputs, etc.)
- **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens
- **Inconsistent variations**: Multiple implementations of the same concept (3 different button styles)
- **Reusable patterns**: Layout patterns, composition patterns, interaction patterns worth systematizing
3. **Assess value**: Not everything should be extracted. Consider:
- Is this used 3+ times, or likely to be reused?
- Would systematizing this improve consistency?
- Is this a general pattern or context-specific?
- What's the maintenance cost vs benefit?
## Plan Extraction
Create a systematic extraction plan:
- **Components to extract**: Which UI elements become reusable components?
- **Tokens to create**: Which hard-coded values become design tokens?
- **Variants to support**: What variations does each component need?
- **Naming conventions**: Component names, token names, prop names that match existing patterns
- **Migration path**: How to refactor existing uses to consume the new shared versions
**IMPORTANT**: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.
## Extract & Enrich
Build improved, reusable versions:
- **Components**: Create well-designed components with:
- Clear props API with sensible defaults
- Proper variants for different use cases
- Accessibility built in (ARIA, keyboard navigation, focus management)
- Documentation and usage examples
- **Design tokens**: Create tokens with:
- Clear naming (primitive vs semantic)
- Proper hierarchy and organization
- Documentation of when to use each token
- **Patterns**: Document patterns with:
- When to use this pattern
- Code examples
- Variations and combinations
**NEVER**:
- Extract one-off, context-specific implementations without generalization
- Create components so generic they're useless
- Extract without considering existing design system conventions
- Skip proper TypeScript types or prop documentation
- Create tokens for every single value (tokens should have semantic meaning)
## Migrate
Replace existing uses with the new shared versions:
- **Find all instances**: Search for the patterns you've extracted
- **Replace systematically**: Update each use to consume the shared version
- **Test thoroughly**: Ensure visual and functional parity
- **Delete dead code**: Remove the old implementations
## Document
Update design system documentation:
- Add new components to the component library
- Document token usage and values
- Add examples and guidelines
- Update any Storybook or component catalog
Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.
dist/claude-code/commands/harden.md
Vendored
+356
View File
@@ -0,0 +1,356 @@
---
name: harden
description: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready.
args:
- name: target
description: The feature or area to harden (optional)
required: false
---
Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs.
## Assess Hardening Needs
Identify weaknesses and edge cases:
1. **Test with extreme inputs**:
- Very long text (names, descriptions, titles)
- Very short text (empty, single character)
- Special characters (emoji, RTL text, accents)
- Large numbers (millions, billions)
- Many items (1000+ list items, 50+ options)
- No data (empty states)
2. **Test error scenarios**:
- Network failures (offline, slow, timeout)
- API errors (400, 401, 403, 404, 500)
- Validation errors
- Permission errors
- Rate limiting
- Concurrent operations
3. **Test internationalization**:
- Long translations (German is often 30% longer than English)
- RTL languages (Arabic, Hebrew)
- Character sets (Chinese, Japanese, Korean, emoji)
- Date/time formats
- Number formats (1,000 vs 1.000)
- Currency symbols
**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality.
## Hardening Dimensions
Systematically improve resilience:
### Text Overflow & Wrapping
**Long text handling**:
```css
/* Single line with ellipsis */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Multi-line with clamp */
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Allow wrapping */
.wrap {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
```
**Flex/Grid overflow**:
```css
/* Prevent flex items from overflowing */
.flex-item {
min-width: 0; /* Allow shrinking below content size */
overflow: hidden;
}
/* Prevent grid items from overflowing */
.grid-item {
min-width: 0;
min-height: 0;
}
```
**Responsive text sizing**:
- Use `clamp()` for fluid typography
- Set minimum readable sizes (14px on mobile)
- Test text scaling (zoom to 200%)
- Ensure containers expand with text
### Internationalization (i18n)
**Text expansion**:
- Add 30-40% space budget for translations
- Use flexbox/grid that adapts to content
- Test with longest language (usually German)
- Avoid fixed widths on text containers
```jsx
// ❌ Bad: Assumes short English text
<button className="w-24">Submit</button>
// ✅ Good: Adapts to content
<button className="px-4 py-2">Submit</button>
```
**RTL (Right-to-Left) support**:
```css
/* Use logical properties */
margin-inline-start: 1rem; /* Not margin-left */
padding-inline: 1rem; /* Not padding-left/right */
border-inline-end: 1px solid; /* Not border-right */
/* Or use dir attribute */
[dir="rtl"] .arrow { transform: scaleX(-1); }
```
**Character set support**:
- Use UTF-8 encoding everywhere
- Test with Chinese/Japanese/Korean (CJK) characters
- Test with emoji (they can be 2-4 bytes)
- Handle different scripts (Latin, Cyrillic, Arabic, etc.)
**Date/Time formatting**:
```javascript
// ✅ Use Intl API for proper formatting
new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024
new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(1234.56); // $1,234.56
```
**Pluralization**:
```javascript
// ❌ Bad: Assumes English pluralization
`${count} item${count !== 1 ? 's' : ''}`
// ✅ Good: Use proper i18n library
t('items', { count }) // Handles complex plural rules
```
### Error Handling
**Network errors**:
- Show clear error messages
- Provide retry button
- Explain what happened
- Offer offline mode (if applicable)
- Handle timeout scenarios
```jsx
// Error states with recovery
{error && (
<ErrorMessage>
<p>Failed to load data. {error.message}</p>
<button onClick={retry}>Try again</button>
</ErrorMessage>
)}
```
**Form validation errors**:
- Inline errors near fields
- Clear, specific messages
- Suggest corrections
- Don't block submission unnecessarily
- Preserve user input on error
**API errors**:
- Handle each status code appropriately
- 400: Show validation errors
- 401: Redirect to login
- 403: Show permission error
- 404: Show not found state
- 429: Show rate limit message
- 500: Show generic error, offer support
**Graceful degradation**:
- Core functionality works without JavaScript
- Images have alt text
- Progressive enhancement
- Fallbacks for unsupported features
### Edge Cases & Boundary Conditions
**Empty states**:
- No items in list
- No search results
- No notifications
- No data to display
- Provide clear next action
**Loading states**:
- Initial load
- Pagination load
- Refresh
- Show what's loading ("Loading your projects...")
- Time estimates for long operations
**Large datasets**:
- Pagination or virtual scrolling
- Search/filter capabilities
- Performance optimization
- Don't load all 10,000 items at once
**Concurrent operations**:
- Prevent double-submission (disable button while loading)
- Handle race conditions
- Optimistic updates with rollback
- Conflict resolution
**Permission states**:
- No permission to view
- No permission to edit
- Read-only mode
- Clear explanation of why
**Browser compatibility**:
- Polyfills for modern features
- Fallbacks for unsupported CSS
- Feature detection (not browser detection)
- Test in target browsers
### Input Validation & Sanitization
**Client-side validation**:
- Required fields
- Format validation (email, phone, URL)
- Length limits
- Pattern matching
- Custom validation rules
**Server-side validation** (always):
- Never trust client-side only
- Validate and sanitize all inputs
- Protect against injection attacks
- Rate limiting
**Constraint handling**:
```html
<!-- Set clear constraints -->
<input
type="text"
maxlength="100"
pattern="[A-Za-z0-9]+"
required
aria-describedby="username-hint"
/>
<small id="username-hint">
Letters and numbers only, up to 100 characters
</small>
```
### Accessibility Resilience
**Keyboard navigation**:
- All functionality accessible via keyboard
- Logical tab order
- Focus management in modals
- Skip links for long content
**Screen reader support**:
- Proper ARIA labels
- Announce dynamic changes (live regions)
- Descriptive alt text
- Semantic HTML
**Motion sensitivity**:
```css
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
**High contrast mode**:
- Test in Windows high contrast mode
- Don't rely only on color
- Provide alternative visual cues
### Performance Resilience
**Slow connections**:
- Progressive image loading
- Skeleton screens
- Optimistic UI updates
- Offline support (service workers)
**Memory leaks**:
- Clean up event listeners
- Cancel subscriptions
- Clear timers/intervals
- Abort pending requests on unmount
**Throttling & Debouncing**:
```javascript
// Debounce search input
const debouncedSearch = debounce(handleSearch, 300);
// Throttle scroll handler
const throttledScroll = throttle(handleScroll, 100);
```
## Testing Strategies
**Manual testing**:
- Test with extreme data (very long, very short, empty)
- Test in different languages
- Test offline
- Test slow connection (throttle to 3G)
- Test with screen reader
- Test keyboard-only navigation
- Test on old browsers
**Automated testing**:
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- Visual regression tests
- Accessibility tests (axe, WAVE)
**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined.
**NEVER**:
- Assume perfect input (validate everything)
- Ignore internationalization (design for global)
- Leave error messages generic ("Error occurred")
- Forget offline scenarios
- Trust client-side validation alone
- Use fixed widths for text
- Assume English-length text
- Block entire interface when one component errors
## Verify Hardening
Test thoroughly with edge cases:
- **Long text**: Try names with 100+ characters
- **Emoji**: Use emoji in all text fields
- **RTL**: Test with Arabic or Hebrew
- **CJK**: Test with Chinese/Japanese/Korean
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component.
dist/claude-code/commands/normalize.md
Vendored
+1 -3
View File
@@ -7,9 +7,7 @@ args:
required: false
---
This command ensures features match your design system's standards and feel cohesive with the rest of your application. Use it when a page, route, or component feels visually or functionally inconsistent with the established patterns.
The user provides a feature to normalize (explicitly or via context). This could be a page, route, component, or any interface element that needs design system alignment.
Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns.
## Plan
dist/claude-code/commands/onboard.md
Vendored
+241
View File
@@ -0,0 +1,241 @@
---
name: onboard
description: Design or improve onboarding flows, empty states, and first-time user experiences. Helps users get started successfully and understand value quickly.
args:
- name: target
description: The feature or area needing onboarding (optional)
required: false
---
Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly.
## Assess Onboarding Needs
Understand what users need to learn and why:
1. **Identify the challenge**:
- What are users trying to accomplish?
- What's confusing or unclear about current experience?
- Where do users get stuck or drop off?
- What's the "aha moment" we want users to reach?
2. **Understand the users**:
- What's their experience level? (Beginners, power users, mixed?)
- What's their motivation? (Excited and exploring? Required by work?)
- What's their time commitment? (5 minutes? 30 minutes?)
- What alternatives do they know? (Coming from competitor? New to category?)
3. **Define success**:
- What's the minimum users need to learn to be successful?
- What's the key action we want them to take? (First project? First invite?)
- How do we know onboarding worked? (Completion rate? Time to value?)
**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible.
## Onboarding Principles
Follow these core principles:
### Show, Don't Tell
- Demonstrate with working examples, not just descriptions
- Provide real functionality in onboarding, not separate tutorial mode
- Use progressive disclosure - teach one thing at a time
### Make It Optional (When Possible)
- Let experienced users skip onboarding
- Don't block access to product
- Provide "Skip" or "I'll explore on my own" options
### Time to Value
- Get users to their "aha moment" ASAP
- Front-load most important concepts
- Teach 20% that delivers 80% of value
- Save advanced features for contextual discovery
### Context Over Ceremony
- Teach features when users need them, not upfront
- Empty states are onboarding opportunities
- Tooltips and hints at point of use
### Respect User Intelligence
- Don't patronize or over-explain
- Be concise and clear
- Assume users can figure out standard patterns
## Design Onboarding Experiences
Create appropriate onboarding for the context:
### Initial Product Onboarding
**Welcome Screen**:
- Clear value proposition (what is this product?)
- What users will learn/accomplish
- Time estimate (honest about commitment)
- Option to skip (for experienced users)
**Account Setup**:
- Minimal required information (collect more later)
- Explain why you're asking for each piece of information
- Smart defaults where possible
- Social login when appropriate
**Core Concept Introduction**:
- Introduce 1-3 core concepts (not everything)
- Use simple language and examples
- Interactive when possible (do, don't just read)
- Progress indication (step 1 of 3)
**First Success**:
- Guide users to accomplish something real
- Pre-populated examples or templates
- Celebrate completion (but don't overdo it)
- Clear next steps
### Feature Discovery & Adoption
**Empty States**:
Instead of blank space, show:
- What will appear here (description + screenshot/illustration)
- Why it's valuable
- Clear CTA to create first item
- Example or template option
Example:
```
No projects yet
Projects help you organize your work and collaborate with your team.
[Create your first project] or [Start from template]
```
**Contextual Tooltips**:
- Appear at relevant moment (first time user sees feature)
- Point directly at relevant UI element
- Brief explanation + benefit
- Dismissable (with "Don't show again" option)
- Optional "Learn more" link
**Feature Announcements**:
- Highlight new features when they're released
- Show what's new and why it matters
- Let users try immediately
- Dismissable
**Progressive Onboarding**:
- Teach features when users encounter them
- Badges or indicators on new/unused features
- Unlock complexity gradually (don't show all options immediately)
### Guided Tours & Walkthroughs
**When to use**:
- Complex interfaces with many features
- Significant changes to existing product
- Industry-specific tools needing domain knowledge
**How to design**:
- Spotlight specific UI elements (dim rest of page)
- Keep steps short (3-7 steps max per tour)
- Allow users to click through tour freely
- Include "Skip tour" option
- Make replayable (help menu)
**Best practices**:
- Interactive > passive (let users click real buttons)
- Focus on workflow, not features ("Create a project" not "This is the project button")
- Provide sample data so actions work
### Interactive Tutorials
**When to use**:
- Users need hands-on practice
- Concepts are complex or unfamiliar
- High stakes (better to practice in safe environment)
**How to design**:
- Sandbox environment with sample data
- Clear objectives ("Create a chart showing sales by region")
- Step-by-step guidance
- Validation (confirm they did it right)
- Graduation moment (you're ready!)
### Documentation & Help
**In-product help**:
- Contextual help links throughout interface
- Keyboard shortcut reference
- Search-able help center
- Video tutorials for complex workflows
**Help patterns**:
- `?` icon near complex features
- "Learn more" links in tooltips
- Keyboard shortcut hints (`⌘K` shown on search box)
## Empty State Design
Every empty state needs:
### What Will Be Here
"Your recent projects will appear here"
### Why It Matters
"Projects help you organize your work and collaborate with your team"
### How to Get Started
[Create project] or [Import from template]
### Visual Interest
Illustration or icon (not just text on blank page)
### Contextual Help
"Need help getting started? [Watch 2-min tutorial]"
**Empty state types**:
- **First use**: Never used this feature (emphasize value, provide template)
- **User cleared**: Intentionally deleted everything (light touch, easy to recreate)
- **No results**: Search or filter returned nothing (suggest different query, clear filters)
- **No permissions**: Can't access (explain why, how to get access)
- **Error state**: Failed to load (explain what happened, retry option)
## Implementation Patterns
### Technical approaches:
**Tooltip libraries**: Tippy.js, Popper.js
**Tour libraries**: Intro.js, Shepherd.js, React Joyride
**Modal patterns**: Focus trap, backdrop, ESC to close
**Progress tracking**: LocalStorage for "seen" states
**Analytics**: Track completion, drop-off points
**Storage patterns**:
```javascript
// Track which onboarding steps user has seen
localStorage.setItem('onboarding-completed', 'true');
localStorage.setItem('feature-tooltip-seen-reports', 'true');
```
**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals.
**NEVER**:
- Force users through long onboarding before they can use product
- Patronize users with obvious explanations
- Show same tooltip repeatedly (respect dismissals)
- Block all UI during tour (let users explore)
- Create separate tutorial mode disconnected from real product
- Overwhelm with information upfront (progressive disclosure!)
- Hide "Skip" or make it hard to find
- Forget about returning users (don't show initial onboarding again)
## Verify Onboarding Quality
Test with real users:
- **Time to completion**: Can users complete onboarding quickly?
- **Comprehension**: Do users understand after completing?
- **Action**: Do users take desired next step?
- **Skip rate**: Are too many users skipping? (Maybe it's too long/not valuable)
- **Completion rate**: Are users completing? (If low, simplify)
- **Time to value**: How long until users get first value?
Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence.
dist/claude-code/commands/optimize.md
Vendored
+267
View File
@@ -0,0 +1,267 @@
---
name: optimize
description: Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.
args:
- name: target
description: The feature or area to optimize (optional)
required: false
---
Identify and fix performance issues to create faster, smoother user experiences.
## Assess Performance Issues
Understand current performance and identify problems:
1. **Measure current state**:
- **Core Web Vitals**: LCP, FID/INP, CLS scores
- **Load time**: Time to interactive, first contentful paint
- **Bundle size**: JavaScript, CSS, image sizes
- **Runtime performance**: Frame rate, memory usage, CPU usage
- **Network**: Request count, payload sizes, waterfall
2. **Identify bottlenecks**:
- What's slow? (Initial load? Interactions? Animations?)
- What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)
- How bad is it? (Perceivable? Annoying? Blocking?)
- Who's affected? (All users? Mobile only? Slow connections?)
**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters.
## Optimization Strategy
Create systematic improvement plan:
### Loading Performance
**Optimize Images**:
- Use modern formats (WebP, AVIF)
- Proper sizing (don't load 3000px image for 300px display)
- Lazy loading for below-fold images
- Responsive images (`srcset`, `picture` element)
- Compress images (80-85% quality is usually imperceptible)
- Use CDN for faster delivery
```html
<img
src="hero.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
loading="lazy"
alt="Hero image"
/>
```
**Reduce JavaScript Bundle**:
- Code splitting (route-based, component-based)
- Tree shaking (remove unused code)
- Remove unused dependencies
- Lazy load non-critical code
- Use dynamic imports for large components
```javascript
// Lazy load heavy component
const HeavyChart = lazy(() => import('./HeavyChart'));
```
**Optimize CSS**:
- Remove unused CSS
- Critical CSS inline, rest async
- Minimize CSS files
- Use CSS containment for independent regions
**Optimize Fonts**:
- Use `font-display: swap` or `optional`
- Subset fonts (only characters you need)
- Preload critical fonts
- Use system fonts when appropriate
- Limit font weights loaded
```css
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap; /* Show fallback immediately */
unicode-range: U+0020-007F; /* Basic Latin only */
}
```
**Optimize Loading Strategy**:
- Critical resources first (async/defer non-critical)
- Preload critical assets
- Prefetch likely next pages
- Service worker for offline/caching
- HTTP/2 or HTTP/3 for multiplexing
### Rendering Performance
**Avoid Layout Thrashing**:
```javascript
// ❌ Bad: Alternating reads and writes (causes reflows)
elements.forEach(el => {
const height = el.offsetHeight; // Read (forces layout)
el.style.height = height * 2; // Write
});
// ✅ Good: Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // All reads
elements.forEach((el, i) => {
el.style.height = heights[i] * 2; // All writes
});
```
**Optimize Rendering**:
- Use CSS `contain` property for independent regions
- Minimize DOM depth (flatter is faster)
- Reduce DOM size (fewer elements)
- Use `content-visibility: auto` for long lists
- Virtual scrolling for very long lists (react-window, react-virtualized)
**Reduce Paint & Composite**:
- Use `transform` and `opacity` for animations (GPU-accelerated)
- Avoid animating layout properties (width, height, top, left)
- Use `will-change` sparingly for known expensive operations
- Minimize paint areas (smaller is faster)
### Animation Performance
**GPU Acceleration**:
```css
/* ✅ GPU-accelerated (fast) */
.animated {
transform: translateX(100px);
opacity: 0.5;
}
/* ❌ CPU-bound (slow) */
.animated {
left: 100px;
width: 300px;
}
```
**Smooth 60fps**:
- Target 16ms per frame (60fps)
- Use `requestAnimationFrame` for JS animations
- Debounce/throttle scroll handlers
- Use CSS animations when possible
- Avoid long-running JavaScript during animations
**Intersection Observer**:
```javascript
// Efficiently detect when elements enter viewport
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Element is visible, lazy load or animate
}
});
});
```
### React/Framework Optimization
**React-specific**:
- Use `memo()` for expensive components
- `useMemo()` and `useCallback()` for expensive computations
- Virtualize long lists
- Code split routes
- Avoid inline function creation in render
- Use React DevTools Profiler
**Framework-agnostic**:
- Minimize re-renders
- Debounce expensive operations
- Memoize computed values
- Lazy load routes and components
### Network Optimization
**Reduce Requests**:
- Combine small files
- Use SVG sprites for icons
- Inline small critical assets
- Remove unused third-party scripts
**Optimize APIs**:
- Use pagination (don't load everything)
- GraphQL to request only needed fields
- Response compression (gzip, brotli)
- HTTP caching headers
- CDN for static assets
**Optimize for Slow Connections**:
- Adaptive loading based on connection (navigator.connection)
- Optimistic UI updates
- Request prioritization
- Progressive enhancement
## Core Web Vitals Optimization
### Largest Contentful Paint (LCP < 2.5s)
- Optimize hero images
- Inline critical CSS
- Preload key resources
- Use CDN
- Server-side rendering
### First Input Delay (FID < 100ms) / INP (< 200ms)
- Break up long tasks
- Defer non-critical JavaScript
- Use web workers for heavy computation
- Reduce JavaScript execution time
### Cumulative Layout Shift (CLS < 0.1)
- Set dimensions on images and videos
- Don't inject content above existing content
- Use `aspect-ratio` CSS property
- Reserve space for ads/embeds
- Avoid animations that cause layout shifts
```css
/* Reserve space for image */
.image-container {
aspect-ratio: 16 / 9;
}
```
## Performance Monitoring
**Tools to use**:
- Chrome DevTools (Lighthouse, Performance panel)
- WebPageTest
- Core Web Vitals (Chrome UX Report)
- Bundle analyzers (webpack-bundle-analyzer)
- Performance monitoring (Sentry, DataDog, New Relic)
**Key metrics**:
- LCP, FID/INP, CLS (Core Web Vitals)
- Time to Interactive (TTI)
- First Contentful Paint (FCP)
- Total Blocking Time (TBT)
- Bundle size
- Request count
**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.
**NEVER**:
- Optimize without measuring (premature optimization)
- Sacrifice accessibility for performance
- Break functionality while optimizing
- Use `will-change` everywhere (creates new layers, uses memory)
- Lazy load above-fold content
- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first)
- Forget about mobile performance (often slower devices, slower connections)
## Verify Improvements
Test that optimizations worked:
- **Before/after metrics**: Compare Lighthouse scores
- **Real user monitoring**: Track improvements for real users
- **Different devices**: Test on low-end Android, not just flagship iPhone
- **Slow connections**: Throttle to 3G, test experience
- **No regressions**: Ensure functionality still works
- **User perception**: Does it *feel* faster?
Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.
dist/claude-code/commands/polish.md
Vendored
+196
View File
@@ -0,0 +1,196 @@
---
name: polish
description: Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great.
args:
- name: target
description: The feature or area to polish (optional)
required: false
---
Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished.
## Pre-Polish Assessment
Understand the current state and goals:
1. **Review completeness**:
- Is it functionally complete?
- Are there known issues to preserve (mark with TODOs)?
- What's the quality bar? (MVP vs flagship feature?)
- When does it ship? (How much time for polish?)
2. **Identify polish areas**:
- Visual inconsistencies
- Spacing and alignment issues
- Interaction state gaps
- Copy inconsistencies
- Edge cases and error states
- Loading and transition smoothness
**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete.
## Polish Systematically
Work through these dimensions methodically:
### Visual Alignment & Spacing
- **Pixel-perfect alignment**: Everything lines up to grid
- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps)
- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering)
- **Responsive consistency**: Spacing and alignment work at all breakpoints
- **Grid adherence**: Elements snap to baseline grid
**Check**:
- Enable grid overlay and verify alignment
- Check spacing with browser inspector
- Test at multiple viewport sizes
- Look for elements that "feel" off
### Typography Refinement
- **Hierarchy consistency**: Same elements use same sizes/weights throughout
- **Line length**: 45-75 characters for body text
- **Line height**: Appropriate for font size and context
- **Widows & orphans**: No single words on last line
- **Hyphenation**: Appropriate for language and column width
- **Kerning**: Adjust letter spacing where needed (especially headlines)
- **Font loading**: No FOUT/FOIT flashes
### Color & Contrast
- **Contrast ratios**: All text meets WCAG standards
- **Consistent token usage**: No hard-coded colors, all use design tokens
- **Theme consistency**: Works in all theme variants
- **Color meaning**: Same colors mean same things throughout
- **Accessible focus**: Focus indicators visible with sufficient contrast
### Interaction States
Every interactive element needs all states:
- **Default**: Resting state
- **Hover**: Subtle feedback (color, scale, shadow)
- **Focus**: Keyboard focus indicator (never remove without replacement)
- **Active**: Click/tap feedback
- **Disabled**: Clearly non-interactive
- **Loading**: Async action feedback
- **Error**: Validation or error state
- **Success**: Successful completion
**Missing states create confusion and broken experiences**.
### Micro-interactions & Transitions
- **Smooth transitions**: All state changes animated appropriately (200-300ms)
- **Consistent easing**: Same easing curves for similar transitions
- **No jank**: 60fps animations, no layout thrashing
- **Appropriate motion**: Motion serves purpose, not decoration
- **Reduced motion**: Respects `prefers-reduced-motion`
### Content & Copy
- **Consistent terminology**: Same things called same names throughout
- **Consistent capitalization**: Title Case vs Sentence case applied consistently
- **Grammar & spelling**: No typos
- **Appropriate length**: Not too wordy, not too terse
- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them)
### Icons & Images
- **Consistent style**: All icons from same family or matching style
- **Appropriate sizing**: Icons sized consistently for context
- **Proper alignment**: Icons align with adjacent text optically
- **Alt text**: All images have descriptive alt text
- **Loading states**: Images don't cause layout shift, proper aspect ratios
- **Retina support**: 2x assets for high-DPI screens
### Forms & Inputs
- **Label consistency**: All inputs properly labeled
- **Required indicators**: Clear and consistent
- **Error messages**: Helpful and consistent
- **Tab order**: Logical keyboard navigation
- **Auto-focus**: Appropriate (don't overuse)
- **Validation timing**: Consistent (on blur vs on submit)
### Edge Cases & Error States
- **Loading states**: All async actions have loading feedback
- **Empty states**: Helpful empty states, not just blank space
- **Error states**: Clear error messages with recovery paths
- **Success states**: Confirmation of successful actions
- **Long content**: Handles very long names, descriptions, etc.
- **No content**: Handles missing data gracefully
- **Offline**: Appropriate offline handling (if applicable)
### Responsiveness
- **All breakpoints**: Test mobile, tablet, desktop
- **Touch targets**: 44x44px minimum on touch devices
- **Readable text**: No text smaller than 14px on mobile
- **No horizontal scroll**: Content fits viewport
- **Appropriate reflow**: Content adapts logically
### Performance
- **Fast initial load**: Optimize critical path
- **No layout shift**: Elements don't jump after load (CLS)
- **Smooth interactions**: No lag or jank
- **Optimized images**: Appropriate formats and sizes
- **Lazy loading**: Off-screen content loads lazily
### Code Quality
- **Remove console logs**: No debug logging in production
- **Remove commented code**: Clean up dead code
- **Remove unused imports**: Clean up unused dependencies
- **Consistent naming**: Variables and functions follow conventions
- **Type safety**: No TypeScript `any` or ignored errors
- **Accessibility**: Proper ARIA labels and semantic HTML
## Polish Checklist
Go through systematically:
- [ ] Visual alignment perfect at all breakpoints
- [ ] Spacing uses design tokens consistently
- [ ] Typography hierarchy consistent
- [ ] All interactive states implemented
- [ ] All transitions smooth (60fps)
- [ ] Copy is consistent and polished
- [ ] Icons are consistent and properly sized
- [ ] All forms properly labeled and validated
- [ ] Error states are helpful
- [ ] Loading states are clear
- [ ] Empty states are welcoming
- [ ] Touch targets are 44x44px minimum
- [ ] Contrast ratios meet WCAG AA
- [ ] Keyboard navigation works
- [ ] Focus indicators visible
- [ ] No console errors or warnings
- [ ] No layout shift on load
- [ ] Works in all supported browsers
- [ ] Respects reduced motion preference
- [ ] Code is clean (no TODOs, console.logs, commented code)
**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up.
**NEVER**:
- Polish before it's functionally complete
- Spend hours on polish if it ships in 30 minutes (triage)
- Introduce bugs while polishing (test thoroughly)
- Ignore systematic issues (if spacing is off everywhere, fix the system)
- Perfect one thing while leaving others rough (consistent quality level)
## Final Verification
Before marking as done:
- **Use it yourself**: Actually interact with the feature
- **Test on real devices**: Not just browser DevTools
- **Ask someone else to review**: Fresh eyes catch things
- **Compare to design**: Match intended design
- **Check all states**: Don't just test happy path
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.
dist/claude-code/commands/quieter.md
Vendored
+92
View File
@@ -0,0 +1,92 @@
---
name: quieter
description: Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact.
args:
- name: target
description: The feature or component to make quieter (optional)
required: false
---
Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.
## Assess Current State
Analyze what makes the design feel too intense:
1. **Identify intensity sources**:
- **Color saturation**: Overly bright or saturated colors
- **Contrast extremes**: Too much high-contrast juxtaposition
- **Visual weight**: Too many bold, heavy elements competing
- **Animation excess**: Too much motion or overly dramatic effects
- **Complexity**: Too many visual elements, patterns, or decorations
- **Scale**: Everything is large and loud with no hierarchy
2. **Understand the context**:
- What's the purpose? (Marketing vs tool vs reading experience)
- Who's the audience? (Some contexts need energy)
- What's working? (Don't throw away good ideas)
- What's the core message? (Preserve what matters)
**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.
## Plan Refinement
Create a strategy to reduce intensity while maintaining impact:
- **Color approach**: Desaturate or shift to more sophisticated tones?
- **Hierarchy approach**: Which elements should stay bold (very few), which should recede?
- **Simplification approach**: What can be removed entirely?
- **Sophistication approach**: How can we signal quality through restraint?
**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision.
## Refine the Design
Systematically reduce intensity across these dimensions:
### Color Refinement
- **Reduce saturation**: Shift from fully saturated to 70-85% saturation
- **Soften palette**: Replace bright colors with muted, sophisticated tones
- **Reduce color variety**: Use fewer colors more thoughtfully
- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
- **Gentler contrasts**: High contrast only where it matters most
### Visual Weight Reduction
- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness
- **White space**: Increase breathing room, reduce density
- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely
### Simplification
- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose
- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes
- **Reduce layering**: Flatten visual hierarchy where possible
- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
### Motion Reduction
- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds
- **Remove decorative animations**: Keep functional motion, remove flourishes
- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
### Composition Refinement
- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling
- **Align to grid**: Bring rogue elements back into systematic alignment
- **Even out spacing**: Replace extreme spacing variations with consistent rhythm
**NEVER**:
- Make everything the same size/weight (hierarchy still matters)
- Remove all color (quiet ≠ grayscale)
- Eliminate all personality (maintain character through refinement)
- Sacrifice usability for aesthetics (functional elements still need clear affordances)
- Make everything small and light (some anchors needed)
## Verify Quality
Ensure refinement maintains quality:
- **Still functional**: Can users still accomplish tasks easily?
- **Still distinctive**: Does it have character, or is it generic now?
- **Better reading**: Is text easier to read for extended periods?
- **Sophistication**: Does it feel more refined and premium?
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.
dist/claude-code/commands/simplify.md
Vendored
+113
View File
@@ -0,0 +1,113 @@
---
name: simplify
description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean.
args:
- name: target
description: The feature or component to simplify (optional)
required: false
---
Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.
## Assess Current State
Analyze what makes the design feel complex or cluttered:
1. **Identify complexity sources**:
- **Too many elements**: Competing buttons, redundant information, visual clutter
- **Excessive variation**: Too many colors, fonts, sizes, styles without purpose
- **Information overload**: Everything visible at once, no progressive disclosure
- **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations
- **Confusing hierarchy**: Unclear what matters most
- **Feature creep**: Too many options, actions, or paths forward
2. **Find the essence**:
- What's the primary user goal? (There should be ONE)
- What's actually necessary vs nice-to-have?
- What can be removed, hidden, or combined?
- What's the 20% that delivers 80% of value?
**CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.
## Plan Simplification
Create a ruthless editing strategy:
- **Core purpose**: What's the ONE thing this should accomplish?
- **Essential elements**: What's truly necessary to achieve that purpose?
- **Progressive disclosure**: What can be hidden until needed?
- **Consolidation opportunities**: What can be combined or integrated?
**IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
## Simplify the Design
Systematically remove complexity across these dimensions:
### Information Architecture
- **Reduce scope**: Remove secondary actions, optional features, redundant information
- **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows)
- **Combine related actions**: Merge similar buttons, consolidate forms, group related content
- **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden
- **Remove redundancy**: If it's said elsewhere, don't repeat it here
### Visual Simplification
- **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
- **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
- **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
- **Flatten structure**: Reduce nesting, remove unnecessary containers
- **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
### Layout Simplification
- **Linear flow**: Replace complex grids with simple vertical flow where possible
- **Remove sidebars**: Move secondary content inline or hide it
- **Full-width**: Use available space generously instead of complex multi-column layouts
- **Consistent alignment**: Pick left or center, stick with it
- **Generous white space**: Let content breathe, don't pack everything tight
### Interaction Simplification
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
- **Clear CTAs**: ONE obvious next step, not five competing actions
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
- **Active voice**: "Save changes" not "Changes will be saved"
- **Remove jargon**: Plain language always wins
- **Scannable structure**: Short paragraphs, bullet points, clear headings
- **Essential information only**: Remove marketing fluff, legalese, hedging
### Code Simplification
- **Remove unused code**: Dead CSS, unused components, orphaned files
- **Flatten component trees**: Reduce nesting depth
- **Consolidate styles**: Merge similar styles, use utilities consistently
- **Reduce variants**: Does that component need 12 variations, or can 3 cover 90% of cases?
**NEVER**:
- Remove necessary functionality (simplicity ≠ feature-less)
- Sacrifice accessibility for simplicity (clear labels and ARIA still required)
- Make things so simple they're unclear (mystery ≠ minimalism)
- Remove information users need to make decisions
- Eliminate hierarchy completely (some things should stand out)
- Oversimplify complex domains (match complexity to actual task complexity)
## Verify Simplification
Ensure simplification improves usability:
- **Faster task completion**: Can users accomplish goals more quickly?
- **Reduced cognitive load**: Is it easier to understand what to do?
- **Still complete**: Are all necessary features still accessible?
- **Clearer hierarchy**: Is it obvious what matters most?
- **Better performance**: Does simpler design load faster?
## Document Removed Complexity
If you removed features or options:
- Document why they were removed
- Consider if they need alternative access points
- Note any user feedback to monitor
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."
dist/claude-code/skills/color-and-contrast/SKILL.md
Vendored
+110
View File
@@ -0,0 +1,110 @@
---
name: color-and-contrast
description: Build sophisticated color systems balancing aesthetics with accessibility and function. Use this skill when establishing brand palettes, implementing theming, or ensuring WCAG compliance. Produces beautiful, accessible color implementations with systematic coherence across all theme variants.
license: Complete terms in LICENSE.txt
---
This skill guides the creation of color systems that are both beautiful and functional, balancing creative expression with accessibility and systematic coherence.
The user provides a color challenge: building a color palette, implementing theming, fixing contrast issues, establishing brand colors, or creating dark mode variants. They may include brand guidelines, accessibility requirements, or existing design constraints.
## Color System Thinking
Before choosing colors, understand the strategic requirements:
- **Brand & Emotion**: What feelings should the colors evoke? Trust (blues)? Energy (reds/oranges)? Growth (greens)? Luxury (purples/golds)? Colors are never neutral.
- **Functional Requirements**: How many semantic states needed? Success, error, warning, info? How many UI layers? Background, surface, border, text?
- **Context**: Industry conventions (avoid red for finance), cultural considerations, competitor differentiation.
- **Accessibility Goals**: WCAG level (A/AA/AAA), audience considerations (aging users need higher contrast).
**CRITICAL**: Color is both an art and a science. Aesthetics matter, but accessibility is non-negotiable.
Then build a color system that is:
- Accessible and WCAG compliant
- Systematically organized with clear roles
- Flexible enough for theming and variations
- Aesthetically cohesive and on-brand
## Color Theory Fundamentals
### Color Harmony & Relationships
[TO BE DEVELOPED: Complementary, analogous, triadic, split-complementary, monochromatic schemes, color wheel navigation]
### Color Psychology & Meaning
[TO BE DEVELOPED: Emotional associations, cultural considerations, industry conventions, semantic color choices]
### Color Properties
[TO BE DEVELOPED: Hue, saturation, lightness/brightness, HSL vs RGB vs LCH, perceptual uniformity]
## Building Functional Palettes
### Palette Structure
[TO BE DEVELOPED: Primary/secondary/tertiary, neutral scales (9-11 steps), semantic colors, state colors]
### Generating Color Scales
[TO BE DEVELOPED: Lightness curves, saturation shifts, hue rotation, perceptual uniformity, algorithmic generation]
### The Dominant Color Principle
[TO BE DEVELOPED: 60-30-10 rule, accent color strategy, visual weight distribution, avoiding rainbow vomit]
## Contrast & Accessibility
### WCAG Compliance
[TO BE DEVELOPED: AA vs AAA standards, text contrast ratios (4.5:1 / 7:1), UI component contrast (3:1), large text exceptions]
### Testing & Tools
[TO BE DEVELOPED: Contrast checkers, automated testing, color blindness simulation, tools for verification]
### Accessible Color Combinations
[TO BE DEVELOPED: Which combinations work, which don't, safe pairings, dangerous pairings, contrast matrices]
## Theming Architecture
### Light & Dark Mode
[TO BE DEVELOPED: Independent palettes vs inverted, neutral strategies, shadows in dark mode, image handling]
### CSS Custom Properties
[TO BE DEVELOPED: Token hierarchy (primitive → semantic → component), naming conventions, theme switching]
### Multi-Theme Systems
[TO BE DEVELOPED: Brand themes, user preference themes, contextual themes, theme inheritance]
## Advanced Color Techniques
### Gradients & Effects
[TO BE DEVELOPED: Mesh gradients, color stops, blend modes, gradient generation, overlay techniques]
### Transparency & Alpha
[TO BE DEVELOPED: Alpha channels, overlay strategies, transparency scales, backdrop effects]
### Dynamic Color
[TO BE DEVELOPED: State-based color changes, hover darkening/lightening, interactive color feedback]
---
**IMPORTANT**: Test color combinations in context, not in isolation. Colors behave differently on different backgrounds and at different sizes.
**NEVER**:
- Rely on color alone to convey information
- Use color combinations that fail WCAG contrast requirements
- Create palettes with arbitrary color choices (every color needs a purpose)
- Ignore color blindness (8% of men, 0.5% of women)
- Use pure black (#000) or pure white (#fff) for large areas
- Create theme systems without testing all combinations
Remember: Color is powerful. Use it deliberately, systematically, and inclusively.
dist/claude-code/skills/interaction-design/SKILL.md
Vendored
+152
View File
@@ -0,0 +1,152 @@
---
name: interaction-design
description: Design intuitive interaction patterns that feel natural and provide clear feedback. Use this skill when building interactive components, designing forms, or establishing interaction standards. Creates accessible, forgiving interfaces where every state is clear and every action provides immediate feedback.
license: Complete terms in LICENSE.txt
---
This skill guides the creation of interaction patterns that are intuitive, accessible, and delightful - the conversation between user and interface.
The user provides an interaction challenge: designing forms, improving button states, fixing navigation patterns, optimizing input UX, implementing keyboard navigation, or creating feedback mechanisms. They may include accessibility requirements, device constraints, or specific interaction problems to solve.
## Interaction Design Thinking
Before designing interactions, understand the user's mental model and context:
- **User Context**: What are users trying to accomplish? What's their experience level? What's their emotional state (stressed during checkout vs relaxed browsing)?
- **Device & Input**: Touch vs pointer? Keyboard navigation? Voice input? Gamepad? Different inputs need different affordances.
- **Error Tolerance**: High-stakes actions (delete, purchase) vs low-stakes (filter, sort)? Design appropriate safeguards.
- **Speed vs Accuracy**: Quick scanning vs careful reading? Simple taps vs precise manipulation?
**CRITICAL**: Good interaction design is invisible. Users should complete tasks without thinking about the interface.
Then implement interactions that are:
- Intuitive with clear affordances and feedback
- Accessible to all users and input methods
- Forgiving with error prevention and recovery
- Responsive with immediate feedback and state changes
## Interaction States
### Core States
[TO BE DEVELOPED: Default, hover, focus, active, disabled, loading, error, success - visual treatment for each]
### State Transitions
[TO BE DEVELOPED: Smooth state changes, animation between states, maintaining context, preserving user intent]
### Loading & Progress States
[TO BE DEVELOPED: Skeleton screens, spinners, progress bars, optimistic updates, what to show while waiting]
## Affordances & Feedback
### Visual Affordances
[TO BE DEVELOPED: Signaling interactivity, button appearance, link styling, cursor changes, touch target highlighting]
### Immediate Feedback
[TO BE DEVELOPED: Click/tap acknowledgment, hover feedback, focus indication, "something is happening" signals]
### Haptic & Sound Feedback
[TO BE DEVELOPED: Vibration patterns, sound cues, cross-modal feedback, when to use non-visual feedback]
## Form Design & Input Patterns
### Form Layout & Structure
[TO BE DEVELOPED: Single column vs multi-column, label placement, field grouping, visual hierarchy in forms]
### Input Field Design
[TO BE DEVELOPED: Field sizing, placeholder usage (anti-pattern), helper text, character limits, input masking]
### Validation Patterns
[TO BE DEVELOPED: Inline vs on-submit, real-time validation, error message writing, success confirmation, required field indication]
### Complex Input Types
[TO BE DEVELOPED: File upload UX, date pickers, time selection, rich text editing, multi-select, autocomplete, search]
### Progressive Disclosure in Forms
[TO BE DEVELOPED: Conditional fields, wizards/multi-step forms, accordions, showing complexity gradually]
### Form Error Handling
[TO BE DEVELOPED: Error prevention (constraints, masks), clear error messages, error recovery, field-level vs form-level errors]
## Touch & Pointer Interactions
### Touch Targets
[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge reach areas on mobile]
### Touch vs Pointer Patterns
[TO BE DEVELOPED: Hover states on touch (problems), tap feedback, long press, swipe gestures, pinch-to-zoom]
### Gesture Design
[TO BE DEVELOPED: Swipe to delete, pull to refresh, drag to reorder, custom gestures, gesture discoverability]
## Keyboard Navigation
### Focus Management
[TO BE DEVELOPED: Focus rings (never remove without replacement), logical tab order, skip links, focus trapping in modals]
### Keyboard Shortcuts
[TO BE DEVELOPED: Common shortcuts, discoverability, avoiding conflicts, command palettes, keyboard-first workflows]
### Accessible Interaction Patterns
[TO BE DEVELOPED: ARIA roles for custom controls, managing focus in dynamic content, screen reader announcements]
## Navigation Patterns
### Menu & Navigation Design
[TO BE DEVELOPED: Mega menus, hamburger menus, breadcrumbs, tabs, pagination, infinite scroll vs load more]
### Modal & Dialog Patterns
[TO BE DEVELOPED: Modal entry/exit, focus management, escape to close, backdrop click behavior, sheet patterns]
### Command & Context Menus
[TO BE DEVELOPED: Right-click menus, command palettes, dropdown menus, action sheets]
## Error Prevention & Recovery
### Constraints & Guards
[TO BE DEVELOPED: Input constraints, disabled states, confirmation dialogs for destructive actions, undo mechanisms]
### Error Messages
[TO BE DEVELOPED: Clear language, actionable guidance, positive framing, where to show errors, when to show errors]
### Undo & Redo
[TO BE DEVELOPED: Undo patterns, toast notifications with undo, versioning, draft auto-save]
---
**IMPORTANT**: Test interactions with actual users and diverse input methods. What works with a mouse might fail with touch or keyboard.
**NEVER**:
- Remove focus indicators without providing visible alternatives (accessibility violation)
- Use placeholder text as labels (disappears on input, hard to remember)
- Make touch targets smaller than 44x44px
- Validate in real-time for long inputs (wait for blur)
- Show generic error messages ("Error occurred") - be specific and helpful
- Block user interaction without clear loading states
- Design only for mouse/pointer (test with keyboard and touch)
- Use custom controls without proper ARIA and keyboard support
Remember: Interaction design is where users actually experience your interface. Get this right, and everything else falls into place.
dist/claude-code/skills/motion-design/SKILL.md
Vendored
+111
View File
@@ -0,0 +1,111 @@
---
name: motion-design
description: Create purposeful motion that enhances usability and provides feedback without sacrificing performance. Use this skill when adding animations, building micro-interactions, or establishing motion systems. Produces smooth, delightful animations that guide attention and reinforce interactions while maintaining 60fps performance.
license: Complete terms in LICENSE.txt
---
This skill guides the creation of motion design that enhances usability, provides feedback, and creates delight - without sacrificing performance or accessibility.
The user provides a motion challenge: adding animations to components, improving interaction feedback, building page transitions, creating micro-interactions, or establishing motion design systems. They may include performance constraints, aesthetic goals, or specific interaction problems to solve.
## Motion Design Thinking
Before animating anything, understand the purpose and context:
- **Purpose**: Why animate? Feedback? Delight? Guidance? Branding? Every animation needs a reason beyond "it looks cool."
- **Personality**: What character should motion convey? Snappy and energetic? Smooth and luxurious? Playful and bouncy? Subtle and refined?
- **Performance Budget**: Mobile devices? Complex pages? Can we afford GPU-intensive animations?
- **Accessibility**: Motion sensitivity, vestibular disorders, reduced motion preferences - some users need minimal animation.
**CRITICAL**: Animation should enhance understanding and usability, not obscure it. When in doubt, be subtle. Users notice janky animation more than no animation.
Then implement motion that is:
- Purposeful with clear functional or emotional goals
- Performant with smooth 60fps execution
- Accessible with reduced motion alternatives
- Choreographed with thoughtful timing and sequencing
## Classic Animation Principles
### Disney's 12 Principles (Web Context)
[TO BE DEVELOPED: Squash and stretch, anticipation, staging, follow-through, ease-in/ease-out, arcs, secondary action, timing, exaggeration, solid drawing, appeal - adapted for UI]
### Timing & Duration
[TO BE DEVELOPED: Micro-interactions (100-300ms), transitions (300-500ms), complex animations (500-1000ms), duration by distance, perceived speed]
### Easing & Curves
[TO BE DEVELOPED: Linear vs eased, ease-out (enter), ease-in (exit), ease-in-out (full cycle), custom cubic-bezier, spring physics]
## Types of UI Animation
### Micro-interactions
[TO BE DEVELOPED: Button feedback, hover states, toggle switches, like buttons, form validation feedback, loading indicators]
### Page Transitions
[TO BE DEVELOPED: Route transitions, modal entry/exit, drawer animations, cross-fade, slide, zoom patterns]
### State Transitions
[TO BE DEVELOPED: Loading → success → error flows, expand/collapse, show/hide, enable/disable state changes]
### Scrolling & Parallax
[TO BE DEVELOPED: Scroll-triggered animations, reveal on scroll, parallax layers, scroll-linked effects, intersection observer]
## Choreography & Sequencing
### Staggered Animations
[TO BE DEVELOPED: animation-delay patterns, sequential reveals, cascade effects, list item staggering]
### Orchestrated Page Loads
[TO BE DEVELOPED: Entry choreography, hero → content → details, creating narrative through sequence, attention management]
### Exit Choreography
[TO BE DEVELOPED: Reverse sequences, intentional exit timing, maintaining spatial relationships during exit]
## Technical Implementation
### CSS-Only Animation
[TO BE DEVELOPED: @keyframes, animation properties, transitions, transform, pseudo-element animations, hardware acceleration]
### JavaScript Animation
[TO BE DEVELOPED: Web Animations API, requestAnimationFrame, animation libraries (GSAP, Framer Motion, Motion One)]
### Performance Optimization
[TO BE DEVELOPED: GPU acceleration (transform, opacity only), will-change, avoiding layout thrashing, reducing paint, FPS monitoring]
## Motion Design Systems
### Motion Tokens
[TO BE DEVELOPED: Duration scales, easing tokens, named animations, consistent motion vocabulary]
### Reduced Motion
[TO BE DEVELOPED: prefers-reduced-motion, graceful degradation, essential vs decorative animation, crossfade alternatives]
---
**IMPORTANT**: One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions everywhere. Focus on high-impact moments.
**NEVER**:
- Animate everything (animation fatigue is real)
- Use long durations (>500ms) for UI feedback (users will perceive lag)
- Animate layout properties (width, height, top, left) - use transform instead
- Ignore prefers-reduced-motion (accessibility requirement)
- Use animation to hide slow loading (fix the loading time)
- Animate without purpose (every animation should answer "why?")
- Create animations that obscure content or block interaction
Remember: Motion is powerful - it can guide attention, provide feedback, and create emotional connection. Use it thoughtfully, not reflexively.
dist/claude-code/skills/responsive-design/SKILL.md
Vendored
+158
View File
@@ -0,0 +1,158 @@
---
name: responsive-design
description: Create responsive interfaces that adapt beautifully across devices, screen sizes, and input methods. Use this skill when building mobile-first layouts, defining breakpoint strategies, or optimizing for touch. Produces fluid, performant experiences that feel native to each device while maintaining consistency.
license: Complete terms in LICENSE.txt
---
This skill guides the creation of responsive interfaces that adapt beautifully across devices, screen sizes, input methods, and usage contexts.
The user provides a responsive design challenge: building mobile-first layouts, defining breakpoint strategies, optimizing for touch vs pointer, creating fluid designs, or solving specific cross-device problems. They may include device requirements, constraints, or specific adaptation challenges.
## Responsive Design Thinking
Before implementing, understand the multi-device context:
- **Device Landscape**: Which devices matter? (Mobile, tablet, desktop, TV, watch?) What's the primary device?
- **Usage Context**: How do usage patterns differ by device? (On-the-go mobile vs focused desktop work)
- **Input Methods**: Touch, pointer, keyboard, voice, gamepad - what input methods need support?
- **Network Conditions**: Fast wifi vs slow 3G - how does this impact design decisions?
- **Content Priority**: What's essential on all devices vs optional on larger screens?
**CRITICAL**: Responsive design is not just about scaling - it's about adapting the experience appropriately for each context.
Then build responsive systems that are:
- Mobile-first with progressive enhancement
- Fluid and adaptable across viewport sizes
- Optimized for different input methods
- Performant on constrained devices
- Contextually appropriate
## Mobile-First Methodology
### Why Mobile-First
[TO BE DEVELOPED: Progressive enhancement, performance benefits, forces priority decisions, mobile usage dominance]
### Mobile-First Implementation
[TO BE DEVELOPED: Start with mobile styles, add complexity with min-width media queries, content-first approach]
## Breakpoint Strategies
### Choosing Breakpoints
[TO BE DEVELOPED: Content-driven vs device-driven, common breakpoint values, in-between states, avoiding too many breakpoints]
### Breakpoint Architecture
[TO BE DEVELOPED: Named breakpoints, breakpoint tokens, consistent usage across codebase]
## Fluid & Adaptive Design
### Fluid Typography
[TO BE DEVELOPED: clamp(), viewport units, fluid type scales, maintaining readability]
### Fluid Spacing
[TO BE DEVELOPED: Responsive spacing scales, container-relative spacing, clamp() for margins/padding]
### Fluid Layouts
[TO BE DEVELOPED: CSS Grid auto-fit/auto-fill, flexible columns, aspect-ratio, fluid containers]
### Container Queries
[TO BE DEVELOPED: Component-level responsiveness, when to use vs media queries, polyfills]
## Layout Adaptation Patterns
### Navigation Patterns
[TO BE DEVELOPED: Mobile hamburger/drawer, tablet side panel, desktop persistent nav, bottom nav bars]
### Content Reflow
[TO BE DEVELOPED: Single column → multi-column, stacking orders, priority content first]
### Component Adaptation
[TO BE DEVELOPED: Tabs → accordion, horizontal → vertical, show/hide patterns, progressive disclosure]
## Touch vs Pointer Optimization
### Touch Target Sizing
[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge cases]
### Touch-Specific Interactions
[TO BE DEVELOPED: Swipe gestures, pull-to-refresh, long press, avoiding hover-dependent patterns]
### Hybrid Devices
[TO BE DEVELOPED: Supporting both touch and pointer, feature detection, adaptive interfaces]
## Viewport & Screen Considerations
### Viewport Meta Tag
[TO BE DEVELOPED: Proper viewport configuration, zoom control, initial scale]
### Safe Areas
[TO BE DEVELOPED: iPhone notch, rounded corners, system UI insets, padding for safe areas]
### Orientation Handling
[TO BE DEVELOPED: Portrait vs landscape, orientation-specific layouts, testing both orientations]
### High-DPI Screens
[TO BE DEVELOPED: Retina images, 2x/3x assets, SVG for icons, responsive images]
## Responsive Images & Media
### Responsive Images
[TO BE DEVELOPED: srcset, sizes, picture element, art direction, lazy loading]
### Video Adaptation
[TO BE DEVELOPED: Responsive video embeds, bandwidth considerations, poster images]
## Performance on Mobile
### Mobile Performance Budget
[TO BE DEVELOPED: Constrained CPU/memory, slow connections, battery concerns]
### Loading Strategies
[TO BE DEVELOPED: Critical path optimization, lazy loading, code splitting for mobile]
## Testing Strategies
### Device Testing
[TO BE DEVELOPED: Real device testing, browser DevTools, emulators, viewport testing]
### Testing Checklist
[TO BE DEVELOPED: Different viewports, orientations, input methods, connection speeds]
---
**IMPORTANT**: Test on real devices, not just DevTools. Device emulation is useful but misses real-world constraints.
**NEVER**:
- Design desktop-first and try to cram into mobile
- Hide critical functionality on mobile
- Use device detection instead of feature detection
- Create separate mobile/desktop codebases (maintain one responsive codebase)
- Ignore landscape orientation
- Use fixed pixel values without considering smaller/larger screens
- Forget about tablet (it's not just big phone or small desktop)
- Assume all mobile devices are powerful (many users have older devices)
Remember: Responsive design is about creating experiences that work everywhere while feeling native nowhere. Adapt intelligently for context while maintaining consistency.
dist/claude-code/skills/spatial-design/SKILL.md
Vendored
+128
View File
@@ -0,0 +1,128 @@
---
name: spatial-design
description: Master spatial design balancing systematic precision with artistic composition. Use this skill when building spacing systems, establishing grids, or improving visual hierarchy. Creates systematically organized layouts with compelling visual hierarchy and intentional spatial relationships.
license: Complete terms in LICENSE.txt
---
This skill guides the creation of spatial systems that balance mathematical precision with artistic composition, ensuring interfaces are both systematically organized and visually compelling.
The user provides a layout challenge: building spacing systems, establishing grids, improving visual hierarchy, fixing composition issues, or implementing responsive layouts. They may include design system constraints, aesthetic goals, or specific spatial problems to solve.
## Spatial Design Thinking
Before arranging elements, understand the compositional strategy:
- **Content Priority**: What's most important? What should users see first, second, third? Hierarchy starts here.
- **Visual Weight Distribution**: Where should the eye go? Balanced or intentionally unbalanced? Symmetrical or asymmetric?
- **Density vs Breathing Room**: Controlled density (information-rich) or generous space (editorial)? Match context and audience.
- **Reading Patterns**: Z-pattern (scanning), F-pattern (text-heavy), focal point (marketing), free-form (experimental)?
**CRITICAL**: Space is not empty - it's an active design element. Negative space gives positive elements room to breathe and meaning.
Then build layout systems that are:
- Systematically consistent with clear spacing rules
- Visually balanced with intentional hierarchy
- Responsive and adaptive across viewports
- Compositionally strong with clear focal points
## Classic Composition Principles
### Visual Hierarchy Fundamentals
[TO BE DEVELOPED: Size, weight, color, position, contrast as hierarchy tools, Gestalt principles (proximity, similarity, closure)]
### Balance & Symmetry
[TO BE DEVELOPED: Symmetrical vs asymmetrical balance, visual weight calculation, creating tension and resolution]
### The Rule of Thirds & Golden Ratio
[TO BE DEVELOPED: Classic composition grids, golden ratio applications, when to follow vs break rules]
### Focal Points & Eye Movement
[TO BE DEVELOPED: Creating focal points, directing eye flow, Z/F/circular patterns, intentional disruption]
## Spacing Systems
### Spacing Scales
[TO BE DEVELOPED: 4pt/8pt systems, modular scales, mathematical progressions (linear, exponential, Fibonacci)]
### Vertical Rhythm
[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, spacing ratios, rhythm across components]
### Micro vs Macro Space
[TO BE DEVELOPED: Component-internal spacing, between-component spacing, section spacing, page-level breathing room]
### Spacing Token Architecture
[TO BE DEVELOPED: Primitive spacing tokens, semantic spacing (component gaps, section padding), contextual spacing]
## Grid Systems & Layout Patterns
### Grid Fundamentals
[TO BE DEVELOPED: Column grids, modular grids, baseline grids, grid anatomy (columns, gutters, margins)]
### Classic Layout Patterns
[TO BE DEVELOPED: Sidebar layouts, holy grail, card grids, masonry, magazine layouts, asymmetric layouts]
### Modern CSS Layout
[TO BE DEVELOPED: CSS Grid (explicit placement, auto-placement, grid areas), Flexbox (direction, alignment, distribution), Container Queries]
## Creating Visual Hierarchy
### Hierarchy Through Scale
[TO BE DEVELOPED: Size relationships, proportional scaling, meaningful jumps vs gradual progression]
### Hierarchy Through Weight & Color
[TO BE DEVELOPED: Visual weight calculation, using color for emphasis, combining multiple hierarchy tools]
### Hierarchy Through Position
[TO BE DEVELOPED: Placement importance, reading order, visual flow direction, breaking the grid for emphasis]
## Responsive Spatial Design
### Breakpoint Strategy
[TO BE DEVELOPED: Mobile-first vs desktop-first, breakpoint values, in-between states, content-driven breakpoints]
### Layout Adaptation
[TO BE DEVELOPED: Reflow patterns, navigation transformation, content prioritization, progressive disclosure]
### Fluid Spacing & Layout
[TO BE DEVELOPED: clamp() for spacing, viewport units, fluid grids, container-relative spacing]
## Depth & Layering
### Creating Depth
[TO BE DEVELOPED: Layering, shadows, elevation systems, z-index scales, parallax effects]
### Overlap & Intersection
[TO BE DEVELOPED: Intentional overlap, breaking containers, elements that cross boundaries]
---
**IMPORTANT**: Systematic spacing doesn't mean boring. Use the system as a foundation, then break it intentionally for impact.
**NEVER**:
- Use arbitrary spacing values outside your scale (unless intentionally breaking the system)
- Create layouts that ignore natural reading patterns without good reason
- Forget that white space is a design element, not wasted space
- Make all spacing equal (variety creates hierarchy)
- Build responsive layouts that only work at breakpoint edges
- Create hierarchy through size alone (combine multiple tools)
Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally.
dist/claude-code/skills/typography/SKILL.md
Vendored
+96
View File
@@ -0,0 +1,96 @@
---
name: typography
description: Master typography systems that balance timeless principles with modern web capabilities. Use this skill when building type systems, improving readability, or establishing typographic hierarchy. Creates readable, systematically coherent typography that is both performant and aesthetically distinctive.
license: Complete terms in LICENSE.txt
---
This skill guides the creation and refinement of typography systems that balance timeless principles with modern web capabilities.
The user provides a typography challenge: building a type system, improving readability, selecting fonts, fixing hierarchy, or implementing responsive typography. They may include context about the project's aesthetic direction, constraints, or specific problems to solve.
## Typography Thinking
Before implementing, understand the context and establish a clear typographic voice:
- **Purpose & Audience**: What is being communicated? Who is reading? Technical docs need different type than marketing pages.
- **Tone & Character**: What personality should the typography convey? Authoritative? Playful? Elegant? Minimal? The fonts and system should embody this.
- **Constraints**: Performance budgets, browser support, existing design system, accessibility requirements.
- **Reading Context**: Long-form reading vs scanning, dense information vs spacious editorial, desktop vs mobile primary usage.
**CRITICAL**: Typography is the voice of your interface. Invest time in getting it right - it impacts every single screen.
Then build or refine a typography system that is:
- Readable and accessible across devices and contexts
- Systematically coherent with clear hierarchy
- Performant and technically sound
- Aesthetically distinctive and appropriate for the brand
## Classic Typography Principles
### Vertical Rhythm & Baseline Grids
[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, maintaining rhythm across components]
### Modular Scale & Hierarchy
[TO BE DEVELOPED: Scale ratios, establishing hierarchy through size/weight/spacing, visual balance]
### Readability & Measure
[TO BE DEVELOPED: Line length (45-75 CPL), line height ratios, paragraph spacing, optimal reading conditions]
## Font Selection & Pairing
### Choosing Distinctive Fonts
[TO BE DEVELOPED: Avoiding generic choices, character in typefaces, matching tone to content, Google Fonts alternatives]
### Pairing Principles
[TO BE DEVELOPED: Contrast-based pairing, display + body, serif + sans, mono + geometric, variable fonts]
### Web Font Loading
[TO BE DEVELOPED: FOUT/FOIT strategies, font-display, subsetting, variable fonts, preloading]
## Modern Web Typography
### Fluid & Responsive Type
[TO BE DEVELOPED: clamp(), viewport units, container query typography, breakpoint-based scales]
### Advanced Features
[TO BE DEVELOPED: OpenType features, ligatures, font-feature-settings, kerning, number styles]
### Performance Optimization
[TO BE DEVELOPED: Font loading strategies, subsetting, variable fonts vs static, hosting decisions]
## Typography System Architecture
### Token Structure
[TO BE DEVELOPED: Font stacks, size scales, weight scales, line heights, letter spacing]
### Implementation
[TO BE DEVELOPED: CSS custom properties, utility classes, semantic vs primitive tokens]
## Accessibility Considerations
[TO BE DEVELOPED: Text scaling, contrast ratios, font sizes, dyslexia-friendly choices]
---
**IMPORTANT**: Balance trendy font choices with timeless readability principles. A distinctive font is worthless if users can't comfortably read it.
**NEVER**:
- Use more than 2-3 font families in a single project
- Sacrifice readability for aesthetic novelty
- Ignore font loading performance
- Skip fallback font definitions
- Use decorative fonts for body text
- Implement arbitrary font sizes without a systematic scale
Remember: Typography is 95% of design. Master it, and everything else becomes easier.
dist/claude-code/skills/ux-writing/SKILL.md
Vendored
+203
View File
@@ -0,0 +1,203 @@
---
name: ux-writing
description: Write clear, helpful, and human interface copy that users understand immediately. Use this skill when crafting microcopy, improving error messages, or establishing voice and tone. Produces concise, empathetic copy that guides users confidently through tasks without confusion or frustration.
license: Complete terms in LICENSE.txt
---
This skill guides the creation of interface copy that is clear, concise, helpful, and human - the words that make products understandable and usable.
The user provides a UX writing challenge: writing microcopy, improving error messages, crafting instructions, establishing voice and tone, or fixing unclear interface text. They may include brand guidelines, audience context, or specific copy problems to solve.
## UX Writing Thinking
Before writing, understand the context and user needs:
- **User Context**: What are users trying to accomplish? What's their emotional state? What do they already know?
- **Content Purpose**: Inform? Guide? Reassure? Warn? Celebrate? Different moments need different approaches.
- **Brand Voice**: Professional? Casual? Playful? Technical? Voice should match brand and audience.
- **Constraints**: Character limits, space limitations, translation considerations, accessibility requirements.
**CRITICAL**: Good UX writing is invisible - users understand immediately without noticing the words. Bad UX writing creates confusion and frustration.
Then write copy that is:
- Clear and immediately understandable
- Concise without sacrificing clarity
- Helpful and action-oriented
- Human and empathetic
- Consistent in terminology and tone
## Fundamental Principles
### Clarity Over Cleverness
[TO BE DEVELOPED: Plain language, avoid jargon, specific over vague, "Save changes" not "OK"]
### Concise But Complete
[TO BE DEVELOPED: Remove unnecessary words, but include essential information, balance brevity with clarity]
### Active Voice
[TO BE DEVELOPED: "We saved your changes" not "Your changes have been saved", action-oriented language]
### User-Focused Language
[TO BE DEVELOPED: "Your" not "The", focus on user benefits, user's mental model]
### Consistency
[TO BE DEVELOPED: Use same terms throughout, don't vary for variety, build terminology glossary]
## Voice & Tone
### Establishing Brand Voice
[TO BE DEVELOPED: Personality dimensions, voice guidelines, voice vs tone distinction]
### Adapting Tone to Context
[TO BE DEVELOPED: Success = celebratory, Error = empathetic, Loading = reassuring, matching emotional moment]
### Voice Across Cultures
[TO BE DEVELOPED: Cultural sensitivity, humor translation, formality levels, global considerations]
## Microcopy Excellence
### Button & CTA Copy
[TO BE DEVELOPED: Specific actions ("Create account" not "Submit"), verb + noun structure, outcome-oriented]
### Labels & Instructions
[TO BE DEVELOPED: Clear, specific labels, instructions before fields, showing format with examples]
### Placeholder Text
[TO BE DEVELOPED: When to use (rarely), never as labels, examples not instructions]
### Tooltips & Help Text
[TO BE DEVELOPED: Adding value beyond label, answering implicit questions, brevity with links to details]
## Error Messages & Validation
### Error Message Principles
[TO BE DEVELOPED: Explain what happened, suggest fix, don't blame user, provide examples, link to help]
### Validation Feedback
[TO BE DEVELOPED: Inline validation, timing (on blur vs on submit), success states, clear requirements]
### Error Message Patterns
[TO BE DEVELOPED: Format errors, permission errors, network errors, system errors, 404s]
## Forms & Inputs
### Form Labels
[TO BE DEVELOPED: Descriptive labels, required field indication, why you're asking (when not obvious)]
### Help Text
[TO BE DEVELOPED: Format guidance, why you need this information, examples, constraints]
### Confirmation Dialogs
[TO BE DEVELOPED: Specific about action, explain consequences, clear button labels, don't overuse]
## System Messages
### Success Messages
[TO BE DEVELOPED: Confirm what happened, what happens next, celebrate appropriately, be brief]
### Loading States
[TO BE DEVELOPED: What's happening, time expectations, progress indication, personality in waiting]
### Empty States
[TO BE DEVELOPED: Explain why empty, value of filling it, clear CTA, welcoming not dead-end]
## Navigation & Wayfinding
### Navigation Labels
[TO BE DEVELOPED: Specific and descriptive, user language not internal terms, clear information scent]
### Breadcrumbs & Headers
[TO BE DEVELOPED: Clear location indication, hierarchical clarity, shortened for mobile]
### Search & Filters
[TO BE DEVELOPED: Clear search placeholders, filter labels, no results messaging]
## Content Hierarchy & Structure
### Scannable Writing
[TO BE DEVELOPED: Short paragraphs, bullet points, clear headings, front-load important info]
### Progressive Disclosure
[TO BE DEVELOPED: Essential info first, details on demand, expandable sections, learn more links]
## Writing for Accessibility
### Screen Reader Considerations
[TO BE DEVELOPED: ARIA labels, alt text writing, link text clarity, button labels]
### Plain Language
[TO BE DEVELOPED: Reading level considerations, avoid jargon, explain technical terms]
### Text Alternatives
[TO BE DEVELOPED: Transcripts for audio/video, alt text for images, descriptions for complex UI]
## Internationalization (i18n)
### Writing for Translation
[TO BE DEVELOPED: Avoid idioms, complete sentences, context for translators, text expansion space]
### Cultural Adaptation
[TO BE DEVELOPED: Cultural sensitivity, date/time formats, address formats, name formats]
## Content Patterns by Type
### Onboarding Copy
[TO BE DEVELOPED: Welcome messages, getting started, first-time guidance, value proposition]
### Settings & Preferences
[TO BE DEVELOPED: Clear option descriptions, impact explanation, defaults indication]
### Notifications
[TO BE DEVELOPED: Scannable, actionable, appropriate urgency, notification fatigue prevention]
---
**IMPORTANT**: Read your copy out loud. If it sounds awkward or robotic, rewrite until it sounds human.
**NEVER**:
- Use jargon without explanation
- Blame users ("You made an error" → "This field is required")
- Be vague ("Something went wrong" - explain what!)
- Use passive voice unnecessarily
- Vary terminology for variety (consistency matters)
- Write overly long explanations (be concise)
- Use humor for errors (be empathetic)
- Assume technical knowledge
- Use all caps (except acronyms)
- End questions with periods (use question marks)
Remember: You're a clarity expert and empathetic communicator. Write like you're helping a friend who's smart but unfamiliar with your product. Be clear, be helpful, be human.
dist/codex/AGENTS.color-and-contrast.md
Vendored
+104
View File
@@ -0,0 +1,104 @@
This skill guides the creation of color systems that are both beautiful and functional, balancing creative expression with accessibility and systematic coherence.
The user provides a color challenge: building a color palette, implementing theming, fixing contrast issues, establishing brand colors, or creating dark mode variants. They may include brand guidelines, accessibility requirements, or existing design constraints.
## Color System Thinking
Before choosing colors, understand the strategic requirements:
- **Brand & Emotion**: What feelings should the colors evoke? Trust (blues)? Energy (reds/oranges)? Growth (greens)? Luxury (purples/golds)? Colors are never neutral.
- **Functional Requirements**: How many semantic states needed? Success, error, warning, info? How many UI layers? Background, surface, border, text?
- **Context**: Industry conventions (avoid red for finance), cultural considerations, competitor differentiation.
- **Accessibility Goals**: WCAG level (A/AA/AAA), audience considerations (aging users need higher contrast).
**CRITICAL**: Color is both an art and a science. Aesthetics matter, but accessibility is non-negotiable.
Then build a color system that is:
- Accessible and WCAG compliant
- Systematically organized with clear roles
- Flexible enough for theming and variations
- Aesthetically cohesive and on-brand
## Color Theory Fundamentals
### Color Harmony & Relationships
[TO BE DEVELOPED: Complementary, analogous, triadic, split-complementary, monochromatic schemes, color wheel navigation]
### Color Psychology & Meaning
[TO BE DEVELOPED: Emotional associations, cultural considerations, industry conventions, semantic color choices]
### Color Properties
[TO BE DEVELOPED: Hue, saturation, lightness/brightness, HSL vs RGB vs LCH, perceptual uniformity]
## Building Functional Palettes
### Palette Structure
[TO BE DEVELOPED: Primary/secondary/tertiary, neutral scales (9-11 steps), semantic colors, state colors]
### Generating Color Scales
[TO BE DEVELOPED: Lightness curves, saturation shifts, hue rotation, perceptual uniformity, algorithmic generation]
### The Dominant Color Principle
[TO BE DEVELOPED: 60-30-10 rule, accent color strategy, visual weight distribution, avoiding rainbow vomit]
## Contrast & Accessibility
### WCAG Compliance
[TO BE DEVELOPED: AA vs AAA standards, text contrast ratios (4.5:1 / 7:1), UI component contrast (3:1), large text exceptions]
### Testing & Tools
[TO BE DEVELOPED: Contrast checkers, automated testing, color blindness simulation, tools for verification]
### Accessible Color Combinations
[TO BE DEVELOPED: Which combinations work, which don't, safe pairings, dangerous pairings, contrast matrices]
## Theming Architecture
### Light & Dark Mode
[TO BE DEVELOPED: Independent palettes vs inverted, neutral strategies, shadows in dark mode, image handling]
### CSS Custom Properties
[TO BE DEVELOPED: Token hierarchy (primitive → semantic → component), naming conventions, theme switching]
### Multi-Theme Systems
[TO BE DEVELOPED: Brand themes, user preference themes, contextual themes, theme inheritance]
## Advanced Color Techniques
### Gradients & Effects
[TO BE DEVELOPED: Mesh gradients, color stops, blend modes, gradient generation, overlay techniques]
### Transparency & Alpha
[TO BE DEVELOPED: Alpha channels, overlay strategies, transparency scales, backdrop effects]
### Dynamic Color
[TO BE DEVELOPED: State-based color changes, hover darkening/lightening, interactive color feedback]
---
**IMPORTANT**: Test color combinations in context, not in isolation. Colors behave differently on different backgrounds and at different sizes.
**NEVER**:
- Rely on color alone to convey information
- Use color combinations that fail WCAG contrast requirements
- Create palettes with arbitrary color choices (every color needs a purpose)
- Ignore color blindness (8% of men, 0.5% of women)
- Use pure black (#000) or pure white (#fff) for large areas
- Create theme systems without testing all combinations
Remember: Color is powerful. Use it deliberately, systematically, and inclusively.
dist/codex/AGENTS.interaction-design.md
Vendored
+146
View File
@@ -0,0 +1,146 @@
This skill guides the creation of interaction patterns that are intuitive, accessible, and delightful - the conversation between user and interface.
The user provides an interaction challenge: designing forms, improving button states, fixing navigation patterns, optimizing input UX, implementing keyboard navigation, or creating feedback mechanisms. They may include accessibility requirements, device constraints, or specific interaction problems to solve.
## Interaction Design Thinking
Before designing interactions, understand the user's mental model and context:
- **User Context**: What are users trying to accomplish? What's their experience level? What's their emotional state (stressed during checkout vs relaxed browsing)?
- **Device & Input**: Touch vs pointer? Keyboard navigation? Voice input? Gamepad? Different inputs need different affordances.
- **Error Tolerance**: High-stakes actions (delete, purchase) vs low-stakes (filter, sort)? Design appropriate safeguards.
- **Speed vs Accuracy**: Quick scanning vs careful reading? Simple taps vs precise manipulation?
**CRITICAL**: Good interaction design is invisible. Users should complete tasks without thinking about the interface.
Then implement interactions that are:
- Intuitive with clear affordances and feedback
- Accessible to all users and input methods
- Forgiving with error prevention and recovery
- Responsive with immediate feedback and state changes
## Interaction States
### Core States
[TO BE DEVELOPED: Default, hover, focus, active, disabled, loading, error, success - visual treatment for each]
### State Transitions
[TO BE DEVELOPED: Smooth state changes, animation between states, maintaining context, preserving user intent]
### Loading & Progress States
[TO BE DEVELOPED: Skeleton screens, spinners, progress bars, optimistic updates, what to show while waiting]
## Affordances & Feedback
### Visual Affordances
[TO BE DEVELOPED: Signaling interactivity, button appearance, link styling, cursor changes, touch target highlighting]
### Immediate Feedback
[TO BE DEVELOPED: Click/tap acknowledgment, hover feedback, focus indication, "something is happening" signals]
### Haptic & Sound Feedback
[TO BE DEVELOPED: Vibration patterns, sound cues, cross-modal feedback, when to use non-visual feedback]
## Form Design & Input Patterns
### Form Layout & Structure
[TO BE DEVELOPED: Single column vs multi-column, label placement, field grouping, visual hierarchy in forms]
### Input Field Design
[TO BE DEVELOPED: Field sizing, placeholder usage (anti-pattern), helper text, character limits, input masking]
### Validation Patterns
[TO BE DEVELOPED: Inline vs on-submit, real-time validation, error message writing, success confirmation, required field indication]
### Complex Input Types
[TO BE DEVELOPED: File upload UX, date pickers, time selection, rich text editing, multi-select, autocomplete, search]
### Progressive Disclosure in Forms
[TO BE DEVELOPED: Conditional fields, wizards/multi-step forms, accordions, showing complexity gradually]
### Form Error Handling
[TO BE DEVELOPED: Error prevention (constraints, masks), clear error messages, error recovery, field-level vs form-level errors]
## Touch & Pointer Interactions
### Touch Targets
[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge reach areas on mobile]
### Touch vs Pointer Patterns
[TO BE DEVELOPED: Hover states on touch (problems), tap feedback, long press, swipe gestures, pinch-to-zoom]
### Gesture Design
[TO BE DEVELOPED: Swipe to delete, pull to refresh, drag to reorder, custom gestures, gesture discoverability]
## Keyboard Navigation
### Focus Management
[TO BE DEVELOPED: Focus rings (never remove without replacement), logical tab order, skip links, focus trapping in modals]
### Keyboard Shortcuts
[TO BE DEVELOPED: Common shortcuts, discoverability, avoiding conflicts, command palettes, keyboard-first workflows]
### Accessible Interaction Patterns
[TO BE DEVELOPED: ARIA roles for custom controls, managing focus in dynamic content, screen reader announcements]
## Navigation Patterns
### Menu & Navigation Design
[TO BE DEVELOPED: Mega menus, hamburger menus, breadcrumbs, tabs, pagination, infinite scroll vs load more]
### Modal & Dialog Patterns
[TO BE DEVELOPED: Modal entry/exit, focus management, escape to close, backdrop click behavior, sheet patterns]
### Command & Context Menus
[TO BE DEVELOPED: Right-click menus, command palettes, dropdown menus, action sheets]
## Error Prevention & Recovery
### Constraints & Guards
[TO BE DEVELOPED: Input constraints, disabled states, confirmation dialogs for destructive actions, undo mechanisms]
### Error Messages
[TO BE DEVELOPED: Clear language, actionable guidance, positive framing, where to show errors, when to show errors]
### Undo & Redo
[TO BE DEVELOPED: Undo patterns, toast notifications with undo, versioning, draft auto-save]
---
**IMPORTANT**: Test interactions with actual users and diverse input methods. What works with a mouse might fail with touch or keyboard.
**NEVER**:
- Remove focus indicators without providing visible alternatives (accessibility violation)
- Use placeholder text as labels (disappears on input, hard to remember)
- Make touch targets smaller than 44x44px
- Validate in real-time for long inputs (wait for blur)
- Show generic error messages ("Error occurred") - be specific and helpful
- Block user interaction without clear loading states
- Design only for mouse/pointer (test with keyboard and touch)
- Use custom controls without proper ARIA and keyboard support
Remember: Interaction design is where users actually experience your interface. Get this right, and everything else falls into place.
dist/codex/AGENTS.md
Vendored
+42
View File
@@ -6,12 +6,54 @@ This repository contains specialized skills for different tasks. When the user r
Each skill provides deep expertise in its domain. Use the descriptions below to decide which skill file to read:
### ux-writing
**When to use**: Write clear, helpful, and human interface copy that users understand immediately. Use this skill when crafting microcopy, improving error messages, or establishing voice and tone. Produces concise, empathetic copy that guides users confidently through tasks without confusion or frustration.
**Read**: `AGENTS.ux-writing.md` for complete instructions.
### spatial-design
**When to use**: Master spatial design balancing systematic precision with artistic composition. Use this skill when building spacing systems, establishing grids, or improving visual hierarchy. Creates systematically organized layouts with compelling visual hierarchy and intentional spatial relationships.
**Read**: `AGENTS.spatial-design.md` for complete instructions.
### motion-design
**When to use**: Create purposeful motion that enhances usability and provides feedback without sacrificing performance. Use this skill when adding animations, building micro-interactions, or establishing motion systems. Produces smooth, delightful animations that guide attention and reinforce interactions while maintaining 60fps performance.
**Read**: `AGENTS.motion-design.md` for complete instructions.
### typography
**When to use**: Master typography systems that balance timeless principles with modern web capabilities. Use this skill when building type systems, improving readability, or establishing typographic hierarchy. Creates readable, systematically coherent typography that is both performant and aesthetically distinctive.
**Read**: `AGENTS.typography.md` for complete instructions.
### frontend-design
**When to use**: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
**Read**: `AGENTS.frontend-design.md` for complete instructions.
### interaction-design
**When to use**: Design intuitive interaction patterns that feel natural and provide clear feedback. Use this skill when building interactive components, designing forms, or establishing interaction standards. Creates accessible, forgiving interfaces where every state is clear and every action provides immediate feedback.
**Read**: `AGENTS.interaction-design.md` for complete instructions.
### color-and-contrast
**When to use**: Build sophisticated color systems balancing aesthetics with accessibility and function. Use this skill when establishing brand palettes, implementing theming, or ensuring WCAG compliance. Produces beautiful, accessible color implementations with systematic coherence across all theme variants.
**Read**: `AGENTS.color-and-contrast.md` for complete instructions.
### responsive-design
**When to use**: Create responsive interfaces that adapt beautifully across devices, screen sizes, and input methods. Use this skill when building mobile-first layouts, defining breakpoint strategies, or optimizing for touch. Produces fluid, performant experiences that feel native to each device while maintaining consistency.
**Read**: `AGENTS.responsive-design.md` for complete instructions.
## How to Use Skills
dist/codex/AGENTS.motion-design.md
Vendored
+105
View File
@@ -0,0 +1,105 @@
This skill guides the creation of motion design that enhances usability, provides feedback, and creates delight - without sacrificing performance or accessibility.
The user provides a motion challenge: adding animations to components, improving interaction feedback, building page transitions, creating micro-interactions, or establishing motion design systems. They may include performance constraints, aesthetic goals, or specific interaction problems to solve.
## Motion Design Thinking
Before animating anything, understand the purpose and context:
- **Purpose**: Why animate? Feedback? Delight? Guidance? Branding? Every animation needs a reason beyond "it looks cool."
- **Personality**: What character should motion convey? Snappy and energetic? Smooth and luxurious? Playful and bouncy? Subtle and refined?
- **Performance Budget**: Mobile devices? Complex pages? Can we afford GPU-intensive animations?
- **Accessibility**: Motion sensitivity, vestibular disorders, reduced motion preferences - some users need minimal animation.
**CRITICAL**: Animation should enhance understanding and usability, not obscure it. When in doubt, be subtle. Users notice janky animation more than no animation.
Then implement motion that is:
- Purposeful with clear functional or emotional goals
- Performant with smooth 60fps execution
- Accessible with reduced motion alternatives
- Choreographed with thoughtful timing and sequencing
## Classic Animation Principles
### Disney's 12 Principles (Web Context)
[TO BE DEVELOPED: Squash and stretch, anticipation, staging, follow-through, ease-in/ease-out, arcs, secondary action, timing, exaggeration, solid drawing, appeal - adapted for UI]
### Timing & Duration
[TO BE DEVELOPED: Micro-interactions (100-300ms), transitions (300-500ms), complex animations (500-1000ms), duration by distance, perceived speed]
### Easing & Curves
[TO BE DEVELOPED: Linear vs eased, ease-out (enter), ease-in (exit), ease-in-out (full cycle), custom cubic-bezier, spring physics]
## Types of UI Animation
### Micro-interactions
[TO BE DEVELOPED: Button feedback, hover states, toggle switches, like buttons, form validation feedback, loading indicators]
### Page Transitions
[TO BE DEVELOPED: Route transitions, modal entry/exit, drawer animations, cross-fade, slide, zoom patterns]
### State Transitions
[TO BE DEVELOPED: Loading → success → error flows, expand/collapse, show/hide, enable/disable state changes]
### Scrolling & Parallax
[TO BE DEVELOPED: Scroll-triggered animations, reveal on scroll, parallax layers, scroll-linked effects, intersection observer]
## Choreography & Sequencing
### Staggered Animations
[TO BE DEVELOPED: animation-delay patterns, sequential reveals, cascade effects, list item staggering]
### Orchestrated Page Loads
[TO BE DEVELOPED: Entry choreography, hero → content → details, creating narrative through sequence, attention management]
### Exit Choreography
[TO BE DEVELOPED: Reverse sequences, intentional exit timing, maintaining spatial relationships during exit]
## Technical Implementation
### CSS-Only Animation
[TO BE DEVELOPED: @keyframes, animation properties, transitions, transform, pseudo-element animations, hardware acceleration]
### JavaScript Animation
[TO BE DEVELOPED: Web Animations API, requestAnimationFrame, animation libraries (GSAP, Framer Motion, Motion One)]
### Performance Optimization
[TO BE DEVELOPED: GPU acceleration (transform, opacity only), will-change, avoiding layout thrashing, reducing paint, FPS monitoring]
## Motion Design Systems
### Motion Tokens
[TO BE DEVELOPED: Duration scales, easing tokens, named animations, consistent motion vocabulary]
### Reduced Motion
[TO BE DEVELOPED: prefers-reduced-motion, graceful degradation, essential vs decorative animation, crossfade alternatives]
---
**IMPORTANT**: One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions everywhere. Focus on high-impact moments.
**NEVER**:
- Animate everything (animation fatigue is real)
- Use long durations (>500ms) for UI feedback (users will perceive lag)
- Animate layout properties (width, height, top, left) - use transform instead
- Ignore prefers-reduced-motion (accessibility requirement)
- Use animation to hide slow loading (fix the loading time)
- Animate without purpose (every animation should answer "why?")
- Create animations that obscure content or block interaction
Remember: Motion is powerful - it can guide attention, provide feedback, and create emotional connection. Use it thoughtfully, not reflexively.
dist/codex/AGENTS.responsive-design.md
Vendored
+152
View File
@@ -0,0 +1,152 @@
This skill guides the creation of responsive interfaces that adapt beautifully across devices, screen sizes, input methods, and usage contexts.
The user provides a responsive design challenge: building mobile-first layouts, defining breakpoint strategies, optimizing for touch vs pointer, creating fluid designs, or solving specific cross-device problems. They may include device requirements, constraints, or specific adaptation challenges.
## Responsive Design Thinking
Before implementing, understand the multi-device context:
- **Device Landscape**: Which devices matter? (Mobile, tablet, desktop, TV, watch?) What's the primary device?
- **Usage Context**: How do usage patterns differ by device? (On-the-go mobile vs focused desktop work)
- **Input Methods**: Touch, pointer, keyboard, voice, gamepad - what input methods need support?
- **Network Conditions**: Fast wifi vs slow 3G - how does this impact design decisions?
- **Content Priority**: What's essential on all devices vs optional on larger screens?
**CRITICAL**: Responsive design is not just about scaling - it's about adapting the experience appropriately for each context.
Then build responsive systems that are:
- Mobile-first with progressive enhancement
- Fluid and adaptable across viewport sizes
- Optimized for different input methods
- Performant on constrained devices
- Contextually appropriate
## Mobile-First Methodology
### Why Mobile-First
[TO BE DEVELOPED: Progressive enhancement, performance benefits, forces priority decisions, mobile usage dominance]
### Mobile-First Implementation
[TO BE DEVELOPED: Start with mobile styles, add complexity with min-width media queries, content-first approach]
## Breakpoint Strategies
### Choosing Breakpoints
[TO BE DEVELOPED: Content-driven vs device-driven, common breakpoint values, in-between states, avoiding too many breakpoints]
### Breakpoint Architecture
[TO BE DEVELOPED: Named breakpoints, breakpoint tokens, consistent usage across codebase]
## Fluid & Adaptive Design
### Fluid Typography
[TO BE DEVELOPED: clamp(), viewport units, fluid type scales, maintaining readability]
### Fluid Spacing
[TO BE DEVELOPED: Responsive spacing scales, container-relative spacing, clamp() for margins/padding]
### Fluid Layouts
[TO BE DEVELOPED: CSS Grid auto-fit/auto-fill, flexible columns, aspect-ratio, fluid containers]
### Container Queries
[TO BE DEVELOPED: Component-level responsiveness, when to use vs media queries, polyfills]
## Layout Adaptation Patterns
### Navigation Patterns
[TO BE DEVELOPED: Mobile hamburger/drawer, tablet side panel, desktop persistent nav, bottom nav bars]
### Content Reflow
[TO BE DEVELOPED: Single column → multi-column, stacking orders, priority content first]
### Component Adaptation
[TO BE DEVELOPED: Tabs → accordion, horizontal → vertical, show/hide patterns, progressive disclosure]
## Touch vs Pointer Optimization
### Touch Target Sizing
[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge cases]
### Touch-Specific Interactions
[TO BE DEVELOPED: Swipe gestures, pull-to-refresh, long press, avoiding hover-dependent patterns]
### Hybrid Devices
[TO BE DEVELOPED: Supporting both touch and pointer, feature detection, adaptive interfaces]
## Viewport & Screen Considerations
### Viewport Meta Tag
[TO BE DEVELOPED: Proper viewport configuration, zoom control, initial scale]
### Safe Areas
[TO BE DEVELOPED: iPhone notch, rounded corners, system UI insets, padding for safe areas]
### Orientation Handling
[TO BE DEVELOPED: Portrait vs landscape, orientation-specific layouts, testing both orientations]
### High-DPI Screens
[TO BE DEVELOPED: Retina images, 2x/3x assets, SVG for icons, responsive images]
## Responsive Images & Media
### Responsive Images
[TO BE DEVELOPED: srcset, sizes, picture element, art direction, lazy loading]
### Video Adaptation
[TO BE DEVELOPED: Responsive video embeds, bandwidth considerations, poster images]
## Performance on Mobile
### Mobile Performance Budget
[TO BE DEVELOPED: Constrained CPU/memory, slow connections, battery concerns]
### Loading Strategies
[TO BE DEVELOPED: Critical path optimization, lazy loading, code splitting for mobile]
## Testing Strategies
### Device Testing
[TO BE DEVELOPED: Real device testing, browser DevTools, emulators, viewport testing]
### Testing Checklist
[TO BE DEVELOPED: Different viewports, orientations, input methods, connection speeds]
---
**IMPORTANT**: Test on real devices, not just DevTools. Device emulation is useful but misses real-world constraints.
**NEVER**:
- Design desktop-first and try to cram into mobile
- Hide critical functionality on mobile
- Use device detection instead of feature detection
- Create separate mobile/desktop codebases (maintain one responsive codebase)
- Ignore landscape orientation
- Use fixed pixel values without considering smaller/larger screens
- Forget about tablet (it's not just big phone or small desktop)
- Assume all mobile devices are powerful (many users have older devices)
Remember: Responsive design is about creating experiences that work everywhere while feeling native nowhere. Adapt intelligently for context while maintaining consistency.
dist/codex/AGENTS.spatial-design.md
Vendored
+122
View File
@@ -0,0 +1,122 @@
This skill guides the creation of spatial systems that balance mathematical precision with artistic composition, ensuring interfaces are both systematically organized and visually compelling.
The user provides a layout challenge: building spacing systems, establishing grids, improving visual hierarchy, fixing composition issues, or implementing responsive layouts. They may include design system constraints, aesthetic goals, or specific spatial problems to solve.
## Spatial Design Thinking
Before arranging elements, understand the compositional strategy:
- **Content Priority**: What's most important? What should users see first, second, third? Hierarchy starts here.
- **Visual Weight Distribution**: Where should the eye go? Balanced or intentionally unbalanced? Symmetrical or asymmetric?
- **Density vs Breathing Room**: Controlled density (information-rich) or generous space (editorial)? Match context and audience.
- **Reading Patterns**: Z-pattern (scanning), F-pattern (text-heavy), focal point (marketing), free-form (experimental)?
**CRITICAL**: Space is not empty - it's an active design element. Negative space gives positive elements room to breathe and meaning.
Then build layout systems that are:
- Systematically consistent with clear spacing rules
- Visually balanced with intentional hierarchy
- Responsive and adaptive across viewports
- Compositionally strong with clear focal points
## Classic Composition Principles
### Visual Hierarchy Fundamentals
[TO BE DEVELOPED: Size, weight, color, position, contrast as hierarchy tools, Gestalt principles (proximity, similarity, closure)]
### Balance & Symmetry
[TO BE DEVELOPED: Symmetrical vs asymmetrical balance, visual weight calculation, creating tension and resolution]
### The Rule of Thirds & Golden Ratio
[TO BE DEVELOPED: Classic composition grids, golden ratio applications, when to follow vs break rules]
### Focal Points & Eye Movement
[TO BE DEVELOPED: Creating focal points, directing eye flow, Z/F/circular patterns, intentional disruption]
## Spacing Systems
### Spacing Scales
[TO BE DEVELOPED: 4pt/8pt systems, modular scales, mathematical progressions (linear, exponential, Fibonacci)]
### Vertical Rhythm
[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, spacing ratios, rhythm across components]
### Micro vs Macro Space
[TO BE DEVELOPED: Component-internal spacing, between-component spacing, section spacing, page-level breathing room]
### Spacing Token Architecture
[TO BE DEVELOPED: Primitive spacing tokens, semantic spacing (component gaps, section padding), contextual spacing]
## Grid Systems & Layout Patterns
### Grid Fundamentals
[TO BE DEVELOPED: Column grids, modular grids, baseline grids, grid anatomy (columns, gutters, margins)]
### Classic Layout Patterns
[TO BE DEVELOPED: Sidebar layouts, holy grail, card grids, masonry, magazine layouts, asymmetric layouts]
### Modern CSS Layout
[TO BE DEVELOPED: CSS Grid (explicit placement, auto-placement, grid areas), Flexbox (direction, alignment, distribution), Container Queries]
## Creating Visual Hierarchy
### Hierarchy Through Scale
[TO BE DEVELOPED: Size relationships, proportional scaling, meaningful jumps vs gradual progression]
### Hierarchy Through Weight & Color
[TO BE DEVELOPED: Visual weight calculation, using color for emphasis, combining multiple hierarchy tools]
### Hierarchy Through Position
[TO BE DEVELOPED: Placement importance, reading order, visual flow direction, breaking the grid for emphasis]
## Responsive Spatial Design
### Breakpoint Strategy
[TO BE DEVELOPED: Mobile-first vs desktop-first, breakpoint values, in-between states, content-driven breakpoints]
### Layout Adaptation
[TO BE DEVELOPED: Reflow patterns, navigation transformation, content prioritization, progressive disclosure]
### Fluid Spacing & Layout
[TO BE DEVELOPED: clamp() for spacing, viewport units, fluid grids, container-relative spacing]
## Depth & Layering
### Creating Depth
[TO BE DEVELOPED: Layering, shadows, elevation systems, z-index scales, parallax effects]
### Overlap & Intersection
[TO BE DEVELOPED: Intentional overlap, breaking containers, elements that cross boundaries]
---
**IMPORTANT**: Systematic spacing doesn't mean boring. Use the system as a foundation, then break it intentionally for impact.
**NEVER**:
- Use arbitrary spacing values outside your scale (unless intentionally breaking the system)
- Create layouts that ignore natural reading patterns without good reason
- Forget that white space is a design element, not wasted space
- Make all spacing equal (variety creates hierarchy)
- Build responsive layouts that only work at breakpoint edges
- Create hierarchy through size alone (combine multiple tools)
Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally.
dist/codex/AGENTS.typography.md
Vendored
+90
View File
@@ -0,0 +1,90 @@
This skill guides the creation and refinement of typography systems that balance timeless principles with modern web capabilities.
The user provides a typography challenge: building a type system, improving readability, selecting fonts, fixing hierarchy, or implementing responsive typography. They may include context about the project's aesthetic direction, constraints, or specific problems to solve.
## Typography Thinking
Before implementing, understand the context and establish a clear typographic voice:
- **Purpose & Audience**: What is being communicated? Who is reading? Technical docs need different type than marketing pages.
- **Tone & Character**: What personality should the typography convey? Authoritative? Playful? Elegant? Minimal? The fonts and system should embody this.
- **Constraints**: Performance budgets, browser support, existing design system, accessibility requirements.
- **Reading Context**: Long-form reading vs scanning, dense information vs spacious editorial, desktop vs mobile primary usage.
**CRITICAL**: Typography is the voice of your interface. Invest time in getting it right - it impacts every single screen.
Then build or refine a typography system that is:
- Readable and accessible across devices and contexts
- Systematically coherent with clear hierarchy
- Performant and technically sound
- Aesthetically distinctive and appropriate for the brand
## Classic Typography Principles
### Vertical Rhythm & Baseline Grids
[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, maintaining rhythm across components]
### Modular Scale & Hierarchy
[TO BE DEVELOPED: Scale ratios, establishing hierarchy through size/weight/spacing, visual balance]
### Readability & Measure
[TO BE DEVELOPED: Line length (45-75 CPL), line height ratios, paragraph spacing, optimal reading conditions]
## Font Selection & Pairing
### Choosing Distinctive Fonts
[TO BE DEVELOPED: Avoiding generic choices, character in typefaces, matching tone to content, Google Fonts alternatives]
### Pairing Principles
[TO BE DEVELOPED: Contrast-based pairing, display + body, serif + sans, mono + geometric, variable fonts]
### Web Font Loading
[TO BE DEVELOPED: FOUT/FOIT strategies, font-display, subsetting, variable fonts, preloading]
## Modern Web Typography
### Fluid & Responsive Type
[TO BE DEVELOPED: clamp(), viewport units, container query typography, breakpoint-based scales]
### Advanced Features
[TO BE DEVELOPED: OpenType features, ligatures, font-feature-settings, kerning, number styles]
### Performance Optimization
[TO BE DEVELOPED: Font loading strategies, subsetting, variable fonts vs static, hosting decisions]
## Typography System Architecture
### Token Structure
[TO BE DEVELOPED: Font stacks, size scales, weight scales, line heights, letter spacing]
### Implementation
[TO BE DEVELOPED: CSS custom properties, utility classes, semantic vs primitive tokens]
## Accessibility Considerations
[TO BE DEVELOPED: Text scaling, contrast ratios, font sizes, dyslexia-friendly choices]
---
**IMPORTANT**: Balance trendy font choices with timeless readability principles. A distinctive font is worthless if users can't comfortably read it.
**NEVER**:
- Use more than 2-3 font families in a single project
- Sacrifice readability for aesthetic novelty
- Ignore font loading performance
- Skip fallback font definitions
- Use decorative fonts for body text
- Implement arbitrary font sizes without a systematic scale
Remember: Typography is 95% of design. Master it, and everything else becomes easier.
dist/codex/AGENTS.ux-writing.md
Vendored
+197
View File
@@ -0,0 +1,197 @@
This skill guides the creation of interface copy that is clear, concise, helpful, and human - the words that make products understandable and usable.
The user provides a UX writing challenge: writing microcopy, improving error messages, crafting instructions, establishing voice and tone, or fixing unclear interface text. They may include brand guidelines, audience context, or specific copy problems to solve.
## UX Writing Thinking
Before writing, understand the context and user needs:
- **User Context**: What are users trying to accomplish? What's their emotional state? What do they already know?
- **Content Purpose**: Inform? Guide? Reassure? Warn? Celebrate? Different moments need different approaches.
- **Brand Voice**: Professional? Casual? Playful? Technical? Voice should match brand and audience.
- **Constraints**: Character limits, space limitations, translation considerations, accessibility requirements.
**CRITICAL**: Good UX writing is invisible - users understand immediately without noticing the words. Bad UX writing creates confusion and frustration.
Then write copy that is:
- Clear and immediately understandable
- Concise without sacrificing clarity
- Helpful and action-oriented
- Human and empathetic
- Consistent in terminology and tone
## Fundamental Principles
### Clarity Over Cleverness
[TO BE DEVELOPED: Plain language, avoid jargon, specific over vague, "Save changes" not "OK"]
### Concise But Complete
[TO BE DEVELOPED: Remove unnecessary words, but include essential information, balance brevity with clarity]
### Active Voice
[TO BE DEVELOPED: "We saved your changes" not "Your changes have been saved", action-oriented language]
### User-Focused Language
[TO BE DEVELOPED: "Your" not "The", focus on user benefits, user's mental model]
### Consistency
[TO BE DEVELOPED: Use same terms throughout, don't vary for variety, build terminology glossary]
## Voice & Tone
### Establishing Brand Voice
[TO BE DEVELOPED: Personality dimensions, voice guidelines, voice vs tone distinction]
### Adapting Tone to Context
[TO BE DEVELOPED: Success = celebratory, Error = empathetic, Loading = reassuring, matching emotional moment]
### Voice Across Cultures
[TO BE DEVELOPED: Cultural sensitivity, humor translation, formality levels, global considerations]
## Microcopy Excellence
### Button & CTA Copy
[TO BE DEVELOPED: Specific actions ("Create account" not "Submit"), verb + noun structure, outcome-oriented]
### Labels & Instructions
[TO BE DEVELOPED: Clear, specific labels, instructions before fields, showing format with examples]
### Placeholder Text
[TO BE DEVELOPED: When to use (rarely), never as labels, examples not instructions]
### Tooltips & Help Text
[TO BE DEVELOPED: Adding value beyond label, answering implicit questions, brevity with links to details]
## Error Messages & Validation
### Error Message Principles
[TO BE DEVELOPED: Explain what happened, suggest fix, don't blame user, provide examples, link to help]
### Validation Feedback
[TO BE DEVELOPED: Inline validation, timing (on blur vs on submit), success states, clear requirements]
### Error Message Patterns
[TO BE DEVELOPED: Format errors, permission errors, network errors, system errors, 404s]
## Forms & Inputs
### Form Labels
[TO BE DEVELOPED: Descriptive labels, required field indication, why you're asking (when not obvious)]
### Help Text
[TO BE DEVELOPED: Format guidance, why you need this information, examples, constraints]
### Confirmation Dialogs
[TO BE DEVELOPED: Specific about action, explain consequences, clear button labels, don't overuse]
## System Messages
### Success Messages
[TO BE DEVELOPED: Confirm what happened, what happens next, celebrate appropriately, be brief]
### Loading States
[TO BE DEVELOPED: What's happening, time expectations, progress indication, personality in waiting]
### Empty States
[TO BE DEVELOPED: Explain why empty, value of filling it, clear CTA, welcoming not dead-end]
## Navigation & Wayfinding
### Navigation Labels
[TO BE DEVELOPED: Specific and descriptive, user language not internal terms, clear information scent]
### Breadcrumbs & Headers
[TO BE DEVELOPED: Clear location indication, hierarchical clarity, shortened for mobile]
### Search & Filters
[TO BE DEVELOPED: Clear search placeholders, filter labels, no results messaging]
## Content Hierarchy & Structure
### Scannable Writing
[TO BE DEVELOPED: Short paragraphs, bullet points, clear headings, front-load important info]
### Progressive Disclosure
[TO BE DEVELOPED: Essential info first, details on demand, expandable sections, learn more links]
## Writing for Accessibility
### Screen Reader Considerations
[TO BE DEVELOPED: ARIA labels, alt text writing, link text clarity, button labels]
### Plain Language
[TO BE DEVELOPED: Reading level considerations, avoid jargon, explain technical terms]
### Text Alternatives
[TO BE DEVELOPED: Transcripts for audio/video, alt text for images, descriptions for complex UI]
## Internationalization (i18n)
### Writing for Translation
[TO BE DEVELOPED: Avoid idioms, complete sentences, context for translators, text expansion space]
### Cultural Adaptation
[TO BE DEVELOPED: Cultural sensitivity, date/time formats, address formats, name formats]
## Content Patterns by Type
### Onboarding Copy
[TO BE DEVELOPED: Welcome messages, getting started, first-time guidance, value proposition]
### Settings & Preferences
[TO BE DEVELOPED: Clear option descriptions, impact explanation, defaults indication]
### Notifications
[TO BE DEVELOPED: Scannable, actionable, appropriate urgency, notification fatigue prevention]
---
**IMPORTANT**: Read your copy out loud. If it sounds awkward or robotic, rewrite until it sounds human.
**NEVER**:
- Use jargon without explanation
- Blame users ("You made an error" → "This field is required")
- Be vague ("Something went wrong" - explain what!)
- Use passive voice unnecessarily
- Vary terminology for variety (consistency matters)
- Write overly long explanations (be concise)
- Use humor for errors (be empathetic)
- Assume technical knowledge
- Use all caps (except acronyms)
- End questions with periods (use question marks)
Remember: You're a clarity expert and empathetic communicator. Write like you're helping a friend who's smart but unfamiliar with your product. Be clear, be helpful, be human.
dist/codex/prompts/adapt.md
Vendored
+190
View File
@@ -0,0 +1,190 @@
---
description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.
argument-hint: [TARGET=<value>] [CONTEXT=<value>]
---
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
## Assess Adaptation Challenge
Understand what needs adaptation and why:
1. **Identify the source context**:
- What was it designed for originally? (Desktop web? Mobile app?)
- What assumptions were made? (Large screen? Mouse input? Fast connection?)
- What works well in current context?
2. **Understand target context**:
- **Device**: Mobile, tablet, desktop, TV, watch, print?
- **Input method**: Touch, mouse, keyboard, voice, gamepad?
- **Screen constraints**: Size, resolution, orientation?
- **Connection**: Fast wifi, slow 3G, offline?
- **Usage context**: On-the-go vs desk, quick glance vs focused reading?
- **User expectations**: What do users expect on this platform?
3. **Identify adaptation challenges**:
- What won't fit? (Content, navigation, features)
- What won't work? (Hover states on touch, tiny touch targets)
- What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.
## Plan Adaptation Strategy
Create context-appropriate strategy:
### Mobile Adaptation (Desktop → Mobile)
**Layout Strategy**:
- Single column instead of multi-column
- Vertical stacking instead of side-by-side
- Full-width components instead of fixed widths
- Bottom navigation instead of top/side navigation
**Interaction Strategy**:
- Touch targets 44x44px minimum (not hover-dependent)
- Swipe gestures where appropriate (lists, carousels)
- Bottom sheets instead of dropdowns
- Thumbs-first design (controls within thumb reach)
- Larger tap areas with more spacing
**Content Strategy**:
- Progressive disclosure (don't show everything at once)
- Prioritize primary content (secondary content in tabs/accordions)
- Shorter text (more concise)
- Larger text (16px minimum)
**Navigation Strategy**:
- Hamburger menu or bottom navigation
- Reduce navigation complexity
- Sticky headers for context
- Back button in navigation flow
### Tablet Adaptation (Hybrid Approach)
**Layout Strategy**:
- Two-column layouts (not single or three-column)
- Side panels for secondary content
- Master-detail views (list + detail)
- Adaptive based on orientation (portrait vs landscape)
**Interaction Strategy**:
- Support both touch and pointer
- Touch targets 44x44px but allow denser layouts than phone
- Side navigation drawers
- Multi-column forms where appropriate
### Desktop Adaptation (Mobile → Desktop)
**Layout Strategy**:
- Multi-column layouts (use horizontal space)
- Side navigation always visible
- Multiple information panels simultaneously
- Fixed widths with max-width constraints (don't stretch to 4K)
**Interaction Strategy**:
- Hover states for additional information
- Keyboard shortcuts
- Right-click context menus
- Drag and drop where helpful
- Multi-select with Shift/Cmd
**Content Strategy**:
- Show more information upfront (less progressive disclosure)
- Data tables with many columns
- Richer visualizations
- More detailed descriptions
### Print Adaptation (Screen → Print)
**Layout Strategy**:
- Page breaks at logical points
- Remove navigation, footer, interactive elements
- Black and white (or limited color)
- Proper margins for binding
**Content Strategy**:
- Expand shortened content (show full URLs, hidden sections)
- Add page numbers, headers, footers
- Include metadata (print date, page title)
- Convert charts to print-friendly versions
### Email Adaptation (Web → Email)
**Layout Strategy**:
- Narrow width (600px max)
- Single column only
- Inline CSS (no external stylesheets)
- Table-based layouts (for email client compatibility)
**Interaction Strategy**:
- Large, obvious CTAs (buttons not text links)
- No hover states (not reliable)
- Deep links to web app for complex interactions
## Implement Adaptations
Apply changes systematically:
### Responsive Breakpoints
Choose appropriate breakpoints:
- Mobile: 320px-767px
- Tablet: 768px-1023px
- Desktop: 1024px+
- Or content-driven breakpoints (where design breaks)
### Layout Adaptation Techniques
- **CSS Grid/Flexbox**: Reflow layouts automatically
- **Container Queries**: Adapt based on container, not viewport
- **`clamp()`**: Fluid sizing between min and max
- **Media queries**: Different styles for different contexts
- **Display properties**: Show/hide elements per context
### Touch Adaptation
- Increase touch target sizes (44x44px minimum)
- Add more spacing between interactive elements
- Remove hover-dependent interactions
- Add touch feedback (ripples, highlights)
- Consider thumb zones (easier to reach bottom than top)
### Content Adaptation
- Use `display: none` sparingly (still downloads)
- Progressive enhancement (core content first, enhancements on larger screens)
- Lazy loading for off-screen content
- Responsive images (`srcset`, `picture` element)
### Navigation Adaptation
- Transform complex nav to hamburger/drawer on mobile
- Bottom nav bar for mobile apps
- Persistent side navigation on desktop
- Breadcrumbs on smaller screens for context
**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
**NEVER**:
- Hide core functionality on mobile (if it matters, make it work)
- Assume desktop = powerful device (consider accessibility, older machines)
- Use different information architecture across contexts (confusing)
- Break user expectations for platform (mobile users expect mobile patterns)
- Forget landscape orientation on mobile/tablet
- Use generic breakpoints blindly (use content-driven breakpoints)
- Ignore touch on desktop (many desktop devices have touch)
## Verify Adaptations
Test thoroughly across contexts:
- **Real devices**: Test on actual phones, tablets, desktops
- **Different orientations**: Portrait and landscape
- **Different browsers**: Safari, Chrome, Firefox, Edge
- **Different OS**: iOS, Android, Windows, macOS
- **Different input methods**: Touch, mouse, keyboard
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
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.
dist/codex/prompts/animate.md
Vendored
+142
View File
@@ -0,0 +1,142 @@
---
description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
argument-hint: [TARGET=<value>]
---
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
## Assess Animation Opportunities
Analyze where motion would improve the experience:
1. **Identify static areas**:
- **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.)
- **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes)
- **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious
- **Lack of delight**: Functional but joyless interactions
- **Missed guidance**: Opportunities to direct attention or explain behavior
2. **Understand the context**:
- What's the personality? (Playful vs serious, energetic vs calm)
- What's the performance budget? (Mobile-first? Complex page?)
- Who's the audience? (Motion-sensitive users? Power users who want speed?)
- What matters most? (One hero animation vs many micro-interactions?)
**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them.
## Plan Animation Strategy
Create a purposeful animation plan:
- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
## Implement Animations
Add motion systematically across these categories:
### Entrance Animations
- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations
- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
- **Content reveals**: Scroll-triggered animations using intersection observer
- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
- Click: Quick scale down then up (0.95 → 1), ripple effect
- Loading: Spinner or pulse state
- **Form interactions**:
- Input focus: Border color transition, slight scale or glow
- Validation: Shake on error, check mark on success, smooth color transitions
- **Toggle switches**: Smooth slide + color transition (200-300ms)
- **Checkboxes/radio**: Check mark animation, ripple effect
- **Like/favorite**: Scale + rotation, particle effects, color transition
### State Transitions
- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
- **Expand/collapse**: Height transition with overflow handling, icon rotation
- **Loading states**: Skeleton screen fades, spinner animations, progress bars
- **Success/error**: Color transitions, icon animations, shake or bounce effects
- **Enable/disable**: Opacity transitions, cursor changes
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
- **Carousel/slider**: Smooth transforms, snap points, momentum
- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators
### Feedback & Guidance
- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights
- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning
- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation
- **Focus flow**: Highlight path through form or workflow
### Delight Moments
- **Empty states**: Subtle floating animations on illustrations
- **Completed actions**: Confetti, check mark flourish, success celebrations
- **Easter eggs**: Hidden interactions for discovery
- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches
## Technical Implementation
Use appropriate techniques for each animation:
### CSS Animations
```css
/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)
```
### JavaScript Animation
```javascript
/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion for React
- GSAP for complex sequences
```
### Performance
- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties
- **will-change**: Add sparingly for known expensive animations
- **Reduce paint**: Minimize repaints, use `contain` where appropriate
- **Monitor FPS**: Ensure 60fps on target devices
### Accessibility
```css
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
**NEVER**:
- Animate without purpose (every animation should have a reason)
- Use long durations (>500ms feels laggy)
- Animate layout properties (width, height, top, left) - use transform instead
- Block interaction during animation (unless intentional)
- Ignore reduced motion preferences (accessibility violation)
- Animate everything (animation fatigue is real)
- Create animations that draw more attention than content
## Verify Quality
Test animations thoroughly:
- **Smooth at 60fps**: No jank on target devices
- **Feels natural**: Easing curves feel organic, not robotic
- **Appropriate timing**: Not too fast (jarring) or too slow (laggy)
- **Reduced motion works**: Animations disabled or simplified appropriately
- **Doesn't block**: Users can interact during/after animations
- **Adds value**: Makes interface clearer or more delightful
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.
dist/codex/prompts/audit.md
Vendored
+114
View File
@@ -0,0 +1,114 @@
---
description: Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations.
argument-hint: [AREA=<value>]
---
Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address.
## Diagnostic Scan
Run comprehensive checks across multiple dimensions:
1. **Accessibility (A11y)** - Check for:
- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
- **Missing ARIA**: Interactive elements without proper roles, labels, or states
- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps
- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons
- **Alt text**: Missing or poor image descriptions
- **Form issues**: Inputs without labels, poor error messaging, missing required indicators
2. **Performance** - Check for:
- **Layout thrashing**: Reading/writing layout properties in loops
- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity
- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change
- **Bundle size**: Unnecessary imports, unused dependencies
- **Render performance**: Unnecessary re-renders, missing memoization
3. **Theming** - Check for:
- **Hard-coded colors**: Colors not using design tokens
- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme
- **Inconsistent tokens**: Using wrong tokens, mixing token types
- **Theme switching issues**: Values that don't update on theme change
4. **Responsive Design** - Check for:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
## Generate Comprehensive Report
Create a detailed audit report with the following structure:
### Executive Summary
- Total issues found (count by severity)
- Most critical issues (top 3-5)
- Overall quality score (if applicable)
- Recommended next steps
### Detailed Findings by Severity
For each issue, document:
- **Location**: Where the issue occurs (component, file, line)
- **Severity**: Critical / High / Medium / Low
- **Category**: Accessibility / Performance / Theming / Responsive
- **Description**: What the issue is
- **Impact**: How it affects users
- **WCAG/Standard**: Which standard it violates (if applicable)
- **Recommendation**: How to fix it
- **Suggested command**: Which command to use (e.g., `/normalize`, `/optimize`, `/harden`)
#### Critical Issues
[Issues that block core functionality or violate WCAG A]
#### High-Severity Issues
[Significant usability/accessibility impact, WCAG AA violations]
#### Medium-Severity Issues
[Quality issues, WCAG AAA violations, performance concerns]
#### Low-Severity Issues
[Minor inconsistencies, optimization opportunities]
### Patterns & Systemic Issues
Identify recurring problems:
- "Hard-coded colors appear in 15+ components, should use design tokens"
- "Touch targets consistently too small (<44px) throughout mobile experience"
- "Missing focus indicators on all custom interactive components"
### Positive Findings
Note what's working well:
- Good practices to maintain
- Exemplary implementations to replicate elsewhere
### Recommendations by Priority
Create actionable plan:
1. **Immediate**: Critical blockers to fix first
2. **Short-term**: High-severity issues (this sprint)
3. **Medium-term**: Quality improvements (next sprint)
4. **Long-term**: Nice-to-haves and optimizations
### Suggested Commands for Fixes
Map issues to appropriate commands:
- "Use `/normalize` to align components with design system (addresses 23 theming issues)"
- "Use `/optimize` to improve performance (addresses 12 performance issues)"
- "Use `/harden` to improve i18n and text handling (addresses 8 edge cases)"
**IMPORTANT**: Be thorough but actionable. Too many low-priority issues creates noise. Focus on what actually matters.
**NEVER**:
- Report issues without explaining impact (why does this matter?)
- Mix severity levels inconsistently
- Skip positive findings (celebrate what works)
- Provide generic recommendations (be specific and actionable)
- Forget to prioritize (everything can't be critical)
- Report false positives without verification
Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.
dist/codex/prompts/bolder.md
Vendored
+100
View File
@@ -0,0 +1,100 @@
---
description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability.
argument-hint: [TARGET=<value>]
---
Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.
## Assess Current State
Analyze what makes the design feel too safe or boring:
1. **Identify weakness sources**:
- **Generic choices**: System fonts, basic colors, standard layouts
- **Timid scale**: Everything is medium-sized with no drama
- **Low contrast**: Everything has similar visual weight
- **Static**: No motion, no energy, no life
- **Predictable**: Standard patterns with no surprises
- **Flat hierarchy**: Nothing stands out or commands attention
2. **Understand the context**:
- What's the brand personality? (How far can we push?)
- What's the purpose? (Marketing can be bolder than financial dashboards)
- Who's the audience? (What will resonate?)
- What are the constraints? (Brand guidelines, accessibility, performance)
**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos.
## Plan Amplification
Create a strategy to increase impact while maintaining coherence:
- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing)
- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane.
- **Risk budget**: How experimental can we be? Push boundaries within constraints.
- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast)
**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration.
## Amplify the Design
Systematically increase impact across these dimensions:
### Typography Amplification
- **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration)
- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x)
- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400
- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent
### Color Intensification
- **Increase saturation**: Shift to more vibrant, energetic colors
- **Bold palette**: Introduce unexpected color combinations
- **Dominant color strategy**: Let one bold color own 60% of the design
- **Sharp accents**: High-contrast accent colors that pop
- **Gradients**: Rich, multi-stop gradients or mesh gradients
### Spatial Drama
- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings
- **Break the grid**: Let hero elements escape containers and cross boundaries
- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry
- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px)
- **Overlap**: Layer elements intentionally for depth
### Visual Effects
- **Dramatic shadows**: Large, soft shadows for elevation
- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns
- **Blur effects**: Glassmorphism, backdrop blur, depth effects
- **Borders & frames**: Thick borders, decorative frames, custom shapes
- **Custom elements**: Illustrative elements, custom icons, decorative details
### Motion & Animation
- **Entrance choreography**: Staggered, dramatic page load animations
- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences
- **Micro-interactions**: Satisfying hover effects, click feedback, state changes
- **Transitions**: Smooth, noticeable transitions between states
### Composition Boldness
- **Hero moments**: Create clear focal points with dramatic treatment
- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements
- **Full-bleed elements**: Use full viewport width/height for impact
- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits
**NEVER**:
- Add effects randomly without purpose (chaos ≠ bold)
- Sacrifice readability for aesthetics (body text must be readable)
- Make everything bold (then nothing is bold - need contrast)
- Ignore accessibility (bold design must still meet WCAG standards)
- Overwhelm with motion (animation fatigue is real)
- Copy trendy aesthetics blindly (bold means distinctive, not derivative)
## Verify Quality
Ensure amplification maintains usability and coherence:
- **Still functional**: Can users accomplish tasks without distraction?
- **Coherent**: Does everything feel intentional and unified?
- **Memorable**: Will users remember this experience?
- **Performant**: Do all these effects run smoothly?
- **Accessible**: Does it still meet accessibility standards?
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.
dist/codex/prompts/clarify.md
Vendored
+172
View File
@@ -0,0 +1,172 @@
---
description: Improve unclear UX copy, error messages, microcopy, labels, and instructions. Makes interfaces easier to understand and use.
argument-hint: [TARGET=<value>]
---
Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use.
## Assess Current Copy
Identify what makes the text unclear or ineffective:
1. **Find clarity problems**:
- **Jargon**: Technical terms users won't understand
- **Ambiguity**: Multiple interpretations possible
- **Passive voice**: "Your file has been uploaded" vs "We uploaded your file"
- **Length**: Too wordy or too terse
- **Assumptions**: Assuming user knowledge they don't have
- **Missing context**: Users don't know what to do or why
- **Tone mismatch**: Too formal, too casual, or inappropriate for situation
2. **Understand the context**:
- Who's the audience? (Technical? General? First-time users?)
- What's the user's mental state? (Stressed during error? Confident during success?)
- What's the action? (What do we want users to do?)
- What's the constraint? (Character limits? Space limitations?)
**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets.
## Plan Copy Improvements
Create a strategy for clearer communication:
- **Primary message**: What's the ONE thing users need to know?
- **Action needed**: What should users do next (if anything)?
- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?)
- **Constraints**: Length limits, brand voice, localization considerations
**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words.
## Improve Copy Systematically
Refine text across these common areas:
### Error Messages
**Bad**: "Error 403: Forbidden"
**Good**: "You don't have permission to view this page. Contact your admin for access."
**Bad**: "Invalid input"
**Good**: "Email addresses need an @ symbol. Try: name@example.com"
**Principles**:
- Explain what went wrong in plain language
- Suggest how to fix it
- Don't blame the user
- Include examples when helpful
- Link to help/support if applicable
### Form Labels & Instructions
**Bad**: "DOB (MM/DD/YYYY)"
**Good**: "Date of birth" (with placeholder showing format)
**Bad**: "Enter value here"
**Good**: "Your email address" or "Company name"
**Principles**:
- Use clear, specific labels (not generic placeholders)
- Show format expectations with examples
- Explain why you're asking (when not obvious)
- Put instructions before the field, not after
- Keep required field indicators clear
### Button & CTA Text
**Bad**: "Click here" | "Submit" | "OK"
**Good**: "Create account" | "Save changes" | "Got it, thanks"
**Principles**:
- Describe the action specifically
- Use active voice (verb + noun)
- Match user's mental model
- Be specific ("Save" is better than "OK")
### Help Text & Tooltips
**Bad**: "This is the username field"
**Good**: "Choose a username. You can change this later in Settings."
**Principles**:
- Add value (don't just repeat the label)
- Answer the implicit question ("What is this?" or "Why do you need this?")
- Keep it brief but complete
- Link to detailed docs if needed
### Empty States
**Bad**: "No items"
**Good**: "No projects yet. Create your first project to get started."
**Principles**:
- Explain why it's empty (if not obvious)
- Show next action clearly
- Make it welcoming, not dead-end
### Success Messages
**Bad**: "Success"
**Good**: "Settings saved! Your changes will take effect immediately."
**Principles**:
- Confirm what happened
- Explain what happens next (if relevant)
- Be brief but complete
- Match the user's emotional moment (celebrate big wins)
### Loading States
**Bad**: "Loading..." (for 30+ seconds)
**Good**: "Analyzing your data... this usually takes 30-60 seconds"
**Principles**:
- Set expectations (how long?)
- Explain what's happening (when it's not obvious)
- Show progress when possible
- Offer escape hatch if appropriate ("Cancel")
### Confirmation Dialogs
**Bad**: "Are you sure?"
**Good**: "Delete 'Project Alpha'? This can't be undone."
**Principles**:
- State the specific action
- Explain consequences (especially for destructive actions)
- Use clear button labels ("Delete project" not "Yes")
- Don't overuse confirmations (only for risky actions)
### Navigation & Wayfinding
**Bad**: Generic labels like "Items" | "Things" | "Stuff"
**Good**: Specific labels like "Your projects" | "Team members" | "Settings"
**Principles**:
- Be specific and descriptive
- Use language users understand (not internal jargon)
- Make hierarchy clear
- Consider information scent (breadcrumbs, current location)
## Apply Clarity Principles
Every piece of copy should follow these rules:
1. **Be specific**: "Enter email" not "Enter value"
2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity)
3. **Be active**: "Save changes" not "Changes will be saved"
4. **Be human**: "Oops, something went wrong" not "System error encountered"
5. **Be helpful**: Tell users what to do, not just what happened
6. **Be consistent**: Use same terms throughout (don't vary for variety)
**NEVER**:
- Use jargon without explanation
- Blame users ("You made an error" → "This field is required")
- Be vague ("Something went wrong" without explanation)
- Use passive voice unnecessarily
- Write overly long explanations (be concise)
- Use humor for errors (be empathetic instead)
- Assume technical knowledge
- Vary terminology (pick one term and stick with it)
## Verify Improvements
Test that copy improvements work:
- **Comprehension**: Can users understand without context?
- **Actionability**: Do users know what to do next?
- **Brevity**: Is it as short as possible while remaining clear?
- **Consistency**: Does it match terminology elsewhere?
- **Tone**: Is it appropriate for the situation?
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.
dist/codex/prompts/colorize.md
Vendored
+128
View File
@@ -0,0 +1,128 @@
---
description: Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.
argument-hint: [TARGET=<value>]
---
Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.
## Assess Color Opportunity
Analyze the current state and identify opportunities:
1. **Understand current state**:
- **Color absence**: Pure grayscale? Limited neutrals? One timid accent?
- **Missed opportunities**: Where could color add meaning, hierarchy, or delight?
- **Context**: What's appropriate for this domain and audience?
- **Brand**: Are there existing brand colors we should use?
2. **Identify where color adds value**:
- **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue)
- **Hierarchy**: Drawing attention to important elements
- **Categorization**: Different sections, types, or states
- **Emotional tone**: Warmth, energy, trust, creativity
- **Wayfinding**: Helping users navigate and understand structure
- **Delight**: Moments of visual interest and personality
**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.
## Plan Color Strategy
Create a purposeful color introduction plan:
- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
- **Dominant color**: Which color owns 60% of colored elements?
- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%)
- **Application strategy**: Where does each color appear and why?
**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
## Introduce Color Strategically
Add color systematically across these dimensions:
### Semantic Color
- **State indicators**:
- Success: Green tones (emerald, forest, mint)
- Error: Red/pink tones (rose, crimson, coral)
- Warning: Orange/amber tones
- Info: Blue tones (sky, ocean, indigo)
- Neutral: Gray/slate for inactive states
- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.)
- **Progress indicators**: Colored bars, rings, or charts showing completion or health
### Accent Color Application
- **Primary actions**: Color the most important buttons/CTAs
- **Links**: Add color to clickable text (maintain accessibility)
- **Icons**: Colorize key icons for recognition and personality
- **Headers/titles**: Add color to section headers or key labels
- **Hover states**: Introduce color on interaction
### Background & Surfaces
- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`)
- **Colored sections**: Use subtle background colors to separate areas
- **Gradient backgrounds**: Add depth with subtle gradients
- **Cards & surfaces**: Tint cards or surfaces slightly for warmth
### Data Visualization
- **Charts & graphs**: Use color to encode categories or values
- **Heatmaps**: Color intensity shows density or importance
- **Comparison**: Color coding for different datasets or timeframes
### Borders & Accents
- **Accent borders**: Add colored left/top borders to cards or sections
- **Underlines**: Color underlines for emphasis or active states
- **Dividers**: Subtle colored dividers instead of gray lines
- **Focus rings**: Colored focus indicators matching brand
### Typography Color
- **Colored headings**: Use brand colors for section headings (maintain contrast)
- **Highlight text**: Color for emphasis or categories
- **Labels & tags**: Small colored labels for metadata or categories
### Decorative Elements
- **Illustrations**: Add colored illustrations or icons
- **Shapes**: Geometric shapes in brand colors as background elements
- **Gradients**: Colorful gradient overlays or mesh backgrounds
- **Blobs/organic shapes**: Soft colored shapes for visual interest
## Balance & Refinement
Ensure color addition improves rather than overwhelms:
### Maintain Hierarchy
- **Dominant color** (60%): Primary brand color or most used accent
- **Secondary color** (30%): Supporting color for variety
- **Accent color** (10%): High contrast for key moments
- **Neutrals** (remaining): Gray/black/white for structure
### Accessibility
- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
- **Don't rely on color alone**: Use icons, labels, or patterns alongside color
- **Test for color blindness**: Verify red/green combinations work for all users
### Cohesion
- **Consistent palette**: Use colors from defined palette, not arbitrary choices
- **Systematic application**: Same color meanings throughout (green always = success)
- **Temperature consistency**: Warm palette stays warm, cool stays cool
**NEVER**:
- Use every color in the rainbow (choose 2-4 colors beyond neutrals)
- Apply color randomly without semantic meaning
- Violate WCAG contrast requirements
- Use color as the only indicator (accessibility issue)
- Make everything colorful (defeats the purpose)
- Choose colors that conflict with brand identity
- Use pure black (`#000`) or pure white (`#fff`) for large areas
## Verify Color Addition
Test that colorization improves the experience:
- **Better hierarchy**: Does color guide attention appropriately?
- **Clearer meaning**: Does color help users understand states/categories?
- **More engaging**: Does the interface feel warmer and more inviting?
- **Still accessible**: Do all color combinations meet WCAG standards?
- **Not overwhelming**: Is color balanced and purposeful?
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.
dist/codex/prompts/delight.md
Vendored
+290
View File
@@ -0,0 +1,290 @@
---
description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful.
argument-hint: [TARGET=<value>]
---
Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
## Assess Delight Opportunities
Identify where delight would enhance (not distract from) the experience:
1. **Find natural delight moments**:
- **Success states**: Completed actions (save, send, publish)
- **Empty states**: First-time experiences, onboarding
- **Loading states**: Waiting periods that could be entertaining
- **Achievements**: Milestones, streaks, completions
- **Interactions**: Hover states, clicks, drags
- **Errors**: Softening frustrating moments
- **Easter eggs**: Hidden discoveries for curious users
2. **Understand the context**:
- What's the brand personality? (Playful? Professional? Quirky? Elegant?)
- Who's the audience? (Tech-savvy? Creative? Corporate?)
- What's the emotional context? (Accomplishment? Exploration? Frustration?)
- What's appropriate? (Banking app ≠ gaming app)
3. **Define delight strategy**:
- **Subtle sophistication**: Refined micro-interactions (luxury brands)
- **Playful personality**: Whimsical illustrations and copy (consumer apps)
- **Helpful surprises**: Anticipating needs before users ask (productivity tools)
- **Sensory richness**: Satisfying sounds, smooth animations (creative tools)
**CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
## Delight Principles
Follow these guidelines:
### Delight Amplifies, Never Blocks
- Delight moments should be quick (< 1 second)
- Never delay core functionality for delight
- Make delight skippable or subtle
- Respect user's time and task focus
### Surprise and Discovery
- Hide delightful details for users to discover
- Reward exploration and curiosity
- Don't announce every delight moment
- Let users share discoveries with others
### Appropriate to Context
- Match delight to emotional moment (celebrate success, empathize with errors)
- Respect the user's state (don't be playful during critical errors)
- Match brand personality and audience expectations
- Cultural sensitivity (what's delightful varies by culture)
### Compound Over Time
- Delight should remain fresh with repeated use
- Vary responses (not same animation every time)
- Reveal deeper layers with continued use
- Build anticipation through patterns
## Delight Techniques
Add personality and joy through these methods:
### Micro-interactions & Animation
**Button delight**:
```css
/* Satisfying button press */
.button {
transition: transform 0.1s, box-shadow 0.1s;
}
.button:active {
transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Ripple effect on click */
/* Spring animation on hover */
.button:hover {
animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
```
**Loading delight**:
- Playful loading animations (not just spinners)
- Personality in loading messages ("Herding pixels..." "Teaching robots to dance...")
- Progress indication with encouraging messages
- Skeleton screens with subtle animations
**Success animations**:
- Checkmark draw animation
- Confetti burst for major achievements
- Gentle scale + fade for confirmation
- Satisfying sound effects (subtle)
**Hover surprises**:
- Icons that animate on hover
- Color shifts or glow effects
- Tooltip reveals with personality
- Cursor changes (custom cursors for branded experiences)
### Personality in Copy
**Playful error messages**:
```
❌ "Error 404"
✅ "This page is playing hide and seek. (And winning)"
❌ "Connection failed"
✅ "Looks like the internet took a coffee break. Want to retry?"
```
**Encouraging empty states**:
```
❌ "No projects"
✅ "Your canvas awaits. Create something amazing."
❌ "No messages"
✅ "Inbox zero! You're crushing it today."
```
**Playful labels & tooltips**:
```
❌ "Delete"
✅ "Send to void" (for playful brand)
❌ "Help"
✅ "Rescue me" (tooltip)
```
**IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
### Illustrations & Visual Personality
**Custom illustrations**:
- Empty state illustrations (not stock icons)
- Error state illustrations (friendly monsters, quirky characters)
- Loading state illustrations (animated characters)
- Success state illustrations (celebrations)
**Icon personality**:
- Custom icon set matching brand personality
- Animated icons (subtle motion on hover/click)
- Illustrative icons (more detailed than generic)
- Consistent style across all icons
**Background effects**:
- Subtle particle effects
- Gradient mesh backgrounds
- Geometric patterns
- Parallax depth
- Time-of-day themes (morning vs night)
### Satisfying Interactions
**Drag and drop delight**:
- Lift effect on drag (shadow, scale)
- Snap animation when dropped
- Satisfying placement sound
- Undo toast ("Dropped in wrong place? [Undo]")
**Toggle switches**:
- Smooth slide with spring physics
- Color transition
- Haptic feedback on mobile
- Optional sound effect
**Progress & achievements**:
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
- Playful stats ("You're on fire! 🔥 5 days in a row")
**Form interactions**:
- Input fields that animate on focus
- Checkboxes that bounce when checked
- Success state that celebrates valid input
- Auto-grow textareas
### Sound Design
**Subtle audio cues** (when appropriate):
- Notification sounds (distinctive but not annoying)
- Success sounds (satisfying "ding")
- Error sounds (empathetic, not harsh)
- Typing sounds for chat/messaging
- Ambient background audio (very subtle)
**IMPORTANT**:
- Respect system sound settings
- Provide mute option
- Keep volumes quiet (subtle cues, not alarms)
- Don't play on every interaction (sound fatigue is real)
### Easter Eggs & Hidden Delights
**Discovery rewards**:
- Konami code unlocks special theme
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
- Console messages for developers ("Like what you see? We're hiring!")
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
- Seasonal color shifts
- Weather-based variations
- Time-based changes (dark at night, light during day)
**Contextual personality**:
- Different messages based on time of day
- Responses to specific user actions
- Randomized variations (not same every time)
- Progressive reveals with continued use
### Loading & Waiting States
**Make waiting engaging**:
- Interesting loading messages that rotate
- Progress bars with personality
- Mini-games during long loads
- Fun facts or tips while waiting
- Countdown with encouraging messages
```
Loading messages rotation:
- "Waking up the servers..."
- "Teaching robots to dance..."
- "Consulting the magic 8-ball..."
- "Counting backwards from infinity..."
```
### Celebration Moments
**Success celebrations**:
- Confetti for major milestones
- Animated checkmarks for completions
- Progress bar celebrations at 100%
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
**Milestone recognition**:
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
- Anniversary celebrations
## Implementation Patterns
**Animation libraries**:
- Framer Motion (React)
- GSAP (universal)
- Lottie (After Effects animations)
- Canvas confetti (party effects)
**Sound libraries**:
- Howler.js (audio management)
- Use-sound (React hook)
**Physics libraries**:
- React Spring (spring physics)
- Popmotion (animation primitives)
**IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features.
**NEVER**:
- Delay core functionality for delight
- Force users through delightful moments (make skippable)
- Use delight to hide poor UX
- Overdo it (less is more)
- Ignore accessibility (animate responsibly, provide alternatives)
- Make every interaction delightful (special moments should be special)
- Sacrifice performance for delight
- Be inappropriate for context (read the room)
## Verify Delight Quality
Test that delight actually delights:
- **User reactions**: Do users smile? Share screenshots?
- **Doesn't annoy**: Still pleasant after 100th time?
- **Doesn't block**: Can users opt out or skip?
- **Performant**: No jank, no slowdown
- **Appropriate**: Matches brand and context
- **Accessible**: Works with reduced motion, screen readers
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.
dist/codex/prompts/extract.md
Vendored
+89
View File
@@ -0,0 +1,89 @@
---
description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library.
argument-hint: [TARGET=<value>]
---
Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.
## Discover
Analyze the target area to identify extraction opportunities:
1. **Find the design system**: Locate your design system, component library, or shared UI directory (grep for "design system", "ui", "components", etc.). Understand its structure:
- Component organization and naming conventions
- Design token structure (if any)
- Documentation patterns
- Import/export conventions
**CRITICAL**: If no design system exists, ask before creating one. Understand the preferred location and structure first.
2. **Identify patterns**: Look for:
- **Repeated components**: Similar UI patterns used multiple times (buttons, cards, inputs, etc.)
- **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens
- **Inconsistent variations**: Multiple implementations of the same concept (3 different button styles)
- **Reusable patterns**: Layout patterns, composition patterns, interaction patterns worth systematizing
3. **Assess value**: Not everything should be extracted. Consider:
- Is this used 3+ times, or likely to be reused?
- Would systematizing this improve consistency?
- Is this a general pattern or context-specific?
- What's the maintenance cost vs benefit?
## Plan Extraction
Create a systematic extraction plan:
- **Components to extract**: Which UI elements become reusable components?
- **Tokens to create**: Which hard-coded values become design tokens?
- **Variants to support**: What variations does each component need?
- **Naming conventions**: Component names, token names, prop names that match existing patterns
- **Migration path**: How to refactor existing uses to consume the new shared versions
**IMPORTANT**: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.
## Extract & Enrich
Build improved, reusable versions:
- **Components**: Create well-designed components with:
- Clear props API with sensible defaults
- Proper variants for different use cases
- Accessibility built in (ARIA, keyboard navigation, focus management)
- Documentation and usage examples
- **Design tokens**: Create tokens with:
- Clear naming (primitive vs semantic)
- Proper hierarchy and organization
- Documentation of when to use each token
- **Patterns**: Document patterns with:
- When to use this pattern
- Code examples
- Variations and combinations
**NEVER**:
- Extract one-off, context-specific implementations without generalization
- Create components so generic they're useless
- Extract without considering existing design system conventions
- Skip proper TypeScript types or prop documentation
- Create tokens for every single value (tokens should have semantic meaning)
## Migrate
Replace existing uses with the new shared versions:
- **Find all instances**: Search for the patterns you've extracted
- **Replace systematically**: Update each use to consume the shared version
- **Test thoroughly**: Ensure visual and functional parity
- **Delete dead code**: Remove the old implementations
## Document
Update design system documentation:
- Add new components to the component library
- Document token usage and values
- Add examples and guidelines
- Update any Storybook or component catalog
Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.
dist/codex/prompts/harden.md
Vendored
+352
View File
@@ -0,0 +1,352 @@
---
description: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready.
argument-hint: [TARGET=<value>]
---
Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs.
## Assess Hardening Needs
Identify weaknesses and edge cases:
1. **Test with extreme inputs**:
- Very long text (names, descriptions, titles)
- Very short text (empty, single character)
- Special characters (emoji, RTL text, accents)
- Large numbers (millions, billions)
- Many items (1000+ list items, 50+ options)
- No data (empty states)
2. **Test error scenarios**:
- Network failures (offline, slow, timeout)
- API errors (400, 401, 403, 404, 500)
- Validation errors
- Permission errors
- Rate limiting
- Concurrent operations
3. **Test internationalization**:
- Long translations (German is often 30% longer than English)
- RTL languages (Arabic, Hebrew)
- Character sets (Chinese, Japanese, Korean, emoji)
- Date/time formats
- Number formats (1,000 vs 1.000)
- Currency symbols
**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality.
## Hardening Dimensions
Systematically improve resilience:
### Text Overflow & Wrapping
**Long text handling**:
```css
/* Single line with ellipsis */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Multi-line with clamp */
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Allow wrapping */
.wrap {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
```
**Flex/Grid overflow**:
```css
/* Prevent flex items from overflowing */
.flex-item {
min-width: 0; /* Allow shrinking below content size */
overflow: hidden;
}
/* Prevent grid items from overflowing */
.grid-item {
min-width: 0;
min-height: 0;
}
```
**Responsive text sizing**:
- Use `clamp()` for fluid typography
- Set minimum readable sizes (14px on mobile)
- Test text scaling (zoom to 200%)
- Ensure containers expand with text
### Internationalization (i18n)
**Text expansion**:
- Add 30-40% space budget for translations
- Use flexbox/grid that adapts to content
- Test with longest language (usually German)
- Avoid fixed widths on text containers
```jsx
// ❌ Bad: Assumes short English text
<button className="w-24">Submit</button>
// ✅ Good: Adapts to content
<button className="px-4 py-2">Submit</button>
```
**RTL (Right-to-Left) support**:
```css
/* Use logical properties */
margin-inline-start: 1rem; /* Not margin-left */
padding-inline: 1rem; /* Not padding-left/right */
border-inline-end: 1px solid; /* Not border-right */
/* Or use dir attribute */
[dir="rtl"] .arrow { transform: scaleX(-1); }
```
**Character set support**:
- Use UTF-8 encoding everywhere
- Test with Chinese/Japanese/Korean (CJK) characters
- Test with emoji (they can be 2-4 bytes)
- Handle different scripts (Latin, Cyrillic, Arabic, etc.)
**Date/Time formatting**:
```javascript
// ✅ Use Intl API for proper formatting
new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024
new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(1234.56); // $1,234.56
```
**Pluralization**:
```javascript
// ❌ Bad: Assumes English pluralization
`${count} item${count !== 1 ? 's' : ''}`
// ✅ Good: Use proper i18n library
t('items', { count }) // Handles complex plural rules
```
### Error Handling
**Network errors**:
- Show clear error messages
- Provide retry button
- Explain what happened
- Offer offline mode (if applicable)
- Handle timeout scenarios
```jsx
// Error states with recovery
{error && (
<ErrorMessage>
<p>Failed to load data. {error.message}</p>
<button onClick={retry}>Try again</button>
</ErrorMessage>
)}
```
**Form validation errors**:
- Inline errors near fields
- Clear, specific messages
- Suggest corrections
- Don't block submission unnecessarily
- Preserve user input on error
**API errors**:
- Handle each status code appropriately
- 400: Show validation errors
- 401: Redirect to login
- 403: Show permission error
- 404: Show not found state
- 429: Show rate limit message
- 500: Show generic error, offer support
**Graceful degradation**:
- Core functionality works without JavaScript
- Images have alt text
- Progressive enhancement
- Fallbacks for unsupported features
### Edge Cases & Boundary Conditions
**Empty states**:
- No items in list
- No search results
- No notifications
- No data to display
- Provide clear next action
**Loading states**:
- Initial load
- Pagination load
- Refresh
- Show what's loading ("Loading your projects...")
- Time estimates for long operations
**Large datasets**:
- Pagination or virtual scrolling
- Search/filter capabilities
- Performance optimization
- Don't load all 10,000 items at once
**Concurrent operations**:
- Prevent double-submission (disable button while loading)
- Handle race conditions
- Optimistic updates with rollback
- Conflict resolution
**Permission states**:
- No permission to view
- No permission to edit
- Read-only mode
- Clear explanation of why
**Browser compatibility**:
- Polyfills for modern features
- Fallbacks for unsupported CSS
- Feature detection (not browser detection)
- Test in target browsers
### Input Validation & Sanitization
**Client-side validation**:
- Required fields
- Format validation (email, phone, URL)
- Length limits
- Pattern matching
- Custom validation rules
**Server-side validation** (always):
- Never trust client-side only
- Validate and sanitize all inputs
- Protect against injection attacks
- Rate limiting
**Constraint handling**:
```html
<!-- Set clear constraints -->
<input
type="text"
maxlength="100"
pattern="[A-Za-z0-9]+"
required
aria-describedby="username-hint"
/>
<small id="username-hint">
Letters and numbers only, up to 100 characters
</small>
```
### Accessibility Resilience
**Keyboard navigation**:
- All functionality accessible via keyboard
- Logical tab order
- Focus management in modals
- Skip links for long content
**Screen reader support**:
- Proper ARIA labels
- Announce dynamic changes (live regions)
- Descriptive alt text
- Semantic HTML
**Motion sensitivity**:
```css
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
**High contrast mode**:
- Test in Windows high contrast mode
- Don't rely only on color
- Provide alternative visual cues
### Performance Resilience
**Slow connections**:
- Progressive image loading
- Skeleton screens
- Optimistic UI updates
- Offline support (service workers)
**Memory leaks**:
- Clean up event listeners
- Cancel subscriptions
- Clear timers/intervals
- Abort pending requests on unmount
**Throttling & Debouncing**:
```javascript
// Debounce search input
const debouncedSearch = debounce(handleSearch, 300);
// Throttle scroll handler
const throttledScroll = throttle(handleScroll, 100);
```
## Testing Strategies
**Manual testing**:
- Test with extreme data (very long, very short, empty)
- Test in different languages
- Test offline
- Test slow connection (throttle to 3G)
- Test with screen reader
- Test keyboard-only navigation
- Test on old browsers
**Automated testing**:
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- Visual regression tests
- Accessibility tests (axe, WAVE)
**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined.
**NEVER**:
- Assume perfect input (validate everything)
- Ignore internationalization (design for global)
- Leave error messages generic ("Error occurred")
- Forget offline scenarios
- Trust client-side validation alone
- Use fixed widths for text
- Assume English-length text
- Block entire interface when one component errors
## Verify Hardening
Test thoroughly with edge cases:
- **Long text**: Try names with 100+ characters
- **Emoji**: Use emoji in all text fields
- **RTL**: Test with Arabic or Hebrew
- **CJK**: Test with Chinese/Japanese/Korean
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component.
dist/codex/prompts/normalize.md
Vendored
+1 -3
View File
@@ -3,9 +3,7 @@ description: Normalize design to match your design system and ensure consistency
argument-hint: [FEATURE=<value>]
---
This command ensures features match your design system's standards and feel cohesive with the rest of your application. Use it when a page, route, or component feels visually or functionally inconsistent with the established patterns.
The user provides a feature to normalize (explicitly or via context). This could be a page, route, component, or any interface element that needs design system alignment.
Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns.
## Plan
dist/codex/prompts/onboard.md
Vendored
+237
View File
@@ -0,0 +1,237 @@
---
description: Design or improve onboarding flows, empty states, and first-time user experiences. Helps users get started successfully and understand value quickly.
argument-hint: [TARGET=<value>]
---
Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly.
## Assess Onboarding Needs
Understand what users need to learn and why:
1. **Identify the challenge**:
- What are users trying to accomplish?
- What's confusing or unclear about current experience?
- Where do users get stuck or drop off?
- What's the "aha moment" we want users to reach?
2. **Understand the users**:
- What's their experience level? (Beginners, power users, mixed?)
- What's their motivation? (Excited and exploring? Required by work?)
- What's their time commitment? (5 minutes? 30 minutes?)
- What alternatives do they know? (Coming from competitor? New to category?)
3. **Define success**:
- What's the minimum users need to learn to be successful?
- What's the key action we want them to take? (First project? First invite?)
- How do we know onboarding worked? (Completion rate? Time to value?)
**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible.
## Onboarding Principles
Follow these core principles:
### Show, Don't Tell
- Demonstrate with working examples, not just descriptions
- Provide real functionality in onboarding, not separate tutorial mode
- Use progressive disclosure - teach one thing at a time
### Make It Optional (When Possible)
- Let experienced users skip onboarding
- Don't block access to product
- Provide "Skip" or "I'll explore on my own" options
### Time to Value
- Get users to their "aha moment" ASAP
- Front-load most important concepts
- Teach 20% that delivers 80% of value
- Save advanced features for contextual discovery
### Context Over Ceremony
- Teach features when users need them, not upfront
- Empty states are onboarding opportunities
- Tooltips and hints at point of use
### Respect User Intelligence
- Don't patronize or over-explain
- Be concise and clear
- Assume users can figure out standard patterns
## Design Onboarding Experiences
Create appropriate onboarding for the context:
### Initial Product Onboarding
**Welcome Screen**:
- Clear value proposition (what is this product?)
- What users will learn/accomplish
- Time estimate (honest about commitment)
- Option to skip (for experienced users)
**Account Setup**:
- Minimal required information (collect more later)
- Explain why you're asking for each piece of information
- Smart defaults where possible
- Social login when appropriate
**Core Concept Introduction**:
- Introduce 1-3 core concepts (not everything)
- Use simple language and examples
- Interactive when possible (do, don't just read)
- Progress indication (step 1 of 3)
**First Success**:
- Guide users to accomplish something real
- Pre-populated examples or templates
- Celebrate completion (but don't overdo it)
- Clear next steps
### Feature Discovery & Adoption
**Empty States**:
Instead of blank space, show:
- What will appear here (description + screenshot/illustration)
- Why it's valuable
- Clear CTA to create first item
- Example or template option
Example:
```
No projects yet
Projects help you organize your work and collaborate with your team.
[Create your first project] or [Start from template]
```
**Contextual Tooltips**:
- Appear at relevant moment (first time user sees feature)
- Point directly at relevant UI element
- Brief explanation + benefit
- Dismissable (with "Don't show again" option)
- Optional "Learn more" link
**Feature Announcements**:
- Highlight new features when they're released
- Show what's new and why it matters
- Let users try immediately
- Dismissable
**Progressive Onboarding**:
- Teach features when users encounter them
- Badges or indicators on new/unused features
- Unlock complexity gradually (don't show all options immediately)
### Guided Tours & Walkthroughs
**When to use**:
- Complex interfaces with many features
- Significant changes to existing product
- Industry-specific tools needing domain knowledge
**How to design**:
- Spotlight specific UI elements (dim rest of page)
- Keep steps short (3-7 steps max per tour)
- Allow users to click through tour freely
- Include "Skip tour" option
- Make replayable (help menu)
**Best practices**:
- Interactive > passive (let users click real buttons)
- Focus on workflow, not features ("Create a project" not "This is the project button")
- Provide sample data so actions work
### Interactive Tutorials
**When to use**:
- Users need hands-on practice
- Concepts are complex or unfamiliar
- High stakes (better to practice in safe environment)
**How to design**:
- Sandbox environment with sample data
- Clear objectives ("Create a chart showing sales by region")
- Step-by-step guidance
- Validation (confirm they did it right)
- Graduation moment (you're ready!)
### Documentation & Help
**In-product help**:
- Contextual help links throughout interface
- Keyboard shortcut reference
- Search-able help center
- Video tutorials for complex workflows
**Help patterns**:
- `?` icon near complex features
- "Learn more" links in tooltips
- Keyboard shortcut hints (`⌘K` shown on search box)
## Empty State Design
Every empty state needs:
### What Will Be Here
"Your recent projects will appear here"
### Why It Matters
"Projects help you organize your work and collaborate with your team"
### How to Get Started
[Create project] or [Import from template]
### Visual Interest
Illustration or icon (not just text on blank page)
### Contextual Help
"Need help getting started? [Watch 2-min tutorial]"
**Empty state types**:
- **First use**: Never used this feature (emphasize value, provide template)
- **User cleared**: Intentionally deleted everything (light touch, easy to recreate)
- **No results**: Search or filter returned nothing (suggest different query, clear filters)
- **No permissions**: Can't access (explain why, how to get access)
- **Error state**: Failed to load (explain what happened, retry option)
## Implementation Patterns
### Technical approaches:
**Tooltip libraries**: Tippy.js, Popper.js
**Tour libraries**: Intro.js, Shepherd.js, React Joyride
**Modal patterns**: Focus trap, backdrop, ESC to close
**Progress tracking**: LocalStorage for "seen" states
**Analytics**: Track completion, drop-off points
**Storage patterns**:
```javascript
// Track which onboarding steps user has seen
localStorage.setItem('onboarding-completed', 'true');
localStorage.setItem('feature-tooltip-seen-reports', 'true');
```
**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals.
**NEVER**:
- Force users through long onboarding before they can use product
- Patronize users with obvious explanations
- Show same tooltip repeatedly (respect dismissals)
- Block all UI during tour (let users explore)
- Create separate tutorial mode disconnected from real product
- Overwhelm with information upfront (progressive disclosure!)
- Hide "Skip" or make it hard to find
- Forget about returning users (don't show initial onboarding again)
## Verify Onboarding Quality
Test with real users:
- **Time to completion**: Can users complete onboarding quickly?
- **Comprehension**: Do users understand after completing?
- **Action**: Do users take desired next step?
- **Skip rate**: Are too many users skipping? (Maybe it's too long/not valuable)
- **Completion rate**: Are users completing? (If low, simplify)
- **Time to value**: How long until users get first value?
Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence.
dist/codex/prompts/optimize.md
Vendored
+263
View File
@@ -0,0 +1,263 @@
---
description: Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.
argument-hint: [TARGET=<value>]
---
Identify and fix performance issues to create faster, smoother user experiences.
## Assess Performance Issues
Understand current performance and identify problems:
1. **Measure current state**:
- **Core Web Vitals**: LCP, FID/INP, CLS scores
- **Load time**: Time to interactive, first contentful paint
- **Bundle size**: JavaScript, CSS, image sizes
- **Runtime performance**: Frame rate, memory usage, CPU usage
- **Network**: Request count, payload sizes, waterfall
2. **Identify bottlenecks**:
- What's slow? (Initial load? Interactions? Animations?)
- What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)
- How bad is it? (Perceivable? Annoying? Blocking?)
- Who's affected? (All users? Mobile only? Slow connections?)
**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters.
## Optimization Strategy
Create systematic improvement plan:
### Loading Performance
**Optimize Images**:
- Use modern formats (WebP, AVIF)
- Proper sizing (don't load 3000px image for 300px display)
- Lazy loading for below-fold images
- Responsive images (`srcset`, `picture` element)
- Compress images (80-85% quality is usually imperceptible)
- Use CDN for faster delivery
```html
<img
src="hero.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
loading="lazy"
alt="Hero image"
/>
```
**Reduce JavaScript Bundle**:
- Code splitting (route-based, component-based)
- Tree shaking (remove unused code)
- Remove unused dependencies
- Lazy load non-critical code
- Use dynamic imports for large components
```javascript
// Lazy load heavy component
const HeavyChart = lazy(() => import('./HeavyChart'));
```
**Optimize CSS**:
- Remove unused CSS
- Critical CSS inline, rest async
- Minimize CSS files
- Use CSS containment for independent regions
**Optimize Fonts**:
- Use `font-display: swap` or `optional`
- Subset fonts (only characters you need)
- Preload critical fonts
- Use system fonts when appropriate
- Limit font weights loaded
```css
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap; /* Show fallback immediately */
unicode-range: U+0020-007F; /* Basic Latin only */
}
```
**Optimize Loading Strategy**:
- Critical resources first (async/defer non-critical)
- Preload critical assets
- Prefetch likely next pages
- Service worker for offline/caching
- HTTP/2 or HTTP/3 for multiplexing
### Rendering Performance
**Avoid Layout Thrashing**:
```javascript
// ❌ Bad: Alternating reads and writes (causes reflows)
elements.forEach(el => {
const height = el.offsetHeight; // Read (forces layout)
el.style.height = height * 2; // Write
});
// ✅ Good: Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // All reads
elements.forEach((el, i) => {
el.style.height = heights[i] * 2; // All writes
});
```
**Optimize Rendering**:
- Use CSS `contain` property for independent regions
- Minimize DOM depth (flatter is faster)
- Reduce DOM size (fewer elements)
- Use `content-visibility: auto` for long lists
- Virtual scrolling for very long lists (react-window, react-virtualized)
**Reduce Paint & Composite**:
- Use `transform` and `opacity` for animations (GPU-accelerated)
- Avoid animating layout properties (width, height, top, left)
- Use `will-change` sparingly for known expensive operations
- Minimize paint areas (smaller is faster)
### Animation Performance
**GPU Acceleration**:
```css
/* ✅ GPU-accelerated (fast) */
.animated {
transform: translateX(100px);
opacity: 0.5;
}
/* ❌ CPU-bound (slow) */
.animated {
left: 100px;
width: 300px;
}
```
**Smooth 60fps**:
- Target 16ms per frame (60fps)
- Use `requestAnimationFrame` for JS animations
- Debounce/throttle scroll handlers
- Use CSS animations when possible
- Avoid long-running JavaScript during animations
**Intersection Observer**:
```javascript
// Efficiently detect when elements enter viewport
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Element is visible, lazy load or animate
}
});
});
```
### React/Framework Optimization
**React-specific**:
- Use `memo()` for expensive components
- `useMemo()` and `useCallback()` for expensive computations
- Virtualize long lists
- Code split routes
- Avoid inline function creation in render
- Use React DevTools Profiler
**Framework-agnostic**:
- Minimize re-renders
- Debounce expensive operations
- Memoize computed values
- Lazy load routes and components
### Network Optimization
**Reduce Requests**:
- Combine small files
- Use SVG sprites for icons
- Inline small critical assets
- Remove unused third-party scripts
**Optimize APIs**:
- Use pagination (don't load everything)
- GraphQL to request only needed fields
- Response compression (gzip, brotli)
- HTTP caching headers
- CDN for static assets
**Optimize for Slow Connections**:
- Adaptive loading based on connection (navigator.connection)
- Optimistic UI updates
- Request prioritization
- Progressive enhancement
## Core Web Vitals Optimization
### Largest Contentful Paint (LCP < 2.5s)
- Optimize hero images
- Inline critical CSS
- Preload key resources
- Use CDN
- Server-side rendering
### First Input Delay (FID < 100ms) / INP (< 200ms)
- Break up long tasks
- Defer non-critical JavaScript
- Use web workers for heavy computation
- Reduce JavaScript execution time
### Cumulative Layout Shift (CLS < 0.1)
- Set dimensions on images and videos
- Don't inject content above existing content
- Use `aspect-ratio` CSS property
- Reserve space for ads/embeds
- Avoid animations that cause layout shifts
```css
/* Reserve space for image */
.image-container {
aspect-ratio: 16 / 9;
}
```
## Performance Monitoring
**Tools to use**:
- Chrome DevTools (Lighthouse, Performance panel)
- WebPageTest
- Core Web Vitals (Chrome UX Report)
- Bundle analyzers (webpack-bundle-analyzer)
- Performance monitoring (Sentry, DataDog, New Relic)
**Key metrics**:
- LCP, FID/INP, CLS (Core Web Vitals)
- Time to Interactive (TTI)
- First Contentful Paint (FCP)
- Total Blocking Time (TBT)
- Bundle size
- Request count
**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.
**NEVER**:
- Optimize without measuring (premature optimization)
- Sacrifice accessibility for performance
- Break functionality while optimizing
- Use `will-change` everywhere (creates new layers, uses memory)
- Lazy load above-fold content
- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first)
- Forget about mobile performance (often slower devices, slower connections)
## Verify Improvements
Test that optimizations worked:
- **Before/after metrics**: Compare Lighthouse scores
- **Real user monitoring**: Track improvements for real users
- **Different devices**: Test on low-end Android, not just flagship iPhone
- **Slow connections**: Throttle to 3G, test experience
- **No regressions**: Ensure functionality still works
- **User perception**: Does it *feel* faster?
Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.
dist/codex/prompts/polish.md
Vendored
+192
View File
@@ -0,0 +1,192 @@
---
description: Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great.
argument-hint: [TARGET=<value>]
---
Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished.
## Pre-Polish Assessment
Understand the current state and goals:
1. **Review completeness**:
- Is it functionally complete?
- Are there known issues to preserve (mark with TODOs)?
- What's the quality bar? (MVP vs flagship feature?)
- When does it ship? (How much time for polish?)
2. **Identify polish areas**:
- Visual inconsistencies
- Spacing and alignment issues
- Interaction state gaps
- Copy inconsistencies
- Edge cases and error states
- Loading and transition smoothness
**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete.
## Polish Systematically
Work through these dimensions methodically:
### Visual Alignment & Spacing
- **Pixel-perfect alignment**: Everything lines up to grid
- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps)
- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering)
- **Responsive consistency**: Spacing and alignment work at all breakpoints
- **Grid adherence**: Elements snap to baseline grid
**Check**:
- Enable grid overlay and verify alignment
- Check spacing with browser inspector
- Test at multiple viewport sizes
- Look for elements that "feel" off
### Typography Refinement
- **Hierarchy consistency**: Same elements use same sizes/weights throughout
- **Line length**: 45-75 characters for body text
- **Line height**: Appropriate for font size and context
- **Widows & orphans**: No single words on last line
- **Hyphenation**: Appropriate for language and column width
- **Kerning**: Adjust letter spacing where needed (especially headlines)
- **Font loading**: No FOUT/FOIT flashes
### Color & Contrast
- **Contrast ratios**: All text meets WCAG standards
- **Consistent token usage**: No hard-coded colors, all use design tokens
- **Theme consistency**: Works in all theme variants
- **Color meaning**: Same colors mean same things throughout
- **Accessible focus**: Focus indicators visible with sufficient contrast
### Interaction States
Every interactive element needs all states:
- **Default**: Resting state
- **Hover**: Subtle feedback (color, scale, shadow)
- **Focus**: Keyboard focus indicator (never remove without replacement)
- **Active**: Click/tap feedback
- **Disabled**: Clearly non-interactive
- **Loading**: Async action feedback
- **Error**: Validation or error state
- **Success**: Successful completion
**Missing states create confusion and broken experiences**.
### Micro-interactions & Transitions
- **Smooth transitions**: All state changes animated appropriately (200-300ms)
- **Consistent easing**: Same easing curves for similar transitions
- **No jank**: 60fps animations, no layout thrashing
- **Appropriate motion**: Motion serves purpose, not decoration
- **Reduced motion**: Respects `prefers-reduced-motion`
### Content & Copy
- **Consistent terminology**: Same things called same names throughout
- **Consistent capitalization**: Title Case vs Sentence case applied consistently
- **Grammar & spelling**: No typos
- **Appropriate length**: Not too wordy, not too terse
- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them)
### Icons & Images
- **Consistent style**: All icons from same family or matching style
- **Appropriate sizing**: Icons sized consistently for context
- **Proper alignment**: Icons align with adjacent text optically
- **Alt text**: All images have descriptive alt text
- **Loading states**: Images don't cause layout shift, proper aspect ratios
- **Retina support**: 2x assets for high-DPI screens
### Forms & Inputs
- **Label consistency**: All inputs properly labeled
- **Required indicators**: Clear and consistent
- **Error messages**: Helpful and consistent
- **Tab order**: Logical keyboard navigation
- **Auto-focus**: Appropriate (don't overuse)
- **Validation timing**: Consistent (on blur vs on submit)
### Edge Cases & Error States
- **Loading states**: All async actions have loading feedback
- **Empty states**: Helpful empty states, not just blank space
- **Error states**: Clear error messages with recovery paths
- **Success states**: Confirmation of successful actions
- **Long content**: Handles very long names, descriptions, etc.
- **No content**: Handles missing data gracefully
- **Offline**: Appropriate offline handling (if applicable)
### Responsiveness
- **All breakpoints**: Test mobile, tablet, desktop
- **Touch targets**: 44x44px minimum on touch devices
- **Readable text**: No text smaller than 14px on mobile
- **No horizontal scroll**: Content fits viewport
- **Appropriate reflow**: Content adapts logically
### Performance
- **Fast initial load**: Optimize critical path
- **No layout shift**: Elements don't jump after load (CLS)
- **Smooth interactions**: No lag or jank
- **Optimized images**: Appropriate formats and sizes
- **Lazy loading**: Off-screen content loads lazily
### Code Quality
- **Remove console logs**: No debug logging in production
- **Remove commented code**: Clean up dead code
- **Remove unused imports**: Clean up unused dependencies
- **Consistent naming**: Variables and functions follow conventions
- **Type safety**: No TypeScript `any` or ignored errors
- **Accessibility**: Proper ARIA labels and semantic HTML
## Polish Checklist
Go through systematically:
- [ ] Visual alignment perfect at all breakpoints
- [ ] Spacing uses design tokens consistently
- [ ] Typography hierarchy consistent
- [ ] All interactive states implemented
- [ ] All transitions smooth (60fps)
- [ ] Copy is consistent and polished
- [ ] Icons are consistent and properly sized
- [ ] All forms properly labeled and validated
- [ ] Error states are helpful
- [ ] Loading states are clear
- [ ] Empty states are welcoming
- [ ] Touch targets are 44x44px minimum
- [ ] Contrast ratios meet WCAG AA
- [ ] Keyboard navigation works
- [ ] Focus indicators visible
- [ ] No console errors or warnings
- [ ] No layout shift on load
- [ ] Works in all supported browsers
- [ ] Respects reduced motion preference
- [ ] Code is clean (no TODOs, console.logs, commented code)
**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up.
**NEVER**:
- Polish before it's functionally complete
- Spend hours on polish if it ships in 30 minutes (triage)
- Introduce bugs while polishing (test thoroughly)
- Ignore systematic issues (if spacing is off everywhere, fix the system)
- Perfect one thing while leaving others rough (consistent quality level)
## Final Verification
Before marking as done:
- **Use it yourself**: Actually interact with the feature
- **Test on real devices**: Not just browser DevTools
- **Ask someone else to review**: Fresh eyes catch things
- **Compare to design**: Match intended design
- **Check all states**: Don't just test happy path
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.
dist/codex/prompts/quieter.md
Vendored
+88
View File
@@ -0,0 +1,88 @@
---
description: Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact.
argument-hint: [TARGET=<value>]
---
Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.
## Assess Current State
Analyze what makes the design feel too intense:
1. **Identify intensity sources**:
- **Color saturation**: Overly bright or saturated colors
- **Contrast extremes**: Too much high-contrast juxtaposition
- **Visual weight**: Too many bold, heavy elements competing
- **Animation excess**: Too much motion or overly dramatic effects
- **Complexity**: Too many visual elements, patterns, or decorations
- **Scale**: Everything is large and loud with no hierarchy
2. **Understand the context**:
- What's the purpose? (Marketing vs tool vs reading experience)
- Who's the audience? (Some contexts need energy)
- What's working? (Don't throw away good ideas)
- What's the core message? (Preserve what matters)
**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.
## Plan Refinement
Create a strategy to reduce intensity while maintaining impact:
- **Color approach**: Desaturate or shift to more sophisticated tones?
- **Hierarchy approach**: Which elements should stay bold (very few), which should recede?
- **Simplification approach**: What can be removed entirely?
- **Sophistication approach**: How can we signal quality through restraint?
**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision.
## Refine the Design
Systematically reduce intensity across these dimensions:
### Color Refinement
- **Reduce saturation**: Shift from fully saturated to 70-85% saturation
- **Soften palette**: Replace bright colors with muted, sophisticated tones
- **Reduce color variety**: Use fewer colors more thoughtfully
- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
- **Gentler contrasts**: High contrast only where it matters most
### Visual Weight Reduction
- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness
- **White space**: Increase breathing room, reduce density
- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely
### Simplification
- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose
- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes
- **Reduce layering**: Flatten visual hierarchy where possible
- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
### Motion Reduction
- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds
- **Remove decorative animations**: Keep functional motion, remove flourishes
- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
### Composition Refinement
- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling
- **Align to grid**: Bring rogue elements back into systematic alignment
- **Even out spacing**: Replace extreme spacing variations with consistent rhythm
**NEVER**:
- Make everything the same size/weight (hierarchy still matters)
- Remove all color (quiet ≠ grayscale)
- Eliminate all personality (maintain character through refinement)
- Sacrifice usability for aesthetics (functional elements still need clear affordances)
- Make everything small and light (some anchors needed)
## Verify Quality
Ensure refinement maintains quality:
- **Still functional**: Can users still accomplish tasks easily?
- **Still distinctive**: Does it have character, or is it generic now?
- **Better reading**: Is text easier to read for extended periods?
- **Sophistication**: Does it feel more refined and premium?
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.
dist/codex/prompts/simplify.md
Vendored
+109
View File
@@ -0,0 +1,109 @@
---
description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean.
argument-hint: [TARGET=<value>]
---
Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.
## Assess Current State
Analyze what makes the design feel complex or cluttered:
1. **Identify complexity sources**:
- **Too many elements**: Competing buttons, redundant information, visual clutter
- **Excessive variation**: Too many colors, fonts, sizes, styles without purpose
- **Information overload**: Everything visible at once, no progressive disclosure
- **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations
- **Confusing hierarchy**: Unclear what matters most
- **Feature creep**: Too many options, actions, or paths forward
2. **Find the essence**:
- What's the primary user goal? (There should be ONE)
- What's actually necessary vs nice-to-have?
- What can be removed, hidden, or combined?
- What's the 20% that delivers 80% of value?
**CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.
## Plan Simplification
Create a ruthless editing strategy:
- **Core purpose**: What's the ONE thing this should accomplish?
- **Essential elements**: What's truly necessary to achieve that purpose?
- **Progressive disclosure**: What can be hidden until needed?
- **Consolidation opportunities**: What can be combined or integrated?
**IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
## Simplify the Design
Systematically remove complexity across these dimensions:
### Information Architecture
- **Reduce scope**: Remove secondary actions, optional features, redundant information
- **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows)
- **Combine related actions**: Merge similar buttons, consolidate forms, group related content
- **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden
- **Remove redundancy**: If it's said elsewhere, don't repeat it here
### Visual Simplification
- **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
- **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
- **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
- **Flatten structure**: Reduce nesting, remove unnecessary containers
- **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
### Layout Simplification
- **Linear flow**: Replace complex grids with simple vertical flow where possible
- **Remove sidebars**: Move secondary content inline or hide it
- **Full-width**: Use available space generously instead of complex multi-column layouts
- **Consistent alignment**: Pick left or center, stick with it
- **Generous white space**: Let content breathe, don't pack everything tight
### Interaction Simplification
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
- **Clear CTAs**: ONE obvious next step, not five competing actions
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
- **Active voice**: "Save changes" not "Changes will be saved"
- **Remove jargon**: Plain language always wins
- **Scannable structure**: Short paragraphs, bullet points, clear headings
- **Essential information only**: Remove marketing fluff, legalese, hedging
### Code Simplification
- **Remove unused code**: Dead CSS, unused components, orphaned files
- **Flatten component trees**: Reduce nesting depth
- **Consolidate styles**: Merge similar styles, use utilities consistently
- **Reduce variants**: Does that component need 12 variations, or can 3 cover 90% of cases?
**NEVER**:
- Remove necessary functionality (simplicity ≠ feature-less)
- Sacrifice accessibility for simplicity (clear labels and ARIA still required)
- Make things so simple they're unclear (mystery ≠ minimalism)
- Remove information users need to make decisions
- Eliminate hierarchy completely (some things should stand out)
- Oversimplify complex domains (match complexity to actual task complexity)
## Verify Simplification
Ensure simplification improves usability:
- **Faster task completion**: Can users accomplish goals more quickly?
- **Reduced cognitive load**: Is it easier to understand what to do?
- **Still complete**: Are all necessary features still accessible?
- **Clearer hierarchy**: Is it obvious what matters most?
- **Better performance**: Does simpler design load faster?
## Document Removed Complexity
If you removed features or options:
- Document why they were removed
- Consider if they need alternative access points
- Note any user feedback to monitor
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."
dist/cursor/commands/adapt.md
Vendored
+185
View File
@@ -0,0 +1,185 @@
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
## Assess Adaptation Challenge
Understand what needs adaptation and why:
1. **Identify the source context**:
- What was it designed for originally? (Desktop web? Mobile app?)
- What assumptions were made? (Large screen? Mouse input? Fast connection?)
- What works well in current context?
2. **Understand target context**:
- **Device**: Mobile, tablet, desktop, TV, watch, print?
- **Input method**: Touch, mouse, keyboard, voice, gamepad?
- **Screen constraints**: Size, resolution, orientation?
- **Connection**: Fast wifi, slow 3G, offline?
- **Usage context**: On-the-go vs desk, quick glance vs focused reading?
- **User expectations**: What do users expect on this platform?
3. **Identify adaptation challenges**:
- What won't fit? (Content, navigation, features)
- What won't work? (Hover states on touch, tiny touch targets)
- What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.
## Plan Adaptation Strategy
Create context-appropriate strategy:
### Mobile Adaptation (Desktop → Mobile)
**Layout Strategy**:
- Single column instead of multi-column
- Vertical stacking instead of side-by-side
- Full-width components instead of fixed widths
- Bottom navigation instead of top/side navigation
**Interaction Strategy**:
- Touch targets 44x44px minimum (not hover-dependent)
- Swipe gestures where appropriate (lists, carousels)
- Bottom sheets instead of dropdowns
- Thumbs-first design (controls within thumb reach)
- Larger tap areas with more spacing
**Content Strategy**:
- Progressive disclosure (don't show everything at once)
- Prioritize primary content (secondary content in tabs/accordions)
- Shorter text (more concise)
- Larger text (16px minimum)
**Navigation Strategy**:
- Hamburger menu or bottom navigation
- Reduce navigation complexity
- Sticky headers for context
- Back button in navigation flow
### Tablet Adaptation (Hybrid Approach)
**Layout Strategy**:
- Two-column layouts (not single or three-column)
- Side panels for secondary content
- Master-detail views (list + detail)
- Adaptive based on orientation (portrait vs landscape)
**Interaction Strategy**:
- Support both touch and pointer
- Touch targets 44x44px but allow denser layouts than phone
- Side navigation drawers
- Multi-column forms where appropriate
### Desktop Adaptation (Mobile → Desktop)
**Layout Strategy**:
- Multi-column layouts (use horizontal space)
- Side navigation always visible
- Multiple information panels simultaneously
- Fixed widths with max-width constraints (don't stretch to 4K)
**Interaction Strategy**:
- Hover states for additional information
- Keyboard shortcuts
- Right-click context menus
- Drag and drop where helpful
- Multi-select with Shift/Cmd
**Content Strategy**:
- Show more information upfront (less progressive disclosure)
- Data tables with many columns
- Richer visualizations
- More detailed descriptions
### Print Adaptation (Screen → Print)
**Layout Strategy**:
- Page breaks at logical points
- Remove navigation, footer, interactive elements
- Black and white (or limited color)
- Proper margins for binding
**Content Strategy**:
- Expand shortened content (show full URLs, hidden sections)
- Add page numbers, headers, footers
- Include metadata (print date, page title)
- Convert charts to print-friendly versions
### Email Adaptation (Web → Email)
**Layout Strategy**:
- Narrow width (600px max)
- Single column only
- Inline CSS (no external stylesheets)
- Table-based layouts (for email client compatibility)
**Interaction Strategy**:
- Large, obvious CTAs (buttons not text links)
- No hover states (not reliable)
- Deep links to web app for complex interactions
## Implement Adaptations
Apply changes systematically:
### Responsive Breakpoints
Choose appropriate breakpoints:
- Mobile: 320px-767px
- Tablet: 768px-1023px
- Desktop: 1024px+
- Or content-driven breakpoints (where design breaks)
### Layout Adaptation Techniques
- **CSS Grid/Flexbox**: Reflow layouts automatically
- **Container Queries**: Adapt based on container, not viewport
- **`clamp()`**: Fluid sizing between min and max
- **Media queries**: Different styles for different contexts
- **Display properties**: Show/hide elements per context
### Touch Adaptation
- Increase touch target sizes (44x44px minimum)
- Add more spacing between interactive elements
- Remove hover-dependent interactions
- Add touch feedback (ripples, highlights)
- Consider thumb zones (easier to reach bottom than top)
### Content Adaptation
- Use `display: none` sparingly (still downloads)
- Progressive enhancement (core content first, enhancements on larger screens)
- Lazy loading for off-screen content
- Responsive images (`srcset`, `picture` element)
### Navigation Adaptation
- Transform complex nav to hamburger/drawer on mobile
- Bottom nav bar for mobile apps
- Persistent side navigation on desktop
- Breadcrumbs on smaller screens for context
**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
**NEVER**:
- Hide core functionality on mobile (if it matters, make it work)
- Assume desktop = powerful device (consider accessibility, older machines)
- Use different information architecture across contexts (confusing)
- Break user expectations for platform (mobile users expect mobile patterns)
- Forget landscape orientation on mobile/tablet
- Use generic breakpoints blindly (use content-driven breakpoints)
- Ignore touch on desktop (many desktop devices have touch)
## Verify Adaptations
Test thoroughly across contexts:
- **Real devices**: Test on actual phones, tablets, desktops
- **Different orientations**: Portrait and landscape
- **Different browsers**: Safari, Chrome, Firefox, Edge
- **Different OS**: iOS, Android, Windows, macOS
- **Different input methods**: Touch, mouse, keyboard
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
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.
dist/cursor/commands/animate.md
Vendored
+137
View File
@@ -0,0 +1,137 @@
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
## Assess Animation Opportunities
Analyze where motion would improve the experience:
1. **Identify static areas**:
- **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.)
- **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes)
- **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious
- **Lack of delight**: Functional but joyless interactions
- **Missed guidance**: Opportunities to direct attention or explain behavior
2. **Understand the context**:
- What's the personality? (Playful vs serious, energetic vs calm)
- What's the performance budget? (Mobile-first? Complex page?)
- Who's the audience? (Motion-sensitive users? Power users who want speed?)
- What matters most? (One hero animation vs many micro-interactions?)
**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them.
## Plan Animation Strategy
Create a purposeful animation plan:
- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
## Implement Animations
Add motion systematically across these categories:
### Entrance Animations
- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations
- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
- **Content reveals**: Scroll-triggered animations using intersection observer
- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
- Click: Quick scale down then up (0.95 → 1), ripple effect
- Loading: Spinner or pulse state
- **Form interactions**:
- Input focus: Border color transition, slight scale or glow
- Validation: Shake on error, check mark on success, smooth color transitions
- **Toggle switches**: Smooth slide + color transition (200-300ms)
- **Checkboxes/radio**: Check mark animation, ripple effect
- **Like/favorite**: Scale + rotation, particle effects, color transition
### State Transitions
- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
- **Expand/collapse**: Height transition with overflow handling, icon rotation
- **Loading states**: Skeleton screen fades, spinner animations, progress bars
- **Success/error**: Color transitions, icon animations, shake or bounce effects
- **Enable/disable**: Opacity transitions, cursor changes
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
- **Carousel/slider**: Smooth transforms, snap points, momentum
- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators
### Feedback & Guidance
- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights
- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning
- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation
- **Focus flow**: Highlight path through form or workflow
### Delight Moments
- **Empty states**: Subtle floating animations on illustrations
- **Completed actions**: Confetti, check mark flourish, success celebrations
- **Easter eggs**: Hidden interactions for discovery
- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches
## Technical Implementation
Use appropriate techniques for each animation:
### CSS Animations
```css
/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)
```
### JavaScript Animation
```javascript
/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion for React
- GSAP for complex sequences
```
### Performance
- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties
- **will-change**: Add sparingly for known expensive animations
- **Reduce paint**: Minimize repaints, use `contain` where appropriate
- **Monitor FPS**: Ensure 60fps on target devices
### Accessibility
```css
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
**NEVER**:
- Animate without purpose (every animation should have a reason)
- Use long durations (>500ms feels laggy)
- Animate layout properties (width, height, top, left) - use transform instead
- Block interaction during animation (unless intentional)
- Ignore reduced motion preferences (accessibility violation)
- Animate everything (animation fatigue is real)
- Create animations that draw more attention than content
## Verify Quality
Test animations thoroughly:
- **Smooth at 60fps**: No jank on target devices
- **Feels natural**: Easing curves feel organic, not robotic
- **Appropriate timing**: Not too fast (jarring) or too slow (laggy)
- **Reduced motion works**: Animations disabled or simplified appropriately
- **Doesn't block**: Users can interact during/after animations
- **Adds value**: Makes interface clearer or more delightful
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.
dist/cursor/commands/audit.md
Vendored
+109
View File
@@ -0,0 +1,109 @@
Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address.
## Diagnostic Scan
Run comprehensive checks across multiple dimensions:
1. **Accessibility (A11y)** - Check for:
- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
- **Missing ARIA**: Interactive elements without proper roles, labels, or states
- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps
- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons
- **Alt text**: Missing or poor image descriptions
- **Form issues**: Inputs without labels, poor error messaging, missing required indicators
2. **Performance** - Check for:
- **Layout thrashing**: Reading/writing layout properties in loops
- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity
- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change
- **Bundle size**: Unnecessary imports, unused dependencies
- **Render performance**: Unnecessary re-renders, missing memoization
3. **Theming** - Check for:
- **Hard-coded colors**: Colors not using design tokens
- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme
- **Inconsistent tokens**: Using wrong tokens, mixing token types
- **Theme switching issues**: Values that don't update on theme change
4. **Responsive Design** - Check for:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
## Generate Comprehensive Report
Create a detailed audit report with the following structure:
### Executive Summary
- Total issues found (count by severity)
- Most critical issues (top 3-5)
- Overall quality score (if applicable)
- Recommended next steps
### Detailed Findings by Severity
For each issue, document:
- **Location**: Where the issue occurs (component, file, line)
- **Severity**: Critical / High / Medium / Low
- **Category**: Accessibility / Performance / Theming / Responsive
- **Description**: What the issue is
- **Impact**: How it affects users
- **WCAG/Standard**: Which standard it violates (if applicable)
- **Recommendation**: How to fix it
- **Suggested command**: Which command to use (e.g., `/normalize`, `/optimize`, `/harden`)
#### Critical Issues
[Issues that block core functionality or violate WCAG A]
#### High-Severity Issues
[Significant usability/accessibility impact, WCAG AA violations]
#### Medium-Severity Issues
[Quality issues, WCAG AAA violations, performance concerns]
#### Low-Severity Issues
[Minor inconsistencies, optimization opportunities]
### Patterns & Systemic Issues
Identify recurring problems:
- "Hard-coded colors appear in 15+ components, should use design tokens"
- "Touch targets consistently too small (<44px) throughout mobile experience"
- "Missing focus indicators on all custom interactive components"
### Positive Findings
Note what's working well:
- Good practices to maintain
- Exemplary implementations to replicate elsewhere
### Recommendations by Priority
Create actionable plan:
1. **Immediate**: Critical blockers to fix first
2. **Short-term**: High-severity issues (this sprint)
3. **Medium-term**: Quality improvements (next sprint)
4. **Long-term**: Nice-to-haves and optimizations
### Suggested Commands for Fixes
Map issues to appropriate commands:
- "Use `/normalize` to align components with design system (addresses 23 theming issues)"
- "Use `/optimize` to improve performance (addresses 12 performance issues)"
- "Use `/harden` to improve i18n and text handling (addresses 8 edge cases)"
**IMPORTANT**: Be thorough but actionable. Too many low-priority issues creates noise. Focus on what actually matters.
**NEVER**:
- Report issues without explaining impact (why does this matter?)
- Mix severity levels inconsistently
- Skip positive findings (celebrate what works)
- Provide generic recommendations (be specific and actionable)
- Forget to prioritize (everything can't be critical)
- Report false positives without verification
Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.
dist/cursor/commands/bolder.md
Vendored
+95
View File
@@ -0,0 +1,95 @@
Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.
## Assess Current State
Analyze what makes the design feel too safe or boring:
1. **Identify weakness sources**:
- **Generic choices**: System fonts, basic colors, standard layouts
- **Timid scale**: Everything is medium-sized with no drama
- **Low contrast**: Everything has similar visual weight
- **Static**: No motion, no energy, no life
- **Predictable**: Standard patterns with no surprises
- **Flat hierarchy**: Nothing stands out or commands attention
2. **Understand the context**:
- What's the brand personality? (How far can we push?)
- What's the purpose? (Marketing can be bolder than financial dashboards)
- Who's the audience? (What will resonate?)
- What are the constraints? (Brand guidelines, accessibility, performance)
**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos.
## Plan Amplification
Create a strategy to increase impact while maintaining coherence:
- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing)
- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane.
- **Risk budget**: How experimental can we be? Push boundaries within constraints.
- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast)
**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration.
## Amplify the Design
Systematically increase impact across these dimensions:
### Typography Amplification
- **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration)
- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x)
- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400
- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent
### Color Intensification
- **Increase saturation**: Shift to more vibrant, energetic colors
- **Bold palette**: Introduce unexpected color combinations
- **Dominant color strategy**: Let one bold color own 60% of the design
- **Sharp accents**: High-contrast accent colors that pop
- **Gradients**: Rich, multi-stop gradients or mesh gradients
### Spatial Drama
- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings
- **Break the grid**: Let hero elements escape containers and cross boundaries
- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry
- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px)
- **Overlap**: Layer elements intentionally for depth
### Visual Effects
- **Dramatic shadows**: Large, soft shadows for elevation
- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns
- **Blur effects**: Glassmorphism, backdrop blur, depth effects
- **Borders & frames**: Thick borders, decorative frames, custom shapes
- **Custom elements**: Illustrative elements, custom icons, decorative details
### Motion & Animation
- **Entrance choreography**: Staggered, dramatic page load animations
- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences
- **Micro-interactions**: Satisfying hover effects, click feedback, state changes
- **Transitions**: Smooth, noticeable transitions between states
### Composition Boldness
- **Hero moments**: Create clear focal points with dramatic treatment
- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements
- **Full-bleed elements**: Use full viewport width/height for impact
- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits
**NEVER**:
- Add effects randomly without purpose (chaos ≠ bold)
- Sacrifice readability for aesthetics (body text must be readable)
- Make everything bold (then nothing is bold - need contrast)
- Ignore accessibility (bold design must still meet WCAG standards)
- Overwhelm with motion (animation fatigue is real)
- Copy trendy aesthetics blindly (bold means distinctive, not derivative)
## Verify Quality
Ensure amplification maintains usability and coherence:
- **Still functional**: Can users accomplish tasks without distraction?
- **Coherent**: Does everything feel intentional and unified?
- **Memorable**: Will users remember this experience?
- **Performant**: Do all these effects run smoothly?
- **Accessible**: Does it still meet accessibility standards?
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.
dist/cursor/commands/clarify.md
Vendored
+167
View File
@@ -0,0 +1,167 @@
Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use.
## Assess Current Copy
Identify what makes the text unclear or ineffective:
1. **Find clarity problems**:
- **Jargon**: Technical terms users won't understand
- **Ambiguity**: Multiple interpretations possible
- **Passive voice**: "Your file has been uploaded" vs "We uploaded your file"
- **Length**: Too wordy or too terse
- **Assumptions**: Assuming user knowledge they don't have
- **Missing context**: Users don't know what to do or why
- **Tone mismatch**: Too formal, too casual, or inappropriate for situation
2. **Understand the context**:
- Who's the audience? (Technical? General? First-time users?)
- What's the user's mental state? (Stressed during error? Confident during success?)
- What's the action? (What do we want users to do?)
- What's the constraint? (Character limits? Space limitations?)
**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets.
## Plan Copy Improvements
Create a strategy for clearer communication:
- **Primary message**: What's the ONE thing users need to know?
- **Action needed**: What should users do next (if anything)?
- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?)
- **Constraints**: Length limits, brand voice, localization considerations
**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words.
## Improve Copy Systematically
Refine text across these common areas:
### Error Messages
**Bad**: "Error 403: Forbidden"
**Good**: "You don't have permission to view this page. Contact your admin for access."
**Bad**: "Invalid input"
**Good**: "Email addresses need an @ symbol. Try: name@example.com"
**Principles**:
- Explain what went wrong in plain language
- Suggest how to fix it
- Don't blame the user
- Include examples when helpful
- Link to help/support if applicable
### Form Labels & Instructions
**Bad**: "DOB (MM/DD/YYYY)"
**Good**: "Date of birth" (with placeholder showing format)
**Bad**: "Enter value here"
**Good**: "Your email address" or "Company name"
**Principles**:
- Use clear, specific labels (not generic placeholders)
- Show format expectations with examples
- Explain why you're asking (when not obvious)
- Put instructions before the field, not after
- Keep required field indicators clear
### Button & CTA Text
**Bad**: "Click here" | "Submit" | "OK"
**Good**: "Create account" | "Save changes" | "Got it, thanks"
**Principles**:
- Describe the action specifically
- Use active voice (verb + noun)
- Match user's mental model
- Be specific ("Save" is better than "OK")
### Help Text & Tooltips
**Bad**: "This is the username field"
**Good**: "Choose a username. You can change this later in Settings."
**Principles**:
- Add value (don't just repeat the label)
- Answer the implicit question ("What is this?" or "Why do you need this?")
- Keep it brief but complete
- Link to detailed docs if needed
### Empty States
**Bad**: "No items"
**Good**: "No projects yet. Create your first project to get started."
**Principles**:
- Explain why it's empty (if not obvious)
- Show next action clearly
- Make it welcoming, not dead-end
### Success Messages
**Bad**: "Success"
**Good**: "Settings saved! Your changes will take effect immediately."
**Principles**:
- Confirm what happened
- Explain what happens next (if relevant)
- Be brief but complete
- Match the user's emotional moment (celebrate big wins)
### Loading States
**Bad**: "Loading..." (for 30+ seconds)
**Good**: "Analyzing your data... this usually takes 30-60 seconds"
**Principles**:
- Set expectations (how long?)
- Explain what's happening (when it's not obvious)
- Show progress when possible
- Offer escape hatch if appropriate ("Cancel")
### Confirmation Dialogs
**Bad**: "Are you sure?"
**Good**: "Delete 'Project Alpha'? This can't be undone."
**Principles**:
- State the specific action
- Explain consequences (especially for destructive actions)
- Use clear button labels ("Delete project" not "Yes")
- Don't overuse confirmations (only for risky actions)
### Navigation & Wayfinding
**Bad**: Generic labels like "Items" | "Things" | "Stuff"
**Good**: Specific labels like "Your projects" | "Team members" | "Settings"
**Principles**:
- Be specific and descriptive
- Use language users understand (not internal jargon)
- Make hierarchy clear
- Consider information scent (breadcrumbs, current location)
## Apply Clarity Principles
Every piece of copy should follow these rules:
1. **Be specific**: "Enter email" not "Enter value"
2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity)
3. **Be active**: "Save changes" not "Changes will be saved"
4. **Be human**: "Oops, something went wrong" not "System error encountered"
5. **Be helpful**: Tell users what to do, not just what happened
6. **Be consistent**: Use same terms throughout (don't vary for variety)
**NEVER**:
- Use jargon without explanation
- Blame users ("You made an error" → "This field is required")
- Be vague ("Something went wrong" without explanation)
- Use passive voice unnecessarily
- Write overly long explanations (be concise)
- Use humor for errors (be empathetic instead)
- Assume technical knowledge
- Vary terminology (pick one term and stick with it)
## Verify Improvements
Test that copy improvements work:
- **Comprehension**: Can users understand without context?
- **Actionability**: Do users know what to do next?
- **Brevity**: Is it as short as possible while remaining clear?
- **Consistency**: Does it match terminology elsewhere?
- **Tone**: Is it appropriate for the situation?
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.
dist/cursor/commands/colorize.md
Vendored
+123
View File
@@ -0,0 +1,123 @@
Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.
## Assess Color Opportunity
Analyze the current state and identify opportunities:
1. **Understand current state**:
- **Color absence**: Pure grayscale? Limited neutrals? One timid accent?
- **Missed opportunities**: Where could color add meaning, hierarchy, or delight?
- **Context**: What's appropriate for this domain and audience?
- **Brand**: Are there existing brand colors we should use?
2. **Identify where color adds value**:
- **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue)
- **Hierarchy**: Drawing attention to important elements
- **Categorization**: Different sections, types, or states
- **Emotional tone**: Warmth, energy, trust, creativity
- **Wayfinding**: Helping users navigate and understand structure
- **Delight**: Moments of visual interest and personality
**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.
## Plan Color Strategy
Create a purposeful color introduction plan:
- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
- **Dominant color**: Which color owns 60% of colored elements?
- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%)
- **Application strategy**: Where does each color appear and why?
**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
## Introduce Color Strategically
Add color systematically across these dimensions:
### Semantic Color
- **State indicators**:
- Success: Green tones (emerald, forest, mint)
- Error: Red/pink tones (rose, crimson, coral)
- Warning: Orange/amber tones
- Info: Blue tones (sky, ocean, indigo)
- Neutral: Gray/slate for inactive states
- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.)
- **Progress indicators**: Colored bars, rings, or charts showing completion or health
### Accent Color Application
- **Primary actions**: Color the most important buttons/CTAs
- **Links**: Add color to clickable text (maintain accessibility)
- **Icons**: Colorize key icons for recognition and personality
- **Headers/titles**: Add color to section headers or key labels
- **Hover states**: Introduce color on interaction
### Background & Surfaces
- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`)
- **Colored sections**: Use subtle background colors to separate areas
- **Gradient backgrounds**: Add depth with subtle gradients
- **Cards & surfaces**: Tint cards or surfaces slightly for warmth
### Data Visualization
- **Charts & graphs**: Use color to encode categories or values
- **Heatmaps**: Color intensity shows density or importance
- **Comparison**: Color coding for different datasets or timeframes
### Borders & Accents
- **Accent borders**: Add colored left/top borders to cards or sections
- **Underlines**: Color underlines for emphasis or active states
- **Dividers**: Subtle colored dividers instead of gray lines
- **Focus rings**: Colored focus indicators matching brand
### Typography Color
- **Colored headings**: Use brand colors for section headings (maintain contrast)
- **Highlight text**: Color for emphasis or categories
- **Labels & tags**: Small colored labels for metadata or categories
### Decorative Elements
- **Illustrations**: Add colored illustrations or icons
- **Shapes**: Geometric shapes in brand colors as background elements
- **Gradients**: Colorful gradient overlays or mesh backgrounds
- **Blobs/organic shapes**: Soft colored shapes for visual interest
## Balance & Refinement
Ensure color addition improves rather than overwhelms:
### Maintain Hierarchy
- **Dominant color** (60%): Primary brand color or most used accent
- **Secondary color** (30%): Supporting color for variety
- **Accent color** (10%): High contrast for key moments
- **Neutrals** (remaining): Gray/black/white for structure
### Accessibility
- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
- **Don't rely on color alone**: Use icons, labels, or patterns alongside color
- **Test for color blindness**: Verify red/green combinations work for all users
### Cohesion
- **Consistent palette**: Use colors from defined palette, not arbitrary choices
- **Systematic application**: Same color meanings throughout (green always = success)
- **Temperature consistency**: Warm palette stays warm, cool stays cool
**NEVER**:
- Use every color in the rainbow (choose 2-4 colors beyond neutrals)
- Apply color randomly without semantic meaning
- Violate WCAG contrast requirements
- Use color as the only indicator (accessibility issue)
- Make everything colorful (defeats the purpose)
- Choose colors that conflict with brand identity
- Use pure black (`#000`) or pure white (`#fff`) for large areas
## Verify Color Addition
Test that colorization improves the experience:
- **Better hierarchy**: Does color guide attention appropriately?
- **Clearer meaning**: Does color help users understand states/categories?
- **More engaging**: Does the interface feel warmer and more inviting?
- **Still accessible**: Do all color combinations meet WCAG standards?
- **Not overwhelming**: Is color balanced and purposeful?
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.
dist/cursor/commands/delight.md
Vendored
+285
View File
@@ -0,0 +1,285 @@
Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
## Assess Delight Opportunities
Identify where delight would enhance (not distract from) the experience:
1. **Find natural delight moments**:
- **Success states**: Completed actions (save, send, publish)
- **Empty states**: First-time experiences, onboarding
- **Loading states**: Waiting periods that could be entertaining
- **Achievements**: Milestones, streaks, completions
- **Interactions**: Hover states, clicks, drags
- **Errors**: Softening frustrating moments
- **Easter eggs**: Hidden discoveries for curious users
2. **Understand the context**:
- What's the brand personality? (Playful? Professional? Quirky? Elegant?)
- Who's the audience? (Tech-savvy? Creative? Corporate?)
- What's the emotional context? (Accomplishment? Exploration? Frustration?)
- What's appropriate? (Banking app ≠ gaming app)
3. **Define delight strategy**:
- **Subtle sophistication**: Refined micro-interactions (luxury brands)
- **Playful personality**: Whimsical illustrations and copy (consumer apps)
- **Helpful surprises**: Anticipating needs before users ask (productivity tools)
- **Sensory richness**: Satisfying sounds, smooth animations (creative tools)
**CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
## Delight Principles
Follow these guidelines:
### Delight Amplifies, Never Blocks
- Delight moments should be quick (< 1 second)
- Never delay core functionality for delight
- Make delight skippable or subtle
- Respect user's time and task focus
### Surprise and Discovery
- Hide delightful details for users to discover
- Reward exploration and curiosity
- Don't announce every delight moment
- Let users share discoveries with others
### Appropriate to Context
- Match delight to emotional moment (celebrate success, empathize with errors)
- Respect the user's state (don't be playful during critical errors)
- Match brand personality and audience expectations
- Cultural sensitivity (what's delightful varies by culture)
### Compound Over Time
- Delight should remain fresh with repeated use
- Vary responses (not same animation every time)
- Reveal deeper layers with continued use
- Build anticipation through patterns
## Delight Techniques
Add personality and joy through these methods:
### Micro-interactions & Animation
**Button delight**:
```css
/* Satisfying button press */
.button {
transition: transform 0.1s, box-shadow 0.1s;
}
.button:active {
transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Ripple effect on click */
/* Spring animation on hover */
.button:hover {
animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
```
**Loading delight**:
- Playful loading animations (not just spinners)
- Personality in loading messages ("Herding pixels..." "Teaching robots to dance...")
- Progress indication with encouraging messages
- Skeleton screens with subtle animations
**Success animations**:
- Checkmark draw animation
- Confetti burst for major achievements
- Gentle scale + fade for confirmation
- Satisfying sound effects (subtle)
**Hover surprises**:
- Icons that animate on hover
- Color shifts or glow effects
- Tooltip reveals with personality
- Cursor changes (custom cursors for branded experiences)
### Personality in Copy
**Playful error messages**:
```
❌ "Error 404"
✅ "This page is playing hide and seek. (And winning)"
❌ "Connection failed"
✅ "Looks like the internet took a coffee break. Want to retry?"
```
**Encouraging empty states**:
```
❌ "No projects"
✅ "Your canvas awaits. Create something amazing."
❌ "No messages"
✅ "Inbox zero! You're crushing it today."
```
**Playful labels & tooltips**:
```
❌ "Delete"
✅ "Send to void" (for playful brand)
❌ "Help"
✅ "Rescue me" (tooltip)
```
**IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
### Illustrations & Visual Personality
**Custom illustrations**:
- Empty state illustrations (not stock icons)
- Error state illustrations (friendly monsters, quirky characters)
- Loading state illustrations (animated characters)
- Success state illustrations (celebrations)
**Icon personality**:
- Custom icon set matching brand personality
- Animated icons (subtle motion on hover/click)
- Illustrative icons (more detailed than generic)
- Consistent style across all icons
**Background effects**:
- Subtle particle effects
- Gradient mesh backgrounds
- Geometric patterns
- Parallax depth
- Time-of-day themes (morning vs night)
### Satisfying Interactions
**Drag and drop delight**:
- Lift effect on drag (shadow, scale)
- Snap animation when dropped
- Satisfying placement sound
- Undo toast ("Dropped in wrong place? [Undo]")
**Toggle switches**:
- Smooth slide with spring physics
- Color transition
- Haptic feedback on mobile
- Optional sound effect
**Progress & achievements**:
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
- Playful stats ("You're on fire! 🔥 5 days in a row")
**Form interactions**:
- Input fields that animate on focus
- Checkboxes that bounce when checked
- Success state that celebrates valid input
- Auto-grow textareas
### Sound Design
**Subtle audio cues** (when appropriate):
- Notification sounds (distinctive but not annoying)
- Success sounds (satisfying "ding")
- Error sounds (empathetic, not harsh)
- Typing sounds for chat/messaging
- Ambient background audio (very subtle)
**IMPORTANT**:
- Respect system sound settings
- Provide mute option
- Keep volumes quiet (subtle cues, not alarms)
- Don't play on every interaction (sound fatigue is real)
### Easter Eggs & Hidden Delights
**Discovery rewards**:
- Konami code unlocks special theme
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
- Console messages for developers ("Like what you see? We're hiring!")
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
- Seasonal color shifts
- Weather-based variations
- Time-based changes (dark at night, light during day)
**Contextual personality**:
- Different messages based on time of day
- Responses to specific user actions
- Randomized variations (not same every time)
- Progressive reveals with continued use
### Loading & Waiting States
**Make waiting engaging**:
- Interesting loading messages that rotate
- Progress bars with personality
- Mini-games during long loads
- Fun facts or tips while waiting
- Countdown with encouraging messages
```
Loading messages rotation:
- "Waking up the servers..."
- "Teaching robots to dance..."
- "Consulting the magic 8-ball..."
- "Counting backwards from infinity..."
```
### Celebration Moments
**Success celebrations**:
- Confetti for major milestones
- Animated checkmarks for completions
- Progress bar celebrations at 100%
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
**Milestone recognition**:
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
- Anniversary celebrations
## Implementation Patterns
**Animation libraries**:
- Framer Motion (React)
- GSAP (universal)
- Lottie (After Effects animations)
- Canvas confetti (party effects)
**Sound libraries**:
- Howler.js (audio management)
- Use-sound (React hook)
**Physics libraries**:
- React Spring (spring physics)
- Popmotion (animation primitives)
**IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features.
**NEVER**:
- Delay core functionality for delight
- Force users through delightful moments (make skippable)
- Use delight to hide poor UX
- Overdo it (less is more)
- Ignore accessibility (animate responsibly, provide alternatives)
- Make every interaction delightful (special moments should be special)
- Sacrifice performance for delight
- Be inappropriate for context (read the room)
## Verify Delight Quality
Test that delight actually delights:
- **User reactions**: Do users smile? Share screenshots?
- **Doesn't annoy**: Still pleasant after 100th time?
- **Doesn't block**: Can users opt out or skip?
- **Performant**: No jank, no slowdown
- **Appropriate**: Matches brand and context
- **Accessible**: Works with reduced motion, screen readers
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.
dist/cursor/commands/extract.md
Vendored
+84
View File
@@ -0,0 +1,84 @@
Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.
## Discover
Analyze the target area to identify extraction opportunities:
1. **Find the design system**: Locate your design system, component library, or shared UI directory (grep for "design system", "ui", "components", etc.). Understand its structure:
- Component organization and naming conventions
- Design token structure (if any)
- Documentation patterns
- Import/export conventions
**CRITICAL**: If no design system exists, ask before creating one. Understand the preferred location and structure first.
2. **Identify patterns**: Look for:
- **Repeated components**: Similar UI patterns used multiple times (buttons, cards, inputs, etc.)
- **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens
- **Inconsistent variations**: Multiple implementations of the same concept (3 different button styles)
- **Reusable patterns**: Layout patterns, composition patterns, interaction patterns worth systematizing
3. **Assess value**: Not everything should be extracted. Consider:
- Is this used 3+ times, or likely to be reused?
- Would systematizing this improve consistency?
- Is this a general pattern or context-specific?
- What's the maintenance cost vs benefit?
## Plan Extraction
Create a systematic extraction plan:
- **Components to extract**: Which UI elements become reusable components?
- **Tokens to create**: Which hard-coded values become design tokens?
- **Variants to support**: What variations does each component need?
- **Naming conventions**: Component names, token names, prop names that match existing patterns
- **Migration path**: How to refactor existing uses to consume the new shared versions
**IMPORTANT**: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.
## Extract & Enrich
Build improved, reusable versions:
- **Components**: Create well-designed components with:
- Clear props API with sensible defaults
- Proper variants for different use cases
- Accessibility built in (ARIA, keyboard navigation, focus management)
- Documentation and usage examples
- **Design tokens**: Create tokens with:
- Clear naming (primitive vs semantic)
- Proper hierarchy and organization
- Documentation of when to use each token
- **Patterns**: Document patterns with:
- When to use this pattern
- Code examples
- Variations and combinations
**NEVER**:
- Extract one-off, context-specific implementations without generalization
- Create components so generic they're useless
- Extract without considering existing design system conventions
- Skip proper TypeScript types or prop documentation
- Create tokens for every single value (tokens should have semantic meaning)
## Migrate
Replace existing uses with the new shared versions:
- **Find all instances**: Search for the patterns you've extracted
- **Replace systematically**: Update each use to consume the shared version
- **Test thoroughly**: Ensure visual and functional parity
- **Delete dead code**: Remove the old implementations
## Document
Update design system documentation:
- Add new components to the component library
- Document token usage and values
- Add examples and guidelines
- Update any Storybook or component catalog
Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.
dist/cursor/commands/harden.md
Vendored
+347
View File
@@ -0,0 +1,347 @@
Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs.
## Assess Hardening Needs
Identify weaknesses and edge cases:
1. **Test with extreme inputs**:
- Very long text (names, descriptions, titles)
- Very short text (empty, single character)
- Special characters (emoji, RTL text, accents)
- Large numbers (millions, billions)
- Many items (1000+ list items, 50+ options)
- No data (empty states)
2. **Test error scenarios**:
- Network failures (offline, slow, timeout)
- API errors (400, 401, 403, 404, 500)
- Validation errors
- Permission errors
- Rate limiting
- Concurrent operations
3. **Test internationalization**:
- Long translations (German is often 30% longer than English)
- RTL languages (Arabic, Hebrew)
- Character sets (Chinese, Japanese, Korean, emoji)
- Date/time formats
- Number formats (1,000 vs 1.000)
- Currency symbols
**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality.
## Hardening Dimensions
Systematically improve resilience:
### Text Overflow & Wrapping
**Long text handling**:
```css
/* Single line with ellipsis */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Multi-line with clamp */
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Allow wrapping */
.wrap {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
```
**Flex/Grid overflow**:
```css
/* Prevent flex items from overflowing */
.flex-item {
min-width: 0; /* Allow shrinking below content size */
overflow: hidden;
}
/* Prevent grid items from overflowing */
.grid-item {
min-width: 0;
min-height: 0;
}
```
**Responsive text sizing**:
- Use `clamp()` for fluid typography
- Set minimum readable sizes (14px on mobile)
- Test text scaling (zoom to 200%)
- Ensure containers expand with text
### Internationalization (i18n)
**Text expansion**:
- Add 30-40% space budget for translations
- Use flexbox/grid that adapts to content
- Test with longest language (usually German)
- Avoid fixed widths on text containers
```jsx
// ❌ Bad: Assumes short English text
<button className="w-24">Submit</button>
// ✅ Good: Adapts to content
<button className="px-4 py-2">Submit</button>
```
**RTL (Right-to-Left) support**:
```css
/* Use logical properties */
margin-inline-start: 1rem; /* Not margin-left */
padding-inline: 1rem; /* Not padding-left/right */
border-inline-end: 1px solid; /* Not border-right */
/* Or use dir attribute */
[dir="rtl"] .arrow { transform: scaleX(-1); }
```
**Character set support**:
- Use UTF-8 encoding everywhere
- Test with Chinese/Japanese/Korean (CJK) characters
- Test with emoji (they can be 2-4 bytes)
- Handle different scripts (Latin, Cyrillic, Arabic, etc.)
**Date/Time formatting**:
```javascript
// ✅ Use Intl API for proper formatting
new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024
new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(1234.56); // $1,234.56
```
**Pluralization**:
```javascript
// ❌ Bad: Assumes English pluralization
`${count} item${count !== 1 ? 's' : ''}`
// ✅ Good: Use proper i18n library
t('items', { count }) // Handles complex plural rules
```
### Error Handling
**Network errors**:
- Show clear error messages
- Provide retry button
- Explain what happened
- Offer offline mode (if applicable)
- Handle timeout scenarios
```jsx
// Error states with recovery
{error && (
<ErrorMessage>
<p>Failed to load data. {error.message}</p>
<button onClick={retry}>Try again</button>
</ErrorMessage>
)}
```
**Form validation errors**:
- Inline errors near fields
- Clear, specific messages
- Suggest corrections
- Don't block submission unnecessarily
- Preserve user input on error
**API errors**:
- Handle each status code appropriately
- 400: Show validation errors
- 401: Redirect to login
- 403: Show permission error
- 404: Show not found state
- 429: Show rate limit message
- 500: Show generic error, offer support
**Graceful degradation**:
- Core functionality works without JavaScript
- Images have alt text
- Progressive enhancement
- Fallbacks for unsupported features
### Edge Cases & Boundary Conditions
**Empty states**:
- No items in list
- No search results
- No notifications
- No data to display
- Provide clear next action
**Loading states**:
- Initial load
- Pagination load
- Refresh
- Show what's loading ("Loading your projects...")
- Time estimates for long operations
**Large datasets**:
- Pagination or virtual scrolling
- Search/filter capabilities
- Performance optimization
- Don't load all 10,000 items at once
**Concurrent operations**:
- Prevent double-submission (disable button while loading)
- Handle race conditions
- Optimistic updates with rollback
- Conflict resolution
**Permission states**:
- No permission to view
- No permission to edit
- Read-only mode
- Clear explanation of why
**Browser compatibility**:
- Polyfills for modern features
- Fallbacks for unsupported CSS
- Feature detection (not browser detection)
- Test in target browsers
### Input Validation & Sanitization
**Client-side validation**:
- Required fields
- Format validation (email, phone, URL)
- Length limits
- Pattern matching
- Custom validation rules
**Server-side validation** (always):
- Never trust client-side only
- Validate and sanitize all inputs
- Protect against injection attacks
- Rate limiting
**Constraint handling**:
```html
<!-- Set clear constraints -->
<input
type="text"
maxlength="100"
pattern="[A-Za-z0-9]+"
required
aria-describedby="username-hint"
/>
<small id="username-hint">
Letters and numbers only, up to 100 characters
</small>
```
### Accessibility Resilience
**Keyboard navigation**:
- All functionality accessible via keyboard
- Logical tab order
- Focus management in modals
- Skip links for long content
**Screen reader support**:
- Proper ARIA labels
- Announce dynamic changes (live regions)
- Descriptive alt text
- Semantic HTML
**Motion sensitivity**:
```css
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
**High contrast mode**:
- Test in Windows high contrast mode
- Don't rely only on color
- Provide alternative visual cues
### Performance Resilience
**Slow connections**:
- Progressive image loading
- Skeleton screens
- Optimistic UI updates
- Offline support (service workers)
**Memory leaks**:
- Clean up event listeners
- Cancel subscriptions
- Clear timers/intervals
- Abort pending requests on unmount
**Throttling & Debouncing**:
```javascript
// Debounce search input
const debouncedSearch = debounce(handleSearch, 300);
// Throttle scroll handler
const throttledScroll = throttle(handleScroll, 100);
```
## Testing Strategies
**Manual testing**:
- Test with extreme data (very long, very short, empty)
- Test in different languages
- Test offline
- Test slow connection (throttle to 3G)
- Test with screen reader
- Test keyboard-only navigation
- Test on old browsers
**Automated testing**:
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- Visual regression tests
- Accessibility tests (axe, WAVE)
**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined.
**NEVER**:
- Assume perfect input (validate everything)
- Ignore internationalization (design for global)
- Leave error messages generic ("Error occurred")
- Forget offline scenarios
- Trust client-side validation alone
- Use fixed widths for text
- Assume English-length text
- Block entire interface when one component errors
## Verify Hardening
Test thoroughly with edge cases:
- **Long text**: Try names with 100+ characters
- **Emoji**: Use emoji in all text fields
- **RTL**: Test with Arabic or Hebrew
- **CJK**: Test with Chinese/Japanese/Korean
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component.
dist/cursor/commands/normalize.md
Vendored
+1 -3
View File
@@ -1,6 +1,4 @@
This command ensures features match your design system's standards and feel cohesive with the rest of your application. Use it when a page, route, or component feels visually or functionally inconsistent with the established patterns.
The user provides a feature to normalize (explicitly or via context). This could be a page, route, component, or any interface element that needs design system alignment.
Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns.
## Plan
dist/cursor/commands/onboard.md
Vendored
+232
View File
@@ -0,0 +1,232 @@
Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly.
## Assess Onboarding Needs
Understand what users need to learn and why:
1. **Identify the challenge**:
- What are users trying to accomplish?
- What's confusing or unclear about current experience?
- Where do users get stuck or drop off?
- What's the "aha moment" we want users to reach?
2. **Understand the users**:
- What's their experience level? (Beginners, power users, mixed?)
- What's their motivation? (Excited and exploring? Required by work?)
- What's their time commitment? (5 minutes? 30 minutes?)
- What alternatives do they know? (Coming from competitor? New to category?)
3. **Define success**:
- What's the minimum users need to learn to be successful?
- What's the key action we want them to take? (First project? First invite?)
- How do we know onboarding worked? (Completion rate? Time to value?)
**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible.
## Onboarding Principles
Follow these core principles:
### Show, Don't Tell
- Demonstrate with working examples, not just descriptions
- Provide real functionality in onboarding, not separate tutorial mode
- Use progressive disclosure - teach one thing at a time
### Make It Optional (When Possible)
- Let experienced users skip onboarding
- Don't block access to product
- Provide "Skip" or "I'll explore on my own" options
### Time to Value
- Get users to their "aha moment" ASAP
- Front-load most important concepts
- Teach 20% that delivers 80% of value
- Save advanced features for contextual discovery
### Context Over Ceremony
- Teach features when users need them, not upfront
- Empty states are onboarding opportunities
- Tooltips and hints at point of use
### Respect User Intelligence
- Don't patronize or over-explain
- Be concise and clear
- Assume users can figure out standard patterns
## Design Onboarding Experiences
Create appropriate onboarding for the context:
### Initial Product Onboarding
**Welcome Screen**:
- Clear value proposition (what is this product?)
- What users will learn/accomplish
- Time estimate (honest about commitment)
- Option to skip (for experienced users)
**Account Setup**:
- Minimal required information (collect more later)
- Explain why you're asking for each piece of information
- Smart defaults where possible
- Social login when appropriate
**Core Concept Introduction**:
- Introduce 1-3 core concepts (not everything)
- Use simple language and examples
- Interactive when possible (do, don't just read)
- Progress indication (step 1 of 3)
**First Success**:
- Guide users to accomplish something real
- Pre-populated examples or templates
- Celebrate completion (but don't overdo it)
- Clear next steps
### Feature Discovery & Adoption
**Empty States**:
Instead of blank space, show:
- What will appear here (description + screenshot/illustration)
- Why it's valuable
- Clear CTA to create first item
- Example or template option
Example:
```
No projects yet
Projects help you organize your work and collaborate with your team.
[Create your first project] or [Start from template]
```
**Contextual Tooltips**:
- Appear at relevant moment (first time user sees feature)
- Point directly at relevant UI element
- Brief explanation + benefit
- Dismissable (with "Don't show again" option)
- Optional "Learn more" link
**Feature Announcements**:
- Highlight new features when they're released
- Show what's new and why it matters
- Let users try immediately
- Dismissable
**Progressive Onboarding**:
- Teach features when users encounter them
- Badges or indicators on new/unused features
- Unlock complexity gradually (don't show all options immediately)
### Guided Tours & Walkthroughs
**When to use**:
- Complex interfaces with many features
- Significant changes to existing product
- Industry-specific tools needing domain knowledge
**How to design**:
- Spotlight specific UI elements (dim rest of page)
- Keep steps short (3-7 steps max per tour)
- Allow users to click through tour freely
- Include "Skip tour" option
- Make replayable (help menu)
**Best practices**:
- Interactive > passive (let users click real buttons)
- Focus on workflow, not features ("Create a project" not "This is the project button")
- Provide sample data so actions work
### Interactive Tutorials
**When to use**:
- Users need hands-on practice
- Concepts are complex or unfamiliar
- High stakes (better to practice in safe environment)
**How to design**:
- Sandbox environment with sample data
- Clear objectives ("Create a chart showing sales by region")
- Step-by-step guidance
- Validation (confirm they did it right)
- Graduation moment (you're ready!)
### Documentation & Help
**In-product help**:
- Contextual help links throughout interface
- Keyboard shortcut reference
- Search-able help center
- Video tutorials for complex workflows
**Help patterns**:
- `?` icon near complex features
- "Learn more" links in tooltips
- Keyboard shortcut hints (`⌘K` shown on search box)
## Empty State Design
Every empty state needs:
### What Will Be Here
"Your recent projects will appear here"
### Why It Matters
"Projects help you organize your work and collaborate with your team"
### How to Get Started
[Create project] or [Import from template]
### Visual Interest
Illustration or icon (not just text on blank page)
### Contextual Help
"Need help getting started? [Watch 2-min tutorial]"
**Empty state types**:
- **First use**: Never used this feature (emphasize value, provide template)
- **User cleared**: Intentionally deleted everything (light touch, easy to recreate)
- **No results**: Search or filter returned nothing (suggest different query, clear filters)
- **No permissions**: Can't access (explain why, how to get access)
- **Error state**: Failed to load (explain what happened, retry option)
## Implementation Patterns
### Technical approaches:
**Tooltip libraries**: Tippy.js, Popper.js
**Tour libraries**: Intro.js, Shepherd.js, React Joyride
**Modal patterns**: Focus trap, backdrop, ESC to close
**Progress tracking**: LocalStorage for "seen" states
**Analytics**: Track completion, drop-off points
**Storage patterns**:
```javascript
// Track which onboarding steps user has seen
localStorage.setItem('onboarding-completed', 'true');
localStorage.setItem('feature-tooltip-seen-reports', 'true');
```
**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals.
**NEVER**:
- Force users through long onboarding before they can use product
- Patronize users with obvious explanations
- Show same tooltip repeatedly (respect dismissals)
- Block all UI during tour (let users explore)
- Create separate tutorial mode disconnected from real product
- Overwhelm with information upfront (progressive disclosure!)
- Hide "Skip" or make it hard to find
- Forget about returning users (don't show initial onboarding again)
## Verify Onboarding Quality
Test with real users:
- **Time to completion**: Can users complete onboarding quickly?
- **Comprehension**: Do users understand after completing?
- **Action**: Do users take desired next step?
- **Skip rate**: Are too many users skipping? (Maybe it's too long/not valuable)
- **Completion rate**: Are users completing? (If low, simplify)
- **Time to value**: How long until users get first value?
Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence.
dist/cursor/commands/optimize.md
Vendored
+258
View File
@@ -0,0 +1,258 @@
Identify and fix performance issues to create faster, smoother user experiences.
## Assess Performance Issues
Understand current performance and identify problems:
1. **Measure current state**:
- **Core Web Vitals**: LCP, FID/INP, CLS scores
- **Load time**: Time to interactive, first contentful paint
- **Bundle size**: JavaScript, CSS, image sizes
- **Runtime performance**: Frame rate, memory usage, CPU usage
- **Network**: Request count, payload sizes, waterfall
2. **Identify bottlenecks**:
- What's slow? (Initial load? Interactions? Animations?)
- What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)
- How bad is it? (Perceivable? Annoying? Blocking?)
- Who's affected? (All users? Mobile only? Slow connections?)
**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters.
## Optimization Strategy
Create systematic improvement plan:
### Loading Performance
**Optimize Images**:
- Use modern formats (WebP, AVIF)
- Proper sizing (don't load 3000px image for 300px display)
- Lazy loading for below-fold images
- Responsive images (`srcset`, `picture` element)
- Compress images (80-85% quality is usually imperceptible)
- Use CDN for faster delivery
```html
<img
src="hero.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
loading="lazy"
alt="Hero image"
/>
```
**Reduce JavaScript Bundle**:
- Code splitting (route-based, component-based)
- Tree shaking (remove unused code)
- Remove unused dependencies
- Lazy load non-critical code
- Use dynamic imports for large components
```javascript
// Lazy load heavy component
const HeavyChart = lazy(() => import('./HeavyChart'));
```
**Optimize CSS**:
- Remove unused CSS
- Critical CSS inline, rest async
- Minimize CSS files
- Use CSS containment for independent regions
**Optimize Fonts**:
- Use `font-display: swap` or `optional`
- Subset fonts (only characters you need)
- Preload critical fonts
- Use system fonts when appropriate
- Limit font weights loaded
```css
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap; /* Show fallback immediately */
unicode-range: U+0020-007F; /* Basic Latin only */
}
```
**Optimize Loading Strategy**:
- Critical resources first (async/defer non-critical)
- Preload critical assets
- Prefetch likely next pages
- Service worker for offline/caching
- HTTP/2 or HTTP/3 for multiplexing
### Rendering Performance
**Avoid Layout Thrashing**:
```javascript
// ❌ Bad: Alternating reads and writes (causes reflows)
elements.forEach(el => {
const height = el.offsetHeight; // Read (forces layout)
el.style.height = height * 2; // Write
});
// ✅ Good: Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // All reads
elements.forEach((el, i) => {
el.style.height = heights[i] * 2; // All writes
});
```
**Optimize Rendering**:
- Use CSS `contain` property for independent regions
- Minimize DOM depth (flatter is faster)
- Reduce DOM size (fewer elements)
- Use `content-visibility: auto` for long lists
- Virtual scrolling for very long lists (react-window, react-virtualized)
**Reduce Paint & Composite**:
- Use `transform` and `opacity` for animations (GPU-accelerated)
- Avoid animating layout properties (width, height, top, left)
- Use `will-change` sparingly for known expensive operations
- Minimize paint areas (smaller is faster)
### Animation Performance
**GPU Acceleration**:
```css
/* ✅ GPU-accelerated (fast) */
.animated {
transform: translateX(100px);
opacity: 0.5;
}
/* ❌ CPU-bound (slow) */
.animated {
left: 100px;
width: 300px;
}
```
**Smooth 60fps**:
- Target 16ms per frame (60fps)
- Use `requestAnimationFrame` for JS animations
- Debounce/throttle scroll handlers
- Use CSS animations when possible
- Avoid long-running JavaScript during animations
**Intersection Observer**:
```javascript
// Efficiently detect when elements enter viewport
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Element is visible, lazy load or animate
}
});
});
```
### React/Framework Optimization
**React-specific**:
- Use `memo()` for expensive components
- `useMemo()` and `useCallback()` for expensive computations
- Virtualize long lists
- Code split routes
- Avoid inline function creation in render
- Use React DevTools Profiler
**Framework-agnostic**:
- Minimize re-renders
- Debounce expensive operations
- Memoize computed values
- Lazy load routes and components
### Network Optimization
**Reduce Requests**:
- Combine small files
- Use SVG sprites for icons
- Inline small critical assets
- Remove unused third-party scripts
**Optimize APIs**:
- Use pagination (don't load everything)
- GraphQL to request only needed fields
- Response compression (gzip, brotli)
- HTTP caching headers
- CDN for static assets
**Optimize for Slow Connections**:
- Adaptive loading based on connection (navigator.connection)
- Optimistic UI updates
- Request prioritization
- Progressive enhancement
## Core Web Vitals Optimization
### Largest Contentful Paint (LCP < 2.5s)
- Optimize hero images
- Inline critical CSS
- Preload key resources
- Use CDN
- Server-side rendering
### First Input Delay (FID < 100ms) / INP (< 200ms)
- Break up long tasks
- Defer non-critical JavaScript
- Use web workers for heavy computation
- Reduce JavaScript execution time
### Cumulative Layout Shift (CLS < 0.1)
- Set dimensions on images and videos
- Don't inject content above existing content
- Use `aspect-ratio` CSS property
- Reserve space for ads/embeds
- Avoid animations that cause layout shifts
```css
/* Reserve space for image */
.image-container {
aspect-ratio: 16 / 9;
}
```
## Performance Monitoring
**Tools to use**:
- Chrome DevTools (Lighthouse, Performance panel)
- WebPageTest
- Core Web Vitals (Chrome UX Report)
- Bundle analyzers (webpack-bundle-analyzer)
- Performance monitoring (Sentry, DataDog, New Relic)
**Key metrics**:
- LCP, FID/INP, CLS (Core Web Vitals)
- Time to Interactive (TTI)
- First Contentful Paint (FCP)
- Total Blocking Time (TBT)
- Bundle size
- Request count
**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.
**NEVER**:
- Optimize without measuring (premature optimization)
- Sacrifice accessibility for performance
- Break functionality while optimizing
- Use `will-change` everywhere (creates new layers, uses memory)
- Lazy load above-fold content
- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first)
- Forget about mobile performance (often slower devices, slower connections)
## Verify Improvements
Test that optimizations worked:
- **Before/after metrics**: Compare Lighthouse scores
- **Real user monitoring**: Track improvements for real users
- **Different devices**: Test on low-end Android, not just flagship iPhone
- **Slow connections**: Throttle to 3G, test experience
- **No regressions**: Ensure functionality still works
- **User perception**: Does it *feel* faster?
Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.
dist/cursor/commands/polish.md
Vendored
+187
View File
@@ -0,0 +1,187 @@
Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished.
## Pre-Polish Assessment
Understand the current state and goals:
1. **Review completeness**:
- Is it functionally complete?
- Are there known issues to preserve (mark with TODOs)?
- What's the quality bar? (MVP vs flagship feature?)
- When does it ship? (How much time for polish?)
2. **Identify polish areas**:
- Visual inconsistencies
- Spacing and alignment issues
- Interaction state gaps
- Copy inconsistencies
- Edge cases and error states
- Loading and transition smoothness
**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete.
## Polish Systematically
Work through these dimensions methodically:
### Visual Alignment & Spacing
- **Pixel-perfect alignment**: Everything lines up to grid
- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps)
- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering)
- **Responsive consistency**: Spacing and alignment work at all breakpoints
- **Grid adherence**: Elements snap to baseline grid
**Check**:
- Enable grid overlay and verify alignment
- Check spacing with browser inspector
- Test at multiple viewport sizes
- Look for elements that "feel" off
### Typography Refinement
- **Hierarchy consistency**: Same elements use same sizes/weights throughout
- **Line length**: 45-75 characters for body text
- **Line height**: Appropriate for font size and context
- **Widows & orphans**: No single words on last line
- **Hyphenation**: Appropriate for language and column width
- **Kerning**: Adjust letter spacing where needed (especially headlines)
- **Font loading**: No FOUT/FOIT flashes
### Color & Contrast
- **Contrast ratios**: All text meets WCAG standards
- **Consistent token usage**: No hard-coded colors, all use design tokens
- **Theme consistency**: Works in all theme variants
- **Color meaning**: Same colors mean same things throughout
- **Accessible focus**: Focus indicators visible with sufficient contrast
### Interaction States
Every interactive element needs all states:
- **Default**: Resting state
- **Hover**: Subtle feedback (color, scale, shadow)
- **Focus**: Keyboard focus indicator (never remove without replacement)
- **Active**: Click/tap feedback
- **Disabled**: Clearly non-interactive
- **Loading**: Async action feedback
- **Error**: Validation or error state
- **Success**: Successful completion
**Missing states create confusion and broken experiences**.
### Micro-interactions & Transitions
- **Smooth transitions**: All state changes animated appropriately (200-300ms)
- **Consistent easing**: Same easing curves for similar transitions
- **No jank**: 60fps animations, no layout thrashing
- **Appropriate motion**: Motion serves purpose, not decoration
- **Reduced motion**: Respects `prefers-reduced-motion`
### Content & Copy
- **Consistent terminology**: Same things called same names throughout
- **Consistent capitalization**: Title Case vs Sentence case applied consistently
- **Grammar & spelling**: No typos
- **Appropriate length**: Not too wordy, not too terse
- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them)
### Icons & Images
- **Consistent style**: All icons from same family or matching style
- **Appropriate sizing**: Icons sized consistently for context
- **Proper alignment**: Icons align with adjacent text optically
- **Alt text**: All images have descriptive alt text
- **Loading states**: Images don't cause layout shift, proper aspect ratios
- **Retina support**: 2x assets for high-DPI screens
### Forms & Inputs
- **Label consistency**: All inputs properly labeled
- **Required indicators**: Clear and consistent
- **Error messages**: Helpful and consistent
- **Tab order**: Logical keyboard navigation
- **Auto-focus**: Appropriate (don't overuse)
- **Validation timing**: Consistent (on blur vs on submit)
### Edge Cases & Error States
- **Loading states**: All async actions have loading feedback
- **Empty states**: Helpful empty states, not just blank space
- **Error states**: Clear error messages with recovery paths
- **Success states**: Confirmation of successful actions
- **Long content**: Handles very long names, descriptions, etc.
- **No content**: Handles missing data gracefully
- **Offline**: Appropriate offline handling (if applicable)
### Responsiveness
- **All breakpoints**: Test mobile, tablet, desktop
- **Touch targets**: 44x44px minimum on touch devices
- **Readable text**: No text smaller than 14px on mobile
- **No horizontal scroll**: Content fits viewport
- **Appropriate reflow**: Content adapts logically
### Performance
- **Fast initial load**: Optimize critical path
- **No layout shift**: Elements don't jump after load (CLS)
- **Smooth interactions**: No lag or jank
- **Optimized images**: Appropriate formats and sizes
- **Lazy loading**: Off-screen content loads lazily
### Code Quality
- **Remove console logs**: No debug logging in production
- **Remove commented code**: Clean up dead code
- **Remove unused imports**: Clean up unused dependencies
- **Consistent naming**: Variables and functions follow conventions
- **Type safety**: No TypeScript `any` or ignored errors
- **Accessibility**: Proper ARIA labels and semantic HTML
## Polish Checklist
Go through systematically:
- [ ] Visual alignment perfect at all breakpoints
- [ ] Spacing uses design tokens consistently
- [ ] Typography hierarchy consistent
- [ ] All interactive states implemented
- [ ] All transitions smooth (60fps)
- [ ] Copy is consistent and polished
- [ ] Icons are consistent and properly sized
- [ ] All forms properly labeled and validated
- [ ] Error states are helpful
- [ ] Loading states are clear
- [ ] Empty states are welcoming
- [ ] Touch targets are 44x44px minimum
- [ ] Contrast ratios meet WCAG AA
- [ ] Keyboard navigation works
- [ ] Focus indicators visible
- [ ] No console errors or warnings
- [ ] No layout shift on load
- [ ] Works in all supported browsers
- [ ] Respects reduced motion preference
- [ ] Code is clean (no TODOs, console.logs, commented code)
**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up.
**NEVER**:
- Polish before it's functionally complete
- Spend hours on polish if it ships in 30 minutes (triage)
- Introduce bugs while polishing (test thoroughly)
- Ignore systematic issues (if spacing is off everywhere, fix the system)
- Perfect one thing while leaving others rough (consistent quality level)
## Final Verification
Before marking as done:
- **Use it yourself**: Actually interact with the feature
- **Test on real devices**: Not just browser DevTools
- **Ask someone else to review**: Fresh eyes catch things
- **Compare to design**: Match intended design
- **Check all states**: Don't just test happy path
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.
dist/cursor/commands/quieter.md
Vendored
+83
View File
@@ -0,0 +1,83 @@
Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.
## Assess Current State
Analyze what makes the design feel too intense:
1. **Identify intensity sources**:
- **Color saturation**: Overly bright or saturated colors
- **Contrast extremes**: Too much high-contrast juxtaposition
- **Visual weight**: Too many bold, heavy elements competing
- **Animation excess**: Too much motion or overly dramatic effects
- **Complexity**: Too many visual elements, patterns, or decorations
- **Scale**: Everything is large and loud with no hierarchy
2. **Understand the context**:
- What's the purpose? (Marketing vs tool vs reading experience)
- Who's the audience? (Some contexts need energy)
- What's working? (Don't throw away good ideas)
- What's the core message? (Preserve what matters)
**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.
## Plan Refinement
Create a strategy to reduce intensity while maintaining impact:
- **Color approach**: Desaturate or shift to more sophisticated tones?
- **Hierarchy approach**: Which elements should stay bold (very few), which should recede?
- **Simplification approach**: What can be removed entirely?
- **Sophistication approach**: How can we signal quality through restraint?
**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision.
## Refine the Design
Systematically reduce intensity across these dimensions:
### Color Refinement
- **Reduce saturation**: Shift from fully saturated to 70-85% saturation
- **Soften palette**: Replace bright colors with muted, sophisticated tones
- **Reduce color variety**: Use fewer colors more thoughtfully
- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
- **Gentler contrasts**: High contrast only where it matters most
### Visual Weight Reduction
- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness
- **White space**: Increase breathing room, reduce density
- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely
### Simplification
- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose
- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes
- **Reduce layering**: Flatten visual hierarchy where possible
- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
### Motion Reduction
- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds
- **Remove decorative animations**: Keep functional motion, remove flourishes
- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
### Composition Refinement
- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling
- **Align to grid**: Bring rogue elements back into systematic alignment
- **Even out spacing**: Replace extreme spacing variations with consistent rhythm
**NEVER**:
- Make everything the same size/weight (hierarchy still matters)
- Remove all color (quiet ≠ grayscale)
- Eliminate all personality (maintain character through refinement)
- Sacrifice usability for aesthetics (functional elements still need clear affordances)
- Make everything small and light (some anchors needed)
## Verify Quality
Ensure refinement maintains quality:
- **Still functional**: Can users still accomplish tasks easily?
- **Still distinctive**: Does it have character, or is it generic now?
- **Better reading**: Is text easier to read for extended periods?
- **Sophistication**: Does it feel more refined and premium?
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.
dist/cursor/commands/simplify.md
Vendored
+104
View File
@@ -0,0 +1,104 @@
Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.
## Assess Current State
Analyze what makes the design feel complex or cluttered:
1. **Identify complexity sources**:
- **Too many elements**: Competing buttons, redundant information, visual clutter
- **Excessive variation**: Too many colors, fonts, sizes, styles without purpose
- **Information overload**: Everything visible at once, no progressive disclosure
- **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations
- **Confusing hierarchy**: Unclear what matters most
- **Feature creep**: Too many options, actions, or paths forward
2. **Find the essence**:
- What's the primary user goal? (There should be ONE)
- What's actually necessary vs nice-to-have?
- What can be removed, hidden, or combined?
- What's the 20% that delivers 80% of value?
**CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.
## Plan Simplification
Create a ruthless editing strategy:
- **Core purpose**: What's the ONE thing this should accomplish?
- **Essential elements**: What's truly necessary to achieve that purpose?
- **Progressive disclosure**: What can be hidden until needed?
- **Consolidation opportunities**: What can be combined or integrated?
**IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
## Simplify the Design
Systematically remove complexity across these dimensions:
### Information Architecture
- **Reduce scope**: Remove secondary actions, optional features, redundant information
- **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows)
- **Combine related actions**: Merge similar buttons, consolidate forms, group related content
- **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden
- **Remove redundancy**: If it's said elsewhere, don't repeat it here
### Visual Simplification
- **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
- **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
- **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
- **Flatten structure**: Reduce nesting, remove unnecessary containers
- **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
### Layout Simplification
- **Linear flow**: Replace complex grids with simple vertical flow where possible
- **Remove sidebars**: Move secondary content inline or hide it
- **Full-width**: Use available space generously instead of complex multi-column layouts
- **Consistent alignment**: Pick left or center, stick with it
- **Generous white space**: Let content breathe, don't pack everything tight
### Interaction Simplification
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
- **Clear CTAs**: ONE obvious next step, not five competing actions
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
- **Active voice**: "Save changes" not "Changes will be saved"
- **Remove jargon**: Plain language always wins
- **Scannable structure**: Short paragraphs, bullet points, clear headings
- **Essential information only**: Remove marketing fluff, legalese, hedging
### Code Simplification
- **Remove unused code**: Dead CSS, unused components, orphaned files
- **Flatten component trees**: Reduce nesting depth
- **Consolidate styles**: Merge similar styles, use utilities consistently
- **Reduce variants**: Does that component need 12 variations, or can 3 cover 90% of cases?
**NEVER**:
- Remove necessary functionality (simplicity ≠ feature-less)
- Sacrifice accessibility for simplicity (clear labels and ARIA still required)
- Make things so simple they're unclear (mystery ≠ minimalism)
- Remove information users need to make decisions
- Eliminate hierarchy completely (some things should stand out)
- Oversimplify complex domains (match complexity to actual task complexity)
## Verify Simplification
Ensure simplification improves usability:
- **Faster task completion**: Can users accomplish goals more quickly?
- **Reduced cognitive load**: Is it easier to understand what to do?
- **Still complete**: Are all necessary features still accessible?
- **Clearer hierarchy**: Is it obvious what matters most?
- **Better performance**: Does simpler design load faster?
## Document Removed Complexity
If you removed features or options:
- Document why they were removed
- Consider if they need alternative access points
- Note any user feedback to monitor
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."
dist/cursor/rules/color-and-contrast.md
Vendored
+104
View File
@@ -0,0 +1,104 @@
This skill guides the creation of color systems that are both beautiful and functional, balancing creative expression with accessibility and systematic coherence.
The user provides a color challenge: building a color palette, implementing theming, fixing contrast issues, establishing brand colors, or creating dark mode variants. They may include brand guidelines, accessibility requirements, or existing design constraints.
## Color System Thinking
Before choosing colors, understand the strategic requirements:
- **Brand & Emotion**: What feelings should the colors evoke? Trust (blues)? Energy (reds/oranges)? Growth (greens)? Luxury (purples/golds)? Colors are never neutral.
- **Functional Requirements**: How many semantic states needed? Success, error, warning, info? How many UI layers? Background, surface, border, text?
- **Context**: Industry conventions (avoid red for finance), cultural considerations, competitor differentiation.
- **Accessibility Goals**: WCAG level (A/AA/AAA), audience considerations (aging users need higher contrast).
**CRITICAL**: Color is both an art and a science. Aesthetics matter, but accessibility is non-negotiable.
Then build a color system that is:
- Accessible and WCAG compliant
- Systematically organized with clear roles
- Flexible enough for theming and variations
- Aesthetically cohesive and on-brand
## Color Theory Fundamentals
### Color Harmony & Relationships
[TO BE DEVELOPED: Complementary, analogous, triadic, split-complementary, monochromatic schemes, color wheel navigation]
### Color Psychology & Meaning
[TO BE DEVELOPED: Emotional associations, cultural considerations, industry conventions, semantic color choices]
### Color Properties
[TO BE DEVELOPED: Hue, saturation, lightness/brightness, HSL vs RGB vs LCH, perceptual uniformity]
## Building Functional Palettes
### Palette Structure
[TO BE DEVELOPED: Primary/secondary/tertiary, neutral scales (9-11 steps), semantic colors, state colors]
### Generating Color Scales
[TO BE DEVELOPED: Lightness curves, saturation shifts, hue rotation, perceptual uniformity, algorithmic generation]
### The Dominant Color Principle
[TO BE DEVELOPED: 60-30-10 rule, accent color strategy, visual weight distribution, avoiding rainbow vomit]
## Contrast & Accessibility
### WCAG Compliance
[TO BE DEVELOPED: AA vs AAA standards, text contrast ratios (4.5:1 / 7:1), UI component contrast (3:1), large text exceptions]
### Testing & Tools
[TO BE DEVELOPED: Contrast checkers, automated testing, color blindness simulation, tools for verification]
### Accessible Color Combinations
[TO BE DEVELOPED: Which combinations work, which don't, safe pairings, dangerous pairings, contrast matrices]
## Theming Architecture
### Light & Dark Mode
[TO BE DEVELOPED: Independent palettes vs inverted, neutral strategies, shadows in dark mode, image handling]
### CSS Custom Properties
[TO BE DEVELOPED: Token hierarchy (primitive → semantic → component), naming conventions, theme switching]
### Multi-Theme Systems
[TO BE DEVELOPED: Brand themes, user preference themes, contextual themes, theme inheritance]
## Advanced Color Techniques
### Gradients & Effects
[TO BE DEVELOPED: Mesh gradients, color stops, blend modes, gradient generation, overlay techniques]
### Transparency & Alpha
[TO BE DEVELOPED: Alpha channels, overlay strategies, transparency scales, backdrop effects]
### Dynamic Color
[TO BE DEVELOPED: State-based color changes, hover darkening/lightening, interactive color feedback]
---
**IMPORTANT**: Test color combinations in context, not in isolation. Colors behave differently on different backgrounds and at different sizes.
**NEVER**:
- Rely on color alone to convey information
- Use color combinations that fail WCAG contrast requirements
- Create palettes with arbitrary color choices (every color needs a purpose)
- Ignore color blindness (8% of men, 0.5% of women)
- Use pure black (#000) or pure white (#fff) for large areas
- Create theme systems without testing all combinations
Remember: Color is powerful. Use it deliberately, systematically, and inclusively.
dist/cursor/rules/interaction-design.md
Vendored
+146
View File
@@ -0,0 +1,146 @@
This skill guides the creation of interaction patterns that are intuitive, accessible, and delightful - the conversation between user and interface.
The user provides an interaction challenge: designing forms, improving button states, fixing navigation patterns, optimizing input UX, implementing keyboard navigation, or creating feedback mechanisms. They may include accessibility requirements, device constraints, or specific interaction problems to solve.
## Interaction Design Thinking
Before designing interactions, understand the user's mental model and context:
- **User Context**: What are users trying to accomplish? What's their experience level? What's their emotional state (stressed during checkout vs relaxed browsing)?
- **Device & Input**: Touch vs pointer? Keyboard navigation? Voice input? Gamepad? Different inputs need different affordances.
- **Error Tolerance**: High-stakes actions (delete, purchase) vs low-stakes (filter, sort)? Design appropriate safeguards.
- **Speed vs Accuracy**: Quick scanning vs careful reading? Simple taps vs precise manipulation?
**CRITICAL**: Good interaction design is invisible. Users should complete tasks without thinking about the interface.
Then implement interactions that are:
- Intuitive with clear affordances and feedback
- Accessible to all users and input methods
- Forgiving with error prevention and recovery
- Responsive with immediate feedback and state changes
## Interaction States
### Core States
[TO BE DEVELOPED: Default, hover, focus, active, disabled, loading, error, success - visual treatment for each]
### State Transitions
[TO BE DEVELOPED: Smooth state changes, animation between states, maintaining context, preserving user intent]
### Loading & Progress States
[TO BE DEVELOPED: Skeleton screens, spinners, progress bars, optimistic updates, what to show while waiting]
## Affordances & Feedback
### Visual Affordances
[TO BE DEVELOPED: Signaling interactivity, button appearance, link styling, cursor changes, touch target highlighting]
### Immediate Feedback
[TO BE DEVELOPED: Click/tap acknowledgment, hover feedback, focus indication, "something is happening" signals]
### Haptic & Sound Feedback
[TO BE DEVELOPED: Vibration patterns, sound cues, cross-modal feedback, when to use non-visual feedback]
## Form Design & Input Patterns
### Form Layout & Structure
[TO BE DEVELOPED: Single column vs multi-column, label placement, field grouping, visual hierarchy in forms]
### Input Field Design
[TO BE DEVELOPED: Field sizing, placeholder usage (anti-pattern), helper text, character limits, input masking]
### Validation Patterns
[TO BE DEVELOPED: Inline vs on-submit, real-time validation, error message writing, success confirmation, required field indication]
### Complex Input Types
[TO BE DEVELOPED: File upload UX, date pickers, time selection, rich text editing, multi-select, autocomplete, search]
### Progressive Disclosure in Forms
[TO BE DEVELOPED: Conditional fields, wizards/multi-step forms, accordions, showing complexity gradually]
### Form Error Handling
[TO BE DEVELOPED: Error prevention (constraints, masks), clear error messages, error recovery, field-level vs form-level errors]
## Touch & Pointer Interactions
### Touch Targets
[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge reach areas on mobile]
### Touch vs Pointer Patterns
[TO BE DEVELOPED: Hover states on touch (problems), tap feedback, long press, swipe gestures, pinch-to-zoom]
### Gesture Design
[TO BE DEVELOPED: Swipe to delete, pull to refresh, drag to reorder, custom gestures, gesture discoverability]
## Keyboard Navigation
### Focus Management
[TO BE DEVELOPED: Focus rings (never remove without replacement), logical tab order, skip links, focus trapping in modals]
### Keyboard Shortcuts
[TO BE DEVELOPED: Common shortcuts, discoverability, avoiding conflicts, command palettes, keyboard-first workflows]
### Accessible Interaction Patterns
[TO BE DEVELOPED: ARIA roles for custom controls, managing focus in dynamic content, screen reader announcements]
## Navigation Patterns
### Menu & Navigation Design
[TO BE DEVELOPED: Mega menus, hamburger menus, breadcrumbs, tabs, pagination, infinite scroll vs load more]
### Modal & Dialog Patterns
[TO BE DEVELOPED: Modal entry/exit, focus management, escape to close, backdrop click behavior, sheet patterns]
### Command & Context Menus
[TO BE DEVELOPED: Right-click menus, command palettes, dropdown menus, action sheets]
## Error Prevention & Recovery
### Constraints & Guards
[TO BE DEVELOPED: Input constraints, disabled states, confirmation dialogs for destructive actions, undo mechanisms]
### Error Messages
[TO BE DEVELOPED: Clear language, actionable guidance, positive framing, where to show errors, when to show errors]
### Undo & Redo
[TO BE DEVELOPED: Undo patterns, toast notifications with undo, versioning, draft auto-save]
---
**IMPORTANT**: Test interactions with actual users and diverse input methods. What works with a mouse might fail with touch or keyboard.
**NEVER**:
- Remove focus indicators without providing visible alternatives (accessibility violation)
- Use placeholder text as labels (disappears on input, hard to remember)
- Make touch targets smaller than 44x44px
- Validate in real-time for long inputs (wait for blur)
- Show generic error messages ("Error occurred") - be specific and helpful
- Block user interaction without clear loading states
- Design only for mouse/pointer (test with keyboard and touch)
- Use custom controls without proper ARIA and keyboard support
Remember: Interaction design is where users actually experience your interface. Get this right, and everything else falls into place.
dist/cursor/rules/motion-design.md
Vendored
+105
View File
@@ -0,0 +1,105 @@
This skill guides the creation of motion design that enhances usability, provides feedback, and creates delight - without sacrificing performance or accessibility.
The user provides a motion challenge: adding animations to components, improving interaction feedback, building page transitions, creating micro-interactions, or establishing motion design systems. They may include performance constraints, aesthetic goals, or specific interaction problems to solve.
## Motion Design Thinking
Before animating anything, understand the purpose and context:
- **Purpose**: Why animate? Feedback? Delight? Guidance? Branding? Every animation needs a reason beyond "it looks cool."
- **Personality**: What character should motion convey? Snappy and energetic? Smooth and luxurious? Playful and bouncy? Subtle and refined?
- **Performance Budget**: Mobile devices? Complex pages? Can we afford GPU-intensive animations?
- **Accessibility**: Motion sensitivity, vestibular disorders, reduced motion preferences - some users need minimal animation.
**CRITICAL**: Animation should enhance understanding and usability, not obscure it. When in doubt, be subtle. Users notice janky animation more than no animation.
Then implement motion that is:
- Purposeful with clear functional or emotional goals
- Performant with smooth 60fps execution
- Accessible with reduced motion alternatives
- Choreographed with thoughtful timing and sequencing
## Classic Animation Principles
### Disney's 12 Principles (Web Context)
[TO BE DEVELOPED: Squash and stretch, anticipation, staging, follow-through, ease-in/ease-out, arcs, secondary action, timing, exaggeration, solid drawing, appeal - adapted for UI]
### Timing & Duration
[TO BE DEVELOPED: Micro-interactions (100-300ms), transitions (300-500ms), complex animations (500-1000ms), duration by distance, perceived speed]
### Easing & Curves
[TO BE DEVELOPED: Linear vs eased, ease-out (enter), ease-in (exit), ease-in-out (full cycle), custom cubic-bezier, spring physics]
## Types of UI Animation
### Micro-interactions
[TO BE DEVELOPED: Button feedback, hover states, toggle switches, like buttons, form validation feedback, loading indicators]
### Page Transitions
[TO BE DEVELOPED: Route transitions, modal entry/exit, drawer animations, cross-fade, slide, zoom patterns]
### State Transitions
[TO BE DEVELOPED: Loading → success → error flows, expand/collapse, show/hide, enable/disable state changes]
### Scrolling & Parallax
[TO BE DEVELOPED: Scroll-triggered animations, reveal on scroll, parallax layers, scroll-linked effects, intersection observer]
## Choreography & Sequencing
### Staggered Animations
[TO BE DEVELOPED: animation-delay patterns, sequential reveals, cascade effects, list item staggering]
### Orchestrated Page Loads
[TO BE DEVELOPED: Entry choreography, hero → content → details, creating narrative through sequence, attention management]
### Exit Choreography
[TO BE DEVELOPED: Reverse sequences, intentional exit timing, maintaining spatial relationships during exit]
## Technical Implementation
### CSS-Only Animation
[TO BE DEVELOPED: @keyframes, animation properties, transitions, transform, pseudo-element animations, hardware acceleration]
### JavaScript Animation
[TO BE DEVELOPED: Web Animations API, requestAnimationFrame, animation libraries (GSAP, Framer Motion, Motion One)]
### Performance Optimization
[TO BE DEVELOPED: GPU acceleration (transform, opacity only), will-change, avoiding layout thrashing, reducing paint, FPS monitoring]
## Motion Design Systems
### Motion Tokens
[TO BE DEVELOPED: Duration scales, easing tokens, named animations, consistent motion vocabulary]
### Reduced Motion
[TO BE DEVELOPED: prefers-reduced-motion, graceful degradation, essential vs decorative animation, crossfade alternatives]
---
**IMPORTANT**: One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions everywhere. Focus on high-impact moments.
**NEVER**:
- Animate everything (animation fatigue is real)
- Use long durations (>500ms) for UI feedback (users will perceive lag)
- Animate layout properties (width, height, top, left) - use transform instead
- Ignore prefers-reduced-motion (accessibility requirement)
- Use animation to hide slow loading (fix the loading time)
- Animate without purpose (every animation should answer "why?")
- Create animations that obscure content or block interaction
Remember: Motion is powerful - it can guide attention, provide feedback, and create emotional connection. Use it thoughtfully, not reflexively.
dist/cursor/rules/responsive-design.md
Vendored
+152
View File
@@ -0,0 +1,152 @@
This skill guides the creation of responsive interfaces that adapt beautifully across devices, screen sizes, input methods, and usage contexts.
The user provides a responsive design challenge: building mobile-first layouts, defining breakpoint strategies, optimizing for touch vs pointer, creating fluid designs, or solving specific cross-device problems. They may include device requirements, constraints, or specific adaptation challenges.
## Responsive Design Thinking
Before implementing, understand the multi-device context:
- **Device Landscape**: Which devices matter? (Mobile, tablet, desktop, TV, watch?) What's the primary device?
- **Usage Context**: How do usage patterns differ by device? (On-the-go mobile vs focused desktop work)
- **Input Methods**: Touch, pointer, keyboard, voice, gamepad - what input methods need support?
- **Network Conditions**: Fast wifi vs slow 3G - how does this impact design decisions?
- **Content Priority**: What's essential on all devices vs optional on larger screens?
**CRITICAL**: Responsive design is not just about scaling - it's about adapting the experience appropriately for each context.
Then build responsive systems that are:
- Mobile-first with progressive enhancement
- Fluid and adaptable across viewport sizes
- Optimized for different input methods
- Performant on constrained devices
- Contextually appropriate
## Mobile-First Methodology
### Why Mobile-First
[TO BE DEVELOPED: Progressive enhancement, performance benefits, forces priority decisions, mobile usage dominance]
### Mobile-First Implementation
[TO BE DEVELOPED: Start with mobile styles, add complexity with min-width media queries, content-first approach]
## Breakpoint Strategies
### Choosing Breakpoints
[TO BE DEVELOPED: Content-driven vs device-driven, common breakpoint values, in-between states, avoiding too many breakpoints]
### Breakpoint Architecture
[TO BE DEVELOPED: Named breakpoints, breakpoint tokens, consistent usage across codebase]
## Fluid & Adaptive Design
### Fluid Typography
[TO BE DEVELOPED: clamp(), viewport units, fluid type scales, maintaining readability]
### Fluid Spacing
[TO BE DEVELOPED: Responsive spacing scales, container-relative spacing, clamp() for margins/padding]
### Fluid Layouts
[TO BE DEVELOPED: CSS Grid auto-fit/auto-fill, flexible columns, aspect-ratio, fluid containers]
### Container Queries
[TO BE DEVELOPED: Component-level responsiveness, when to use vs media queries, polyfills]
## Layout Adaptation Patterns
### Navigation Patterns
[TO BE DEVELOPED: Mobile hamburger/drawer, tablet side panel, desktop persistent nav, bottom nav bars]
### Content Reflow
[TO BE DEVELOPED: Single column → multi-column, stacking orders, priority content first]
### Component Adaptation
[TO BE DEVELOPED: Tabs → accordion, horizontal → vertical, show/hide patterns, progressive disclosure]
## Touch vs Pointer Optimization
### Touch Target Sizing
[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge cases]
### Touch-Specific Interactions
[TO BE DEVELOPED: Swipe gestures, pull-to-refresh, long press, avoiding hover-dependent patterns]
### Hybrid Devices
[TO BE DEVELOPED: Supporting both touch and pointer, feature detection, adaptive interfaces]
## Viewport & Screen Considerations
### Viewport Meta Tag
[TO BE DEVELOPED: Proper viewport configuration, zoom control, initial scale]
### Safe Areas
[TO BE DEVELOPED: iPhone notch, rounded corners, system UI insets, padding for safe areas]
### Orientation Handling
[TO BE DEVELOPED: Portrait vs landscape, orientation-specific layouts, testing both orientations]
### High-DPI Screens
[TO BE DEVELOPED: Retina images, 2x/3x assets, SVG for icons, responsive images]
## Responsive Images & Media
### Responsive Images
[TO BE DEVELOPED: srcset, sizes, picture element, art direction, lazy loading]
### Video Adaptation
[TO BE DEVELOPED: Responsive video embeds, bandwidth considerations, poster images]
## Performance on Mobile
### Mobile Performance Budget
[TO BE DEVELOPED: Constrained CPU/memory, slow connections, battery concerns]
### Loading Strategies
[TO BE DEVELOPED: Critical path optimization, lazy loading, code splitting for mobile]
## Testing Strategies
### Device Testing
[TO BE DEVELOPED: Real device testing, browser DevTools, emulators, viewport testing]
### Testing Checklist
[TO BE DEVELOPED: Different viewports, orientations, input methods, connection speeds]
---
**IMPORTANT**: Test on real devices, not just DevTools. Device emulation is useful but misses real-world constraints.
**NEVER**:
- Design desktop-first and try to cram into mobile
- Hide critical functionality on mobile
- Use device detection instead of feature detection
- Create separate mobile/desktop codebases (maintain one responsive codebase)
- Ignore landscape orientation
- Use fixed pixel values without considering smaller/larger screens
- Forget about tablet (it's not just big phone or small desktop)
- Assume all mobile devices are powerful (many users have older devices)
Remember: Responsive design is about creating experiences that work everywhere while feeling native nowhere. Adapt intelligently for context while maintaining consistency.
dist/cursor/rules/spatial-design.md
Vendored
+122
View File
@@ -0,0 +1,122 @@
This skill guides the creation of spatial systems that balance mathematical precision with artistic composition, ensuring interfaces are both systematically organized and visually compelling.
The user provides a layout challenge: building spacing systems, establishing grids, improving visual hierarchy, fixing composition issues, or implementing responsive layouts. They may include design system constraints, aesthetic goals, or specific spatial problems to solve.
## Spatial Design Thinking
Before arranging elements, understand the compositional strategy:
- **Content Priority**: What's most important? What should users see first, second, third? Hierarchy starts here.
- **Visual Weight Distribution**: Where should the eye go? Balanced or intentionally unbalanced? Symmetrical or asymmetric?
- **Density vs Breathing Room**: Controlled density (information-rich) or generous space (editorial)? Match context and audience.
- **Reading Patterns**: Z-pattern (scanning), F-pattern (text-heavy), focal point (marketing), free-form (experimental)?
**CRITICAL**: Space is not empty - it's an active design element. Negative space gives positive elements room to breathe and meaning.
Then build layout systems that are:
- Systematically consistent with clear spacing rules
- Visually balanced with intentional hierarchy
- Responsive and adaptive across viewports
- Compositionally strong with clear focal points
## Classic Composition Principles
### Visual Hierarchy Fundamentals
[TO BE DEVELOPED: Size, weight, color, position, contrast as hierarchy tools, Gestalt principles (proximity, similarity, closure)]
### Balance & Symmetry
[TO BE DEVELOPED: Symmetrical vs asymmetrical balance, visual weight calculation, creating tension and resolution]
### The Rule of Thirds & Golden Ratio
[TO BE DEVELOPED: Classic composition grids, golden ratio applications, when to follow vs break rules]
### Focal Points & Eye Movement
[TO BE DEVELOPED: Creating focal points, directing eye flow, Z/F/circular patterns, intentional disruption]
## Spacing Systems
### Spacing Scales
[TO BE DEVELOPED: 4pt/8pt systems, modular scales, mathematical progressions (linear, exponential, Fibonacci)]
### Vertical Rhythm
[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, spacing ratios, rhythm across components]
### Micro vs Macro Space
[TO BE DEVELOPED: Component-internal spacing, between-component spacing, section spacing, page-level breathing room]
### Spacing Token Architecture
[TO BE DEVELOPED: Primitive spacing tokens, semantic spacing (component gaps, section padding), contextual spacing]
## Grid Systems & Layout Patterns
### Grid Fundamentals
[TO BE DEVELOPED: Column grids, modular grids, baseline grids, grid anatomy (columns, gutters, margins)]
### Classic Layout Patterns
[TO BE DEVELOPED: Sidebar layouts, holy grail, card grids, masonry, magazine layouts, asymmetric layouts]
### Modern CSS Layout
[TO BE DEVELOPED: CSS Grid (explicit placement, auto-placement, grid areas), Flexbox (direction, alignment, distribution), Container Queries]
## Creating Visual Hierarchy
### Hierarchy Through Scale
[TO BE DEVELOPED: Size relationships, proportional scaling, meaningful jumps vs gradual progression]
### Hierarchy Through Weight & Color
[TO BE DEVELOPED: Visual weight calculation, using color for emphasis, combining multiple hierarchy tools]
### Hierarchy Through Position
[TO BE DEVELOPED: Placement importance, reading order, visual flow direction, breaking the grid for emphasis]
## Responsive Spatial Design
### Breakpoint Strategy
[TO BE DEVELOPED: Mobile-first vs desktop-first, breakpoint values, in-between states, content-driven breakpoints]
### Layout Adaptation
[TO BE DEVELOPED: Reflow patterns, navigation transformation, content prioritization, progressive disclosure]
### Fluid Spacing & Layout
[TO BE DEVELOPED: clamp() for spacing, viewport units, fluid grids, container-relative spacing]
## Depth & Layering
### Creating Depth
[TO BE DEVELOPED: Layering, shadows, elevation systems, z-index scales, parallax effects]
### Overlap & Intersection
[TO BE DEVELOPED: Intentional overlap, breaking containers, elements that cross boundaries]
---
**IMPORTANT**: Systematic spacing doesn't mean boring. Use the system as a foundation, then break it intentionally for impact.
**NEVER**:
- Use arbitrary spacing values outside your scale (unless intentionally breaking the system)
- Create layouts that ignore natural reading patterns without good reason
- Forget that white space is a design element, not wasted space
- Make all spacing equal (variety creates hierarchy)
- Build responsive layouts that only work at breakpoint edges
- Create hierarchy through size alone (combine multiple tools)
Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally.
dist/cursor/rules/typography.md
Vendored
+90
View File
@@ -0,0 +1,90 @@
This skill guides the creation and refinement of typography systems that balance timeless principles with modern web capabilities.
The user provides a typography challenge: building a type system, improving readability, selecting fonts, fixing hierarchy, or implementing responsive typography. They may include context about the project's aesthetic direction, constraints, or specific problems to solve.
## Typography Thinking
Before implementing, understand the context and establish a clear typographic voice:
- **Purpose & Audience**: What is being communicated? Who is reading? Technical docs need different type than marketing pages.
- **Tone & Character**: What personality should the typography convey? Authoritative? Playful? Elegant? Minimal? The fonts and system should embody this.
- **Constraints**: Performance budgets, browser support, existing design system, accessibility requirements.
- **Reading Context**: Long-form reading vs scanning, dense information vs spacious editorial, desktop vs mobile primary usage.
**CRITICAL**: Typography is the voice of your interface. Invest time in getting it right - it impacts every single screen.
Then build or refine a typography system that is:
- Readable and accessible across devices and contexts
- Systematically coherent with clear hierarchy
- Performant and technically sound
- Aesthetically distinctive and appropriate for the brand
## Classic Typography Principles
### Vertical Rhythm & Baseline Grids
[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, maintaining rhythm across components]
### Modular Scale & Hierarchy
[TO BE DEVELOPED: Scale ratios, establishing hierarchy through size/weight/spacing, visual balance]
### Readability & Measure
[TO BE DEVELOPED: Line length (45-75 CPL), line height ratios, paragraph spacing, optimal reading conditions]
## Font Selection & Pairing
### Choosing Distinctive Fonts
[TO BE DEVELOPED: Avoiding generic choices, character in typefaces, matching tone to content, Google Fonts alternatives]
### Pairing Principles
[TO BE DEVELOPED: Contrast-based pairing, display + body, serif + sans, mono + geometric, variable fonts]
### Web Font Loading
[TO BE DEVELOPED: FOUT/FOIT strategies, font-display, subsetting, variable fonts, preloading]
## Modern Web Typography
### Fluid & Responsive Type
[TO BE DEVELOPED: clamp(), viewport units, container query typography, breakpoint-based scales]
### Advanced Features
[TO BE DEVELOPED: OpenType features, ligatures, font-feature-settings, kerning, number styles]
### Performance Optimization
[TO BE DEVELOPED: Font loading strategies, subsetting, variable fonts vs static, hosting decisions]
## Typography System Architecture
### Token Structure
[TO BE DEVELOPED: Font stacks, size scales, weight scales, line heights, letter spacing]
### Implementation
[TO BE DEVELOPED: CSS custom properties, utility classes, semantic vs primitive tokens]
## Accessibility Considerations
[TO BE DEVELOPED: Text scaling, contrast ratios, font sizes, dyslexia-friendly choices]
---
**IMPORTANT**: Balance trendy font choices with timeless readability principles. A distinctive font is worthless if users can't comfortably read it.
**NEVER**:
- Use more than 2-3 font families in a single project
- Sacrifice readability for aesthetic novelty
- Ignore font loading performance
- Skip fallback font definitions
- Use decorative fonts for body text
- Implement arbitrary font sizes without a systematic scale
Remember: Typography is 95% of design. Master it, and everything else becomes easier.
dist/cursor/rules/ux-writing.md
Vendored
+197
View File
@@ -0,0 +1,197 @@
This skill guides the creation of interface copy that is clear, concise, helpful, and human - the words that make products understandable and usable.
The user provides a UX writing challenge: writing microcopy, improving error messages, crafting instructions, establishing voice and tone, or fixing unclear interface text. They may include brand guidelines, audience context, or specific copy problems to solve.
## UX Writing Thinking
Before writing, understand the context and user needs:
- **User Context**: What are users trying to accomplish? What's their emotional state? What do they already know?
- **Content Purpose**: Inform? Guide? Reassure? Warn? Celebrate? Different moments need different approaches.
- **Brand Voice**: Professional? Casual? Playful? Technical? Voice should match brand and audience.
- **Constraints**: Character limits, space limitations, translation considerations, accessibility requirements.
**CRITICAL**: Good UX writing is invisible - users understand immediately without noticing the words. Bad UX writing creates confusion and frustration.
Then write copy that is:
- Clear and immediately understandable
- Concise without sacrificing clarity
- Helpful and action-oriented
- Human and empathetic
- Consistent in terminology and tone
## Fundamental Principles
### Clarity Over Cleverness
[TO BE DEVELOPED: Plain language, avoid jargon, specific over vague, "Save changes" not "OK"]
### Concise But Complete
[TO BE DEVELOPED: Remove unnecessary words, but include essential information, balance brevity with clarity]
### Active Voice
[TO BE DEVELOPED: "We saved your changes" not "Your changes have been saved", action-oriented language]
### User-Focused Language
[TO BE DEVELOPED: "Your" not "The", focus on user benefits, user's mental model]
### Consistency
[TO BE DEVELOPED: Use same terms throughout, don't vary for variety, build terminology glossary]
## Voice & Tone
### Establishing Brand Voice
[TO BE DEVELOPED: Personality dimensions, voice guidelines, voice vs tone distinction]
### Adapting Tone to Context
[TO BE DEVELOPED: Success = celebratory, Error = empathetic, Loading = reassuring, matching emotional moment]
### Voice Across Cultures
[TO BE DEVELOPED: Cultural sensitivity, humor translation, formality levels, global considerations]
## Microcopy Excellence
### Button & CTA Copy
[TO BE DEVELOPED: Specific actions ("Create account" not "Submit"), verb + noun structure, outcome-oriented]
### Labels & Instructions
[TO BE DEVELOPED: Clear, specific labels, instructions before fields, showing format with examples]
### Placeholder Text
[TO BE DEVELOPED: When to use (rarely), never as labels, examples not instructions]
### Tooltips & Help Text
[TO BE DEVELOPED: Adding value beyond label, answering implicit questions, brevity with links to details]
## Error Messages & Validation
### Error Message Principles
[TO BE DEVELOPED: Explain what happened, suggest fix, don't blame user, provide examples, link to help]
### Validation Feedback
[TO BE DEVELOPED: Inline validation, timing (on blur vs on submit), success states, clear requirements]
### Error Message Patterns
[TO BE DEVELOPED: Format errors, permission errors, network errors, system errors, 404s]
## Forms & Inputs
### Form Labels
[TO BE DEVELOPED: Descriptive labels, required field indication, why you're asking (when not obvious)]
### Help Text
[TO BE DEVELOPED: Format guidance, why you need this information, examples, constraints]
### Confirmation Dialogs
[TO BE DEVELOPED: Specific about action, explain consequences, clear button labels, don't overuse]
## System Messages
### Success Messages
[TO BE DEVELOPED: Confirm what happened, what happens next, celebrate appropriately, be brief]
### Loading States
[TO BE DEVELOPED: What's happening, time expectations, progress indication, personality in waiting]
### Empty States
[TO BE DEVELOPED: Explain why empty, value of filling it, clear CTA, welcoming not dead-end]
## Navigation & Wayfinding
### Navigation Labels
[TO BE DEVELOPED: Specific and descriptive, user language not internal terms, clear information scent]
### Breadcrumbs & Headers
[TO BE DEVELOPED: Clear location indication, hierarchical clarity, shortened for mobile]
### Search & Filters
[TO BE DEVELOPED: Clear search placeholders, filter labels, no results messaging]
## Content Hierarchy & Structure
### Scannable Writing
[TO BE DEVELOPED: Short paragraphs, bullet points, clear headings, front-load important info]
### Progressive Disclosure
[TO BE DEVELOPED: Essential info first, details on demand, expandable sections, learn more links]
## Writing for Accessibility
### Screen Reader Considerations
[TO BE DEVELOPED: ARIA labels, alt text writing, link text clarity, button labels]
### Plain Language
[TO BE DEVELOPED: Reading level considerations, avoid jargon, explain technical terms]
### Text Alternatives
[TO BE DEVELOPED: Transcripts for audio/video, alt text for images, descriptions for complex UI]
## Internationalization (i18n)
### Writing for Translation
[TO BE DEVELOPED: Avoid idioms, complete sentences, context for translators, text expansion space]
### Cultural Adaptation
[TO BE DEVELOPED: Cultural sensitivity, date/time formats, address formats, name formats]
## Content Patterns by Type
### Onboarding Copy
[TO BE DEVELOPED: Welcome messages, getting started, first-time guidance, value proposition]
### Settings & Preferences
[TO BE DEVELOPED: Clear option descriptions, impact explanation, defaults indication]
### Notifications
[TO BE DEVELOPED: Scannable, actionable, appropriate urgency, notification fatigue prevention]
---
**IMPORTANT**: Read your copy out loud. If it sounds awkward or robotic, rewrite until it sounds human.
**NEVER**:
- Use jargon without explanation
- Blame users ("You made an error" → "This field is required")
- Be vague ("Something went wrong" - explain what!)
- Use passive voice unnecessarily
- Vary terminology for variety (consistency matters)
- Write overly long explanations (be concise)
- Use humor for errors (be empathetic)
- Assume technical knowledge
- Use all caps (except acronyms)
- End questions with periods (use question marks)
Remember: You're a clarity expert and empathetic communicator. Write like you're helping a friend who's smart but unfamiliar with your product. Be clear, be helpful, be human.
dist/gemini/GEMINI.color-and-contrast.md
Vendored
+104
View File
@@ -0,0 +1,104 @@
This skill guides the creation of color systems that are both beautiful and functional, balancing creative expression with accessibility and systematic coherence.
The user provides a color challenge: building a color palette, implementing theming, fixing contrast issues, establishing brand colors, or creating dark mode variants. They may include brand guidelines, accessibility requirements, or existing design constraints.
## Color System Thinking
Before choosing colors, understand the strategic requirements:
- **Brand & Emotion**: What feelings should the colors evoke? Trust (blues)? Energy (reds/oranges)? Growth (greens)? Luxury (purples/golds)? Colors are never neutral.
- **Functional Requirements**: How many semantic states needed? Success, error, warning, info? How many UI layers? Background, surface, border, text?
- **Context**: Industry conventions (avoid red for finance), cultural considerations, competitor differentiation.
- **Accessibility Goals**: WCAG level (A/AA/AAA), audience considerations (aging users need higher contrast).
**CRITICAL**: Color is both an art and a science. Aesthetics matter, but accessibility is non-negotiable.
Then build a color system that is:
- Accessible and WCAG compliant
- Systematically organized with clear roles
- Flexible enough for theming and variations
- Aesthetically cohesive and on-brand
## Color Theory Fundamentals
### Color Harmony & Relationships
[TO BE DEVELOPED: Complementary, analogous, triadic, split-complementary, monochromatic schemes, color wheel navigation]
### Color Psychology & Meaning
[TO BE DEVELOPED: Emotional associations, cultural considerations, industry conventions, semantic color choices]
### Color Properties
[TO BE DEVELOPED: Hue, saturation, lightness/brightness, HSL vs RGB vs LCH, perceptual uniformity]
## Building Functional Palettes
### Palette Structure
[TO BE DEVELOPED: Primary/secondary/tertiary, neutral scales (9-11 steps), semantic colors, state colors]
### Generating Color Scales
[TO BE DEVELOPED: Lightness curves, saturation shifts, hue rotation, perceptual uniformity, algorithmic generation]
### The Dominant Color Principle
[TO BE DEVELOPED: 60-30-10 rule, accent color strategy, visual weight distribution, avoiding rainbow vomit]
## Contrast & Accessibility
### WCAG Compliance
[TO BE DEVELOPED: AA vs AAA standards, text contrast ratios (4.5:1 / 7:1), UI component contrast (3:1), large text exceptions]
### Testing & Tools
[TO BE DEVELOPED: Contrast checkers, automated testing, color blindness simulation, tools for verification]
### Accessible Color Combinations
[TO BE DEVELOPED: Which combinations work, which don't, safe pairings, dangerous pairings, contrast matrices]
## Theming Architecture
### Light & Dark Mode
[TO BE DEVELOPED: Independent palettes vs inverted, neutral strategies, shadows in dark mode, image handling]
### CSS Custom Properties
[TO BE DEVELOPED: Token hierarchy (primitive → semantic → component), naming conventions, theme switching]
### Multi-Theme Systems
[TO BE DEVELOPED: Brand themes, user preference themes, contextual themes, theme inheritance]
## Advanced Color Techniques
### Gradients & Effects
[TO BE DEVELOPED: Mesh gradients, color stops, blend modes, gradient generation, overlay techniques]
### Transparency & Alpha
[TO BE DEVELOPED: Alpha channels, overlay strategies, transparency scales, backdrop effects]
### Dynamic Color
[TO BE DEVELOPED: State-based color changes, hover darkening/lightening, interactive color feedback]
---
**IMPORTANT**: Test color combinations in context, not in isolation. Colors behave differently on different backgrounds and at different sizes.
**NEVER**:
- Rely on color alone to convey information
- Use color combinations that fail WCAG contrast requirements
- Create palettes with arbitrary color choices (every color needs a purpose)
- Ignore color blindness (8% of men, 0.5% of women)
- Use pure black (#000) or pure white (#fff) for large areas
- Create theme systems without testing all combinations
Remember: Color is powerful. Use it deliberately, systematically, and inclusively.
dist/gemini/GEMINI.interaction-design.md
Vendored
+146
View File
@@ -0,0 +1,146 @@
This skill guides the creation of interaction patterns that are intuitive, accessible, and delightful - the conversation between user and interface.
The user provides an interaction challenge: designing forms, improving button states, fixing navigation patterns, optimizing input UX, implementing keyboard navigation, or creating feedback mechanisms. They may include accessibility requirements, device constraints, or specific interaction problems to solve.
## Interaction Design Thinking
Before designing interactions, understand the user's mental model and context:
- **User Context**: What are users trying to accomplish? What's their experience level? What's their emotional state (stressed during checkout vs relaxed browsing)?
- **Device & Input**: Touch vs pointer? Keyboard navigation? Voice input? Gamepad? Different inputs need different affordances.
- **Error Tolerance**: High-stakes actions (delete, purchase) vs low-stakes (filter, sort)? Design appropriate safeguards.
- **Speed vs Accuracy**: Quick scanning vs careful reading? Simple taps vs precise manipulation?
**CRITICAL**: Good interaction design is invisible. Users should complete tasks without thinking about the interface.
Then implement interactions that are:
- Intuitive with clear affordances and feedback
- Accessible to all users and input methods
- Forgiving with error prevention and recovery
- Responsive with immediate feedback and state changes
## Interaction States
### Core States
[TO BE DEVELOPED: Default, hover, focus, active, disabled, loading, error, success - visual treatment for each]
### State Transitions
[TO BE DEVELOPED: Smooth state changes, animation between states, maintaining context, preserving user intent]
### Loading & Progress States
[TO BE DEVELOPED: Skeleton screens, spinners, progress bars, optimistic updates, what to show while waiting]
## Affordances & Feedback
### Visual Affordances
[TO BE DEVELOPED: Signaling interactivity, button appearance, link styling, cursor changes, touch target highlighting]
### Immediate Feedback
[TO BE DEVELOPED: Click/tap acknowledgment, hover feedback, focus indication, "something is happening" signals]
### Haptic & Sound Feedback
[TO BE DEVELOPED: Vibration patterns, sound cues, cross-modal feedback, when to use non-visual feedback]
## Form Design & Input Patterns
### Form Layout & Structure
[TO BE DEVELOPED: Single column vs multi-column, label placement, field grouping, visual hierarchy in forms]
### Input Field Design
[TO BE DEVELOPED: Field sizing, placeholder usage (anti-pattern), helper text, character limits, input masking]
### Validation Patterns
[TO BE DEVELOPED: Inline vs on-submit, real-time validation, error message writing, success confirmation, required field indication]
### Complex Input Types
[TO BE DEVELOPED: File upload UX, date pickers, time selection, rich text editing, multi-select, autocomplete, search]
### Progressive Disclosure in Forms
[TO BE DEVELOPED: Conditional fields, wizards/multi-step forms, accordions, showing complexity gradually]
### Form Error Handling
[TO BE DEVELOPED: Error prevention (constraints, masks), clear error messages, error recovery, field-level vs form-level errors]
## Touch & Pointer Interactions
### Touch Targets
[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge reach areas on mobile]
### Touch vs Pointer Patterns
[TO BE DEVELOPED: Hover states on touch (problems), tap feedback, long press, swipe gestures, pinch-to-zoom]
### Gesture Design
[TO BE DEVELOPED: Swipe to delete, pull to refresh, drag to reorder, custom gestures, gesture discoverability]
## Keyboard Navigation
### Focus Management
[TO BE DEVELOPED: Focus rings (never remove without replacement), logical tab order, skip links, focus trapping in modals]
### Keyboard Shortcuts
[TO BE DEVELOPED: Common shortcuts, discoverability, avoiding conflicts, command palettes, keyboard-first workflows]
### Accessible Interaction Patterns
[TO BE DEVELOPED: ARIA roles for custom controls, managing focus in dynamic content, screen reader announcements]
## Navigation Patterns
### Menu & Navigation Design
[TO BE DEVELOPED: Mega menus, hamburger menus, breadcrumbs, tabs, pagination, infinite scroll vs load more]
### Modal & Dialog Patterns
[TO BE DEVELOPED: Modal entry/exit, focus management, escape to close, backdrop click behavior, sheet patterns]
### Command & Context Menus
[TO BE DEVELOPED: Right-click menus, command palettes, dropdown menus, action sheets]
## Error Prevention & Recovery
### Constraints & Guards
[TO BE DEVELOPED: Input constraints, disabled states, confirmation dialogs for destructive actions, undo mechanisms]
### Error Messages
[TO BE DEVELOPED: Clear language, actionable guidance, positive framing, where to show errors, when to show errors]
### Undo & Redo
[TO BE DEVELOPED: Undo patterns, toast notifications with undo, versioning, draft auto-save]
---
**IMPORTANT**: Test interactions with actual users and diverse input methods. What works with a mouse might fail with touch or keyboard.
**NEVER**:
- Remove focus indicators without providing visible alternatives (accessibility violation)
- Use placeholder text as labels (disappears on input, hard to remember)
- Make touch targets smaller than 44x44px
- Validate in real-time for long inputs (wait for blur)
- Show generic error messages ("Error occurred") - be specific and helpful
- Block user interaction without clear loading states
- Design only for mouse/pointer (test with keyboard and touch)
- Use custom controls without proper ARIA and keyboard support
Remember: Interaction design is where users actually experience your interface. Get this right, and everything else falls into place.
dist/gemini/GEMINI.md
Vendored
+42
View File
@@ -6,12 +6,54 @@ This repository contains specialized skills for different tasks. When you detect
Each skill provides deep expertise in its domain. The skills below are automatically imported and will guide your responses:
### ux-writing
**When to use**: Write clear, helpful, and human interface copy that users understand immediately. Use this skill when crafting microcopy, improving error messages, or establishing voice and tone. Produces concise, empathetic copy that guides users confidently through tasks without confusion or frustration.
@./GEMINI.ux-writing.md
### spatial-design
**When to use**: Master spatial design balancing systematic precision with artistic composition. Use this skill when building spacing systems, establishing grids, or improving visual hierarchy. Creates systematically organized layouts with compelling visual hierarchy and intentional spatial relationships.
@./GEMINI.spatial-design.md
### motion-design
**When to use**: Create purposeful motion that enhances usability and provides feedback without sacrificing performance. Use this skill when adding animations, building micro-interactions, or establishing motion systems. Produces smooth, delightful animations that guide attention and reinforce interactions while maintaining 60fps performance.
@./GEMINI.motion-design.md
### typography
**When to use**: Master typography systems that balance timeless principles with modern web capabilities. Use this skill when building type systems, improving readability, or establishing typographic hierarchy. Creates readable, systematically coherent typography that is both performant and aesthetically distinctive.
@./GEMINI.typography.md
### frontend-design
**When to use**: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
@./GEMINI.frontend-design.md
### interaction-design
**When to use**: Design intuitive interaction patterns that feel natural and provide clear feedback. Use this skill when building interactive components, designing forms, or establishing interaction standards. Creates accessible, forgiving interfaces where every state is clear and every action provides immediate feedback.
@./GEMINI.interaction-design.md
### color-and-contrast
**When to use**: Build sophisticated color systems balancing aesthetics with accessibility and function. Use this skill when establishing brand palettes, implementing theming, or ensuring WCAG compliance. Produces beautiful, accessible color implementations with systematic coherence across all theme variants.
@./GEMINI.color-and-contrast.md
### responsive-design
**When to use**: Create responsive interfaces that adapt beautifully across devices, screen sizes, and input methods. Use this skill when building mobile-first layouts, defining breakpoint strategies, or optimizing for touch. Produces fluid, performant experiences that feel native to each device while maintaining consistency.
@./GEMINI.responsive-design.md
## How Skills Work
dist/gemini/GEMINI.motion-design.md
Vendored
+105
View File
@@ -0,0 +1,105 @@
This skill guides the creation of motion design that enhances usability, provides feedback, and creates delight - without sacrificing performance or accessibility.
The user provides a motion challenge: adding animations to components, improving interaction feedback, building page transitions, creating micro-interactions, or establishing motion design systems. They may include performance constraints, aesthetic goals, or specific interaction problems to solve.
## Motion Design Thinking
Before animating anything, understand the purpose and context:
- **Purpose**: Why animate? Feedback? Delight? Guidance? Branding? Every animation needs a reason beyond "it looks cool."
- **Personality**: What character should motion convey? Snappy and energetic? Smooth and luxurious? Playful and bouncy? Subtle and refined?
- **Performance Budget**: Mobile devices? Complex pages? Can we afford GPU-intensive animations?
- **Accessibility**: Motion sensitivity, vestibular disorders, reduced motion preferences - some users need minimal animation.
**CRITICAL**: Animation should enhance understanding and usability, not obscure it. When in doubt, be subtle. Users notice janky animation more than no animation.
Then implement motion that is:
- Purposeful with clear functional or emotional goals
- Performant with smooth 60fps execution
- Accessible with reduced motion alternatives
- Choreographed with thoughtful timing and sequencing
## Classic Animation Principles
### Disney's 12 Principles (Web Context)
[TO BE DEVELOPED: Squash and stretch, anticipation, staging, follow-through, ease-in/ease-out, arcs, secondary action, timing, exaggeration, solid drawing, appeal - adapted for UI]
### Timing & Duration
[TO BE DEVELOPED: Micro-interactions (100-300ms), transitions (300-500ms), complex animations (500-1000ms), duration by distance, perceived speed]
### Easing & Curves
[TO BE DEVELOPED: Linear vs eased, ease-out (enter), ease-in (exit), ease-in-out (full cycle), custom cubic-bezier, spring physics]
## Types of UI Animation
### Micro-interactions
[TO BE DEVELOPED: Button feedback, hover states, toggle switches, like buttons, form validation feedback, loading indicators]
### Page Transitions
[TO BE DEVELOPED: Route transitions, modal entry/exit, drawer animations, cross-fade, slide, zoom patterns]
### State Transitions
[TO BE DEVELOPED: Loading → success → error flows, expand/collapse, show/hide, enable/disable state changes]
### Scrolling & Parallax
[TO BE DEVELOPED: Scroll-triggered animations, reveal on scroll, parallax layers, scroll-linked effects, intersection observer]
## Choreography & Sequencing
### Staggered Animations
[TO BE DEVELOPED: animation-delay patterns, sequential reveals, cascade effects, list item staggering]
### Orchestrated Page Loads
[TO BE DEVELOPED: Entry choreography, hero → content → details, creating narrative through sequence, attention management]
### Exit Choreography
[TO BE DEVELOPED: Reverse sequences, intentional exit timing, maintaining spatial relationships during exit]
## Technical Implementation
### CSS-Only Animation
[TO BE DEVELOPED: @keyframes, animation properties, transitions, transform, pseudo-element animations, hardware acceleration]
### JavaScript Animation
[TO BE DEVELOPED: Web Animations API, requestAnimationFrame, animation libraries (GSAP, Framer Motion, Motion One)]
### Performance Optimization
[TO BE DEVELOPED: GPU acceleration (transform, opacity only), will-change, avoiding layout thrashing, reducing paint, FPS monitoring]
## Motion Design Systems
### Motion Tokens
[TO BE DEVELOPED: Duration scales, easing tokens, named animations, consistent motion vocabulary]
### Reduced Motion
[TO BE DEVELOPED: prefers-reduced-motion, graceful degradation, essential vs decorative animation, crossfade alternatives]
---
**IMPORTANT**: One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions everywhere. Focus on high-impact moments.
**NEVER**:
- Animate everything (animation fatigue is real)
- Use long durations (>500ms) for UI feedback (users will perceive lag)
- Animate layout properties (width, height, top, left) - use transform instead
- Ignore prefers-reduced-motion (accessibility requirement)
- Use animation to hide slow loading (fix the loading time)
- Animate without purpose (every animation should answer "why?")
- Create animations that obscure content or block interaction
Remember: Motion is powerful - it can guide attention, provide feedback, and create emotional connection. Use it thoughtfully, not reflexively.
dist/gemini/GEMINI.responsive-design.md
Vendored
+152
View File
@@ -0,0 +1,152 @@
This skill guides the creation of responsive interfaces that adapt beautifully across devices, screen sizes, input methods, and usage contexts.
The user provides a responsive design challenge: building mobile-first layouts, defining breakpoint strategies, optimizing for touch vs pointer, creating fluid designs, or solving specific cross-device problems. They may include device requirements, constraints, or specific adaptation challenges.
## Responsive Design Thinking
Before implementing, understand the multi-device context:
- **Device Landscape**: Which devices matter? (Mobile, tablet, desktop, TV, watch?) What's the primary device?
- **Usage Context**: How do usage patterns differ by device? (On-the-go mobile vs focused desktop work)
- **Input Methods**: Touch, pointer, keyboard, voice, gamepad - what input methods need support?
- **Network Conditions**: Fast wifi vs slow 3G - how does this impact design decisions?
- **Content Priority**: What's essential on all devices vs optional on larger screens?
**CRITICAL**: Responsive design is not just about scaling - it's about adapting the experience appropriately for each context.
Then build responsive systems that are:
- Mobile-first with progressive enhancement
- Fluid and adaptable across viewport sizes
- Optimized for different input methods
- Performant on constrained devices
- Contextually appropriate
## Mobile-First Methodology
### Why Mobile-First
[TO BE DEVELOPED: Progressive enhancement, performance benefits, forces priority decisions, mobile usage dominance]
### Mobile-First Implementation
[TO BE DEVELOPED: Start with mobile styles, add complexity with min-width media queries, content-first approach]
## Breakpoint Strategies
### Choosing Breakpoints
[TO BE DEVELOPED: Content-driven vs device-driven, common breakpoint values, in-between states, avoiding too many breakpoints]
### Breakpoint Architecture
[TO BE DEVELOPED: Named breakpoints, breakpoint tokens, consistent usage across codebase]
## Fluid & Adaptive Design
### Fluid Typography
[TO BE DEVELOPED: clamp(), viewport units, fluid type scales, maintaining readability]
### Fluid Spacing
[TO BE DEVELOPED: Responsive spacing scales, container-relative spacing, clamp() for margins/padding]
### Fluid Layouts
[TO BE DEVELOPED: CSS Grid auto-fit/auto-fill, flexible columns, aspect-ratio, fluid containers]
### Container Queries
[TO BE DEVELOPED: Component-level responsiveness, when to use vs media queries, polyfills]
## Layout Adaptation Patterns
### Navigation Patterns
[TO BE DEVELOPED: Mobile hamburger/drawer, tablet side panel, desktop persistent nav, bottom nav bars]
### Content Reflow
[TO BE DEVELOPED: Single column → multi-column, stacking orders, priority content first]
### Component Adaptation
[TO BE DEVELOPED: Tabs → accordion, horizontal → vertical, show/hide patterns, progressive disclosure]
## Touch vs Pointer Optimization
### Touch Target Sizing
[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge cases]
### Touch-Specific Interactions
[TO BE DEVELOPED: Swipe gestures, pull-to-refresh, long press, avoiding hover-dependent patterns]
### Hybrid Devices
[TO BE DEVELOPED: Supporting both touch and pointer, feature detection, adaptive interfaces]
## Viewport & Screen Considerations
### Viewport Meta Tag
[TO BE DEVELOPED: Proper viewport configuration, zoom control, initial scale]
### Safe Areas
[TO BE DEVELOPED: iPhone notch, rounded corners, system UI insets, padding for safe areas]
### Orientation Handling
[TO BE DEVELOPED: Portrait vs landscape, orientation-specific layouts, testing both orientations]
### High-DPI Screens
[TO BE DEVELOPED: Retina images, 2x/3x assets, SVG for icons, responsive images]
## Responsive Images & Media
### Responsive Images
[TO BE DEVELOPED: srcset, sizes, picture element, art direction, lazy loading]
### Video Adaptation
[TO BE DEVELOPED: Responsive video embeds, bandwidth considerations, poster images]
## Performance on Mobile
### Mobile Performance Budget
[TO BE DEVELOPED: Constrained CPU/memory, slow connections, battery concerns]
### Loading Strategies
[TO BE DEVELOPED: Critical path optimization, lazy loading, code splitting for mobile]
## Testing Strategies
### Device Testing
[TO BE DEVELOPED: Real device testing, browser DevTools, emulators, viewport testing]
### Testing Checklist
[TO BE DEVELOPED: Different viewports, orientations, input methods, connection speeds]
---
**IMPORTANT**: Test on real devices, not just DevTools. Device emulation is useful but misses real-world constraints.
**NEVER**:
- Design desktop-first and try to cram into mobile
- Hide critical functionality on mobile
- Use device detection instead of feature detection
- Create separate mobile/desktop codebases (maintain one responsive codebase)
- Ignore landscape orientation
- Use fixed pixel values without considering smaller/larger screens
- Forget about tablet (it's not just big phone or small desktop)
- Assume all mobile devices are powerful (many users have older devices)
Remember: Responsive design is about creating experiences that work everywhere while feeling native nowhere. Adapt intelligently for context while maintaining consistency.
dist/gemini/GEMINI.spatial-design.md
Vendored
+122
View File
@@ -0,0 +1,122 @@
This skill guides the creation of spatial systems that balance mathematical precision with artistic composition, ensuring interfaces are both systematically organized and visually compelling.
The user provides a layout challenge: building spacing systems, establishing grids, improving visual hierarchy, fixing composition issues, or implementing responsive layouts. They may include design system constraints, aesthetic goals, or specific spatial problems to solve.
## Spatial Design Thinking
Before arranging elements, understand the compositional strategy:
- **Content Priority**: What's most important? What should users see first, second, third? Hierarchy starts here.
- **Visual Weight Distribution**: Where should the eye go? Balanced or intentionally unbalanced? Symmetrical or asymmetric?
- **Density vs Breathing Room**: Controlled density (information-rich) or generous space (editorial)? Match context and audience.
- **Reading Patterns**: Z-pattern (scanning), F-pattern (text-heavy), focal point (marketing), free-form (experimental)?
**CRITICAL**: Space is not empty - it's an active design element. Negative space gives positive elements room to breathe and meaning.
Then build layout systems that are:
- Systematically consistent with clear spacing rules
- Visually balanced with intentional hierarchy
- Responsive and adaptive across viewports
- Compositionally strong with clear focal points
## Classic Composition Principles
### Visual Hierarchy Fundamentals
[TO BE DEVELOPED: Size, weight, color, position, contrast as hierarchy tools, Gestalt principles (proximity, similarity, closure)]
### Balance & Symmetry
[TO BE DEVELOPED: Symmetrical vs asymmetrical balance, visual weight calculation, creating tension and resolution]
### The Rule of Thirds & Golden Ratio
[TO BE DEVELOPED: Classic composition grids, golden ratio applications, when to follow vs break rules]
### Focal Points & Eye Movement
[TO BE DEVELOPED: Creating focal points, directing eye flow, Z/F/circular patterns, intentional disruption]
## Spacing Systems
### Spacing Scales
[TO BE DEVELOPED: 4pt/8pt systems, modular scales, mathematical progressions (linear, exponential, Fibonacci)]
### Vertical Rhythm
[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, spacing ratios, rhythm across components]
### Micro vs Macro Space
[TO BE DEVELOPED: Component-internal spacing, between-component spacing, section spacing, page-level breathing room]
### Spacing Token Architecture
[TO BE DEVELOPED: Primitive spacing tokens, semantic spacing (component gaps, section padding), contextual spacing]
## Grid Systems & Layout Patterns
### Grid Fundamentals
[TO BE DEVELOPED: Column grids, modular grids, baseline grids, grid anatomy (columns, gutters, margins)]
### Classic Layout Patterns
[TO BE DEVELOPED: Sidebar layouts, holy grail, card grids, masonry, magazine layouts, asymmetric layouts]
### Modern CSS Layout
[TO BE DEVELOPED: CSS Grid (explicit placement, auto-placement, grid areas), Flexbox (direction, alignment, distribution), Container Queries]
## Creating Visual Hierarchy
### Hierarchy Through Scale
[TO BE DEVELOPED: Size relationships, proportional scaling, meaningful jumps vs gradual progression]
### Hierarchy Through Weight & Color
[TO BE DEVELOPED: Visual weight calculation, using color for emphasis, combining multiple hierarchy tools]
### Hierarchy Through Position
[TO BE DEVELOPED: Placement importance, reading order, visual flow direction, breaking the grid for emphasis]
## Responsive Spatial Design
### Breakpoint Strategy
[TO BE DEVELOPED: Mobile-first vs desktop-first, breakpoint values, in-between states, content-driven breakpoints]
### Layout Adaptation
[TO BE DEVELOPED: Reflow patterns, navigation transformation, content prioritization, progressive disclosure]
### Fluid Spacing & Layout
[TO BE DEVELOPED: clamp() for spacing, viewport units, fluid grids, container-relative spacing]
## Depth & Layering
### Creating Depth
[TO BE DEVELOPED: Layering, shadows, elevation systems, z-index scales, parallax effects]
### Overlap & Intersection
[TO BE DEVELOPED: Intentional overlap, breaking containers, elements that cross boundaries]
---
**IMPORTANT**: Systematic spacing doesn't mean boring. Use the system as a foundation, then break it intentionally for impact.
**NEVER**:
- Use arbitrary spacing values outside your scale (unless intentionally breaking the system)
- Create layouts that ignore natural reading patterns without good reason
- Forget that white space is a design element, not wasted space
- Make all spacing equal (variety creates hierarchy)
- Build responsive layouts that only work at breakpoint edges
- Create hierarchy through size alone (combine multiple tools)
Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally.
dist/gemini/GEMINI.typography.md
Vendored
+90
View File
@@ -0,0 +1,90 @@
This skill guides the creation and refinement of typography systems that balance timeless principles with modern web capabilities.
The user provides a typography challenge: building a type system, improving readability, selecting fonts, fixing hierarchy, or implementing responsive typography. They may include context about the project's aesthetic direction, constraints, or specific problems to solve.
## Typography Thinking
Before implementing, understand the context and establish a clear typographic voice:
- **Purpose & Audience**: What is being communicated? Who is reading? Technical docs need different type than marketing pages.
- **Tone & Character**: What personality should the typography convey? Authoritative? Playful? Elegant? Minimal? The fonts and system should embody this.
- **Constraints**: Performance budgets, browser support, existing design system, accessibility requirements.
- **Reading Context**: Long-form reading vs scanning, dense information vs spacious editorial, desktop vs mobile primary usage.
**CRITICAL**: Typography is the voice of your interface. Invest time in getting it right - it impacts every single screen.
Then build or refine a typography system that is:
- Readable and accessible across devices and contexts
- Systematically coherent with clear hierarchy
- Performant and technically sound
- Aesthetically distinctive and appropriate for the brand
## Classic Typography Principles
### Vertical Rhythm & Baseline Grids
[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, maintaining rhythm across components]
### Modular Scale & Hierarchy
[TO BE DEVELOPED: Scale ratios, establishing hierarchy through size/weight/spacing, visual balance]
### Readability & Measure
[TO BE DEVELOPED: Line length (45-75 CPL), line height ratios, paragraph spacing, optimal reading conditions]
## Font Selection & Pairing
### Choosing Distinctive Fonts
[TO BE DEVELOPED: Avoiding generic choices, character in typefaces, matching tone to content, Google Fonts alternatives]
### Pairing Principles
[TO BE DEVELOPED: Contrast-based pairing, display + body, serif + sans, mono + geometric, variable fonts]
### Web Font Loading
[TO BE DEVELOPED: FOUT/FOIT strategies, font-display, subsetting, variable fonts, preloading]
## Modern Web Typography
### Fluid & Responsive Type
[TO BE DEVELOPED: clamp(), viewport units, container query typography, breakpoint-based scales]
### Advanced Features
[TO BE DEVELOPED: OpenType features, ligatures, font-feature-settings, kerning, number styles]
### Performance Optimization
[TO BE DEVELOPED: Font loading strategies, subsetting, variable fonts vs static, hosting decisions]
## Typography System Architecture
### Token Structure
[TO BE DEVELOPED: Font stacks, size scales, weight scales, line heights, letter spacing]
### Implementation
[TO BE DEVELOPED: CSS custom properties, utility classes, semantic vs primitive tokens]
## Accessibility Considerations
[TO BE DEVELOPED: Text scaling, contrast ratios, font sizes, dyslexia-friendly choices]
---
**IMPORTANT**: Balance trendy font choices with timeless readability principles. A distinctive font is worthless if users can't comfortably read it.
**NEVER**:
- Use more than 2-3 font families in a single project
- Sacrifice readability for aesthetic novelty
- Ignore font loading performance
- Skip fallback font definitions
- Use decorative fonts for body text
- Implement arbitrary font sizes without a systematic scale
Remember: Typography is 95% of design. Master it, and everything else becomes easier.
dist/gemini/GEMINI.ux-writing.md
Vendored
+197
View File
@@ -0,0 +1,197 @@
This skill guides the creation of interface copy that is clear, concise, helpful, and human - the words that make products understandable and usable.
The user provides a UX writing challenge: writing microcopy, improving error messages, crafting instructions, establishing voice and tone, or fixing unclear interface text. They may include brand guidelines, audience context, or specific copy problems to solve.
## UX Writing Thinking
Before writing, understand the context and user needs:
- **User Context**: What are users trying to accomplish? What's their emotional state? What do they already know?
- **Content Purpose**: Inform? Guide? Reassure? Warn? Celebrate? Different moments need different approaches.
- **Brand Voice**: Professional? Casual? Playful? Technical? Voice should match brand and audience.
- **Constraints**: Character limits, space limitations, translation considerations, accessibility requirements.
**CRITICAL**: Good UX writing is invisible - users understand immediately without noticing the words. Bad UX writing creates confusion and frustration.
Then write copy that is:
- Clear and immediately understandable
- Concise without sacrificing clarity
- Helpful and action-oriented
- Human and empathetic
- Consistent in terminology and tone
## Fundamental Principles
### Clarity Over Cleverness
[TO BE DEVELOPED: Plain language, avoid jargon, specific over vague, "Save changes" not "OK"]
### Concise But Complete
[TO BE DEVELOPED: Remove unnecessary words, but include essential information, balance brevity with clarity]
### Active Voice
[TO BE DEVELOPED: "We saved your changes" not "Your changes have been saved", action-oriented language]
### User-Focused Language
[TO BE DEVELOPED: "Your" not "The", focus on user benefits, user's mental model]
### Consistency
[TO BE DEVELOPED: Use same terms throughout, don't vary for variety, build terminology glossary]
## Voice & Tone
### Establishing Brand Voice
[TO BE DEVELOPED: Personality dimensions, voice guidelines, voice vs tone distinction]
### Adapting Tone to Context
[TO BE DEVELOPED: Success = celebratory, Error = empathetic, Loading = reassuring, matching emotional moment]
### Voice Across Cultures
[TO BE DEVELOPED: Cultural sensitivity, humor translation, formality levels, global considerations]
## Microcopy Excellence
### Button & CTA Copy
[TO BE DEVELOPED: Specific actions ("Create account" not "Submit"), verb + noun structure, outcome-oriented]
### Labels & Instructions
[TO BE DEVELOPED: Clear, specific labels, instructions before fields, showing format with examples]
### Placeholder Text
[TO BE DEVELOPED: When to use (rarely), never as labels, examples not instructions]
### Tooltips & Help Text
[TO BE DEVELOPED: Adding value beyond label, answering implicit questions, brevity with links to details]
## Error Messages & Validation
### Error Message Principles
[TO BE DEVELOPED: Explain what happened, suggest fix, don't blame user, provide examples, link to help]
### Validation Feedback
[TO BE DEVELOPED: Inline validation, timing (on blur vs on submit), success states, clear requirements]
### Error Message Patterns
[TO BE DEVELOPED: Format errors, permission errors, network errors, system errors, 404s]
## Forms & Inputs
### Form Labels
[TO BE DEVELOPED: Descriptive labels, required field indication, why you're asking (when not obvious)]
### Help Text
[TO BE DEVELOPED: Format guidance, why you need this information, examples, constraints]
### Confirmation Dialogs
[TO BE DEVELOPED: Specific about action, explain consequences, clear button labels, don't overuse]
## System Messages
### Success Messages
[TO BE DEVELOPED: Confirm what happened, what happens next, celebrate appropriately, be brief]
### Loading States
[TO BE DEVELOPED: What's happening, time expectations, progress indication, personality in waiting]
### Empty States
[TO BE DEVELOPED: Explain why empty, value of filling it, clear CTA, welcoming not dead-end]
## Navigation & Wayfinding
### Navigation Labels
[TO BE DEVELOPED: Specific and descriptive, user language not internal terms, clear information scent]
### Breadcrumbs & Headers
[TO BE DEVELOPED: Clear location indication, hierarchical clarity, shortened for mobile]
### Search & Filters
[TO BE DEVELOPED: Clear search placeholders, filter labels, no results messaging]
## Content Hierarchy & Structure
### Scannable Writing
[TO BE DEVELOPED: Short paragraphs, bullet points, clear headings, front-load important info]
### Progressive Disclosure
[TO BE DEVELOPED: Essential info first, details on demand, expandable sections, learn more links]
## Writing for Accessibility
### Screen Reader Considerations
[TO BE DEVELOPED: ARIA labels, alt text writing, link text clarity, button labels]
### Plain Language
[TO BE DEVELOPED: Reading level considerations, avoid jargon, explain technical terms]
### Text Alternatives
[TO BE DEVELOPED: Transcripts for audio/video, alt text for images, descriptions for complex UI]
## Internationalization (i18n)
### Writing for Translation
[TO BE DEVELOPED: Avoid idioms, complete sentences, context for translators, text expansion space]
### Cultural Adaptation
[TO BE DEVELOPED: Cultural sensitivity, date/time formats, address formats, name formats]
## Content Patterns by Type
### Onboarding Copy
[TO BE DEVELOPED: Welcome messages, getting started, first-time guidance, value proposition]
### Settings & Preferences
[TO BE DEVELOPED: Clear option descriptions, impact explanation, defaults indication]
### Notifications
[TO BE DEVELOPED: Scannable, actionable, appropriate urgency, notification fatigue prevention]
---
**IMPORTANT**: Read your copy out loud. If it sounds awkward or robotic, rewrite until it sounds human.
**NEVER**:
- Use jargon without explanation
- Blame users ("You made an error" → "This field is required")
- Be vague ("Something went wrong" - explain what!)
- Use passive voice unnecessarily
- Vary terminology for variety (consistency matters)
- Write overly long explanations (be concise)
- Use humor for errors (be empathetic)
- Assume technical knowledge
- Use all caps (except acronyms)
- End questions with periods (use question marks)
Remember: You're a clarity expert and empathetic communicator. Write like you're helping a friend who's smart but unfamiliar with your product. Be clear, be helpful, be human.
dist/gemini/commands/adapt.toml
Vendored
+188
View File
@@ -0,0 +1,188 @@
description = "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments."
prompt = """
Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
## Assess Adaptation Challenge
Understand what needs adaptation and why:
1. **Identify the source context**:
- What was it designed for originally? (Desktop web? Mobile app?)
- What assumptions were made? (Large screen? Mouse input? Fast connection?)
- What works well in current context?
2. **Understand target context**:
- **Device**: Mobile, tablet, desktop, TV, watch, print?
- **Input method**: Touch, mouse, keyboard, voice, gamepad?
- **Screen constraints**: Size, resolution, orientation?
- **Connection**: Fast wifi, slow 3G, offline?
- **Usage context**: On-the-go vs desk, quick glance vs focused reading?
- **User expectations**: What do users expect on this platform?
3. **Identify adaptation challenges**:
- What won't fit? (Content, navigation, features)
- What won't work? (Hover states on touch, tiny touch targets)
- What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.
## Plan Adaptation Strategy
Create context-appropriate strategy:
### Mobile Adaptation (Desktop → Mobile)
**Layout Strategy**:
- Single column instead of multi-column
- Vertical stacking instead of side-by-side
- Full-width components instead of fixed widths
- Bottom navigation instead of top/side navigation
**Interaction Strategy**:
- Touch targets 44x44px minimum (not hover-dependent)
- Swipe gestures where appropriate (lists, carousels)
- Bottom sheets instead of dropdowns
- Thumbs-first design (controls within thumb reach)
- Larger tap areas with more spacing
**Content Strategy**:
- Progressive disclosure (don't show everything at once)
- Prioritize primary content (secondary content in tabs/accordions)
- Shorter text (more concise)
- Larger text (16px minimum)
**Navigation Strategy**:
- Hamburger menu or bottom navigation
- Reduce navigation complexity
- Sticky headers for context
- Back button in navigation flow
### Tablet Adaptation (Hybrid Approach)
**Layout Strategy**:
- Two-column layouts (not single or three-column)
- Side panels for secondary content
- Master-detail views (list + detail)
- Adaptive based on orientation (portrait vs landscape)
**Interaction Strategy**:
- Support both touch and pointer
- Touch targets 44x44px but allow denser layouts than phone
- Side navigation drawers
- Multi-column forms where appropriate
### Desktop Adaptation (Mobile → Desktop)
**Layout Strategy**:
- Multi-column layouts (use horizontal space)
- Side navigation always visible
- Multiple information panels simultaneously
- Fixed widths with max-width constraints (don't stretch to 4K)
**Interaction Strategy**:
- Hover states for additional information
- Keyboard shortcuts
- Right-click context menus
- Drag and drop where helpful
- Multi-select with Shift/Cmd
**Content Strategy**:
- Show more information upfront (less progressive disclosure)
- Data tables with many columns
- Richer visualizations
- More detailed descriptions
### Print Adaptation (Screen → Print)
**Layout Strategy**:
- Page breaks at logical points
- Remove navigation, footer, interactive elements
- Black and white (or limited color)
- Proper margins for binding
**Content Strategy**:
- Expand shortened content (show full URLs, hidden sections)
- Add page numbers, headers, footers
- Include metadata (print date, page title)
- Convert charts to print-friendly versions
### Email Adaptation (Web → Email)
**Layout Strategy**:
- Narrow width (600px max)
- Single column only
- Inline CSS (no external stylesheets)
- Table-based layouts (for email client compatibility)
**Interaction Strategy**:
- Large, obvious CTAs (buttons not text links)
- No hover states (not reliable)
- Deep links to web app for complex interactions
## Implement Adaptations
Apply changes systematically:
### Responsive Breakpoints
Choose appropriate breakpoints:
- Mobile: 320px-767px
- Tablet: 768px-1023px
- Desktop: 1024px+
- Or content-driven breakpoints (where design breaks)
### Layout Adaptation Techniques
- **CSS Grid/Flexbox**: Reflow layouts automatically
- **Container Queries**: Adapt based on container, not viewport
- **`clamp()`**: Fluid sizing between min and max
- **Media queries**: Different styles for different contexts
- **Display properties**: Show/hide elements per context
### Touch Adaptation
- Increase touch target sizes (44x44px minimum)
- Add more spacing between interactive elements
- Remove hover-dependent interactions
- Add touch feedback (ripples, highlights)
- Consider thumb zones (easier to reach bottom than top)
### Content Adaptation
- Use `display: none` sparingly (still downloads)
- Progressive enhancement (core content first, enhancements on larger screens)
- Lazy loading for off-screen content
- Responsive images (`srcset`, `picture` element)
### Navigation Adaptation
- Transform complex nav to hamburger/drawer on mobile
- Bottom nav bar for mobile apps
- Persistent side navigation on desktop
- Breadcrumbs on smaller screens for context
**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
**NEVER**:
- Hide core functionality on mobile (if it matters, make it work)
- Assume desktop = powerful device (consider accessibility, older machines)
- Use different information architecture across contexts (confusing)
- Break user expectations for platform (mobile users expect mobile patterns)
- Forget landscape orientation on mobile/tablet
- Use generic breakpoints blindly (use content-driven breakpoints)
- Ignore touch on desktop (many desktop devices have touch)
## Verify Adaptations
Test thoroughly across contexts:
- **Real devices**: Test on actual phones, tablets, desktops
- **Different orientations**: Portrait and landscape
- **Different browsers**: Safari, Chrome, Firefox, Edge
- **Different OS**: iOS, Android, Windows, macOS
- **Different input methods**: Touch, mouse, keyboard
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network
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.
"""
dist/gemini/commands/animate.toml
Vendored
+140
View File
@@ -0,0 +1,140 @@
description = "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight."
prompt = """
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
## Assess Animation Opportunities
Analyze where motion would improve the experience:
1. **Identify static areas**:
- **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.)
- **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes)
- **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious
- **Lack of delight**: Functional but joyless interactions
- **Missed guidance**: Opportunities to direct attention or explain behavior
2. **Understand the context**:
- What's the personality? (Playful vs serious, energetic vs calm)
- What's the performance budget? (Mobile-first? Complex page?)
- Who's the audience? (Motion-sensitive users? Power users who want speed?)
- What matters most? (One hero animation vs many micro-interactions?)
**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them.
## Plan Animation Strategy
Create a purposeful animation plan:
- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
## Implement Animations
Add motion systematically across these categories:
### Entrance Animations
- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations
- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
- **Content reveals**: Scroll-triggered animations using intersection observer
- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
- Click: Quick scale down then up (0.95 → 1), ripple effect
- Loading: Spinner or pulse state
- **Form interactions**:
- Input focus: Border color transition, slight scale or glow
- Validation: Shake on error, check mark on success, smooth color transitions
- **Toggle switches**: Smooth slide + color transition (200-300ms)
- **Checkboxes/radio**: Check mark animation, ripple effect
- **Like/favorite**: Scale + rotation, particle effects, color transition
### State Transitions
- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
- **Expand/collapse**: Height transition with overflow handling, icon rotation
- **Loading states**: Skeleton screen fades, spinner animations, progress bars
- **Success/error**: Color transitions, icon animations, shake or bounce effects
- **Enable/disable**: Opacity transitions, cursor changes
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
- **Carousel/slider**: Smooth transforms, snap points, momentum
- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators
### Feedback & Guidance
- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights
- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning
- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation
- **Focus flow**: Highlight path through form or workflow
### Delight Moments
- **Empty states**: Subtle floating animations on illustrations
- **Completed actions**: Confetti, check mark flourish, success celebrations
- **Easter eggs**: Hidden interactions for discovery
- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches
## Technical Implementation
Use appropriate techniques for each animation:
### CSS Animations
```css
/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)
```
### JavaScript Animation
```javascript
/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion for React
- GSAP for complex sequences
```
### Performance
- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties
- **will-change**: Add sparingly for known expensive animations
- **Reduce paint**: Minimize repaints, use `contain` where appropriate
- **Monitor FPS**: Ensure 60fps on target devices
### Accessibility
```css
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
**NEVER**:
- Animate without purpose (every animation should have a reason)
- Use long durations (>500ms feels laggy)
- Animate layout properties (width, height, top, left) - use transform instead
- Block interaction during animation (unless intentional)
- Ignore reduced motion preferences (accessibility violation)
- Animate everything (animation fatigue is real)
- Create animations that draw more attention than content
## Verify Quality
Test animations thoroughly:
- **Smooth at 60fps**: No jank on target devices
- **Feels natural**: Easing curves feel organic, not robotic
- **Appropriate timing**: Not too fast (jarring) or too slow (laggy)
- **Reduced motion works**: Animations disabled or simplified appropriately
- **Doesn't block**: Users can interact during/after animations
- **Adds value**: Makes interface clearer or more delightful
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.
"""
dist/gemini/commands/audit.toml
Vendored
+112
View File
@@ -0,0 +1,112 @@
description = "Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations."
prompt = """
Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address.
## Diagnostic Scan
Run comprehensive checks across multiple dimensions:
1. **Accessibility (A11y)** - Check for:
- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
- **Missing ARIA**: Interactive elements without proper roles, labels, or states
- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps
- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons
- **Alt text**: Missing or poor image descriptions
- **Form issues**: Inputs without labels, poor error messaging, missing required indicators
2. **Performance** - Check for:
- **Layout thrashing**: Reading/writing layout properties in loops
- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity
- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change
- **Bundle size**: Unnecessary imports, unused dependencies
- **Render performance**: Unnecessary re-renders, missing memoization
3. **Theming** - Check for:
- **Hard-coded colors**: Colors not using design tokens
- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme
- **Inconsistent tokens**: Using wrong tokens, mixing token types
- **Theme switching issues**: Values that don't update on theme change
4. **Responsive Design** - Check for:
- **Fixed widths**: Hard-coded widths that break on mobile
- **Touch targets**: Interactive elements < 44x44px
- **Horizontal scroll**: Content overflow on narrow viewports
- **Text scaling**: Layouts that break when text size increases
- **Missing breakpoints**: No mobile/tablet variants
**CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
## Generate Comprehensive Report
Create a detailed audit report with the following structure:
### Executive Summary
- Total issues found (count by severity)
- Most critical issues (top 3-5)
- Overall quality score (if applicable)
- Recommended next steps
### Detailed Findings by Severity
For each issue, document:
- **Location**: Where the issue occurs (component, file, line)
- **Severity**: Critical / High / Medium / Low
- **Category**: Accessibility / Performance / Theming / Responsive
- **Description**: What the issue is
- **Impact**: How it affects users
- **WCAG/Standard**: Which standard it violates (if applicable)
- **Recommendation**: How to fix it
- **Suggested command**: Which command to use (e.g., `/normalize`, `/optimize`, `/harden`)
#### Critical Issues
[Issues that block core functionality or violate WCAG A]
#### High-Severity Issues
[Significant usability/accessibility impact, WCAG AA violations]
#### Medium-Severity Issues
[Quality issues, WCAG AAA violations, performance concerns]
#### Low-Severity Issues
[Minor inconsistencies, optimization opportunities]
### Patterns & Systemic Issues
Identify recurring problems:
- "Hard-coded colors appear in 15+ components, should use design tokens"
- "Touch targets consistently too small (<44px) throughout mobile experience"
- "Missing focus indicators on all custom interactive components"
### Positive Findings
Note what's working well:
- Good practices to maintain
- Exemplary implementations to replicate elsewhere
### Recommendations by Priority
Create actionable plan:
1. **Immediate**: Critical blockers to fix first
2. **Short-term**: High-severity issues (this sprint)
3. **Medium-term**: Quality improvements (next sprint)
4. **Long-term**: Nice-to-haves and optimizations
### Suggested Commands for Fixes
Map issues to appropriate commands:
- "Use `/normalize` to align components with design system (addresses 23 theming issues)"
- "Use `/optimize` to improve performance (addresses 12 performance issues)"
- "Use `/harden` to improve i18n and text handling (addresses 8 edge cases)"
**IMPORTANT**: Be thorough but actionable. Too many low-priority issues creates noise. Focus on what actually matters.
**NEVER**:
- Report issues without explaining impact (why does this matter?)
- Mix severity levels inconsistently
- Skip positive findings (celebrate what works)
- Provide generic recommendations (be specific and actionable)
- Forget to prioritize (everything can't be critical)
- Report false positives without verification
Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.
"""
dist/gemini/commands/bolder.toml
Vendored
+98
View File
@@ -0,0 +1,98 @@
description = "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability."
prompt = """
Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.
## Assess Current State
Analyze what makes the design feel too safe or boring:
1. **Identify weakness sources**:
- **Generic choices**: System fonts, basic colors, standard layouts
- **Timid scale**: Everything is medium-sized with no drama
- **Low contrast**: Everything has similar visual weight
- **Static**: No motion, no energy, no life
- **Predictable**: Standard patterns with no surprises
- **Flat hierarchy**: Nothing stands out or commands attention
2. **Understand the context**:
- What's the brand personality? (How far can we push?)
- What's the purpose? (Marketing can be bolder than financial dashboards)
- Who's the audience? (What will resonate?)
- What are the constraints? (Brand guidelines, accessibility, performance)
**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos.
## Plan Amplification
Create a strategy to increase impact while maintaining coherence:
- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing)
- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane.
- **Risk budget**: How experimental can we be? Push boundaries within constraints.
- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast)
**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration.
## Amplify the Design
Systematically increase impact across these dimensions:
### Typography Amplification
- **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration)
- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x)
- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400
- **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent
### Color Intensification
- **Increase saturation**: Shift to more vibrant, energetic colors
- **Bold palette**: Introduce unexpected color combinations
- **Dominant color strategy**: Let one bold color own 60% of the design
- **Sharp accents**: High-contrast accent colors that pop
- **Gradients**: Rich, multi-stop gradients or mesh gradients
### Spatial Drama
- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings
- **Break the grid**: Let hero elements escape containers and cross boundaries
- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry
- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px)
- **Overlap**: Layer elements intentionally for depth
### Visual Effects
- **Dramatic shadows**: Large, soft shadows for elevation
- **Background treatments**: Gradients, mesh patterns, noise textures, geometric patterns
- **Blur effects**: Glassmorphism, backdrop blur, depth effects
- **Borders & frames**: Thick borders, decorative frames, custom shapes
- **Custom elements**: Illustrative elements, custom icons, decorative details
### Motion & Animation
- **Entrance choreography**: Staggered, dramatic page load animations
- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences
- **Micro-interactions**: Satisfying hover effects, click feedback, state changes
- **Transitions**: Smooth, noticeable transitions between states
### Composition Boldness
- **Hero moments**: Create clear focal points with dramatic treatment
- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements
- **Full-bleed elements**: Use full viewport width/height for impact
- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits
**NEVER**:
- Add effects randomly without purpose (chaos ≠ bold)
- Sacrifice readability for aesthetics (body text must be readable)
- Make everything bold (then nothing is bold - need contrast)
- Ignore accessibility (bold design must still meet WCAG standards)
- Overwhelm with motion (animation fatigue is real)
- Copy trendy aesthetics blindly (bold means distinctive, not derivative)
## Verify Quality
Ensure amplification maintains usability and coherence:
- **Still functional**: Can users accomplish tasks without distraction?
- **Coherent**: Does everything feel intentional and unified?
- **Memorable**: Will users remember this experience?
- **Performant**: Do all these effects run smoothly?
- **Accessible**: Does it still meet accessibility standards?
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.
"""
dist/gemini/commands/clarify.toml
Vendored
+170
View File
@@ -0,0 +1,170 @@
description = "Improve unclear UX copy, error messages, microcopy, labels, and instructions. Makes interfaces easier to understand and use."
prompt = """
Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use.
## Assess Current Copy
Identify what makes the text unclear or ineffective:
1. **Find clarity problems**:
- **Jargon**: Technical terms users won't understand
- **Ambiguity**: Multiple interpretations possible
- **Passive voice**: "Your file has been uploaded" vs "We uploaded your file"
- **Length**: Too wordy or too terse
- **Assumptions**: Assuming user knowledge they don't have
- **Missing context**: Users don't know what to do or why
- **Tone mismatch**: Too formal, too casual, or inappropriate for situation
2. **Understand the context**:
- Who's the audience? (Technical? General? First-time users?)
- What's the user's mental state? (Stressed during error? Confident during success?)
- What's the action? (What do we want users to do?)
- What's the constraint? (Character limits? Space limitations?)
**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets.
## Plan Copy Improvements
Create a strategy for clearer communication:
- **Primary message**: What's the ONE thing users need to know?
- **Action needed**: What should users do next (if anything)?
- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?)
- **Constraints**: Length limits, brand voice, localization considerations
**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words.
## Improve Copy Systematically
Refine text across these common areas:
### Error Messages
**Bad**: "Error 403: Forbidden"
**Good**: "You don't have permission to view this page. Contact your admin for access."
**Bad**: "Invalid input"
**Good**: "Email addresses need an @ symbol. Try: name@example.com"
**Principles**:
- Explain what went wrong in plain language
- Suggest how to fix it
- Don't blame the user
- Include examples when helpful
- Link to help/support if applicable
### Form Labels & Instructions
**Bad**: "DOB (MM/DD/YYYY)"
**Good**: "Date of birth" (with placeholder showing format)
**Bad**: "Enter value here"
**Good**: "Your email address" or "Company name"
**Principles**:
- Use clear, specific labels (not generic placeholders)
- Show format expectations with examples
- Explain why you're asking (when not obvious)
- Put instructions before the field, not after
- Keep required field indicators clear
### Button & CTA Text
**Bad**: "Click here" | "Submit" | "OK"
**Good**: "Create account" | "Save changes" | "Got it, thanks"
**Principles**:
- Describe the action specifically
- Use active voice (verb + noun)
- Match user's mental model
- Be specific ("Save" is better than "OK")
### Help Text & Tooltips
**Bad**: "This is the username field"
**Good**: "Choose a username. You can change this later in Settings."
**Principles**:
- Add value (don't just repeat the label)
- Answer the implicit question ("What is this?" or "Why do you need this?")
- Keep it brief but complete
- Link to detailed docs if needed
### Empty States
**Bad**: "No items"
**Good**: "No projects yet. Create your first project to get started."
**Principles**:
- Explain why it's empty (if not obvious)
- Show next action clearly
- Make it welcoming, not dead-end
### Success Messages
**Bad**: "Success"
**Good**: "Settings saved! Your changes will take effect immediately."
**Principles**:
- Confirm what happened
- Explain what happens next (if relevant)
- Be brief but complete
- Match the user's emotional moment (celebrate big wins)
### Loading States
**Bad**: "Loading..." (for 30+ seconds)
**Good**: "Analyzing your data... this usually takes 30-60 seconds"
**Principles**:
- Set expectations (how long?)
- Explain what's happening (when it's not obvious)
- Show progress when possible
- Offer escape hatch if appropriate ("Cancel")
### Confirmation Dialogs
**Bad**: "Are you sure?"
**Good**: "Delete 'Project Alpha'? This can't be undone."
**Principles**:
- State the specific action
- Explain consequences (especially for destructive actions)
- Use clear button labels ("Delete project" not "Yes")
- Don't overuse confirmations (only for risky actions)
### Navigation & Wayfinding
**Bad**: Generic labels like "Items" | "Things" | "Stuff"
**Good**: Specific labels like "Your projects" | "Team members" | "Settings"
**Principles**:
- Be specific and descriptive
- Use language users understand (not internal jargon)
- Make hierarchy clear
- Consider information scent (breadcrumbs, current location)
## Apply Clarity Principles
Every piece of copy should follow these rules:
1. **Be specific**: "Enter email" not "Enter value"
2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity)
3. **Be active**: "Save changes" not "Changes will be saved"
4. **Be human**: "Oops, something went wrong" not "System error encountered"
5. **Be helpful**: Tell users what to do, not just what happened
6. **Be consistent**: Use same terms throughout (don't vary for variety)
**NEVER**:
- Use jargon without explanation
- Blame users ("You made an error" → "This field is required")
- Be vague ("Something went wrong" without explanation)
- Use passive voice unnecessarily
- Write overly long explanations (be concise)
- Use humor for errors (be empathetic instead)
- Assume technical knowledge
- Vary terminology (pick one term and stick with it)
## Verify Improvements
Test that copy improvements work:
- **Comprehension**: Can users understand without context?
- **Actionability**: Do users know what to do next?
- **Brevity**: Is it as short as possible while remaining clear?
- **Consistency**: Does it match terminology elsewhere?
- **Tone**: Is it appropriate for the situation?
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.
"""
dist/gemini/commands/colorize.toml
Vendored
+126
View File
@@ -0,0 +1,126 @@
description = "Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive."
prompt = """
Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.
## Assess Color Opportunity
Analyze the current state and identify opportunities:
1. **Understand current state**:
- **Color absence**: Pure grayscale? Limited neutrals? One timid accent?
- **Missed opportunities**: Where could color add meaning, hierarchy, or delight?
- **Context**: What's appropriate for this domain and audience?
- **Brand**: Are there existing brand colors we should use?
2. **Identify where color adds value**:
- **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue)
- **Hierarchy**: Drawing attention to important elements
- **Categorization**: Different sections, types, or states
- **Emotional tone**: Warmth, energy, trust, creativity
- **Wayfinding**: Helping users navigate and understand structure
- **Delight**: Moments of visual interest and personality
**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.
## Plan Color Strategy
Create a purposeful color introduction plan:
- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
- **Dominant color**: Which color owns 60% of colored elements?
- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%)
- **Application strategy**: Where does each color appear and why?
**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
## Introduce Color Strategically
Add color systematically across these dimensions:
### Semantic Color
- **State indicators**:
- Success: Green tones (emerald, forest, mint)
- Error: Red/pink tones (rose, crimson, coral)
- Warning: Orange/amber tones
- Info: Blue tones (sky, ocean, indigo)
- Neutral: Gray/slate for inactive states
- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.)
- **Progress indicators**: Colored bars, rings, or charts showing completion or health
### Accent Color Application
- **Primary actions**: Color the most important buttons/CTAs
- **Links**: Add color to clickable text (maintain accessibility)
- **Icons**: Colorize key icons for recognition and personality
- **Headers/titles**: Add color to section headers or key labels
- **Hover states**: Introduce color on interaction
### Background & Surfaces
- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`)
- **Colored sections**: Use subtle background colors to separate areas
- **Gradient backgrounds**: Add depth with subtle gradients
- **Cards & surfaces**: Tint cards or surfaces slightly for warmth
### Data Visualization
- **Charts & graphs**: Use color to encode categories or values
- **Heatmaps**: Color intensity shows density or importance
- **Comparison**: Color coding for different datasets or timeframes
### Borders & Accents
- **Accent borders**: Add colored left/top borders to cards or sections
- **Underlines**: Color underlines for emphasis or active states
- **Dividers**: Subtle colored dividers instead of gray lines
- **Focus rings**: Colored focus indicators matching brand
### Typography Color
- **Colored headings**: Use brand colors for section headings (maintain contrast)
- **Highlight text**: Color for emphasis or categories
- **Labels & tags**: Small colored labels for metadata or categories
### Decorative Elements
- **Illustrations**: Add colored illustrations or icons
- **Shapes**: Geometric shapes in brand colors as background elements
- **Gradients**: Colorful gradient overlays or mesh backgrounds
- **Blobs/organic shapes**: Soft colored shapes for visual interest
## Balance & Refinement
Ensure color addition improves rather than overwhelms:
### Maintain Hierarchy
- **Dominant color** (60%): Primary brand color or most used accent
- **Secondary color** (30%): Supporting color for variety
- **Accent color** (10%): High contrast for key moments
- **Neutrals** (remaining): Gray/black/white for structure
### Accessibility
- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
- **Don't rely on color alone**: Use icons, labels, or patterns alongside color
- **Test for color blindness**: Verify red/green combinations work for all users
### Cohesion
- **Consistent palette**: Use colors from defined palette, not arbitrary choices
- **Systematic application**: Same color meanings throughout (green always = success)
- **Temperature consistency**: Warm palette stays warm, cool stays cool
**NEVER**:
- Use every color in the rainbow (choose 2-4 colors beyond neutrals)
- Apply color randomly without semantic meaning
- Violate WCAG contrast requirements
- Use color as the only indicator (accessibility issue)
- Make everything colorful (defeats the purpose)
- Choose colors that conflict with brand identity
- Use pure black (`#000`) or pure white (`#fff`) for large areas
## Verify Color Addition
Test that colorization improves the experience:
- **Better hierarchy**: Does color guide attention appropriately?
- **Clearer meaning**: Does color help users understand states/categories?
- **More engaging**: Does the interface feel warmer and more inviting?
- **Still accessible**: Do all color combinations meet WCAG standards?
- **Not overwhelming**: Is color balanced and purposeful?
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.
"""
dist/gemini/commands/delight.toml
Vendored
+288
View File
@@ -0,0 +1,288 @@
description = "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful."
prompt = """
Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
## Assess Delight Opportunities
Identify where delight would enhance (not distract from) the experience:
1. **Find natural delight moments**:
- **Success states**: Completed actions (save, send, publish)
- **Empty states**: First-time experiences, onboarding
- **Loading states**: Waiting periods that could be entertaining
- **Achievements**: Milestones, streaks, completions
- **Interactions**: Hover states, clicks, drags
- **Errors**: Softening frustrating moments
- **Easter eggs**: Hidden discoveries for curious users
2. **Understand the context**:
- What's the brand personality? (Playful? Professional? Quirky? Elegant?)
- Who's the audience? (Tech-savvy? Creative? Corporate?)
- What's the emotional context? (Accomplishment? Exploration? Frustration?)
- What's appropriate? (Banking app ≠ gaming app)
3. **Define delight strategy**:
- **Subtle sophistication**: Refined micro-interactions (luxury brands)
- **Playful personality**: Whimsical illustrations and copy (consumer apps)
- **Helpful surprises**: Anticipating needs before users ask (productivity tools)
- **Sensory richness**: Satisfying sounds, smooth animations (creative tools)
**CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
## Delight Principles
Follow these guidelines:
### Delight Amplifies, Never Blocks
- Delight moments should be quick (< 1 second)
- Never delay core functionality for delight
- Make delight skippable or subtle
- Respect user's time and task focus
### Surprise and Discovery
- Hide delightful details for users to discover
- Reward exploration and curiosity
- Don't announce every delight moment
- Let users share discoveries with others
### Appropriate to Context
- Match delight to emotional moment (celebrate success, empathize with errors)
- Respect the user's state (don't be playful during critical errors)
- Match brand personality and audience expectations
- Cultural sensitivity (what's delightful varies by culture)
### Compound Over Time
- Delight should remain fresh with repeated use
- Vary responses (not same animation every time)
- Reveal deeper layers with continued use
- Build anticipation through patterns
## Delight Techniques
Add personality and joy through these methods:
### Micro-interactions & Animation
**Button delight**:
```css
/* Satisfying button press */
.button {
transition: transform 0.1s, box-shadow 0.1s;
}
.button:active {
transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Ripple effect on click */
/* Spring animation on hover */
.button:hover {
animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
```
**Loading delight**:
- Playful loading animations (not just spinners)
- Personality in loading messages ("Herding pixels..." "Teaching robots to dance...")
- Progress indication with encouraging messages
- Skeleton screens with subtle animations
**Success animations**:
- Checkmark draw animation
- Confetti burst for major achievements
- Gentle scale + fade for confirmation
- Satisfying sound effects (subtle)
**Hover surprises**:
- Icons that animate on hover
- Color shifts or glow effects
- Tooltip reveals with personality
- Cursor changes (custom cursors for branded experiences)
### Personality in Copy
**Playful error messages**:
```
❌ "Error 404"
✅ "This page is playing hide and seek. (And winning)"
❌ "Connection failed"
✅ "Looks like the internet took a coffee break. Want to retry?"
```
**Encouraging empty states**:
```
❌ "No projects"
✅ "Your canvas awaits. Create something amazing."
❌ "No messages"
✅ "Inbox zero! You're crushing it today."
```
**Playful labels & tooltips**:
```
❌ "Delete"
✅ "Send to void" (for playful brand)
❌ "Help"
✅ "Rescue me" (tooltip)
```
**IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
### Illustrations & Visual Personality
**Custom illustrations**:
- Empty state illustrations (not stock icons)
- Error state illustrations (friendly monsters, quirky characters)
- Loading state illustrations (animated characters)
- Success state illustrations (celebrations)
**Icon personality**:
- Custom icon set matching brand personality
- Animated icons (subtle motion on hover/click)
- Illustrative icons (more detailed than generic)
- Consistent style across all icons
**Background effects**:
- Subtle particle effects
- Gradient mesh backgrounds
- Geometric patterns
- Parallax depth
- Time-of-day themes (morning vs night)
### Satisfying Interactions
**Drag and drop delight**:
- Lift effect on drag (shadow, scale)
- Snap animation when dropped
- Satisfying placement sound
- Undo toast ("Dropped in wrong place? [Undo]")
**Toggle switches**:
- Smooth slide with spring physics
- Color transition
- Haptic feedback on mobile
- Optional sound effect
**Progress & achievements**:
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
- Playful stats ("You're on fire! 🔥 5 days in a row")
**Form interactions**:
- Input fields that animate on focus
- Checkboxes that bounce when checked
- Success state that celebrates valid input
- Auto-grow textareas
### Sound Design
**Subtle audio cues** (when appropriate):
- Notification sounds (distinctive but not annoying)
- Success sounds (satisfying "ding")
- Error sounds (empathetic, not harsh)
- Typing sounds for chat/messaging
- Ambient background audio (very subtle)
**IMPORTANT**:
- Respect system sound settings
- Provide mute option
- Keep volumes quiet (subtle cues, not alarms)
- Don't play on every interaction (sound fatigue is real)
### Easter Eggs & Hidden Delights
**Discovery rewards**:
- Konami code unlocks special theme
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
- Console messages for developers ("Like what you see? We're hiring!")
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
- Seasonal color shifts
- Weather-based variations
- Time-based changes (dark at night, light during day)
**Contextual personality**:
- Different messages based on time of day
- Responses to specific user actions
- Randomized variations (not same every time)
- Progressive reveals with continued use
### Loading & Waiting States
**Make waiting engaging**:
- Interesting loading messages that rotate
- Progress bars with personality
- Mini-games during long loads
- Fun facts or tips while waiting
- Countdown with encouraging messages
```
Loading messages rotation:
- "Waking up the servers..."
- "Teaching robots to dance..."
- "Consulting the magic 8-ball..."
- "Counting backwards from infinity..."
```
### Celebration Moments
**Success celebrations**:
- Confetti for major milestones
- Animated checkmarks for completions
- Progress bar celebrations at 100%
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
**Milestone recognition**:
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
- Anniversary celebrations
## Implementation Patterns
**Animation libraries**:
- Framer Motion (React)
- GSAP (universal)
- Lottie (After Effects animations)
- Canvas confetti (party effects)
**Sound libraries**:
- Howler.js (audio management)
- Use-sound (React hook)
**Physics libraries**:
- React Spring (spring physics)
- Popmotion (animation primitives)
**IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features.
**NEVER**:
- Delay core functionality for delight
- Force users through delightful moments (make skippable)
- Use delight to hide poor UX
- Overdo it (less is more)
- Ignore accessibility (animate responsibly, provide alternatives)
- Make every interaction delightful (special moments should be special)
- Sacrifice performance for delight
- Be inappropriate for context (read the room)
## Verify Delight Quality
Test that delight actually delights:
- **User reactions**: Do users smile? Share screenshots?
- **Doesn't annoy**: Still pleasant after 100th time?
- **Doesn't block**: Can users opt out or skip?
- **Performant**: No jank, no slowdown
- **Appropriate**: Matches brand and context
- **Accessible**: Works with reduced motion, screen readers
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.
"""
dist/gemini/commands/extract.toml
Vendored
+87
View File
@@ -0,0 +1,87 @@
description = "Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library."
prompt = """
Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.
## Discover
Analyze the target area to identify extraction opportunities:
1. **Find the design system**: Locate your design system, component library, or shared UI directory (grep for "design system", "ui", "components", etc.). Understand its structure:
- Component organization and naming conventions
- Design token structure (if any)
- Documentation patterns
- Import/export conventions
**CRITICAL**: If no design system exists, ask before creating one. Understand the preferred location and structure first.
2. **Identify patterns**: Look for:
- **Repeated components**: Similar UI patterns used multiple times (buttons, cards, inputs, etc.)
- **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens
- **Inconsistent variations**: Multiple implementations of the same concept (3 different button styles)
- **Reusable patterns**: Layout patterns, composition patterns, interaction patterns worth systematizing
3. **Assess value**: Not everything should be extracted. Consider:
- Is this used 3+ times, or likely to be reused?
- Would systematizing this improve consistency?
- Is this a general pattern or context-specific?
- What's the maintenance cost vs benefit?
## Plan Extraction
Create a systematic extraction plan:
- **Components to extract**: Which UI elements become reusable components?
- **Tokens to create**: Which hard-coded values become design tokens?
- **Variants to support**: What variations does each component need?
- **Naming conventions**: Component names, token names, prop names that match existing patterns
- **Migration path**: How to refactor existing uses to consume the new shared versions
**IMPORTANT**: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.
## Extract & Enrich
Build improved, reusable versions:
- **Components**: Create well-designed components with:
- Clear props API with sensible defaults
- Proper variants for different use cases
- Accessibility built in (ARIA, keyboard navigation, focus management)
- Documentation and usage examples
- **Design tokens**: Create tokens with:
- Clear naming (primitive vs semantic)
- Proper hierarchy and organization
- Documentation of when to use each token
- **Patterns**: Document patterns with:
- When to use this pattern
- Code examples
- Variations and combinations
**NEVER**:
- Extract one-off, context-specific implementations without generalization
- Create components so generic they're useless
- Extract without considering existing design system conventions
- Skip proper TypeScript types or prop documentation
- Create tokens for every single value (tokens should have semantic meaning)
## Migrate
Replace existing uses with the new shared versions:
- **Find all instances**: Search for the patterns you've extracted
- **Replace systematically**: Update each use to consume the shared version
- **Test thoroughly**: Ensure visual and functional parity
- **Delete dead code**: Remove the old implementations
## Document
Update design system documentation:
- Add new components to the component library
- Document token usage and values
- Add examples and guidelines
- Update any Storybook or component catalog
Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.
"""
dist/gemini/commands/harden.toml
Vendored
+350
View File
@@ -0,0 +1,350 @@
description = "Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready."
prompt = """
Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs.
## Assess Hardening Needs
Identify weaknesses and edge cases:
1. **Test with extreme inputs**:
- Very long text (names, descriptions, titles)
- Very short text (empty, single character)
- Special characters (emoji, RTL text, accents)
- Large numbers (millions, billions)
- Many items (1000+ list items, 50+ options)
- No data (empty states)
2. **Test error scenarios**:
- Network failures (offline, slow, timeout)
- API errors (400, 401, 403, 404, 500)
- Validation errors
- Permission errors
- Rate limiting
- Concurrent operations
3. **Test internationalization**:
- Long translations (German is often 30% longer than English)
- RTL languages (Arabic, Hebrew)
- Character sets (Chinese, Japanese, Korean, emoji)
- Date/time formats
- Number formats (1,000 vs 1.000)
- Currency symbols
**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality.
## Hardening Dimensions
Systematically improve resilience:
### Text Overflow & Wrapping
**Long text handling**:
```css
/* Single line with ellipsis */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Multi-line with clamp */
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Allow wrapping */
.wrap {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
```
**Flex/Grid overflow**:
```css
/* Prevent flex items from overflowing */
.flex-item {
min-width: 0; /* Allow shrinking below content size */
overflow: hidden;
}
/* Prevent grid items from overflowing */
.grid-item {
min-width: 0;
min-height: 0;
}
```
**Responsive text sizing**:
- Use `clamp()` for fluid typography
- Set minimum readable sizes (14px on mobile)
- Test text scaling (zoom to 200%)
- Ensure containers expand with text
### Internationalization (i18n)
**Text expansion**:
- Add 30-40% space budget for translations
- Use flexbox/grid that adapts to content
- Test with longest language (usually German)
- Avoid fixed widths on text containers
```jsx
// ❌ Bad: Assumes short English text
<button className="w-24">Submit</button>
// ✅ Good: Adapts to content
<button className="px-4 py-2">Submit</button>
```
**RTL (Right-to-Left) support**:
```css
/* Use logical properties */
margin-inline-start: 1rem; /* Not margin-left */
padding-inline: 1rem; /* Not padding-left/right */
border-inline-end: 1px solid; /* Not border-right */
/* Or use dir attribute */
[dir="rtl"] .arrow { transform: scaleX(-1); }
```
**Character set support**:
- Use UTF-8 encoding everywhere
- Test with Chinese/Japanese/Korean (CJK) characters
- Test with emoji (they can be 2-4 bytes)
- Handle different scripts (Latin, Cyrillic, Arabic, etc.)
**Date/Time formatting**:
```javascript
// ✅ Use Intl API for proper formatting
new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024
new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(1234.56); // $1,234.56
```
**Pluralization**:
```javascript
// ❌ Bad: Assumes English pluralization
`${count} item${count !== 1 ? 's' : ''}`
// ✅ Good: Use proper i18n library
t('items', { count }) // Handles complex plural rules
```
### Error Handling
**Network errors**:
- Show clear error messages
- Provide retry button
- Explain what happened
- Offer offline mode (if applicable)
- Handle timeout scenarios
```jsx
// Error states with recovery
{error && (
<ErrorMessage>
<p>Failed to load data. {error.message}</p>
<button onClick={retry}>Try again</button>
</ErrorMessage>
)}
```
**Form validation errors**:
- Inline errors near fields
- Clear, specific messages
- Suggest corrections
- Don't block submission unnecessarily
- Preserve user input on error
**API errors**:
- Handle each status code appropriately
- 400: Show validation errors
- 401: Redirect to login
- 403: Show permission error
- 404: Show not found state
- 429: Show rate limit message
- 500: Show generic error, offer support
**Graceful degradation**:
- Core functionality works without JavaScript
- Images have alt text
- Progressive enhancement
- Fallbacks for unsupported features
### Edge Cases & Boundary Conditions
**Empty states**:
- No items in list
- No search results
- No notifications
- No data to display
- Provide clear next action
**Loading states**:
- Initial load
- Pagination load
- Refresh
- Show what's loading ("Loading your projects...")
- Time estimates for long operations
**Large datasets**:
- Pagination or virtual scrolling
- Search/filter capabilities
- Performance optimization
- Don't load all 10,000 items at once
**Concurrent operations**:
- Prevent double-submission (disable button while loading)
- Handle race conditions
- Optimistic updates with rollback
- Conflict resolution
**Permission states**:
- No permission to view
- No permission to edit
- Read-only mode
- Clear explanation of why
**Browser compatibility**:
- Polyfills for modern features
- Fallbacks for unsupported CSS
- Feature detection (not browser detection)
- Test in target browsers
### Input Validation & Sanitization
**Client-side validation**:
- Required fields
- Format validation (email, phone, URL)
- Length limits
- Pattern matching
- Custom validation rules
**Server-side validation** (always):
- Never trust client-side only
- Validate and sanitize all inputs
- Protect against injection attacks
- Rate limiting
**Constraint handling**:
```html
<!-- Set clear constraints -->
<input
type="text"
maxlength="100"
pattern="[A-Za-z0-9]+"
required
aria-describedby="username-hint"
/>
<small id="username-hint">
Letters and numbers only, up to 100 characters
</small>
```
### Accessibility Resilience
**Keyboard navigation**:
- All functionality accessible via keyboard
- Logical tab order
- Focus management in modals
- Skip links for long content
**Screen reader support**:
- Proper ARIA labels
- Announce dynamic changes (live regions)
- Descriptive alt text
- Semantic HTML
**Motion sensitivity**:
```css
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
**High contrast mode**:
- Test in Windows high contrast mode
- Don't rely only on color
- Provide alternative visual cues
### Performance Resilience
**Slow connections**:
- Progressive image loading
- Skeleton screens
- Optimistic UI updates
- Offline support (service workers)
**Memory leaks**:
- Clean up event listeners
- Cancel subscriptions
- Clear timers/intervals
- Abort pending requests on unmount
**Throttling & Debouncing**:
```javascript
// Debounce search input
const debouncedSearch = debounce(handleSearch, 300);
// Throttle scroll handler
const throttledScroll = throttle(handleScroll, 100);
```
## Testing Strategies
**Manual testing**:
- Test with extreme data (very long, very short, empty)
- Test in different languages
- Test offline
- Test slow connection (throttle to 3G)
- Test with screen reader
- Test keyboard-only navigation
- Test on old browsers
**Automated testing**:
- Unit tests for edge cases
- Integration tests for error scenarios
- E2E tests for critical paths
- Visual regression tests
- Accessibility tests (axe, WAVE)
**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined.
**NEVER**:
- Assume perfect input (validate everything)
- Ignore internationalization (design for global)
- Leave error messages generic ("Error occurred")
- Forget offline scenarios
- Trust client-side validation alone
- Use fixed widths for text
- Assume English-length text
- Block entire interface when one component errors
## Verify Hardening
Test thoroughly with edge cases:
- **Long text**: Try names with 100+ characters
- **Emoji**: Use emoji in all text fields
- **RTL**: Test with Arabic or Hebrew
- **CJK**: Test with Chinese/Japanese/Korean
- **Network issues**: Disable internet, throttle connection
- **Large datasets**: Test with 1000+ items
- **Concurrent actions**: Click submit 10 times rapidly
- **Errors**: Force API errors, test all error states
- **Empty**: Remove all data, test empty states
Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component.
"""
dist/gemini/commands/normalize.toml
Vendored
+1 -3
View File
@@ -1,8 +1,6 @@
description = "Normalize design to match your design system and ensure consistency"
prompt = """
This command ensures features match your design system's standards and feel cohesive with the rest of your application. Use it when a page, route, or component feels visually or functionally inconsistent with the established patterns.
The user provides a feature to normalize (explicitly or via context). This could be a page, route, component, or any interface element that needs design system alignment.
Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns.
## Plan
dist/gemini/commands/onboard.toml
Vendored
+235
View File
@@ -0,0 +1,235 @@
description = "Design or improve onboarding flows, empty states, and first-time user experiences. Helps users get started successfully and understand value quickly."
prompt = """
Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly.
## Assess Onboarding Needs
Understand what users need to learn and why:
1. **Identify the challenge**:
- What are users trying to accomplish?
- What's confusing or unclear about current experience?
- Where do users get stuck or drop off?
- What's the "aha moment" we want users to reach?
2. **Understand the users**:
- What's their experience level? (Beginners, power users, mixed?)
- What's their motivation? (Excited and exploring? Required by work?)
- What's their time commitment? (5 minutes? 30 minutes?)
- What alternatives do they know? (Coming from competitor? New to category?)
3. **Define success**:
- What's the minimum users need to learn to be successful?
- What's the key action we want them to take? (First project? First invite?)
- How do we know onboarding worked? (Completion rate? Time to value?)
**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible.
## Onboarding Principles
Follow these core principles:
### Show, Don't Tell
- Demonstrate with working examples, not just descriptions
- Provide real functionality in onboarding, not separate tutorial mode
- Use progressive disclosure - teach one thing at a time
### Make It Optional (When Possible)
- Let experienced users skip onboarding
- Don't block access to product
- Provide "Skip" or "I'll explore on my own" options
### Time to Value
- Get users to their "aha moment" ASAP
- Front-load most important concepts
- Teach 20% that delivers 80% of value
- Save advanced features for contextual discovery
### Context Over Ceremony
- Teach features when users need them, not upfront
- Empty states are onboarding opportunities
- Tooltips and hints at point of use
### Respect User Intelligence
- Don't patronize or over-explain
- Be concise and clear
- Assume users can figure out standard patterns
## Design Onboarding Experiences
Create appropriate onboarding for the context:
### Initial Product Onboarding
**Welcome Screen**:
- Clear value proposition (what is this product?)
- What users will learn/accomplish
- Time estimate (honest about commitment)
- Option to skip (for experienced users)
**Account Setup**:
- Minimal required information (collect more later)
- Explain why you're asking for each piece of information
- Smart defaults where possible
- Social login when appropriate
**Core Concept Introduction**:
- Introduce 1-3 core concepts (not everything)
- Use simple language and examples
- Interactive when possible (do, don't just read)
- Progress indication (step 1 of 3)
**First Success**:
- Guide users to accomplish something real
- Pre-populated examples or templates
- Celebrate completion (but don't overdo it)
- Clear next steps
### Feature Discovery & Adoption
**Empty States**:
Instead of blank space, show:
- What will appear here (description + screenshot/illustration)
- Why it's valuable
- Clear CTA to create first item
- Example or template option
Example:
```
No projects yet
Projects help you organize your work and collaborate with your team.
[Create your first project] or [Start from template]
```
**Contextual Tooltips**:
- Appear at relevant moment (first time user sees feature)
- Point directly at relevant UI element
- Brief explanation + benefit
- Dismissable (with "Don't show again" option)
- Optional "Learn more" link
**Feature Announcements**:
- Highlight new features when they're released
- Show what's new and why it matters
- Let users try immediately
- Dismissable
**Progressive Onboarding**:
- Teach features when users encounter them
- Badges or indicators on new/unused features
- Unlock complexity gradually (don't show all options immediately)
### Guided Tours & Walkthroughs
**When to use**:
- Complex interfaces with many features
- Significant changes to existing product
- Industry-specific tools needing domain knowledge
**How to design**:
- Spotlight specific UI elements (dim rest of page)
- Keep steps short (3-7 steps max per tour)
- Allow users to click through tour freely
- Include "Skip tour" option
- Make replayable (help menu)
**Best practices**:
- Interactive > passive (let users click real buttons)
- Focus on workflow, not features ("Create a project" not "This is the project button")
- Provide sample data so actions work
### Interactive Tutorials
**When to use**:
- Users need hands-on practice
- Concepts are complex or unfamiliar
- High stakes (better to practice in safe environment)
**How to design**:
- Sandbox environment with sample data
- Clear objectives ("Create a chart showing sales by region")
- Step-by-step guidance
- Validation (confirm they did it right)
- Graduation moment (you're ready!)
### Documentation & Help
**In-product help**:
- Contextual help links throughout interface
- Keyboard shortcut reference
- Search-able help center
- Video tutorials for complex workflows
**Help patterns**:
- `?` icon near complex features
- "Learn more" links in tooltips
- Keyboard shortcut hints (`⌘K` shown on search box)
## Empty State Design
Every empty state needs:
### What Will Be Here
"Your recent projects will appear here"
### Why It Matters
"Projects help you organize your work and collaborate with your team"
### How to Get Started
[Create project] or [Import from template]
### Visual Interest
Illustration or icon (not just text on blank page)
### Contextual Help
"Need help getting started? [Watch 2-min tutorial]"
**Empty state types**:
- **First use**: Never used this feature (emphasize value, provide template)
- **User cleared**: Intentionally deleted everything (light touch, easy to recreate)
- **No results**: Search or filter returned nothing (suggest different query, clear filters)
- **No permissions**: Can't access (explain why, how to get access)
- **Error state**: Failed to load (explain what happened, retry option)
## Implementation Patterns
### Technical approaches:
**Tooltip libraries**: Tippy.js, Popper.js
**Tour libraries**: Intro.js, Shepherd.js, React Joyride
**Modal patterns**: Focus trap, backdrop, ESC to close
**Progress tracking**: LocalStorage for "seen" states
**Analytics**: Track completion, drop-off points
**Storage patterns**:
```javascript
// Track which onboarding steps user has seen
localStorage.setItem('onboarding-completed', 'true');
localStorage.setItem('feature-tooltip-seen-reports', 'true');
```
**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals.
**NEVER**:
- Force users through long onboarding before they can use product
- Patronize users with obvious explanations
- Show same tooltip repeatedly (respect dismissals)
- Block all UI during tour (let users explore)
- Create separate tutorial mode disconnected from real product
- Overwhelm with information upfront (progressive disclosure!)
- Hide "Skip" or make it hard to find
- Forget about returning users (don't show initial onboarding again)
## Verify Onboarding Quality
Test with real users:
- **Time to completion**: Can users complete onboarding quickly?
- **Comprehension**: Do users understand after completing?
- **Action**: Do users take desired next step?
- **Skip rate**: Are too many users skipping? (Maybe it's too long/not valuable)
- **Completion rate**: Are users completing? (If low, simplify)
- **Time to value**: How long until users get first value?
Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence.
"""
dist/gemini/commands/optimize.toml
Vendored
+261
View File
@@ -0,0 +1,261 @@
description = "Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother."
prompt = """
Identify and fix performance issues to create faster, smoother user experiences.
## Assess Performance Issues
Understand current performance and identify problems:
1. **Measure current state**:
- **Core Web Vitals**: LCP, FID/INP, CLS scores
- **Load time**: Time to interactive, first contentful paint
- **Bundle size**: JavaScript, CSS, image sizes
- **Runtime performance**: Frame rate, memory usage, CPU usage
- **Network**: Request count, payload sizes, waterfall
2. **Identify bottlenecks**:
- What's slow? (Initial load? Interactions? Animations?)
- What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)
- How bad is it? (Perceivable? Annoying? Blocking?)
- Who's affected? (All users? Mobile only? Slow connections?)
**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters.
## Optimization Strategy
Create systematic improvement plan:
### Loading Performance
**Optimize Images**:
- Use modern formats (WebP, AVIF)
- Proper sizing (don't load 3000px image for 300px display)
- Lazy loading for below-fold images
- Responsive images (`srcset`, `picture` element)
- Compress images (80-85% quality is usually imperceptible)
- Use CDN for faster delivery
```html
<img
src="hero.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
loading="lazy"
alt="Hero image"
/>
```
**Reduce JavaScript Bundle**:
- Code splitting (route-based, component-based)
- Tree shaking (remove unused code)
- Remove unused dependencies
- Lazy load non-critical code
- Use dynamic imports for large components
```javascript
// Lazy load heavy component
const HeavyChart = lazy(() => import('./HeavyChart'));
```
**Optimize CSS**:
- Remove unused CSS
- Critical CSS inline, rest async
- Minimize CSS files
- Use CSS containment for independent regions
**Optimize Fonts**:
- Use `font-display: swap` or `optional`
- Subset fonts (only characters you need)
- Preload critical fonts
- Use system fonts when appropriate
- Limit font weights loaded
```css
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap; /* Show fallback immediately */
unicode-range: U+0020-007F; /* Basic Latin only */
}
```
**Optimize Loading Strategy**:
- Critical resources first (async/defer non-critical)
- Preload critical assets
- Prefetch likely next pages
- Service worker for offline/caching
- HTTP/2 or HTTP/3 for multiplexing
### Rendering Performance
**Avoid Layout Thrashing**:
```javascript
// ❌ Bad: Alternating reads and writes (causes reflows)
elements.forEach(el => {
const height = el.offsetHeight; // Read (forces layout)
el.style.height = height * 2; // Write
});
// ✅ Good: Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // All reads
elements.forEach((el, i) => {
el.style.height = heights[i] * 2; // All writes
});
```
**Optimize Rendering**:
- Use CSS `contain` property for independent regions
- Minimize DOM depth (flatter is faster)
- Reduce DOM size (fewer elements)
- Use `content-visibility: auto` for long lists
- Virtual scrolling for very long lists (react-window, react-virtualized)
**Reduce Paint & Composite**:
- Use `transform` and `opacity` for animations (GPU-accelerated)
- Avoid animating layout properties (width, height, top, left)
- Use `will-change` sparingly for known expensive operations
- Minimize paint areas (smaller is faster)
### Animation Performance
**GPU Acceleration**:
```css
/* ✅ GPU-accelerated (fast) */
.animated {
transform: translateX(100px);
opacity: 0.5;
}
/* ❌ CPU-bound (slow) */
.animated {
left: 100px;
width: 300px;
}
```
**Smooth 60fps**:
- Target 16ms per frame (60fps)
- Use `requestAnimationFrame` for JS animations
- Debounce/throttle scroll handlers
- Use CSS animations when possible
- Avoid long-running JavaScript during animations
**Intersection Observer**:
```javascript
// Efficiently detect when elements enter viewport
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Element is visible, lazy load or animate
}
});
});
```
### React/Framework Optimization
**React-specific**:
- Use `memo()` for expensive components
- `useMemo()` and `useCallback()` for expensive computations
- Virtualize long lists
- Code split routes
- Avoid inline function creation in render
- Use React DevTools Profiler
**Framework-agnostic**:
- Minimize re-renders
- Debounce expensive operations
- Memoize computed values
- Lazy load routes and components
### Network Optimization
**Reduce Requests**:
- Combine small files
- Use SVG sprites for icons
- Inline small critical assets
- Remove unused third-party scripts
**Optimize APIs**:
- Use pagination (don't load everything)
- GraphQL to request only needed fields
- Response compression (gzip, brotli)
- HTTP caching headers
- CDN for static assets
**Optimize for Slow Connections**:
- Adaptive loading based on connection (navigator.connection)
- Optimistic UI updates
- Request prioritization
- Progressive enhancement
## Core Web Vitals Optimization
### Largest Contentful Paint (LCP < 2.5s)
- Optimize hero images
- Inline critical CSS
- Preload key resources
- Use CDN
- Server-side rendering
### First Input Delay (FID < 100ms) / INP (< 200ms)
- Break up long tasks
- Defer non-critical JavaScript
- Use web workers for heavy computation
- Reduce JavaScript execution time
### Cumulative Layout Shift (CLS < 0.1)
- Set dimensions on images and videos
- Don't inject content above existing content
- Use `aspect-ratio` CSS property
- Reserve space for ads/embeds
- Avoid animations that cause layout shifts
```css
/* Reserve space for image */
.image-container {
aspect-ratio: 16 / 9;
}
```
## Performance Monitoring
**Tools to use**:
- Chrome DevTools (Lighthouse, Performance panel)
- WebPageTest
- Core Web Vitals (Chrome UX Report)
- Bundle analyzers (webpack-bundle-analyzer)
- Performance monitoring (Sentry, DataDog, New Relic)
**Key metrics**:
- LCP, FID/INP, CLS (Core Web Vitals)
- Time to Interactive (TTI)
- First Contentful Paint (FCP)
- Total Blocking Time (TBT)
- Bundle size
- Request count
**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.
**NEVER**:
- Optimize without measuring (premature optimization)
- Sacrifice accessibility for performance
- Break functionality while optimizing
- Use `will-change` everywhere (creates new layers, uses memory)
- Lazy load above-fold content
- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first)
- Forget about mobile performance (often slower devices, slower connections)
## Verify Improvements
Test that optimizations worked:
- **Before/after metrics**: Compare Lighthouse scores
- **Real user monitoring**: Track improvements for real users
- **Different devices**: Test on low-end Android, not just flagship iPhone
- **Slow connections**: Throttle to 3G, test experience
- **No regressions**: Ensure functionality still works
- **User perception**: Does it *feel* faster?
Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.
"""
dist/gemini/commands/polish.toml
Vendored
+190
View File
@@ -0,0 +1,190 @@
description = "Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great."
prompt = """
Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished.
## Pre-Polish Assessment
Understand the current state and goals:
1. **Review completeness**:
- Is it functionally complete?
- Are there known issues to preserve (mark with TODOs)?
- What's the quality bar? (MVP vs flagship feature?)
- When does it ship? (How much time for polish?)
2. **Identify polish areas**:
- Visual inconsistencies
- Spacing and alignment issues
- Interaction state gaps
- Copy inconsistencies
- Edge cases and error states
- Loading and transition smoothness
**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete.
## Polish Systematically
Work through these dimensions methodically:
### Visual Alignment & Spacing
- **Pixel-perfect alignment**: Everything lines up to grid
- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps)
- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering)
- **Responsive consistency**: Spacing and alignment work at all breakpoints
- **Grid adherence**: Elements snap to baseline grid
**Check**:
- Enable grid overlay and verify alignment
- Check spacing with browser inspector
- Test at multiple viewport sizes
- Look for elements that "feel" off
### Typography Refinement
- **Hierarchy consistency**: Same elements use same sizes/weights throughout
- **Line length**: 45-75 characters for body text
- **Line height**: Appropriate for font size and context
- **Widows & orphans**: No single words on last line
- **Hyphenation**: Appropriate for language and column width
- **Kerning**: Adjust letter spacing where needed (especially headlines)
- **Font loading**: No FOUT/FOIT flashes
### Color & Contrast
- **Contrast ratios**: All text meets WCAG standards
- **Consistent token usage**: No hard-coded colors, all use design tokens
- **Theme consistency**: Works in all theme variants
- **Color meaning**: Same colors mean same things throughout
- **Accessible focus**: Focus indicators visible with sufficient contrast
### Interaction States
Every interactive element needs all states:
- **Default**: Resting state
- **Hover**: Subtle feedback (color, scale, shadow)
- **Focus**: Keyboard focus indicator (never remove without replacement)
- **Active**: Click/tap feedback
- **Disabled**: Clearly non-interactive
- **Loading**: Async action feedback
- **Error**: Validation or error state
- **Success**: Successful completion
**Missing states create confusion and broken experiences**.
### Micro-interactions & Transitions
- **Smooth transitions**: All state changes animated appropriately (200-300ms)
- **Consistent easing**: Same easing curves for similar transitions
- **No jank**: 60fps animations, no layout thrashing
- **Appropriate motion**: Motion serves purpose, not decoration
- **Reduced motion**: Respects `prefers-reduced-motion`
### Content & Copy
- **Consistent terminology**: Same things called same names throughout
- **Consistent capitalization**: Title Case vs Sentence case applied consistently
- **Grammar & spelling**: No typos
- **Appropriate length**: Not too wordy, not too terse
- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them)
### Icons & Images
- **Consistent style**: All icons from same family or matching style
- **Appropriate sizing**: Icons sized consistently for context
- **Proper alignment**: Icons align with adjacent text optically
- **Alt text**: All images have descriptive alt text
- **Loading states**: Images don't cause layout shift, proper aspect ratios
- **Retina support**: 2x assets for high-DPI screens
### Forms & Inputs
- **Label consistency**: All inputs properly labeled
- **Required indicators**: Clear and consistent
- **Error messages**: Helpful and consistent
- **Tab order**: Logical keyboard navigation
- **Auto-focus**: Appropriate (don't overuse)
- **Validation timing**: Consistent (on blur vs on submit)
### Edge Cases & Error States
- **Loading states**: All async actions have loading feedback
- **Empty states**: Helpful empty states, not just blank space
- **Error states**: Clear error messages with recovery paths
- **Success states**: Confirmation of successful actions
- **Long content**: Handles very long names, descriptions, etc.
- **No content**: Handles missing data gracefully
- **Offline**: Appropriate offline handling (if applicable)
### Responsiveness
- **All breakpoints**: Test mobile, tablet, desktop
- **Touch targets**: 44x44px minimum on touch devices
- **Readable text**: No text smaller than 14px on mobile
- **No horizontal scroll**: Content fits viewport
- **Appropriate reflow**: Content adapts logically
### Performance
- **Fast initial load**: Optimize critical path
- **No layout shift**: Elements don't jump after load (CLS)
- **Smooth interactions**: No lag or jank
- **Optimized images**: Appropriate formats and sizes
- **Lazy loading**: Off-screen content loads lazily
### Code Quality
- **Remove console logs**: No debug logging in production
- **Remove commented code**: Clean up dead code
- **Remove unused imports**: Clean up unused dependencies
- **Consistent naming**: Variables and functions follow conventions
- **Type safety**: No TypeScript `any` or ignored errors
- **Accessibility**: Proper ARIA labels and semantic HTML
## Polish Checklist
Go through systematically:
- [ ] Visual alignment perfect at all breakpoints
- [ ] Spacing uses design tokens consistently
- [ ] Typography hierarchy consistent
- [ ] All interactive states implemented
- [ ] All transitions smooth (60fps)
- [ ] Copy is consistent and polished
- [ ] Icons are consistent and properly sized
- [ ] All forms properly labeled and validated
- [ ] Error states are helpful
- [ ] Loading states are clear
- [ ] Empty states are welcoming
- [ ] Touch targets are 44x44px minimum
- [ ] Contrast ratios meet WCAG AA
- [ ] Keyboard navigation works
- [ ] Focus indicators visible
- [ ] No console errors or warnings
- [ ] No layout shift on load
- [ ] Works in all supported browsers
- [ ] Respects reduced motion preference
- [ ] Code is clean (no TODOs, console.logs, commented code)
**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up.
**NEVER**:
- Polish before it's functionally complete
- Spend hours on polish if it ships in 30 minutes (triage)
- Introduce bugs while polishing (test thoroughly)
- Ignore systematic issues (if spacing is off everywhere, fix the system)
- Perfect one thing while leaving others rough (consistent quality level)
## Final Verification
Before marking as done:
- **Use it yourself**: Actually interact with the feature
- **Test on real devices**: Not just browser DevTools
- **Ask someone else to review**: Fresh eyes catch things
- **Compare to design**: Match intended design
- **Check all states**: Don't just test happy path
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.
"""
dist/gemini/commands/quieter.toml
Vendored
+86
View File
@@ -0,0 +1,86 @@
description = "Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact."
prompt = """
Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.
## Assess Current State
Analyze what makes the design feel too intense:
1. **Identify intensity sources**:
- **Color saturation**: Overly bright or saturated colors
- **Contrast extremes**: Too much high-contrast juxtaposition
- **Visual weight**: Too many bold, heavy elements competing
- **Animation excess**: Too much motion or overly dramatic effects
- **Complexity**: Too many visual elements, patterns, or decorations
- **Scale**: Everything is large and loud with no hierarchy
2. **Understand the context**:
- What's the purpose? (Marketing vs tool vs reading experience)
- Who's the audience? (Some contexts need energy)
- What's working? (Don't throw away good ideas)
- What's the core message? (Preserve what matters)
**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.
## Plan Refinement
Create a strategy to reduce intensity while maintaining impact:
- **Color approach**: Desaturate or shift to more sophisticated tones?
- **Hierarchy approach**: Which elements should stay bold (very few), which should recede?
- **Simplification approach**: What can be removed entirely?
- **Sophistication approach**: How can we signal quality through restraint?
**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision.
## Refine the Design
Systematically reduce intensity across these dimensions:
### Color Refinement
- **Reduce saturation**: Shift from fully saturated to 70-85% saturation
- **Soften palette**: Replace bright colors with muted, sophisticated tones
- **Reduce color variety**: Use fewer colors more thoughtfully
- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
- **Gentler contrasts**: High contrast only where it matters most
### Visual Weight Reduction
- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness
- **White space**: Increase breathing room, reduce density
- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely
### Simplification
- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose
- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes
- **Reduce layering**: Flatten visual hierarchy where possible
- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
### Motion Reduction
- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds
- **Remove decorative animations**: Keep functional motion, remove flourishes
- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
### Composition Refinement
- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling
- **Align to grid**: Bring rogue elements back into systematic alignment
- **Even out spacing**: Replace extreme spacing variations with consistent rhythm
**NEVER**:
- Make everything the same size/weight (hierarchy still matters)
- Remove all color (quiet ≠ grayscale)
- Eliminate all personality (maintain character through refinement)
- Sacrifice usability for aesthetics (functional elements still need clear affordances)
- Make everything small and light (some anchors needed)
## Verify Quality
Ensure refinement maintains quality:
- **Still functional**: Can users still accomplish tasks easily?
- **Still distinctive**: Does it have character, or is it generic now?
- **Better reading**: Is text easier to read for extended periods?
- **Sophistication**: Does it feel more refined and premium?
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.
"""
dist/gemini/commands/simplify.toml
Vendored
+107
View File
@@ -0,0 +1,107 @@
description = "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean."
prompt = """
Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.
## Assess Current State
Analyze what makes the design feel complex or cluttered:
1. **Identify complexity sources**:
- **Too many elements**: Competing buttons, redundant information, visual clutter
- **Excessive variation**: Too many colors, fonts, sizes, styles without purpose
- **Information overload**: Everything visible at once, no progressive disclosure
- **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations
- **Confusing hierarchy**: Unclear what matters most
- **Feature creep**: Too many options, actions, or paths forward
2. **Find the essence**:
- What's the primary user goal? (There should be ONE)
- What's actually necessary vs nice-to-have?
- What can be removed, hidden, or combined?
- What's the 20% that delivers 80% of value?
**CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.
## Plan Simplification
Create a ruthless editing strategy:
- **Core purpose**: What's the ONE thing this should accomplish?
- **Essential elements**: What's truly necessary to achieve that purpose?
- **Progressive disclosure**: What can be hidden until needed?
- **Consolidation opportunities**: What can be combined or integrated?
**IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
## Simplify the Design
Systematically remove complexity across these dimensions:
### Information Architecture
- **Reduce scope**: Remove secondary actions, optional features, redundant information
- **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows)
- **Combine related actions**: Merge similar buttons, consolidate forms, group related content
- **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden
- **Remove redundancy**: If it's said elsewhere, don't repeat it here
### Visual Simplification
- **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
- **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
- **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
- **Flatten structure**: Reduce nesting, remove unnecessary containers
- **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
### Layout Simplification
- **Linear flow**: Replace complex grids with simple vertical flow where possible
- **Remove sidebars**: Move secondary content inline or hide it
- **Full-width**: Use available space generously instead of complex multi-column layouts
- **Consistent alignment**: Pick left or center, stick with it
- **Generous white space**: Let content breathe, don't pack everything tight
### Interaction Simplification
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
- **Clear CTAs**: ONE obvious next step, not five competing actions
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
- **Active voice**: "Save changes" not "Changes will be saved"
- **Remove jargon**: Plain language always wins
- **Scannable structure**: Short paragraphs, bullet points, clear headings
- **Essential information only**: Remove marketing fluff, legalese, hedging
### Code Simplification
- **Remove unused code**: Dead CSS, unused components, orphaned files
- **Flatten component trees**: Reduce nesting depth
- **Consolidate styles**: Merge similar styles, use utilities consistently
- **Reduce variants**: Does that component need 12 variations, or can 3 cover 90% of cases?
**NEVER**:
- Remove necessary functionality (simplicity ≠ feature-less)
- Sacrifice accessibility for simplicity (clear labels and ARIA still required)
- Make things so simple they're unclear (mystery ≠ minimalism)
- Remove information users need to make decisions
- Eliminate hierarchy completely (some things should stand out)
- Oversimplify complex domains (match complexity to actual task complexity)
## Verify Simplification
Ensure simplification improves usability:
- **Faster task completion**: Can users accomplish goals more quickly?
- **Reduced cognitive load**: Is it easier to understand what to do?
- **Still complete**: Are all necessary features still accessible?
- **Clearer hierarchy**: Is it obvious what matters most?
- **Better performance**: Does simpler design load faster?
## Document Removed Complexity
If you removed features or options:
- Document why they were removed
- Consider if they need alternative access points
- Note any user feedback to monitor
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."
"""
package.json
+2
View File
@@ -7,6 +7,8 @@
"build": "bun run scripts/build.js",
"clean": "rm -rf dist",
"rebuild": "bun run clean && bun run build",
"dev": "bun run server/index.js",
"start": "bun --production run server/index.js",
"test": "bun test"
},
"keywords": [
public/app.js
+87
View File
@@ -0,0 +1,87 @@
// Fetch and display skills and commands from the API
async function loadContent() {
try {
const [skillsRes, commandsRes] = await Promise.all([
fetch('/api/skills'),
fetch('/api/commands')
]);
const skills = await skillsRes.json();
const commands = await commandsRes.json();
displaySkills(skills);
displayCommands(commands);
} catch (error) {
console.error('Failed to load content:', error);
}
}
function displaySkills(skills) {
const container = document.getElementById('skills-list');
if (!container) return;
container.innerHTML = skills.map(skill => `
<article class="item-card" data-animate>
<h3><a href="https://github.com/pbakaus/vibe-design-plugins/blob/main/source/skills/${skill.id}.md" target="_blank" rel="noopener">${skill.name}</a></h3>
<p>${skill.description}</p>
<div class="item-downloads">
<a href="/api/download/skill/cursor/${skill.id}" class="btn btn-small">Cursor</a>
<a href="/api/download/skill/claude-code/${skill.id}" class="btn btn-small">Claude</a>
<a href="/api/download/skill/gemini/${skill.id}" class="btn btn-small">Gemini</a>
<a href="/api/download/skill/codex/${skill.id}" class="btn btn-small">Codex</a>
</div>
</article>
`).join('');
animateIn();
}
function displayCommands(commands) {
const container = document.getElementById('commands-list');
if (!container) return;
container.innerHTML = commands.map(command => `
<article class="item-card" data-animate>
<h3><a href="https://github.com/pbakaus/vibe-design-plugins/blob/main/source/commands/${command.id}.md" target="_blank" rel="noopener">${command.name}</a></h3>
<p>${command.description}</p>
<div class="item-downloads">
<a href="/api/download/command/cursor/${command.id}" class="btn btn-small">Cursor</a>
<a href="/api/download/command/claude-code/${command.id}" class="btn btn-small">Claude</a>
<a href="/api/download/command/gemini/${command.id}" class="btn btn-small">Gemini</a>
<a href="/api/download/command/codex/${command.id}" class="btn btn-small">Codex</a>
</div>
</article>
`).join('');
animateIn();
}
function animateIn() {
const elements = document.querySelectorAll('[data-animate]:not(.animated)');
elements.forEach((el, i) => {
el.style.animationDelay = `${i * 0.05}s`;
el.classList.add('animated');
});
}
// Handle bundle download clicks via event delegation
document.addEventListener('click', (e) => {
const bundleBtn = e.target.closest('[data-bundle]');
if (bundleBtn) {
const { bundle: provider } = bundleBtn.dataset;
window.location.href = `/api/download/bundle/${provider}`;
}
});
// Load content when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', loadContent);
} else {
loadContent();
}
// Animate hero on load
window.addEventListener('load', () => {
document.body.classList.add('loaded');
});
public/css/animations.css
+81
View File
@@ -0,0 +1,81 @@
/* Animations & Keyframes */
/* Background Atmosphere */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 20% 30%, var(--c-accent-dim) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, var(--c-accent-dim) 0%, transparent 50%);
opacity: 0;
z-index: -1;
animation: fadeInBg var(--duration-slowest) var(--ease-out) 0.3s forwards;
pointer-events: none;
}
/* Keyframe Definitions */
@keyframes fadeInBg {
to {
opacity: 1;
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-40px);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(40px);
}
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes expandLine {
from {
width: 0;
}
}
@keyframes drawCircle {
from {
opacity: 0;
scale: 0;
}
to {
opacity: 1;
scale: 1;
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Animation Utilities */
[data-animate] {
opacity: 0;
transform: translateY(20px);
&.animated {
animation: fadeInUp var(--duration-slow) var(--ease-out) both;
}
}
public/css/buttons.css
+69
View File
@@ -0,0 +1,69 @@
/* Button Components */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem 2rem;
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border: none;
cursor: pointer;
transition: all var(--duration-base) var(--ease-out);
position: relative;
overflow: hidden;
text-decoration: none;
}
/* Primary Button */
.btn-primary {
background: var(--c-accent);
color: var(--c-paper);
width: 100%;
position: relative;
z-index: 1;
&::before {
content: '';
position: absolute;
inset: 0;
background: var(--c-ink);
transform: translateY(100%);
transition: transform var(--duration-base) var(--ease-out);
z-index: -1;
}
&:hover::before {
transform: translateY(0);
}
}
/* Secondary Button */
.btn-secondary {
background: transparent;
color: var(--c-ink);
border: 1px solid var(--c-ink);
&:hover {
background: var(--c-ink);
color: var(--c-paper);
}
}
/* Small Button Variant */
.btn-small {
padding: 0.5rem 1rem;
font-size: 0.8125rem;
border: 1px solid var(--c-mist);
background: transparent;
color: var(--c-ink);
&:hover {
border-color: var(--c-accent);
color: var(--c-accent);
}
}
public/css/cards.css
+156
View File
@@ -0,0 +1,156 @@
/* Card Components */
/* Download Bundles Section */
.downloads-section {
padding: var(--s-2xl) 0;
display: grid;
grid-template-columns: 300px 1fr;
gap: var(--s-2xl);
align-items: start;
@media (max-width: 968px) {
grid-template-columns: 1fr;
gap: var(--s-lg);
}
}
.download-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-lg);
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
}
.download-card {
opacity: 0;
transform: translateY(20px);
&.animated {
animation: fadeInUp var(--duration-slow) var(--ease-out) both;
}
}
.card-inner {
height: 100%;
padding: var(--s-lg);
background: var(--c-paper);
border: 1px solid var(--c-mist);
display: flex;
flex-direction: column;
gap: var(--s-md);
transition: all var(--duration-base) var(--ease-out);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--c-accent);
transform: translateX(-100%);
transition: transform 0.4s var(--ease-out);
}
&:hover {
border-color: var(--c-accent);
transform: translateY(-4px);
&::before {
transform: translateX(0);
}
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--s-md);
h3 {
font-size: 1.5rem;
font-weight: 600;
}
}
.badge {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.25em 0.75em;
border: 1px solid var(--c-accent);
color: var(--c-accent);
border-radius: 2px;
font-weight: 600;
white-space: nowrap;
}
.card-inner p {
color: var(--c-ash);
font-size: 0.9375rem;
flex-grow: 1;
}
/* Item Cards (Skills & Commands) */
.content-section {
padding: var(--s-2xl) 0;
display: grid;
grid-template-columns: 300px 1fr;
gap: var(--s-2xl);
align-items: start;
@media (max-width: 968px) {
grid-template-columns: 1fr;
gap: var(--s-lg);
}
}
.item-card {
padding: var(--s-lg);
border: 1px solid var(--c-mist);
background: var(--c-paper);
display: flex;
flex-direction: column;
gap: var(--s-md);
opacity: 0;
transform: translateY(20px);
&.animated {
animation: fadeInUp var(--duration-slow) var(--ease-out) both;
}
h3 {
font-size: 1.25rem;
font-weight: 600;
font-family: var(--font-body);
a {
color: var(--c-ink);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
&:hover {
color: var(--c-accent);
}
}
}
p {
color: var(--c-ash);
font-size: 0.9375rem;
line-height: 1.6;
}
}
.item-downloads {
display: flex;
flex-wrap: wrap;
gap: var(--s-xs);
}
public/css/footer.css
+65
View File
@@ -0,0 +1,65 @@
/* Footer & Contribute Section */
.contribute {
padding: var(--s-2xl) 0;
border-top: 1px solid var(--c-mist);
text-align: center;
}
.contribute-content {
max-width: var(--content-width);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-md);
h2 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
}
p {
font-size: 1.125rem;
color: var(--c-ash);
max-width: 42ch;
}
}
footer {
border-top: 1px solid var(--c-mist);
padding: var(--s-2xl) var(--s-lg);
background: var(--c-paper);
}
.footer-content {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
color: var(--c-ash);
a {
color: var(--c-ink);
text-decoration: underline;
text-underline-offset: 0.2em;
}
@media (max-width: 768px) {
flex-direction: column;
gap: var(--s-sm);
text-align: center;
}
}
/* Print Styles */
@media print {
body::before,
.hero-decoration,
.btn {
display: none;
}
}
public/css/hero.css
+119
View File
@@ -0,0 +1,119 @@
/* Hero Section */
.hero {
min-height: 85vh;
display: flex;
align-items: center;
position: relative;
padding: var(--s-2xl) var(--s-lg);
overflow: hidden;
}
.hero-grid {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s-2xl);
align-items: center;
width: 100%;
position: relative;
}
.hero-content {
animation: slideInLeft var(--duration-slower) var(--ease-out) 0.1s both;
}
/* Title Styling */
.title {
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 300;
line-height: 0.9;
margin-bottom: var(--s-lg);
display: flex;
flex-direction: column;
gap: -0.1em;
}
.title-main {
font-weight: 400;
letter-spacing: -0.03em;
}
.title-sub {
font-weight: 300;
font-style: italic;
color: var(--c-accent);
letter-spacing: -0.02em;
}
/* Tagline & Providers */
.tagline {
font-size: clamp(1.125rem, 2vw, 1.5rem);
line-height: 1.4;
color: var(--c-charcoal);
margin-bottom: var(--s-md);
max-width: 32ch;
}
.providers {
font-size: 0.875rem;
color: var(--c-ash);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 500;
}
/* Decorative Elements */
.hero-decoration {
width: 240px;
height: 240px;
position: relative;
animation: slideInRight var(--duration-slower) var(--ease-out) 0.3s both;
}
.deco-line {
position: absolute;
width: 160px;
height: 2px;
background: var(--c-accent);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-25deg);
animation: expandLine 1s var(--ease-out) 0.6s both;
}
.deco-circle {
position: absolute;
width: 120px;
height: 120px;
border: 2px solid var(--c-accent);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: drawCircle 1s var(--ease-out) 0.8s both;
opacity: 0.3;
}
/* Hero Responsive */
@media (max-width: 768px) {
.hero {
min-height: 70vh;
padding: var(--s-xl) var(--s-md);
}
.hero-grid {
grid-template-columns: 1fr;
gap: var(--s-xl);
}
.hero-decoration {
display: none;
}
.title {
font-size: clamp(2.5rem, 12vw, 4rem);
}
}

Some files were not shown because too many files have changed in this diff Show More