React + Tailwind Component Architecture — 50 Design System Prompts

Build a Production Design System in React + Tailwind — 50 Prompts From Senior Frontend Engineers

Every React + Tailwind project starts well and ends with a mess of inconsistent components, duplicated styles, and accessibility violations. These 50 prompts prevent that — giving you the architecture, patterns, and component blueprints that maintain consistency from 10 components to 500.

Each prompt produces real, production-ready React + Tailwind code with TypeScript, proper accessibility, responsive design, and testing — not generic examples that need hours of adaptation.

What's Inside — 50 Expert Prompts

Design System Foundation (Prompts 1-12)

• 1. Tailwind Config Architect — Creates a comprehensive tailwind.config.ts for {{brand}}: color palette with semantic tokens, typography scale, spacing system, breakpoints, and animation definitions. Uses CRTSE framework.
• 2. Design Token System — Implements design tokens for {{brand}}: color, spacing, typography, shadow, and border radius tokens with CSS custom properties bridge.
• 3. Theme System Builder — Dark/light mode + custom themes for {{app}}: theme provider, CSS variable strategy, transition animations, and system preference detection.
• 4. Typography System — Complete typography scale for {{app}}: heading hierarchy, body text, captions, labels with responsive sizing and font loading optimization.
• 5. Color System Designer — Accessible color palette for {{brand}}: primary, secondary, neutral, semantic colors with WCAG AA/AAA contrast ratios verified.
• 6-12. Additional prompts covering: icon system, spacing/layout system, elevation/shadow system, border radius system, animation tokens, responsive breakpoint strategy, and CSS reset/base styles.

Component Patterns (Prompts 13-28)

• 13. Button Component System — Complete button library: variants (primary, secondary, ghost, destructive), sizes, states (loading, disabled), icon support, and compound button patterns.
• 14. Form Component Architecture — Form system with {{form_library}} (React Hook Form/Formik): input, select, checkbox, radio, textarea, file upload with validation, error handling, and accessibility.
• 15. Modal/Dialog System — Accessible modal implementation: focus trapping, keyboard navigation, scroll locking, animation, nested modals, and confirmation dialogs.
• 16. Data Table Component — Production data table for {{data_type}}: sorting, filtering, pagination, column resizing, row selection, virtual scrolling, and export.
• 17. Navigation System — Complete navigation for {{app_type}}: header, sidebar, breadcrumbs, mobile menu, command palette, and keyboard shortcuts.
• 18. Toast/Notification System — Notification system: toast variants, auto-dismiss, action buttons, queue management, and screen reader announcements.
• 19-28. Additional prompts covering: card patterns, dropdown menus, tabs/accordions, avatar/badge, progress/loading states, empty states, error boundaries, skeleton loading, infinite scroll, and command palette/search.

Advanced Patterns (Prompts 29-40)

• 29. Animation System — Tailwind + Framer Motion integration for {{app}}: micro-interactions, page transitions, list animations, and gesture-based interactions.
• 30. Responsive Component Patterns — Components that adapt across breakpoints: layout shifts, content reflow, touch targets, and container queries.
• 31. Compound Component Pattern — Implements compound components for {{complex_ui}}: context-based communication, flexible composition, and type-safe API.
• 32. Headless Component Pattern — Separates logic from presentation for {{component}}: hooks for behavior, unstyled primitives, and theme-able wrappers.
• 33-40. Additional prompts covering: polymorphic components, render prop patterns, controlled/uncontrolled components, virtualized lists, drag and drop, rich text editor integration, chart/visualization components, and map integration.

Quality & Performance (Prompts 41-50)

• 41. Component Testing Strategy — Testing approach for {{component_library}}: unit tests, integration tests, visual regression, accessibility testing with Testing Library and Playwright.
• 42. Storybook Documentation — Storybook setup for {{design_system}}: stories, controls, documentation, a11y addon, and visual regression with Chromatic.
• 43. Performance Optimization — React + Tailwind performance for {{app}}: code splitting, lazy loading, memoization, Tailwind purging, and bundle analysis.
• 44-50. Additional prompts covering: accessibility audit, keyboard navigation system, screen reader optimization, internationalization patterns, SSR/SSG considerations, micro-frontend architecture, and design system documentation site.

Each Prompt Includes

• {{Variable}} slots — Brand, app type, complexity level customizable
• Production-ready code — TypeScript, proper types, JSDoc, and exports
• Technique annotation — Chain-of-thought, few-shot, CRTSE
• Accessibility built-in — WCAG 2.1 AA compliance in every component
• Anti-patterns — React + Tailwind mistakes that cause maintenance nightmares

Who This Is For

• Frontend developers building design systems from scratch
• Full-stack developers who need consistent UI patterns
• Design engineers translating Figma designs to code
• Tech leads establishing frontend architecture for their team

What Makes This Different

• System-level thinking — Not individual components but how they work together
• Accessibility-first — Every component meets WCAG 2.1 AA, not "add aria-labels later"
• Tailwind-native — Leverages Tailwind's design system capabilities, not fighting them

Works With

ChatGPT (GPT-4+), Claude (Sonnet/Opus), Gemini Pro, Cursor IDE, GitHub Copilot. Best with Claude for complex component architecture.