Agent skill
react-component
React 컴포넌트 생성, shadcn/ui 통합 작업 시 사용. component, 컴포넌트, UI, shadcn 키워드에 자동 활성화.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/react-component
SKILL.md
React Component Helper
컴포넌트 구조
- 위치:
src/components/ - 네이밍: PascalCase
- 파일:
.tsx확장자
디렉토리 구조
src/components/
├── ui/ # shadcn/ui 컴포넌트
├── shared/ # 공통 컴포넌트
├── layout/ # 레이아웃 컴포넌트
├── forms/ # 폼 관련 컴포넌트
└── features/ # 기능별 컴포넌트
shadcn/ui 통합
- 설치:
npx shadcn@latest add [component] - 위치:
src/components/ui/ - 커스터마이징: Tailwind CSS
자주 사용하는 컴포넌트
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add form
npx shadcn@latest add input
npx shadcn@latest add table
컴포넌트 템플릿
import { cn } from "@/lib/utils"
interface ComponentProps {
className?: string
children?: React.ReactNode
}
export function Component({ className, children }: ComponentProps) {
return (
<div className={cn("base-styles", className)}>
{children}
</div>
)
}
패턴
- Compound Components: 복합 컴포넌트 패턴
- Render Props: 필요시 사용
- Custom Hooks: 로직 분리 (
src/hooks/) - forwardRef: DOM 참조 필요시
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?