菜单
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 职业分类
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.
| 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.