Frontend Crafting

Design and build interfaces that come from the subject, not from a template. This file is a router: it fixes the contract every workflow shares and points to the one reference file the current request actually needs. Design rules live in the references, never here.

Scope

Use this skill whenever work creates, implements, changes, or evaluates a user-facing interface:

• Building pages, screens, layouts, forms, navigation, or UI components.
• Implementing frontend designs or UI specifications in code.
• Refining styling, typography, spacing, visual hierarchy, or responsive layouts.
• Designing interaction states, feedback, accessibility, or user experience.
• Reviewing existing UI for design quality, usability, or consistency.

The skill applies to both design-driven and implementation-driven frontend work, even when the user does not explicitly request design.

Use web-debug alongside this skill when browser interaction, screenshots, or runtime verification are needed. Use debugging for root-cause investigation when expected behavior is already defined.