메뉴
Guidelines for styling UI in this project — when to use TWC (react-twc) vs inline Tailwind classes, and which AKUI primitives to reach for. Use when building or reviewing UI components.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | using-tailwind |
| description | Guidelines for styling UI in this project — when to use TWC (react-twc) vs inline Tailwind classes, and which AKUI primitives to reach for. Use when building or reviewing UI components. |
Use twc only when the component:
className)Otherwise inline the element with a plain className.
// ✅ TWC — appears at multiple call sites
const DateHeader = twc(Typography)`mt-6 mb-2 text-lg font-semibold opacity-70`;
// ✅ TWC — conditional classes via callback
const Card = twc.div((props: { 'data-focused'?: boolean }) => [
'cursor-pointer rounded-lg px-6 py-4 transition-transform',
props['data-focused'] && 'bg-active scale-[1.025]',
]);
// ✅ Inline — one-off wrapper, no conditionals
<div className="flex h-full flex-col gap-2 overflow-y-auto p-8">
// ✅ Inline with Typography — one-off heading
<Typography as="h1" className="mb-4 text-3xl font-bold">History</Typography>
Prefer components from src/modules/elements/AKUI/ over raw HTML + classes:
Typography (~/modules/elements/AKUI/Primitives/Typography) — for any text. Accepts as for element type (h1, h2, p, div…). Adds the typography CSS class automatically. Supports active prop for accent colour.Box (~/modules/elements/AKUI/Primitives/Box) — polymorphic container with flex flex-col items-center justify-center rounded-md bg-black/50. Override with className. Not suitable where those defaults are unwanted.Menu / Menu.Button / Menu.Header — for menu screens (main menu, settings).twc(Typography) or twc(Box) to create reusable AKUI-based TWC variants.Smart dependency management for any language. Auto-detects project type, applies safe updates automatically, prompts for major versions, diagnoses and fixes dependency issues.
Patterns and guidelines for writing Playwright E2E tests in this project — page object rules, assertion placement, and locator conventions. Use when writing new tests or reviewing existing ones.
Use when Codex updates, fixes, or adds unit tests in this project. Covers basic unit test conventions, Vitest usage, and Cloudflare-related unit tests that should use Cloudflare's Vitest worker-pool integration instead of hand-rolled runtime mocks.
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies
Run, write, and debug Playwright E2E tests for this project. Use when running a single test file or a single named test, writing new E2E tests, working with Page Objects, or mocking songs. Covers test setup, page object initialization, and song fixture mocking.