← ClaudeAtlas

frontend-design-guardrailslisted

Use when page, component, form, table, dashboard, responsive layout, or UI review work needs product-quality implementation guardrails. DO NOT USE FOR: backend-only changes or scripts with no user-visible surface.
funky-eyes/best-copilot · ★ 10 · Web & Frontend · score 79
Install: claude install-skill funky-eyes/best-copilot
# Frontend Design Guardrails ## Goal Build usable interfaces that match the target repository's existing UI system and can be verified reliably. ## Reference Principles - Ant Design baseline: optimize for natural interaction, certainty, meaningful task progress, and systems that can grow without visual drift. - Design patterns beat freestyle UI: prefer established page patterns, reusable components, tokens, layout rules, copy conventions, feedback patterns, and data-entry/data-display patterns. - Design-system packets beat vague style adjectives: record the minimum explicit tokens and component decisions needed to make the result repeatable. - Preview culture matters: make the result inspectable through browser evidence, screenshots, or a clear static fallback. ## Rules - Prefer the repository's existing component library, theme tokens, layout primitives, icon set, routing, and state patterns. - If the repository uses Ant Design, Ant Design Pro, Pro Components, or compatible tokens, use their components and interaction patterns first; only build custom controls when the library cannot express the workflow. - For operational tools, favor dense, calm, scannable layouts over marketing-style hero sections. - Use semantic controls: buttons for commands, inputs for text, selects/menus for option sets, tabs for views, toggles for binary settings. - Provide loading, empty, error, disabled, success, and partial states when the workflow needs them. - Avoid magic pixel offsets, ab