Menú
Use when building or changing React components, hooks, forms, or feature UI.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Use BEFORE building or changing any UI — components, layout, color, spacing, typography, interaction states, or visual styling — to verify the planned change matches the Figma design via the Figma MCP. Run this gate before writing or editing UI code.
Use when placing features, repositories, hooks, or fixing dependency-cruiser errors.
Use when validating frontend changes before commit, push, or PR.
Use when placing, moving, naming, or splitting frontend files.
Use when retrieving or addressing PR review comments.
Use when frontend files, components, hooks, or helpers exceed complexity gates.
| name | frontend-component-development |
| description | Use when building or changing React components, hooks, forms, or feature UI. |
Use React 18.3, TypeScript, MUI v7, Emotion, Redux Toolkit, RTK Query,
React Router v6, react-hook-form, and react-i18next patterns already present
in the repo.
en.json and uk.json.src/components and use a UI prefix.@mui/icons-material when an icon exists.make format
make test-unit-client
make lint
For visible layout changes, also run:
make test-visual
Before applying this skill, confirm the active task against ../AI-AGENT-GUIDE.md and ../SKILL-DECISION-GUIDE.md so every relevant skill is consulted.
Before presenting changes, check changed text files for lines longer than 100 characters.
If any exist, tell the user each path:line and measured character count.
Treat this as disclosure, not failure, unless a project gate fails.