资源描述
专为前端工程师设计的高复用性 React + Tailwind 提示词模板，适用于快速生成符合 React 18 最佳实践、响应式布局、WAI-ARIA 无障碍标准及 TypeScript 类型安全的组件。特别适合 UI 原型开发、设计系统构建与团队协作场景，显著提升代码一致性与可维护性。
详细内容
Act as a senior frontend engineer specializing in React 18, TypeScript, and Tailwind CSS. Build a production-ready, reusable React component that meets the following requirements:
- Use functional components with React Hooks (useState, useEffect, useReducer, etc. as appropriate)
- Implement responsive design using Tailwind's breakpoint classes (sm, md, lg, xl)
- Ensure WCAG 2.1 AA compliance: semantic HTML, proper ARIA attributes, keyboard navigation support, and sufficient color contrast
- Include TypeScript interfaces/props definitions with strict typing
- Avoid inline styles; use only Tailwind utility classes
- Export component with named export; include JSDoc comments for props
Component name: [ComponentName]
Primary purpose: [Purpose e.g., 'a collapsible FAQ accordion']
Key features: [Features e.g., 'expand/collapse animation, auto-focus on open, SSR-friendly']
Design system context: [Context e.g., 'matches our brand's primary/secondary color palette and spacing scale']
Output format:
1. Complete, self-contained TSX file (no external dependencies beyond React & @types/react)
2. No comments explaining logic — only functional code + JSDoc
3. Include minimal but realistic example usage in a commented "Usage" section at the bottom
Tips:
• Replace all [bracketed variables] before execution — especially [ComponentName] and [Purpose]
• For complex interactions, prioritize accessibility over visual polish (e.g., prefer `role="button"` + `onKeyDown` over div+onClick alone)
• If responsive behavior is critical, explicitly define mobile-first breakpoints in Tailwind classes (e.g., `md:flex-row`, not `hidden sm:block`)