Frontend Excellence

A single, holistic skill for delivering web interfaces that look unforgettable, perform near the top of the Lighthouse curve, and degrade gracefully across devices and assistive technologies. Framework-agnostic by design: every rule is expressed as a principle plus a concrete check, never as a library API.

When to Use

Apply this skill any time the work changes how an interface looks, feels, moves, loads, ranks, or is interacted with. Examples:

• Building or refactoring any page, form, modal, navigation, table, chart, or component
• Choosing typography, color, spacing, motion, or visual style
• Auditing or improving Core Web Vitals (LCP, INP, CLS), bundle size, or hydration cost
• Auditing or improving accessibility (contrast, keyboard, screen reader, focus, dynamic type)
• Auditing or improving on-page SEO (titles, descriptions, headings, structured data, canonicals)
• Reviewing visual polish, hierarchy, contrast, density, dark/light mode parity
• Replacing generic AI-flavored styling with a distinctive aesthetic direction
• Auditing or polishing an existing multi-page site against a reference design or production baseline

Skip this skill for backend logic, infrastructure, data pipelines, or non-visual scripting.