القائمة
Project UI design system — read this before building any page or component. Defines visual style, color tokens, typography, and constraints.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
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.
UI component rules: type safety, props, styling, tokens, icons, context providers. Load when creating or styling components.
| name | ui-design-system |
| description | Project UI design system — read this before building any page or component. Defines visual style, color tokens, typography, and constraints. |
| globs | ["src/components/**","src/routes/**","src/styles.css"] |
Friendly, soft design language. Tinted surfaces, rounded shapes, flat depth, saturated accents on muted backgrounds.
bg-muted/30, bg-primary/5), never solid borders or box shadowsrounded-xl+ for containers, rounded-full for pills and progress bars)transition-colors. No glow, gradient, shimmer, floating, parallax, or neon effectssrc/styles.css)tabular-numsAll colors use oklch with a cohesive cool-gray surface hue of 260°.
/5 to /15; text/icons at full saturationborder or shadow on cards — use tinted fillssrc/styles.css