원클릭으로
api
API service layer with ky/apiClient and Next.js API routes with Zod validation. Use when creating services, API endpoints, or HTTP calls.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
API service layer with ky/apiClient and Next.js API routes with Zod validation. Use when creating services, API endpoints, or HTTP calls.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Design-token and theming conventions for the Starter — semantic CSS variables in theme.css, Tailwind v4 @theme registration in globals.css, dark mode, and the Figma token-sync flow. Use when extracting repeated design values, adding/editing tokens, theming, or syncing tokens from Figma.
Project file organization, naming conventions, and import patterns. Use when creating new files, organizing code, or deciding where to place modules.
Conventions when no auth provider is bundled. Use when adding authentication or guarding routes.
React component patterns — server vs client components, styling with cn(), props interfaces. Use when creating UI or shared components.
Use before writing or referencing any stack library — fetches version-accurate docs via the context7 MCP server so call signatures, hooks, and APIs match what is installed. Invoke on first usage of any non-none slot library, on any non-trivial Next.js API, or when uncertain whether an API is current.
TanStack Query patterns for data fetching — useQuery, useMutation, query keys, cache invalidation. Use when fetching server data or creating data hooks.
| name | api |
| description | API service layer with ky/apiClient and Next.js API routes with Zod validation. Use when creating services, API endpoints, or HTTP calls. |
| paths | ["src/services/**","src/app/api/**"] |
import { apiClient } from '@/lib/api'
import type { Product, CreateProductInput } from '@/types'
export const productService = {
getAll: (): Promise<Product[]> => apiClient.get('products').json(),
getById: (id: string): Promise<Product> => apiClient.get(`products/${id}`).json(),
create: (data: CreateProductInput): Promise<Product> =>
apiClient.post('products', { json: data }).json(),
update: (id: string, data: Partial<Product>): Promise<Product> =>
apiClient.put(`products/${id}`, { json: data }).json(),
delete: (id: string): Promise<void> => apiClient.delete(`products/${id}`).json(),
}
Never use raw fetch() or axios. Always go through apiClient from @/lib/api.
import { NextResponse } from 'next/server'
import { z } from 'zod'
const createSchema = z.object({
name: z.string().min(1),
price: z.number().positive(),
})
export async function POST(request: Request) {
try {
const body = await request.json()
const data = createSchema.parse(body)
// ... process data
return NextResponse.json({ data }, { status: 201 })
} catch (error) {
if (error instanceof z.ZodError) {
return NextResponse.json({ error: error.errors }, { status: 400 })
}
return NextResponse.json({ error: 'Internal error' }, { status: 500 })
}
}
src/services/*.service.tsPromise<T>)fetch() or ky directly in components — always go through a servicesrc/config/api.ts — never hardcodesrc/services/index.ts