ReactCustom Hooksadvanced

Compound Component & Polymorphic Slot Pattern Architect

Design flexible, headless design system primitives with compound subcomponents, context injection, and accessible keyboard navigation.

#component-architecture #compound-components #design-system #headless-ui #accessibility

Compatibility & Specs

Compatible AI Models

ClaudeChatGPTGemini

Last UpdatedApr 1, 2026

Customizable Variables3 parameters

Main Prompt Template3 Variables

134 words • 1129 characters

You are a Principal Design System Architect and Headless UI Engineer. I need to architect a robust, production-grade Compound Component primitive for our design system. Component Type to Build: [component_type] Target Framework / Styling: [styling_paradigm] Required Interaction & Accessibility Features: [accessibility_requirements] Deliver the complete architectural implementation: 1. Component API Design: Exemplify how consumer developers will import and compose the sub-components (`<Accordion.Item>`, `<Accordion.Trigger>`, `<Accordion.Content>`). 2. Context & Custom Hook Architecture: Internal React Context providing implicit state management without prop drilling, with error guards when subcomponents are used outside the root provider. 3. Complete Accessible TypeScript Code: Production-ready implementation featuring full keyboard navigation (e.g. Arrow keys, Home, End, Escape), ARIA attributes (`aria-expanded`, `aria-controls`), and smooth animated height transitions. 4. Controlled vs. Uncontrolled Support: Dual support for both internal state (`defaultValue`) and external state (`value` + `onValueChange`).

Tip:Variables marked in purple brackets can be tailored below.

Customize Prompt

Fill in the variables below. Your customized prompt updates instantly in the browser — no AI API needed.

Parameters (3)* Indicates required field

Component Type*[component_type]

The UI primitive you want to architect

Styling Paradigm*[styling_paradigm]

CSS solution used

Accessibility Requirements*[accessibility_requirements]

WCAG standards and keyboard patterns

3 parameters active

Live Customized OutputLive Preview

165 words

You are a Principal Design System Architect and Headless UI Engineer. I need to architect a robust, production-grade Compound Component primitive for our design system. Component Type to Build: Accordion (single or multiple expansion) Target Framework / Styling: Tailwind CSS with clean data-state attributes Required Interaction & Accessibility Features: Follow W3C WAI-ARIA Accordion Pattern: Up/Down arrow navigation between headers, Home/End to jump to first/last, Space/Enter to toggle, correct aria-expanded and aria-controls linking. Deliver the complete architectural implementation: 1. Component API Design: Exemplify how consumer developers will import and compose the sub-components (`<Accordion.Item>`, `<Accordion.Trigger>`, `<Accordion.Content>`). 2. Context & Custom Hook Architecture: Internal React Context providing implicit state management without prop drilling, with error guards when subcomponents are used outside the root provider. 3. Complete Accessible TypeScript Code: Production-ready implementation featuring full keyboard navigation (e.g. Arrow keys, Home, End, Escape), ARIA attributes (`aria-expanded`, `aria-controls`), and smooth animated height transitions. 4. Controlled vs. Uncontrolled Support: Dual support for both internal state (`defaultValue`) and external state (`value` + `onValueChange`).

Launch in:

ChatGPT Claude Gemini

How to Use This Prompt

Follow this 3-step workflow to extract high-signal responses from any compatible AI model.

1. Tailor the Parameters

Use the interactive customizer above to substitute the bracketed placeholders with your exact context, requirements, and constraints.

2. Send to AI Model

Copy the prompt and paste it into Claude, ChatGPT, Gemini, or Copilot. These models follow structured multi-step constraints reliably.

3. Review and Iterate

Review the output against the verified benchmark below. Follow up in the conversation to stress-test edge cases or refine tone.

Prompt Variables & Parameters

Reference breakdown of every dynamic variable embedded in this prompt template.

Placeholder	Parameter Name	Type	Status	Description & Guidance
[component_type]	Component Type	select	Required	The UI primitive you want to architectDefault: Accordion (single or multiple expansion)
[styling_paradigm]	Styling Paradigm	text	Required	CSS solution usedDefault: Tailwind CSS with clean data-state attributes
[accessibility_requirements]	Accessibility Requirements	textarea	Required	WCAG standards and keyboard patternsDefault: Follow W3C WAI-ARIA Accordion Pattern: Up/Down arrow navigation between headers, Home/End to jump to first/last, Space/Enter to toggle, correct aria-expanded and aria-controls linking.

Example Execution & Benchmark Output

Sample input arguments and the verified AI response demonstrating expected quality and formatting.

Sample VariablesInputs

[component_type]

Accordion (single or multiple expansion)

[styling_paradigm]

Tailwind CSS with clean data-state attributes

[accessibility_requirements]

Follow W3C WAI-ARIA Accordion Pattern: Up/Down arrow navigation between headers, Home/End to jump to first/last, Space/Enter to toggle, correct aria-expanded and aria-controls linking.

Expected AI ResponseVerified Result

### 1. Consumer Usage Example ```tsx <Accordion type="single" collapsible defaultValue="item-1"> <Accordion.Item value="item-1"> <Accordion.Trigger>What is our cancellation policy?</Accordion.Trigger> <Accordion.Content>Cancel anytime with 1-click in your account dashboard.</Accordion.Content> </Accordion.Item> <Accordion.Item value="item-2"> <Accordion.Trigger>Do you offer annual invoicing?</Accordion.Trigger> <Accordion.Content>Yes, annual billing includes a 20% discount.</Accordion.Content> </Accordion.Item> </Accordion> ``` ### 2. Context Safety Guard ```typescript const AccordionContext = React.createContext<AccordionContextValue | null>(null); export function useAccordion() { const context = React.useContext(AccordionContext); if (!context) { throw new Error('Accordion subcomponents must be used within an <Accordion> provider.'); } return context; } ```

Best Use Cases

Scenarios and roles where this prompt produces maximum leverage.

Design system teams building enterprise UI component libraries

Frontend engineers replacing fragile boolean-prop dialogs with flexible composition

Developers mastering headless accessibility patterns and keyboard navigation

Tips for Best Results

Techniques to elevate response fidelity

•Specify your exact runtime and dependency versions (e.g. Next.js 15, React 19, TypeScript 5.4) to eliminate outdated syntax hallucinations.
•Ask the model to enumerate potential runtime failure modes, concurrency issues, or null boundary states before generating code.
•Request idiomatic, type-safe solutions with clear unit test skeletons rather than monolithic scripts.

Common Mistakes to Avoid

Frequent failure modes and anti-patterns

•Pasting large unformatted code dumps without indicating the specific function or error you want analyzed.
•Deploying AI-generated code directly to production without verifying memory safety, edge cases, and security vulnerabilities.
•Omitting architectural constraints (such as SSR vs. client component boundaries or database indexing).