Agent skill

generate-tab-component

새 탭 추가 시 필요한 보일러플레이트(컴포넌트, lazy import, 권한, 메타데이터)를 자동 생성합니다. 새 탭 추가 시 사용.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/generate-tab-component

SKILL.md

Purpose

새로운 네비게이션 탭을 추가할 때 필요한 모든 파일과 설정을 자동으로 생성합니다:

  1. 탭 컴포넌트 생성 - 탭의 메인 컴포넌트 파일 생성
  2. TabContent lazy import 추가 - React.lazy import + Suspense 래핑 추가
  3. types/system.ts 업데이트 - AppTab 타입, TAB_META, TAB_GROUPS, DEFAULT_TAB_PERMISSIONS 업데이트
  4. 권한 설정 - 역할별 접근 권한 기본값 설정

When to Run

  • 새로운 네비게이션 탭을 추가해야 할 때
  • 기존 탭을 새로운 구조로 분리할 때

Related Files

File Purpose
types/system.ts AppTab 타입, TAB_META, TAB_GROUPS, DEFAULT_TAB_PERMISSIONS
components/Layout/TabContent.tsx 탭 라우팅 (React.lazy import)
components/Navigation/Sidebar.tsx 사이드바 네비게이션

Workflow

Step 1: 사용자 입력 수집

AskUserQuestion을 사용하여 다음을 확인합니다:

  1. 탭 ID (kebab-case, 예: notice-board)
  2. 탭 한국어 라벨 (예: 공지사항)
  3. 탭 아이콘 (예: 📢)
  4. 소속 탭 그룹 (HOME, SCHEDULE, CLASS, STUDENT, ADMIN, SYSTEM, SUPPORT 중 선택)
  5. 접근 가능 역할 (기본값: 전체 역할)

Step 2: 탭 컴포넌트 디렉토리 및 파일 생성

생성할 파일:

components/<PascalCase>/
├── <PascalCase>Tab.tsx    # 메인 탭 컴포넌트
└── index.ts               # barrel export

탭 컴포넌트 템플릿:

tsx
import React from 'react';

interface <PascalCase>TabProps {
  departmentId: string;
  // 필요한 props 추가
}

export default function <PascalCase>Tab({ departmentId }: <PascalCase>TabProps) {
  return (
    <div className="p-4">
      <h1 className="text-xl font-bold mb-4"><한국어 라벨></h1>
      {/* TODO: 구현 */}
    </div>
  );
}

Step 3: types/system.ts 업데이트

  1. AppTab 유니온 타입에 추가:
typescript
type AppTab = '...' | '<tab-id>';
  1. TAB_META에 메타데이터 추가:
typescript
'<tab-id>': { label: '<한국어 라벨>', icon: '<아이콘>' },
  1. TAB_GROUPS의 해당 그룹에 추가:
typescript
{ id: '<GROUP>', tabs: [...existingTabs, '<tab-id>'], ... }
  1. DEFAULT_TAB_PERMISSIONS에 추가 (선택된 역할에 탭 추가)

Step 4: TabContent.tsx에 lazy import 추가

typescript
const <PascalCase>Tab = React.lazy(() => import('../<PascalCase>/<PascalCase>Tab'));

렌더링 분기에 case 추가:

typescript
case '<tab-id>':
  return <Suspense fallback={<VideoLoading />}><ErrorBoundary><PascalCase>Tab {...props} /></ErrorBoundary></Suspense>;

Step 5: 검증

생성된 파일들이 올바른지 확인합니다:

  1. 탭 컴포넌트 파일 존재 확인
  2. AppTab 타입에 새 탭 포함 확인
  3. TabContent lazy import 존재 확인
  4. TAB_META에 메타데이터 존재 확인

Output Format

markdown
## 탭 생성 완료

| 항목 | 상태 | 파일 |
|------|------|------|
| 컴포넌트 | 생성됨 | `components/<Name>/<Name>Tab.tsx` |
| barrel export | 생성됨 | `components/<Name>/index.ts` |
| AppTab 타입 | 업데이트 | `types/system.ts` |
| TAB_META | 업데이트 | `types/system.ts` |
| TAB_GROUPS | 업데이트 | `types/system.ts` |
| DEFAULT_TAB_PERMISSIONS | 업데이트 | `types/system.ts` |
| lazy import | 추가됨 | `components/Layout/TabContent.tsx` |

다음 단계:
1. 탭 컴포넌트에 실제 기능을 구현하세요
2. 필요한 훅을 `hooks/` 디렉토리에 추가하세요
3. `/verify-lazy-loading`으로 lazy import 패턴을 검증하세요

Exceptions

다음은 문제가 아닙니다:

  1. TODO 주석이 남아있는 컴포넌트 - 보일러플레이트이므로 실제 구현은 별도 작업
  2. props 타입이 기본값인 것 - departmentId만 기본 제공하며, 추가 props는 구현 시 정의

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

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.

163 31
Explore
majiayu000/claude-skill-registry

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.

163 31
Explore
majiayu000/claude-skill-registry

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.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

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.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results