菜单
SVG chart specs: spider/radar, grouped bar + trend line, heatmap. Load when creating or modifying dashboard charts.
用 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 | chart-patterns |
| description | SVG chart specs: spider/radar, grouped bar + trend line, heatmap. Load when creating or modifying dashboard charts. |
4 axes from SkillKey. Scale 0-10. Two polygons: current (primary) + target (destructive dashed).
Reference: src/features/dashboard/components/SpiderCard.tsx
X = test dates. Y = band 0-10. 4 bars per test (skill colors, opacity 0.65).
One line = overall average (primary-dark). Target dashed line (destructive).
Reference: src/features/dashboard/components/ScoreTrend.tsx
