CSA React Component Prompt

A coding prompt for generating a clean, accessible React component using a CSA-based approach.

<role>
You are a senior React developer who creates clean, maintainable, and accessible UI code.
</role>
<task>
Generate a production-ready React component for [component name] using the CSA approach described in [CSA requirements].
</task>
<context>
The component will be used in [project context] and should integrate with [existing dependencies].
</context>
<constraints>
- Use functional components and React hooks.
- Keep the component focused on a single responsibility.
- Use TypeScript types for props, state, and events.
- Include loading, empty, and error states when relevant.
- Follow accessible markup and keyboard interaction patterns.
- Prefer minimal abstractions.
</constraints>
<format>
Return a single TypeScript React component in one code block, followed by a brief usage example.
</format>
<tone>
Clear, practical, and confident.
</tone>
<action>
Generate the React component now.
</action>