القائمة
비대한 React 컴포넌트를 스코프별 서브 컴포넌트로 분리, 시맨틱 HTML 적용, 전용 서브디렉토리 구조화
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
npm 릴리스 운영. release 브랜치 선택 커밋 반영, 검증, publish, tag, GitHub Release, main 동기화 진행
npm 릴리스 운영. release 브랜치 선택 커밋 반영, 검증, publish, tag, GitHub Release, main 동기화 진행
커밋 생성. 변경사항 분석 후 .claude/skills/commit 기준 커밋 메시지 작성과 커밋 실행
비대한 React 컴포넌트의 스코프별 서브 컴포넌트 분리. .claude/skills/custom-component 기준
비대한 커스텀 훅의 스코프별 서브 훅 분리. .claude/skills/custom-hook 기준
배포. release 브랜치 main 반영, 빌드 검증, push 실행. .claude/skills/deploy 기준
| name | custom-component |
| description | 비대한 React 컴포넌트를 스코프별 서브 컴포넌트로 분리, 시맨틱 HTML 적용, 전용 서브디렉토리 구조화 |
| triggers | ["custom-component","컴포넌트 분리","컴포넌트화","split component"] |
| argument-hint | <component-file-path> |
| quality | high |
비대한 React 컴포넌트의 스코프별 서브 컴포넌트 분리, 시맨틱 HTML 적용, 전용 서브디렉토리 구조화.
$ARGUMENTS로 대상 컴포넌트 파일 경로가 주어질 때tier-card/ 패턴)<section><header><aside><dl>/<dt>/<dd>role="alert"children: ReactNode 기반 composition 패턴 사용<Layout>
<Content>
<ChildA ... />
<ChildB />
</Content>
<Sidebar />
</Layout>
/custom-hook 참조)_components/, _hooks/로 분류:
component.tsx
component/
_components/
sub-a.tsx
sub-b.tsx
_hooks/
use-sub-action.ts
_hooks/ 하위 배치, 전용 서브 훅은 훅 동명 서브디렉토리에 배치:
component/
_hooks/
use-sub-action.ts
use-sub-action/
use-state.ts
use-auth.ts
pnpm build 성공 확인pnpm lint 통과 확인