react-component

React 컴포넌트와 관련 파일들(hook, style, test)을 생성합니다. 사용자가 "컴포넌트 만들어", "새로운 React 컴포넌트", "컴포넌트 생성"과 같은 요청을 할 때 사용합니다.

$ 安裝

git clone https://github.com/majiayu000/claude-skill-registry /tmp/claude-skill-registry && cp -r /tmp/claude-skill-registry/skills/testing/react-component ~/.claude/skills/claude-skill-registry

// tip: Run this command in your terminal to install the skill

SKILL.md

View on GitHub →

name: react-component description: React 컴포넌트와 관련 파일들(hook, style, test)을 생성합니다. 사용자가 "컴포넌트 만들어", "새로운 React 컴포넌트", "컴포넌트 생성"과 같은 요청을 할 때 사용합니다.

React 컴포넌트 생성 스킬

이 스킬은 React 컴포넌트와 관련된 파일들을 일관된 구조로 생성합니다.

생성되는 파일들

컴포넌트 파일: index.tsx
스타일 파일: styles.module.css
Hook 파일: hooks/*.hook.ts (필요시)
테스트 파일: tests/*.spec.ts (Playwright 사용)

컴포넌트 구조

component-name/
├── index.tsx
├── styles.module.css
├── hooks/
│   └── *.hook.ts
└── tests/
    └── *.spec.ts

코딩 컨벤션

TypeScript 사용
CSS Modules 사용
명확한 props 타입 정의
설명적인 변수명 사용
재사용 가능한 컴포넌트 설계