frontend-design

<domain_overview> # Frontend Design System > **Philosophy:** Minimize cognitive load and make interactions intuitive. Every design decision should respect human psychology, behavioral patterns, and cognitive limitations. The designer bears complexity so the user experiences simplicity. > **Core Principle:** Good design is invisible - users should accomplish their goals without noticing the design itself. Design should feel effortless and natural, aligning with how humans naturally think and behave. ## ⚠️ Core Protocols & Standards **ANTI-AI AESTHETIC MANDATE (CRITICAL):** Never use generic aesthetics that give the impression of being AI-generated. This includes overused font families (Inter, Roboto, Arial, system fonts), cliché color schemes (especially purple gradients on white backgrounds), predictable layouts, and repetitive component patterns. **ABSOLUTELY FORBIDDEN:** The "Cyberpunk" aesthetic is strictly prohibited. Do NOT use neon glows, matrix rain, glitch effects, or "high-tech" dark modes unless explicitly requested for a specific context. This cliché is the hallmark of lazy AI generation. Specifically avoid template-driven designs that lack context-specific character. This skill aims to create distinctive, original, and production-level frontends. Realize functional, high-fidelity code by paying extraordinary attention to aesthetic details and creative decisions. **CRITICAL PROTOCOL:** The detailed rules are stored in separate reference files. You **MUST** use the `Read` tool to load these files into your context **BEFORE** starting any design work. Do not assume you know the contents. - **[frontend_reference.md](frontend_reference.md)**: Contains Technical Standards, Aesthetic Signatures, and Creative Protocols. - **[animation_reference.md](animation_reference.md)**: Contains 2025 Motion Standards, Physics-based animation rules, and Micro-interactions. - **[css_art_reference.md](css_art_reference.md)**: **FOR VISUAL OBJECTS.** Use this when asked to "draw" or "create" complex items (Swords, Logos, Icons) using code. Defines Geometric Composition & LCH Materials. - **[security-protocols.md](security-protocols.md)**: Contains critical Frontend Security rules. ## 🎬 Core Animation Principles > **Motion Mandate:** Animation must be **Physics-Based** (Springs), **Continuous** (No Teleportation), and **Meaningful** (Storytelling). - **Continuity:** State changes must morph, not cut (View Transitions). - **Weight:** Objects must feel like they have mass (Use Spring Animations). - **Focus:** Animation guides attention; it does not distract. - **Narrative:** Every motion tells a story about where an element came from and where it is going. *(See `animation_reference.md` for the full 12-Principle Framework)* ## 🔗 Related & Required Skills When executing Frontend tasks, you **MUST** integrate these complementary skills to ensure architectural integrity: | Skill | Purpose in Frontend Context | |-------|-----------------------------| | **`brainstorming`** | **MANDATORY PRE-REQUISITE.** Before ANY design work, use this to interrogate the user's vague instructions and crystallize the "Screenplay/Narrative" defined in `frontend_reference.md`. | | **`clean-code`** | **MANDATORY.** Ensures component modularity, cleaner hooks/state logic, and security compliance. Prevents "spaghetti UI code". | | **`tdd-mastery`** | **MANDATORY.** "Iron Law" applies to components too. Use for visual regression tests and logic verification before coding UI. | | **`optimization-mastery`** | Use for Performance Audits (Lighthouse, Core Web Vitals), reducing bundle size, and optimizing re-renders. | | **`backend-design`** | Consult this when defining API data shapes, error handling states, and ensuring type safety across the network boundary. | | **`planning-mastery`** | Use this to break down complex UI implementations into "Atomic" deliverables (Atoms -> Molecules -> Organisms). | ## 🛠️ Automation Scripts Use the following script to audit your implementation: - **`scripts/js/ux-audit.js`**: Run this to perform a heuristic analysis of the UI for consistency, accessibility (contrast/spacing), and compliance with the design tokens. - *Usage:* `node scripts/js/ux-audit.js` </domain_overview>