VSTEP

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.

UI component rules: type safety, props, styling, tokens, icons, context providers. Load when creating or styling components.

Git commit message conventions (ENGLISH), branch rules, push workflow. MANDATORY to read before commit/push. Commit message must list ALL changes in body. DO NOT commit handoff files.

Common mistakes in React Native/Expo development with this codebase. Anti-patterns to avoid. Load when code review or debugging.

Audio playback, recording, TTS, video handling with expo-av and expo-speech. VSTEP exam audio rules. Load when implementing audio/video features.

TanStack Query + Zustand + API integration patterns. Server state, mutations, local stores, error handling, token refresh. Load when working with data layer.

Exam session flow: device check, timed sections, audio listening, submission, results. Matches VSTEP exam format. Load when implementing exam features.

Expo-specific rules: Metro config, babel, dependencies, build checks, common pitfalls. Load BEFORE adding dependency or editing config. MANDATORY on build errors.

Folder structure, naming conventions, route conventions, export rules for mobile-v2. Load when creating new features or files.

Complete learner flow: auth → onboarding → dashboard → practice → exam → grading → result. Mirrors FE v3 and BE v2. Load BEFORE coding any learner feature.

Expo Router navigation patterns, tab layout, focus mode, safe area, gestures. Load when creating or modifying routes.

Practice session flows for all 4 skills: Listening, Reading, Writing, Speaking. Audio, voice, MCQ, exercise patterns. Load when implementing practice features.

TanStack Query + useMutation + useReducer patterns. Auth flow, local stores, error handling, API integration. Load when working with data/state.

Design tokens, components (DepthCard, DepthButton, HapticTouchable, Mascot), typography, spacing, safe area. Load when creating/editing UI components.

Rules for modifying backend (apps/backend-v2) from FE context. Load when adding or changing API endpoints.

SVG chart specs: spider/radar, grouped bar + trend line, heatmap. Load when creating or modifying dashboard charts.

Folder structure, type placement, naming conventions, route conventions, export rules. Load when creating new features or files.

App shell, sidebar, header, adaptive content width, focus mode, error boundary. Load when creating pages or modifying layout.

Triệu tập tông môn tu luyện code. Các đạo hữu bàn đạo, phá trận, luyện đan, xuất thủ. Use when user says 'team đâu', 'đạo hữu', 'bàn đạo', 'tông môn', 'mọi người thảo luận', 'review giúp', 'xem hộ', 'cho ý kiến', or wants multi-perspective work.