Skip to content
frontend-component logo

Component Creation

frontend-component

Create React components following project standards.

SKILL.md

Full skill instructions

Component Creation

Use Generator Scripts

./​scripts/​generate-component.sh MyButton              # → shared/
./​scripts/​generate-component.sh ClusterCard clustering # → clustering/
./​scripts/​generate-hook.sh useTheme

Location Rules

TypePath
Reusablecomponents/​shared/
Feature-specificcomponents/[feature]/
Sub-componentscomponents/[feature]/​components/

Standards

  • Tailwind CSS with slate (bg/​text) + sky (accents)
  • Icons from lucide-react
  • Wrap in memo() for lists/​visualizations
  • Always accept className prop
  • Use @/ alias for imports