Help us improve
Share bugs, ideas, or general feedback.
From builder-design
Use when designing or implementing any of the 6 core AI UI components. Each has specific patterns, pitfalls, and required sub-components that generic UI components don't address.
npx claudepluginhub rbraga01/a-team --plugin builder-designHow this skill is triggered — by the user, by Claude, or both
Slash command
/builder-design:ai-component-patternsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
```
Provides a checklist for code reviews covering functionality, security, performance, maintainability, tests, and quality. Use for pull requests, audits, team standards, and developer training.
Share bugs, ideas, or general feedback.
AI UI COMPONENTS ARE NOT GENERIC UI COMPONENTS.
"A textarea works for prompt input" and "a div works for streaming" ship components missing required sub-components — no cursor, no stop button, no live region, no token counter.
All required sub-components of all 6 AI-native patterns, fully implemented, IS an AI component.
Trigger when:
From the 6 types below, identify which AI-native components this feature requires. A chat interface may need: Prompt Input + Streaming Output + Citation Display + Empty State. An agent view may need: Agent Action Log + Uncertainty Indicator + Streaming Output.
For every component identified, use the Required Elements checklist as a review gate. A component is not done until every required element is present. Not most. Every.
Each component has a Pitfalls list. These are the most common production failures. Check each pitfall explicitly — don't rely on "I didn't do that."
Produce the Completion Statement Format below. Filling in real component names and real checkboxes is the test. Vague statements ("all components done") cannot satisfy it.
The user-facing text entry for AI interaction.
Required elements:
┌─────────────────────────────────────────────────┐
│ [Prompt suggestions if empty] │
│ ┌───────────────────────────────────────────┐ │
│ │ Textarea (auto-resize, max 8 lines) │ │
│ │ Character/token counter (if limited) │ │
│ └───────────────────────────────────────────┘ │
│ [Attach] [Voice] [Clear] [Send ▶] (Cmd+↵) │
└─────────────────────────────────────────────────┘
Non-negotiable behaviours:
max-height, then scrollsCmd/Ctrl + Enter sends; Enter inserts newline (not sends)[Stop] button replacing [Send]aria-label="Message to AI" on the textareaPitfalls to avoid:
The container that renders model tokens as they arrive.
Required elements:
<div role="log" aria-live="polite" aria-atomic="false" class="response-container">
<!-- Rendered markdown / text injected here -->
<span class="streaming-cursor" aria-hidden="true">▋</span>
</div>
Non-negotiable behaviours:
▋ or |) visible while generating; hidden on completionaria-hidden="true" — it is decorativePitfalls to avoid:
How model-cited sources appear inline and in a reference list.
Inline citation (footnote style):
The Treaty of Westphalia was signed in 1648.[^1]
[^1]: Croxton, D. (1999). "The Peace of Westphalia of 1648"
UI pattern:
<sup><a href="#ref-1">[1]</a></sup>Pitfalls to avoid:
Timeline of actions an agent has taken or is planning.
● Step 1 Search "recent AI papers" — 3 results ✓ Done
● Step 2 Read paper: "Attention Is All You Need" (2017) ✓ Done
◌ Step 3 Summarise findings ◌ In progress
○ Step 4 Draft response ○ Pending
Required elements:
done / in-progress / pending / failedPitfalls to avoid:
{"tool": "search", "query": "..."})Signals when the model's confidence is low.
Visual pattern:
Trigger conditions:
Pitfalls to avoid:
The first view a user sees before any interaction.
Anatomy:
[Illustration or icon — not clipart]
What would you like to know about [topic]?
┌─────────────────┐ ┌─────────────────┐
│ 💡 What is X? │ │ 📋 Compare X/Y │
└─────────────────┘ └─────────────────┘
┌─────────────────┐ ┌─────────────────┐
│ 🔍 How do I...? │ │ ✍ Help me draft │
└─────────────────┘ └─────────────────┘
[Prompt input]
Non-negotiable:
These thoughts mean a generic component was used where an AI component was needed — stop:
When ai-component-patterns is satisfied, state it like this:
AI components implemented.
Components in this feature: <list>
Prompt input: auto-resize ✓, Cmd+Enter to send ✓, [Stop] during generation ✓,
aria-label ✓, token counter ✓
Streaming output: aria-live="polite" ✓, cursor aria-hidden ✓,
markdown rendered live ✓, auto-scroll respects user position ✓
[Other components with their required elements checked]
AI-native components have interaction requirements that emerge from the model's behaviour — streaming, uncertainty, multi-step execution — not from conventional UI patterns. A generic textarea has no concept of generation state. A generic text display has no concept of streaming. Using the right component from the start prevents a category of UX bugs that cannot be fixed by iterating on a wrong foundation.