菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
API service layer with ky/apiClient and Next.js API routes with Zod validation. Use when creating services, API endpoints, or HTTP calls.
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 | design-tokens |
| description | 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. |
| paths | ["src/app/theme.css","src/app/globals.css"] |
Tokens are config-driven theming, not per-component hand-values. Two files own
the whole palette; everything else consumes Tailwind utilities. This is Tailwind
v4 — there is no tailwind.config.*; token registration lives in CSS.
src/app/theme.css — semantic color values as CSS variables, split into
a :root (light) block and a .dark block. This is the single place to change
the palette. Names are intent-based (--th-heading, --th-muted, --th-page,
--th-line), never raw hues. Each value carries a comment naming the source hue.src/app/globals.css — the @theme { … } block registers tokens as
Tailwind utilities. Semantic colors map the --th-* variables to
--color-* (e.g. --color-heading: var(--th-heading)), which generates
text-heading, bg-page, border-line, etc. Brand scale, typography, spacing,
radius, and animations also live here.theme.css --th-heading: #111827 (+ [data-theme='dark'] override)
│
globals.css @theme --color-heading: var(--th-heading)
│
JSX className="text-heading"
Light/dark switching is automatic: .dark overrides --th-* and the same
text-heading utility resolves to the dark value. Dark mode is class-based via
@custom-variant dark (next-themes).
text-muted, bg-subtle, border-line). If the value repeats and has
no token, add one — don't sprinkle arbitrary values.:root and .dark in theme.css, then map it under @theme in globals.css.
Name by role (--th-accent), not by hue (--th-blue).@theme block (--color-brand-*, --font-sans, --spacing-18,
--radius-4xl, --animate-fade-in). Extend there.text-[#abc]) are a smell — they bypass theming and dark mode.:root and .dark in src/app/theme.css (with a comment).@theme in src/app/globals.css
(--color-<name>: var(--th-<name>)).text-<name>, bg-<name>, …).The figma agent runs token sync (/sync-tokens <figma-url>, or --token-sync).
It is additive: it reads existing theme.css, preserves manual tokens, applies
adds/updates only (never auto-removes), and updates the @theme mappings in
globals.css for new semantic tokens. It logs a summary to
.claude/agent-memory/figma/last-token-sync.md. Output files are theme.css and
globals.css — never a Tailwind config file. Requires FIGMA_API_KEY in
.env.local (gitignored; documented in .env.example).
components skill.seo skill.