# Tool: Create Prompt for React Functional Components

> Generate battle-tested React UI architecture prompts with BOPINK Design Systems Engine. Specially tailored for Frontend Developers and Product Engineers, this tool constructs comprehensive specifications for building React 19 and Next.js App Router components. It enforces Tailwind CSS utility styling, Framer Motion layout transitions, strict ARIA keyboard navigation, state isolation hooks, and TypeScript type safety.

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

## Domain Parameters:
- `stylingLibrary` (select): Styling Library (Default: "Tailwind CSS v4")
- `reactVersion` (select): React Architecture (Default: "React 19 RSC")
- `includeFramerMotion` (toggle): Framer Motion Animations (Default: "true")
- `strictA11y` (toggle): WCAG AA Accessibility (Default: "true")
- `stateManagement` (select): State Paradigm (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"
}
```