Menu
TypeScript patterns, type conventions, naming, code style. Load when writing complex types, reviewing code style, or refactoring.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.
UI component rules: type safety, props, styling, tokens, icons, context providers. Load when creating or styling components.
| name | typescript |
| description | TypeScript patterns, type conventions, naming, code style. Load when writing complex types, reviewing code style, or refactoring. |
Strict mode bắt buộc. strict, noUncheckedIndexedAccess, noUnusedLocals, noUnusedParameters — không tắt.
Không any. Không @ts-ignore. Cần thoát type system → dùng unknown rồi narrow. @ts-expect-error chỉ khi có comment giải thích.
Không as cast trừ ở boundary I/O (parsed JSON, DOM query, event.target) và phải có comment.
Type diễn đạt invariant. Dùng discriminated union thay vì boolean flag rời rạc:
type State =
| { status: "loading" }
| { status: "error"; error: Error }
| { status: "success"; data: T }
interface cho props, type cho union/intersection/mapped. Destructure props với type rõ ràng, không spread ...props tùy tiện xuống DOM node.
Children là React.ReactNode. React 19 bỏ global JSX namespace.
PascalCase, hook useCamelCase, biến/hàm camelCase, constant SCREAMING_SNAKE_CASE.Button.tsx → Button.isLoading, hasError, canSubmit, shouldRetry.onX, internal là handleX.const.organizeImports đã enable.index.ts re-export). Dùng alias #/../. Dùng #/ alias.