메뉴
App shell, sidebar, header, adaptive content width, focus mode, error boundary. Load when creating pages or modifying layout.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Project UI design system — read this before building any page or component. Defines visual style, color tokens, typography, and constraints.
Design tokens, Tailwind classes, card patterns, spacing, colors, radius, typography, gamification patterns (Duolingo). Load when working on UI, components, styling.
Phân tích và refactor codebase. Load khi cần review code structure, tìm vấn đề thiết kế, tách component, dọn dead code.
Tạo, cập nhật, hoặc implement RFC cho frontend-v2. Use when user says 'tạo rfc', 'viết rfc', 'implement rfc', 'update rfc', 'rfc status', or when a cross-cutting UI/UX change needs formal spec before coding.
TanStack Query patterns, data fetching, cache invalidation, route loaders. Load when working with server state, queries, mutations.
TypeScript patterns, type conventions, naming, code style. Load when writing complex types, reviewing code style, or refactoring.
| name | layout-patterns |
| description | App shell, sidebar, header, adaptive content width, focus mode, error boundary. Load when creating pages or modifying layout. |
src/routes/_app.tsx — sidebar + outlet, auth guard via useEffectsrc/components/Sidebar.tsx — 260px fixed, icon alignment via w-8 h-6 containersrc/components/Header.tsx — page title + gem/streak/avatar + ProfileDropdownsrc/routes/_focused.tsx — no sidebar, no headerFocusBar (progress + close), FocusComplete, FocusEmptyBackLink type for navigation props