# Tool: Tạo Prompt Xây Dựng Component React Functional

> Tạo các prompt kiến trúc UI React chuẩn mực với Bộ máy Hệ thống Thiết kế BOP Prompts. Được thiết kế riêng cho Frontend Developer và Product Engineer, công cụ này xây dựng các đặc tả toàn diện để tạo component React 19 và Next.js App Router. Nó thực thi áp dụng tiện ích Tailwind CSS, hiệu ứng chuyển đổi layout Framer Motion, điều hướng bàn phím ARIA nghiêm ngặt, custom hook cô lập state và độ an toàn kiểu của TypeScript.

**Category**: prompts-code-design | **Target AI Models**: Gemini 3.6 Flash, Claude 3.5 Sonnet

## Domain Parameters:
- `stylingLibrary` (select): Thư viện giao diện (Styling) (Default: "Tailwind CSS v4")
- `reactVersion` (select): Kiến trúc React (Default: "React 19 RSC")
- `includeFramerMotion` (toggle): Hiệu ứng hoạt ảnh Framer Motion (Default: "true")
- `strictA11y` (toggle): Chuẩn trợ năng WCAG AA (Default: "true")
- `stateManagement` (select): Mô hình quản lý State (Default: "Local State")

## Master Prompt Engineering Architecture (5 Pillars):
1. **Role & Persona**: Domain expert framing
2. **Task & Deliverable**: Primary objective & constraints
3. **Context & Parameters**: Technical specs & camera/stack parameters
4. **Negative Constraints**: Forbidden artifacts & bad practices
5. **Output Spec**: Section formatting & XML/Markdown structure

## Programmatic API Execution:
```http
POST /api/generate-prompt
Content-Type: application/json

{
  "toolSlug": "create-prompt-for-react-functional-components",
  "rawPrompt": "Your raw concept here",
  "thinkingLevel": "HIGH"
}
```
