---
name: react-codebase
description: "Project-specific React codebase & design-admin conventions. PROACTIVELY use when working with React components, hooks, state management, UI design, colors, animations, TailwindCSS in this codebase. Triggers: React, JSX, hooks, useState, useEffect, component, tailwind, design, dark mode"
license: MIT
metadata:
  author: https://github.com/vinhio
  version: "2.0.0"
  domain: frontend
  role: specialist
  scope: implementation
  output-format: code
  related-skills: react-expert
autoInvoke: true
priority: high
triggers:
  - "react"
  - "jsx"
  - "component"
  - "useState"
  - "useEffect"
  - "hooks"
  - "tailwindcss"
  - "tailwind"
  - "design"
  - "color"
  - "animation"
  - "dark mode"
  - "badge"
  - "button"
  - "modal"
  - "drawer"
  - "tag"
  - "otp"
  - "multiselect"
  - "number input"
  - "stepper"
  - "date picker"
allowed-tools: Read, Grep, Glob, Edit, Write
---

# React Codebase

Project-specific conventions for this codebase's React components, design system, and component library — on top of the generic React/TypeScript expertise in the `react-expert` skill. This skill covers *what's specific to this project*; for general React patterns (hooks rules, component design, performance, accessibility, state management options), see the `react-expert` skill instead of duplicating that guidance here.

## Table of Contents

- [Project Context](#project-context)
- [Auto-Detection](#auto-detection)
- [Reference Guide](#reference-guide)
- [Constraints](#constraints)
- [Quick Reference](#quick-reference)

## Project Context

Before generating any code, skim `references/project-bootstrap.md` for this project's tech stack and directory structure. Then load the other reference files below on demand, based on what you're working on — don't read all 15 upfront.

All generated code must align with the project's actual component library and design tokens (`references/design-tokens.md` and the `component-library-*`/`special-widgets-*` files) — never invent a new one-off pattern when an existing common component already covers the need.

## Auto-Detection

This skill activates when:
- Working with `.jsx`, `.tsx` React files
- Using React hooks (useState, useEffect, etc.)
- Building React components or screens
- Working with TailwindCSS classes or design tokens
- Adding colors, animations, dark mode, or responsive layouts
- Using any component from `@/components` (Badge, Button, Card, Modal, etc.)
- Detected `react` or `tailwindcss` in package.json

## Reference Guide

Load detailed guidance based on context:

| Topic | Reference | Load When |
|-------|-----------|-----------|
| Project Bootstrap | `references/project-bootstrap.md` | Starting any task — tech stack, directory structure, app entry points (`main.tsx`/`App.tsx`), `config.ts`/`vite.config.ts` |
| Services & Data Flow | `references/services-and-data-flow.md` | API/service layer, low-level utilities, auth/screen/form data-flow diagrams, checklist for adding a new feature |
| Code Comments Convention | `references/code-comments-convention.md` | Writing or editing any component — region marker comments and JSX block annotations (project uses Vietnamese comment language) |
| Design Tokens | `references/design-tokens.md` | Color system, typography, spacing/borders/shadows, custom breakpoints |
| Dark Mode & Tailwind Config | `references/dark-mode-and-tailwind-config.md` | Dark mode setup/variants, TailwindCSS v4 config, Vite integration, opacity modifiers |
| Animation & Variants | `references/animation-and-variants.md` | Transitions, custom keyframe animations, CVA-based component variants, `cx()` utility |
| Component Library — Layout & Display | `references/component-library-layout-display.md` | Card, SectionCard, Block, Background, BreadCrumb, Badge, BadgeIndicator, Avatar, StatusBadge, InfoRow, Ribbon, Timeline, MediaCard, EmptyState, TableSkeleton, ProgressBars, Diff |
| Component Library — Interaction & Navigation | `references/component-library-interaction-navigation.md` | Button, Checkbox, Collapse, Carousel, Menu, Modal, Dialog, Drawer, Swap, TabNav, MenuTab, TabsFilter, Pagination |
| Component Library — Data & Feedback | `references/component-library-data-feedback.md` | DataTable, Alert, Spin, Tooltip |
| Special Widgets — Utility | `references/special-widgets-utility.md` | Fragment, DarkModeToggle, OAuthBadge, EyeToggle, CopyButton/CopyField, SortableList |
| Special Widgets — Overlay & Navigation | `references/special-widgets-overlay.md` | ContextMenu family, CommandPalette, LoadingOverlay/LoadingWrapper, PageHeader, Stepper |
| Special Widgets — Feed & Metrics | `references/special-widgets-feed.md` | NotificationDropdown, CountUp, Sparkline, ActivityFeed |
| Form System | `references/form-system.md` | Form architecture, FormGroup, input primitives, date pickers, advanced inputs (TagInput/MultiSelect/NumberInput/OTPInput/RichTextEditor/FileDropZone/PhoneInput), validation, upload components |
| Misc Components & Notifications | `references/misc-components-and-notifications.md` | App-specific components, toast notifications, icons (lucide-react), charts (recharts) |
| UI Design Patterns | `references/ui-design-patterns.md` | Portal rendering, compound components, intent propagation, loading/empty states, page layout pattern, form page pattern |

For generic React patterns not listed above (hooks rules, component composition, performance, accessibility, state management library choice), use the `react-expert` skill's reference files instead — don't duplicate that guidance in this skill.

## Constraints

### MUST DO
- Read `references/project-bootstrap.md` before generating code in an unfamiliar part of the codebase
- Reuse or extend an existing common component before creating a new one — check `component-library-*`/`special-widgets-*`/`form-system.md` first (see [Reference Guide](#reference-guide))
- Use the project's design tokens and component variants for any new UI — never invent a one-off color, spacing value, or component pattern (see `references/design-tokens.md`)
- Partition every component with region marker comments, and use JSX block annotations on complex/deeply-nested render trees — in the project's existing comment language (see `references/code-comments-convention.md`)
- Extract a repeated screen-local UI pattern into a common component instead of leaving duplicated markup inline

### MUST NOT DO
- Duplicate generic React/hooks/performance/accessibility guidance here — that lives in the `react-expert` skill
- Invent a new design token, color, or component variant when the project's existing design system already covers the need
- Leave a new screen as the place where reusable design-system patterns get invented ad hoc

## Quick Reference

| Task | Do this |
|---|---|
| Starting any task | Skim `project-bootstrap.md` first |
| Need a UI component | Check `component-library-*`/`special-widgets-*`/`form-system.md` before writing new markup |
| Generic React question (hooks, performance, a11y, state mgmt) | Use the `react-expert` skill instead |
| Writing/editing a component | Apply region marker comments per `code-comments-convention.md` |
| New screen | Compose existing common components; don't invent new ad hoc patterns |
| New feature end-to-end | Follow the checklist in `services-and-data-flow.md` |