en un clic
frontend-design
// Elite Tier Web UI standards, including pixel-perfect retro aesthetics, immersive layouts, and UX psychology protocols.
// Elite Tier Web UI standards, including pixel-perfect retro aesthetics, immersive layouts, and UX psychology protocols.
| name | frontend-design |
| description | Elite Tier Web UI standards, including pixel-perfect retro aesthetics, immersive layouts, and UX psychology protocols. |
| allowed-tools | Read, Write, Edit, Glob, Grep, Bash |
<domain_overview>
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.
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.
Motion Mandate: Animation must be Physics-Based (Springs), Continuous (No Teleportation), and Meaningful (Storytelling).
animation_reference.md for the full 12-Principle Framework)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). |
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.
node scripts/js/ux-audit.js
</domain_overview>Use when you need to act as an Elite Software Architect (Maestro) to manage complex repositories. It enforces a "Why over How" philosophy, maintains a persistent project memory (Brain), and orchestrates specialized sub-skills through a Plan-Act-Verify lifecycle.
Elite Tier Backend standards, including Vertical Slice Architecture, Zero Trust Security, and High-Performance API protocols.
Design-first methodology. Explore user intent, requirements and design before implementation. Turn ideas into fully formed specs through collaborative dialogue.
Master specialized skill for building 2025/2026-grade browser extensions. Deep expertise in Manifest v3, Service Worker persistence (Alarms, Offscreen API), Side Panel API, and Cross-Browser compatibility.
The Foundation Skill. LLM Firewall + 2025 Security + Cross-Skill Coordination. Use for ALL code output - prevents hallucinations, enforces security, ensures quality.
Systematic debugging methodology with 4-phase process, root cause tracing, and elite observability standards. No fixes without investigation.