What problem does it solve? Web design work often ships without baseline measurements, accessibility checks, or performance validation, leading to inconsistent visual quality and unverified improvements. This Skill provides a structured five-phase workflow that grounds every design change in real data, WCAG 2.2 standards, and measurable performance budgets. ## Core Features & Use Cases - Five-Phase Design Workflow: Research and baseline capture, design planning, development, cross-browser/device testing, and deployment with monitoring. - Design System Guidelines: Typography scales, spacing tokens, color systems, and reusable button/card component patterns with Tailwind CSS. - Accessibility & Performance Standards: WCAG 2.2 checklists (contrast ratios, keyboard navigation, ARIA), Lighthouse targets (95+), and Core Web Vitals budgets (LCP <2.5s, CLS <0.1). - Use Case: When redesigning a landing page hero section, capture baseline screenshots and Lighthouse scores with Playwright, implement changes on a feature branch, run cross-browser and accessibility audits, then open a PR with before/after evidence. ## Quick Start Ask the agent to audit the current homepage design and propose accessibility and performance improvements with before/after screenshots.
