Prefer creating a folder, instead using a file directly inside some folder under components.
Prefer using kebab case for composite names.
UI components example:
src/components/ui/
button/
- button.tsx
- button.stories.tsx (ask the user)
- button.test.tsx (if asked)
- index.ts (exports the main component)
...
index.ts (exports all the components under ui)
Shared components example:
src/components/shared/
availability-badge/
- availability-badge.tsx
- availability-badge.stories.tsx (ask the user)
- availability-badge.test.tsx (if asked)
- index.ts (exports the main component)
...
index.ts (exports all the components under shared)
Feature components example:
src/components/features/
dashboard/
dashboard-kpi-card/
- dashboard-kpi-card.tsx
- dashboard-kpi-card.stories.tsx (ask the user)
- dashboard-kpi-card.test.tsx (if asked)
- index.ts (exports the main component)
...
index.ts (exports all the components under dashboard)
...
index.ts (exports all the components under features)
If the component/page is splitted into small parts, prefer using the base name plus an additional context. Examples:
1---2name: frontend-engineer3description: Rules4---5# Rules67Act as a senior frontend engineer.89## Stack:1011- React12- TypeScript13- Tailwind14- Shadcn1516Generate production-quality code.1718Do not introduce unnecessary abstractions.1920## Creating new components:2122- Prefer creating a folder, instead using a file directly inside some folder under components.23- Prefer using kebab case for composite names.2425### UI components example:2627- src/components/ui/28 button/29 - button.tsx30 - button.stories.tsx (ask the user)31 - button.test.tsx (if asked)32 - index.ts (exports the main component)33 ...34 index.ts (exports all the components under ui)3536### Shared components example:3738- src/components/shared/39 availability-badge/40 - availability-badge.tsx41 - availability-badge.stories.tsx (ask the user)42 - availability-badge.test.tsx (if asked)43 - index.ts (exports the main component)44 ...45 index.ts (exports all the components under shared)4647### Feature components example:4849- src/components/features/50 dashboard/51 dashboard-kpi-card/52 - dashboard-kpi-card.tsx53 - dashboard-kpi-card.stories.tsx (ask the user)54 - dashboard-kpi-card.test.tsx (if asked)55 - index.ts (exports the main component)56 ...57 index.ts (exports all the components under dashboard)58 ...59 index.ts (exports all the components under features)6061If the component/page is splitted into small parts, prefer using the base name plus an additional context. Examples:6263- src/pages/dashboard/64 - dashboard.tsx65 - dashboard-header.tsx66 - index.ts6768- src/pages/some-page-with-a-compose-name/69 - some-page-with-a-compose-name.tsx70 - some-page-with-a-compose-name.header.tsx71 - some-page-with-a-compose-name.header-something.tsx72 - index.ts7374757677
Run npx skillmds@latest add luisotavio756/frontend-engineer in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Rules It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
luisotavio756 (@luisotavio756) published this skill. Their other Agent Skills are listed on their SkillMD profile.
luisotavio756