From e7cbaf468c68f7e2c11c83a835a3a2acb50bf7c9 Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sun, 30 Nov 2025 08:58:02 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 12 + README.md | 3 + plugin.lock.json | 72 +++ skills/pixel-pusher/SKILL.md | 312 +++++++++ .../assets/design-system-template.json | 232 +++++++ .../references/accessibility-guidelines.md | 556 ++++++++++++++++ .../references/design-best-practices.md | 565 ++++++++++++++++ .../references/design-system-layers.md | 447 +++++++++++++ .../references/persona-template.md | 288 +++++++++ .../references/style-guide-template.md | 607 ++++++++++++++++++ .../references/user-flow-template.md | 422 ++++++++++++ 11 files changed, 3516 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 plugin.lock.json create mode 100644 skills/pixel-pusher/SKILL.md create mode 100644 skills/pixel-pusher/assets/design-system-template.json create mode 100644 skills/pixel-pusher/references/accessibility-guidelines.md create mode 100644 skills/pixel-pusher/references/design-best-practices.md create mode 100644 skills/pixel-pusher/references/design-system-layers.md create mode 100644 skills/pixel-pusher/references/persona-template.md create mode 100644 skills/pixel-pusher/references/style-guide-template.md create mode 100644 skills/pixel-pusher/references/user-flow-template.md diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..98598d5 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,12 @@ +{ + "name": "design-skills", + "description": "Professional UI/UX design workflows and design system tools", + "version": "0.0.0-2025.11.28", + "author": { + "name": "slamb2k", + "email": "slamb2k@users.noreply.github.com" + }, + "skills": [ + "./skills/pixel-pusher" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..872f7ea --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# design-skills + +Professional UI/UX design workflows and design system tools diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..862c933 --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,72 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:slamb2k/mad-skills:design-skills", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "66a99dc9cb90cccef0d0b4e6b515d2ac7140fa11", + "treeHash": "c654bbec1e2da06333ff1da1c7c60cf15958268afbcb235c5c001c3d034c45da", + "generatedAt": "2025-11-28T10:28:24.901217Z", + "toolVersion": "publish_plugins.py@0.2.0" + }, + "origin": { + "remote": "git@github.com:zhongweili/42plugin-data.git", + "branch": "master", + "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390", + "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data" + }, + "manifest": { + "name": "design-skills", + "description": "Professional UI/UX design workflows and design system tools" + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "9c2ddec80767ded74c10f8fca17f2190929685d3190672d232637903e2a711b0" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "c7834ec36eca9ab1ca1d55a65ef5900ebfe73a9393fa4e9a99391db312ed3022" + }, + { + "path": "skills/pixel-pusher/SKILL.md", + "sha256": "d7ea417b505f83ff8e579d4c1b4421e343f2a21f7466733e97c13cafe8334cbd" + }, + { + "path": "skills/pixel-pusher/references/user-flow-template.md", + "sha256": "078f6e377294539135d9d4efe388bef7ea745ecdb7cdd6476aaba077c36b0371" + }, + { + "path": "skills/pixel-pusher/references/accessibility-guidelines.md", + "sha256": "ae6440e3473ec0999a0e378be99e0f2e1567277a6c3b823c88cda177d65ed129" + }, + { + "path": "skills/pixel-pusher/references/design-best-practices.md", + "sha256": "c21d5c569a6764161caceff36246890993b40f39675754f6da628fed99069be0" + }, + { + "path": "skills/pixel-pusher/references/persona-template.md", + "sha256": "521aa2ff5f9a64896d54f5ea4a36b4da23dcd9a05b2485bc1b73f90abc6fce31" + }, + { + "path": "skills/pixel-pusher/references/design-system-layers.md", + "sha256": "d5dcede5b23c484b1db2926d24ac8f00ccab06bcd550f706c4a1381cb5b859ee" + }, + { + "path": "skills/pixel-pusher/references/style-guide-template.md", + "sha256": "372ba621e706a79701eae604d8c8329e8e2fd476873d1803d5cff6bd70b8f716" + }, + { + "path": "skills/pixel-pusher/assets/design-system-template.json", + "sha256": "272bae0c08884df36da2e71ee9933b0d7468808039d4405fbff957d621a3d350" + } + ], + "dirSha256": "c654bbec1e2da06333ff1da1c7c60cf15958268afbcb235c5c001c3d034c45da" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/skills/pixel-pusher/SKILL.md b/skills/pixel-pusher/SKILL.md new file mode 100644 index 0000000..a2f144f --- /dev/null +++ b/skills/pixel-pusher/SKILL.md @@ -0,0 +1,312 @@ +--- +name: pixel-pusher +description: Comprehensive UI/UX design system for creating professional web interfaces through structured multi-stage process. Use when users request website designs, landing pages, web apps, UI mockups, design systems, or interface prototypes. Guides through requirements gathering, design system creation from references/screenshots, HTML mockup generation, iterative refinement, and final design delivery. Ideal for "design me a website", "create a landing page", "build a UI for X", or providing design inspiration screenshots/URLs. +--- + +# Pixel Pusher Design System + +Professional UI/UX design skill that transforms vague requirements into polished web interfaces through systematic design thinking and iterative refinement. + +## Design Philosophy + +Never accept vague design requests. Transform "make it beautiful" into concrete design systems with specific colors, typography, spacing, and component patterns. Work systematically through discovery, design system creation, mockup generation, and iterative refinement. + +## Multi-Stage Design Process + +### Stage 1: Discovery & Requirements Gathering + +Begin by understanding what the user wants to create and gathering design inspiration. + +**Initial questions to ask if not provided:** + +1. **Purpose**: What is this interface for? (landing page, web app, dashboard, portfolio, etc.) +2. **Audience**: Who will use this? (consumers, professionals, internal team, etc.) +3. **Key features**: What are the 3-5 most important elements? (hero section, forms, data visualization, etc.) +4. **Inspiration**: Do you have reference designs? (URLs, screenshots, or describe style preferences) +5. **Brand elements**: Do you have existing brand colors, fonts, or logo? +6. **Technical constraints**: Any specific frameworks or technologies? (React, Vue, vanilla HTML, etc.) + +**Critical assets to request:** + +- Screenshots or URLs of designs they like +- Existing brand guidelines or assets +- Content examples (copy, images, data) +- Specific interactions or animations they envision + +**Do not proceed to design system creation until you have:** +- Clear understanding of purpose and audience +- At least 2-3 reference designs (screenshots or URLs) +- Key features and content requirements +- Any brand constraints + +### Stage 2: Design System Extraction + +Extract a comprehensive JSON design system from reference materials. If user provides URLs, fetch them first to analyze the design patterns. + +**For each reference, analyze and extract:** + +1. **Color palette** - All colors with hex values, usage context (primary, secondary, accent, surface, text) +2. **Typography** - Font families, sizes, weights, line heights for each text level +3. **Spacing system** - Margin/padding patterns (identify the base unit: 4px, 8px, etc.) +4. **Component styles** - Buttons, cards, inputs, navigation patterns +5. **Layout patterns** - Grid systems, container widths, breakpoints +6. **Shadows & effects** - Elevation values, gradients, borders +7. **Interaction patterns** - Hover states, transitions, animations + +**Create design-system.json** (see `assets/design-system-template.json` for structure) + +Document decisions with rationale: +- Why these colors work together +- How typography creates hierarchy +- Why this spacing rhythm feels cohesive +- How components maintain consistency + +### Stage 3: Mockup Generation + +Generate 2-3 distinct HTML mockups that explore different interpretations of the requirements using the design system. + +**Mockup variations should differ in:** +- Layout approach (single vs multi-column, vertical vs horizontal flow) +- Visual emphasis (bold vs minimal, playful vs professional) +- Component styling (rounded vs sharp, flat vs elevated) + +**Each mockup must:** +- Use only colors from the design system +- Apply typography scale consistently +- Follow spacing system religiously +- Include responsive behavior (mobile-first) +- Show all requested key features +- Include hover/interaction states + +**Technical implementation:** +- Create standalone HTML files with inline CSS +- Use modern CSS (Grid, Flexbox, CSS variables) +- Include minimal JavaScript only if interactions require it +- Ensure accessibility (semantic HTML, ARIA labels, keyboard navigation) + +**File structure:** +``` +mockup-1-bold.html - Bold, high-contrast approach +mockup-2-minimal.html - Clean, spacious, minimal approach +mockup-3-playful.html - Dynamic, engaging approach +``` + +Save all mockups to `design-outputs/` directory in the current project and present them with: +- Brief description of each approach +- Key differentiators +- Recommended use cases for each style +- Full file paths so users can open them in their browser + +### Stage 4: Feedback & Refinement + +Present mockups and gather specific feedback: + +**Ask directed questions:** +- Which mockup's overall aesthetic resonates most? +- What specific elements do you like/dislike? +- Does the color palette feel right? Too bold/muted? +- Is the typography readable and appropriate? +- Does the spacing feel comfortable? +- Any components that need redesign? + +**Based on feedback:** +- If user likes one mockup: Refine that design +- If user likes elements from multiple: Combine best aspects +- If user dislikes all: Return to Stage 2 with new direction + +**Refinement iterations:** +1. Make requested changes +2. Update design system if patterns change +3. Generate refined mockup(s) +4. Gather feedback +5. Repeat until satisfied + +**Maximum 3-4 refinement rounds** before suggesting a consultation about requirements. + +### Stage 5: Final Design Delivery + +Once design is approved, deliver: + +1. **Final HTML/CSS files** - Production-ready code +2. **Design system documentation** - Complete JSON + visual guide +3. **Component library** - Reusable HTML components +4. **Style guide** - Visual reference document (see `references/style-guide-template.md`) +5. **Assets** - Extracted colors, fonts, spacing variables as CSS/SCSS + +**Optional enhancements:** +- Convert to React components if requested +- Add advanced animations with Framer Motion +- Integrate with component libraries (shadcn/ui, React Bits) +- Provide dark mode variations +- Create responsive breakpoint variations + +## Design System Components + +For detailed guidance on each design system layer, read: +- `references/design-system-layers.md` - Comprehensive component breakdown +- `references/accessibility-guidelines.md` - WCAG compliance checklist +- `references/design-best-practices.md` - Professional design principles + +## Critical Reminders + +**Always create files, never just show code:** +- Generate actual HTML files users can open in browsers +- Save all outputs to `design-outputs/` directory in the current project +- Provide full file paths so users can open files directly in their browser + +**Maintain design system integrity:** +- Every color used must be in the design system +- Every spacing value must follow the scale +- Typography must use defined sizes/weights +- No arbitrary design decisions + +**Prioritize user feedback:** +- Never defend design choices over user preferences +- Ask clarifying questions before assuming +- Offer alternatives when users express dissatisfaction +- Balance professional guidance with user vision + +**Professional quality standards:** +- All designs must be responsive (mobile, tablet, desktop) +- Accessibility must meet WCAG 2.1 Level AA +- Performance-conscious (minimize CSS, optimize images) +- Cross-browser compatible (modern browsers) + +## Advanced Features + +### Persona Development + +When user requests, create user personas to guide design decisions: +- Demographics and psychographics +- Goals and pain points +- Technical proficiency +- Design preferences + +See `references/persona-template.md` for structure. + +### User Flow Mapping + +For complex applications, map user journeys: +- Entry points and goals +- Decision points and paths +- Pain points and friction +- Success metrics + +See `references/user-flow-template.md` for structure. + +### A/B Testing Variations + +Generate multiple variations for testing: +- Different CTA placements +- Color scheme variations +- Layout alternatives +- Copy variations + +## Integration with Claude Code Workflow + +This skill aligns with Claude Code best practices: + +**Use Planning Mode** (Shift+Tab) before generating mockups to: +- Research current design trends +- Outline implementation approach +- Identify technical considerations + +**Leverage image analysis** (Control+V) to: +- Analyze provided screenshots +- Extract design patterns +- Identify visual hierarchy + +**Create custom commands** for reusable design tasks: +- Design system validation +- Accessibility checks +- Responsive testing + +**Use sub-agents** for complex projects: +- One agent for design system +- One agent per mockup variation +- One agent for component library + +## Example Workflows + +### Example 1: Landing Page from Scratch + +``` +User: "Create a landing page for my SaaS product" + +1. Ask about product, audience, competitors +2. Request 2-3 competitor URLs for inspiration +3. Fetch and analyze competitor designs +4. Extract design system (colors, typography, components) +5. Generate 3 mockup variations +6. Gather feedback +7. Refine chosen mockup +8. Deliver final design + system documentation +``` + +### Example 2: Redesign from Screenshot + +``` +User: [Provides screenshot] "Make something similar but more modern" + +1. Analyze screenshot (colors, layout, typography) +2. Ask what "more modern" means to them +3. Research current design trends +4. Extract design system from screenshot +5. Modernize system (updated colors, typography, spacing) +6. Generate 2-3 modern variations +7. Iterate based on feedback +8. Deliver final design +``` + +### Example 3: Design System from Brand Guidelines + +``` +User: "Create website designs using our brand guidelines" [provides PDF] + +1. Extract brand colors, fonts, logo from guidelines +2. Ask about website purpose and features +3. Request competitor/inspiration references +4. Build design system extending brand guidelines +5. Generate mockups that honor brand identity +6. Validate brand consistency +7. Deliver with brand compliance documentation +``` + +## Quality Checklist + +Before delivering final designs, verify: + +- [ ] All colors from design system only +- [ ] Typography scale applied consistently +- [ ] Spacing follows system (no arbitrary values) +- [ ] Responsive across breakpoints (320px, 768px, 1024px, 1440px) +- [ ] Accessibility: color contrast, focus states, semantic HTML +- [ ] Interactive states: hover, active, focus, disabled +- [ ] Loading states for dynamic content +- [ ] Error states for forms +- [ ] Empty states with helpful messaging +- [ ] Consistent component styling +- [ ] Browser compatibility (Chrome, Firefox, Safari, Edge) +- [ ] Performance: optimized CSS, minimal dependencies + +## Common Pitfalls to Avoid + +**Don't:** +- Generate designs without gathering requirements first +- Use random colors not in the design system +- Skip the design system extraction phase +- Provide only one mockup without alternatives +- Ignore accessibility requirements +- Assume user technical knowledge +- Over-complicate simple requests +- Use heavy frameworks for simple pages + +**Do:** +- Ask clarifying questions upfront +- Create systematic, reusable design tokens +- Generate multiple alternatives for comparison +- Explain design decisions with rationale +- Make designs accessible by default +- Provide clear documentation +- Start simple, add complexity as needed +- Use vanilla HTML/CSS unless frameworks requested diff --git a/skills/pixel-pusher/assets/design-system-template.json b/skills/pixel-pusher/assets/design-system-template.json new file mode 100644 index 0000000..c2352db --- /dev/null +++ b/skills/pixel-pusher/assets/design-system-template.json @@ -0,0 +1,232 @@ +{ + "name": "Example Design System", + "version": "1.0", + "colors": { + "primary": { + "50": "#f0f9ff", + "100": "#e0f2fe", + "200": "#bae6fd", + "300": "#7dd3fc", + "400": "#38bdf8", + "500": "#0ea5e9", + "600": "#0284c7", + "700": "#0369a1", + "800": "#075985", + "900": "#0c4a6e" + }, + "secondary": { + "50": "#f5f3ff", + "100": "#ede9fe", + "200": "#ddd6fe", + "300": "#c4b5fd", + "400": "#a78bfa", + "500": "#8b5cf6", + "600": "#7c3aed", + "700": "#6d28d9", + "800": "#5b21b6", + "900": "#4c1d95" + }, + "neutral": { + "50": "#fafafa", + "100": "#f4f4f5", + "200": "#e4e4e7", + "300": "#d4d4d8", + "400": "#a1a1aa", + "500": "#71717a", + "600": "#52525b", + "700": "#3f3f46", + "800": "#27272a", + "900": "#18181b" + }, + "semantic": { + "success": "#10b981", + "warning": "#f59e0b", + "error": "#ef4444", + "info": "#3b82f6" + }, + "surface": { + "background": "#ffffff", + "foreground": "#18181b", + "card": "#fafafa", + "cardBorder": "#e4e4e7" + } + }, + "typography": { + "fontFamilies": { + "heading": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", + "body": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", + "mono": "'JetBrains Mono', 'Courier New', monospace" + }, + "scale": { + "h1": { + "size": "3.5rem", + "weight": "700", + "lineHeight": "1.2", + "letterSpacing": "-0.02em" + }, + "h2": { + "size": "2.5rem", + "weight": "700", + "lineHeight": "1.3", + "letterSpacing": "-0.01em" + }, + "h3": { + "size": "2rem", + "weight": "600", + "lineHeight": "1.4", + "letterSpacing": "0" + }, + "h4": { + "size": "1.5rem", + "weight": "600", + "lineHeight": "1.4", + "letterSpacing": "0" + }, + "h5": { + "size": "1.25rem", + "weight": "500", + "lineHeight": "1.5", + "letterSpacing": "0" + }, + "body": { + "size": "1rem", + "weight": "400", + "lineHeight": "1.6", + "letterSpacing": "0" + }, + "bodyLarge": { + "size": "1.125rem", + "weight": "400", + "lineHeight": "1.6", + "letterSpacing": "0" + }, + "bodySmall": { + "size": "0.875rem", + "weight": "400", + "lineHeight": "1.5", + "letterSpacing": "0" + }, + "caption": { + "size": "0.75rem", + "weight": "400", + "lineHeight": "1.4", + "letterSpacing": "0.01em" + } + } + }, + "spacing": { + "unit": "8px", + "scale": { + "0": "0", + "1": "0.25rem", + "2": "0.5rem", + "3": "0.75rem", + "4": "1rem", + "5": "1.25rem", + "6": "1.5rem", + "8": "2rem", + "10": "2.5rem", + "12": "3rem", + "16": "4rem", + "20": "5rem", + "24": "6rem", + "32": "8rem" + } + }, + "shadows": { + "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)", + "md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", + "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", + "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)", + "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)" + }, + "borderRadius": { + "none": "0", + "sm": "0.25rem", + "md": "0.5rem", + "lg": "0.75rem", + "xl": "1rem", + "2xl": "1.5rem", + "full": "9999px" + }, + "components": { + "button": { + "primary": { + "background": "primary.600", + "text": "#ffffff", + "hover": "primary.700", + "active": "primary.800", + "padding": "spacing.3 spacing.6", + "borderRadius": "md", + "fontWeight": "500" + }, + "secondary": { + "background": "neutral.200", + "text": "neutral.900", + "hover": "neutral.300", + "active": "neutral.400", + "padding": "spacing.3 spacing.6", + "borderRadius": "md", + "fontWeight": "500" + }, + "ghost": { + "background": "transparent", + "text": "primary.600", + "hover": "primary.50", + "active": "primary.100", + "padding": "spacing.3 spacing.6", + "borderRadius": "md", + "fontWeight": "500" + } + }, + "card": { + "background": "surface.card", + "border": "1px solid", + "borderColor": "surface.cardBorder", + "padding": "spacing.6", + "borderRadius": "lg", + "shadow": "md" + }, + "input": { + "background": "#ffffff", + "border": "1px solid", + "borderColor": "neutral.300", + "focusBorder": "primary.500", + "padding": "spacing.3 spacing.4", + "borderRadius": "md", + "fontSize": "body.size" + } + }, + "layout": { + "maxWidth": { + "sm": "640px", + "md": "768px", + "lg": "1024px", + "xl": "1280px", + "2xl": "1536px" + }, + "breakpoints": { + "mobile": "320px", + "tablet": "768px", + "desktop": "1024px", + "wide": "1440px" + }, + "grid": { + "columns": 12, + "gutter": "spacing.6" + } + }, + "animation": { + "duration": { + "fast": "150ms", + "normal": "250ms", + "slow": "350ms" + }, + "easing": { + "default": "cubic-bezier(0.4, 0, 0.2, 1)", + "in": "cubic-bezier(0.4, 0, 1, 1)", + "out": "cubic-bezier(0, 0, 0.2, 1)", + "inOut": "cubic-bezier(0.4, 0, 0.2, 1)" + } + } +} diff --git a/skills/pixel-pusher/references/accessibility-guidelines.md b/skills/pixel-pusher/references/accessibility-guidelines.md new file mode 100644 index 0000000..6f098df --- /dev/null +++ b/skills/pixel-pusher/references/accessibility-guidelines.md @@ -0,0 +1,556 @@ +# Accessibility Guidelines + +WCAG 2.1 Level AA compliance checklist and best practices for web design. + +## Color & Contrast + +### Text Contrast Requirements + +**Normal text (< 18px or < 14px bold):** +- Minimum contrast ratio: 4.5:1 against background +- Example: #18181b text on #ffffff = 19.56:1 ✓ +- Example: #71717a text on #fafafa = 2.8:1 ✗ + +**Large text (≥ 18px or ≥ 14px bold):** +- Minimum contrast ratio: 3:1 against background +- Recommended: Still aim for 4.5:1 when possible + +**UI Components & Graphics:** +- Interactive elements: 3:1 against adjacent colors +- Graphs, charts, icons: 3:1 minimum +- Focus indicators: 3:1 against background + +### Tools for Testing + +Use these tools to verify contrast: +- WebAIM Contrast Checker +- Chrome DevTools Lighthouse +- Stark plugin (Figma/Sketch) +- Contrast Analyzer (desktop app) + +### Common Issues + +**Insufficient contrast:** +- Light gray text on white (#aaa on #fff = 2.3:1) +- Placeholder text often fails (many browsers use low contrast) +- Disabled states (okay to have lower contrast, but clearly indicate disabled) + +**Good practices:** +- Text on images: Add overlay or shadow for contrast +- Links: Underline or sufficient contrast difference +- Buttons: Ensure text contrasts with background + +## Semantic HTML + +### Use Appropriate Elements + +**Navigation:** +```html + +``` + +**Main content:** +```html +
+
+

Page Title

+

Content...

+
+
+``` + +**Complementary content:** +```html + +``` + +**Page sections:** +```html +
+

Section Title

+
+``` + +**Buttons vs Links:** +- ` + + + + + + +``` + +### ARIA Labels + +**Form inputs:** +```html + + + + + + +``` + +**Buttons:** +```html + + + + + +``` + +**Navigation landmarks:** +```html + + +``` + +### Live Regions + +**Dynamic content updates:** +```html + +
+

5 new messages

+
+ + +
+

Error: Failed to save changes

+
+ + +
+

Saving...

+
+``` + +**Loading states:** +```html + +``` + +## Forms + +### Labels & Instructions + +**Every input needs a label:** +```html + + + + + + +``` + +**Required fields:** +```html + + +``` + +**Helper text:** +```html + + +
+ Must be at least 8 characters +
+``` + +### Error Handling + +**Validation errors:** +```html + + + +``` + +**Error summary:** +```html +
+

There are 2 errors in this form

+ +
+``` + +### Fieldsets & Groups + +**Related inputs:** +```html +
+ Shipping Address + + + + + +
+``` + +**Radio button groups:** +```html +
+ Select your plan + + +
+``` + +## Interactive Components + +### Buttons + +**Button requirements:** +- Minimum size: 44x44px (iOS guideline) +- Clear focus indicator +- Disabled state clearly visible +- Loading state announced to screen readers + +```html + + + + + + + + +``` + +### Modals/Dialogs + +**Modal requirements:** +- Focus trap (keep focus inside modal) +- Close with Escape key +- Return focus to trigger element on close +- Screen readers announce modal opening + +```html +
+

Confirm Action

+

Are you sure you want to delete this item?

+ + +
+``` + +### Dropdowns/Menus + +**Menu button pattern:** +```html + + +``` + +### Tabs + +**Tab pattern:** +```html +
+ + +
+ +
+ Overview content... +
+ +``` + +## Mobile & Touch + +### Touch Targets + +**Minimum sizes:** +- 44x44px on iOS (Apple guideline) +- 48x48px on Android (Material Design) +- Use larger targets for primary actions + +**Spacing:** +- 8px minimum between touch targets +- More spacing for dense interfaces + +### Viewport & Zoom + +**Allow zoom:** +```html + + + + + +``` + +**Responsive text:** +- Use relative units (rem, em) +- Don't set maximum font size +- Ensure text reflows at 200% zoom + +## Testing Checklist + +### Automated Testing + +- [ ] Run Lighthouse accessibility audit +- [ ] Check WAVE browser extension +- [ ] Validate HTML (W3C validator) +- [ ] Test color contrast (WebAIM checker) + +### Manual Testing + +- [ ] Navigate entire site using only keyboard +- [ ] Test with screen reader (NVDA, JAWS, VoiceOver) +- [ ] Zoom to 200% and verify layout +- [ ] Test with browser extensions disabled +- [ ] Test on mobile device +- [ ] Test with reduced motion settings +- [ ] Test in high contrast mode + +### Specific Checks + +- [ ] All images have alt text +- [ ] Forms have proper labels +- [ ] Focus indicators are visible +- [ ] Color is not only method of conveying info +- [ ] Text has sufficient contrast +- [ ] Headings are properly nested +- [ ] Links have descriptive text +- [ ] Videos have captions +- [ ] Audio has transcripts +- [ ] Tables have proper headers +- [ ] Interactive elements are keyboard accessible +- [ ] Error messages are clear and helpful +- [ ] Loading states are announced +- [ ] Modals trap focus and close with Escape + +## Common Mistakes + +**Don't:** +- Use `
` or `` as buttons (use `