Configure Claude Code to work with mindBridge-admin, a Next.js 13 + TypeScript + Ant Design admin panel with Korean localization.
This skill configures Claude Code to understand and work with the mindBridge-admin repository, a Next.js 13-based Korean admin panel for managing game/social platform features.
**Type**: Next.js 13 admin application
**Language**: TypeScript with Korean UI
**Stack**: Next.js 13, Ant Design, Tailwind CSS, Zustand, TanStack Query, NextAuth.js
**Port**: Development server runs on port 4000 (not default 3000)
When working with this project, use:
API clients are organized by domain in `src/client/`:
**Pattern**:
```typescript
// src/client/domain.ts
export const getDomainItems = () => client.get('/domain');
// src/hooks/useDomain.ts
export const useDomainItems = () => useQuery(['domain'], getDomainItems);
```
Follow this structure:
```typescript
// src/pages/example/list.tsx
const ExampleListPage = () => <ExampleList />;
ExampleListPage.getLayout = getDefaultLayout;
export default ExampleListPage;
// src/components/page/example/ExampleList.tsx
export default function ExampleList() {
// Implementation here
}
```
Use Ant Design forms with custom wrappers:
```typescript
<DefaultForm form={form} onFinish={onFinish}>
<FormSection title="기본 정보">
<FormGroup title="제목" required>
<Form.Item name="title" rules={[{ required: true }]}>
<Input />
</Form.Item>
</FormGroup>
</FormSection>
</DefaultForm>
```
When building features, prefer these custom components:
1. **Port**: Dev server uses port 4000, not 3000
2. **TypeScript**: Build errors are ignored (`ignoreBuildErrors: true`)
3. **Tailwind**: Preflight disabled to avoid Ant Design conflicts
4. **Locale**: Use Korean (`koKR`) for Ant Design components
5. **API Proxy**: `/s3-proxy/*` routes to S3 bucket
6. **Font**: Uses Pretendard font family
1. **New API Endpoints**: Add to appropriate client in `src/client/`, create corresponding hook in `src/hooks/`
2. **New Pages**: Create in `src/pages/`, extract logic to `src/components/page/[route]/`
3. **New Forms**: Use DefaultForm + FormSection + FormGroup pattern with Ant Design Form.Item
4. **New Tables**: Use DefaultTable component with standard column configuration
5. **New Modals**: Use DefaultModal component for consistent styling
```
src/
├── client/ # API clients (axios, organized by domain)
├── components/
│ ├── layout/ # Layout components
│ ├── page/ # Page-specific components (organized by route)
│ ├── shared/ # Reusable components
│ └── ui/ # Base UI components
├── hooks/ # TanStack Query hooks (one per domain)
├── lib/ # Utilities and providers
├── pages/ # Next.js pages (file-based routing)
├── styles/ # Global CSS and Ant Design customizations
└── types/ # TypeScript definitions
```
Remember that:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nextjs-admin-panel-setup-mindbridge/raw