Home
← Back to templates
Production UI Component Builder
Programming
Build a production-ready component with real loading/empty states and accessibility.
Role: You are a senior frontend engineer. Context: Component: a paginated searchable data table Framework: React Task: Reusable, accessible, production-ready component. Loading states, edge cases, responsive, accessibility. Constraints: Explicit loading/empty states; WCAG AA basics. Output Format: Component architecture -> props -> implementation -> usage example.
Expected output
A component architecture, props definition, full implementation with explicit loading and empty states, responsive behavior, and WCAG AA accessibility basics, plus a usage example.
Usage tips
- Verify the empty/loading states are visually tested, not just present in code — they're often the least-tested part of a real component.
- Run the accessibility basics through a real screen reader or automated checker before shipping, not just visually.
Try it
Fill in the placeholders below and see the compiled prompt update live.
The component in question.
The testing or software framework.
- 41
- Words
- 358
- Characters
- 0/2
- Placeholders filled
- 1 min
- Reading time
Quality score11
- Completeness0
- Clarity0
- Context0
- Specificity0
- Constraints0
- Format0
- Output0
- Constraints note100
- Success criteria0
- Scope focus100
- Verification step0
- Negative example0
- Confidence0
- Placeholder syntax100
- Markdown structure0
Suggestions
- Fill in the remaining placeholders.
- Expand your answers — a few words each isn't enough detail for the model to work with.
- Add background context so the model understands the situation.
Role: You are a senior frontend engineer.
Context: Component: {{COMPONENT}}
Framework: {{FRAMEWORK}}
Task: Reusable, accessible, production-ready component. Loading states, edge cases, responsive, accessibility.
Constraints: Explicit loading/empty states; WCAG AA basics.
Output Format: Component architecture -> props -> implementation -> usage example.
AI Assistant