interface-design

name	interface-design
description	Covers UI/UX design principles, accessibility (WCAG 2.1), design systems, and responsive patterns. Use when making design decisions, evaluating layouts, or ensuring accessibility compliance. Not for frontend code (use typescript-development) or API design (use architecture or language-specific skills).

Design Principles

Contents

• Critical Rules
• Verification
• Quick Reference
• Topics
• Core Principles
• Design Tokens
• Quality Checklist

Philosophy: Design is problem-solving through systematic thinking, with accessibility and user needs at the center. Every design decision must be intentional, accessible, and meaningful.

Critical Rules

1. Never use pixel values directly - Always use design tokens
2. Never use divs for buttons - Use semantic HTML
3. Never skip alt text - All images need descriptions
4. Never use color alone - Combine with icons/text
5. Never ignore reduced motion - Respect user preferences
6. Never animate layout properties - Use transform/opacity only
7. Never skip focus indicators - Minimum 3:1 contrast
8. Never exceed 75ch line length - Optimal readability at 65ch

Verification

After Editing Design/Code Files

Accessibility Validation:

• Check for common a11y issues in component files:
  • <div onClick> without role="button" (use <button> instead)
  • <img> without alt attribute