| name | frontend-component-development |
| description | Use when building or changing React components, hooks, forms, or feature UI. |
Frontend Component Development
Stack
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.
Workflow
- Find the owning module or shared component boundary.
- Read nearby components, hooks, i18n files, and tests.
- Add or update tests before behavior changes when practical.
- Keep UI copy in
en.json and uk.json.
- Verify with formatting, focused tests, and lint.
Component Rules
- Reusable components belong in
src/components and use a UI prefix.
- Feature components stay inside their owning module/feature.
- Use MUI components and theme tokens before custom CSS.
- Use Emotion styles that are stable and scoped.
- Use icons from
@mui/icons-material when an icon exists.
- Keep button labels and form errors translated.
- Keep data fetching and mutation side effects out of presentational components.
Verification
make format
make test-unit-client
make lint
For visible layout changes, also run:
make test-visual
Related Guides
Before applying this skill, confirm the active task against
../AI-AGENT-GUIDE.md and
../SKILL-DECISION-GUIDE.md so every relevant
skill is consulted.
Line Length Disclosure
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.
Supporting Files
