frontend-design-guardrailslisted
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