Frontend Design

Frontend Design

Orchestrator for creating distinctive, production-grade interfaces.

Skill Routing

Based on needs, invoke specialized skills:

Framework Resources

React/Vue

See references/react-vue.md for:

• Framer Motion staggered animations
• Vue Transition/TransitionGroup patterns
• Component architecture with design tokens

Rails/Hotwire

See references/rails-hotwire.md for:

• ViewComponent with sidecar styles
• Stimulus reveal/toggle controllers
• Turbo Frames & Streams with animations
• ERB layout patterns with content_for
• CSS design tokens and import order

Implementation Resources

Workflow

1. Check for design tokens
   - Look for DESIGN.md in project root
   - If found: parse tokens, use as source of truth for colors, typography, spacing
   - See references/design-md-format.md for format details

2. Clarify design direction
   - Invoke `frontend-design-philosophy` for aesthetic guidance
   - User picks: brutalist, minimalist, luxury, playful, etc.

3. Implement CSS foundation
   - Invoke `frontend-css-patterns` for typography, color, motion
   - If DESIGN.md tokens exist: map tokens to CSS variables or Tailwind theme
   - Otherwise: customize Tailwind or write CSS variables

4. Apply framework patterns
   - React/Vue: Use references/react-vue.md
   - Rails/Hotwire: Use references/rails-hotwire.md

5. Polish and validate
   - Use references/css-polish-tips.md for accessibility
   - Use references/motion-patterns.md for animation
   - Run validation checklist from philosophy skill

Quick Reference

Web Interface Standards

See references/web-interface-standards.md for:

• Keyboard operability requirements (WAI-ARIA widget patterns)
• Touch target sizing (44px mobile, 24px desktop)
• Form behavior (Enter submission, autocomplete, mobile keyboards)
• Animation accessibility (prefers-reduced-motion)
• Network performance budgets (POST < 500ms, virtualization thresholds)

Validation Checklist:

• Distinctive typography (not default fonts)
• Intentional, limited color palette
• Layout breaks predictable patterns
• Motion serves purpose
• Clear design direction
• Responsive quality maintained
• Accessibility preserved