React-Komponente aus Design-Skizze

Build a React component for this design.

Inputs:
- Description or screenshot: [DESCRIPTION / IMAGE]
- Framework flavor: [REACT 19 / REMIX / NEXT / ASTRO]
- Styling: [TAILWIND / CSS MODULES / STYLED-COMPONENTS / VANILLA]
- TypeScript: [YES / NO]

Output in this order:
1. PROPS API - shape of props, with required/optional and brief per-prop purpose
2. SKETCH OF STATES - default, hover, active, disabled, loading, error, empty
3. ACCESSIBILITY - roles, aria attributes, keyboard interactions, focus management
4. COMPONENT CODE - idiomatic, function component, no useless memoization
5. USAGE EXAMPLE - one realistic call site
6. OPEN DESIGN QUESTIONS - where the design leaves details ambiguous

Rules:
- Do not invent variants not in the design. Ask instead.
- Prefer composition over configuration flags
- Forward ref when element-like
- No default export unless matching project convention
- Colors/spacing referenced as tokens, not hard-coded, when a token system exists

Design:
[DESCRIPTION OR PASTED IMAGE]

Project conventions (if any):
[CONVENTIONS]

Wann nutzen

Für den Moment zwischen Design-Handoff und erster PR. Die States-Liste verhindert, dass halbfertige Komponenten ins Repo rutschen.

Use-Cases

• Design-System-Baustein neu anlegen.
• Ad-hoc-Komponente aus Figma-Screenshot nachbauen.
• Migration CSS-Framework: eine Komponente als Referenz.

Getestet mit

• Claude Opus 4.7
• GPT-5