| name | components |
| description | Trigger when creating new components or modifying component structure |
| allowed-tools | Read, Grep, Glob |
Component Creation Skill
File Structure
Every component requires two files:
src/components/{category}/
āāā component-name.tsx
āāā component-name.module.scss
Standard Component Template
'use client';
import { useState } from 'react';
import styles from './component-name.module.scss';
interface ComponentNameProps {
title: string;
description?: string;
}
export const ComponentName = ({ title, description }: ComponentNameProps) => {
const [isOpen, setIsOpen] = useState(false);
const handleClick = () => {
setIsOpen(!isOpen);
};
return (
<div className={styles.container}>
<h2 className={styles.title}>{title}</h2>
{description && <p className={styles.description}>{description}</p>}
</div>
);
};
Component Categories
src/components/ui/ - UI components (buttons, cards, inputs)
src/components/forms/ - Form components
src/components/layout/ - Layout components (header, footer)
src/components/seo/ - SEO schema components
Naming Conventions
- File names: kebab-case (
contact-form.tsx)
- Component exports: PascalCase (
ContactForm)
- SCSS modules: Match component (
contact-form.module.scss)
Props Interface
- Named
{ComponentName}Props
- Defined before component
- Extend HTML attributes when applicable:
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary';
}
Pre-Creation Checklist
- Check
src/components/ for existing similar components
- Determine correct category folder
- Plan props interface
- Review design tokens needed
Post-Creation Checklist
- Component has matching
.module.scss file
- Props interface is defined
- All styling uses design tokens
- No inline styles
- Uses
next/image for any images
Gotchas
- Always check for existing components first
- Never create components without SCSS module
- Use
'use client' only when needed (state, effects, event handlers)
- Follow existing patterns in the codebase