React Enterprise Setup Assistant

AI-optimized prompt for zero-configuration React development environments with enterprise standards. Complete toolchain setup with guaranteed verification.

🚀 Quick Start

Submit to AI Assistant

Copy PROMPT.md → Submit to your AI:

  • VS Code Copilot: Agent mode for automatic implementation
  • Cursor: AI chat for guided setup
  • Claude/ChatGPT: Direct conversation for step-by-step build

AI Output Guarantee

Structured implementation with: ✅ Latest package versions from official docs
✅ Complete configuration files
✅ Working code examples
✅ Comprehensive test setup
✅ Full verification that everything works

🎯 What You Get

Enterprise-Ready Stack

| Component | Benefit | |———–|———| | React + TypeScript | Latest stable features with full type safety | | Vite | Compatible version verified with all packages | | Shadcn/ui + Tailwind | Pre-built accessible components, utility-first styling | | TanStack Query | Server state management with devtools | | Complete Toolchain | ESLint, Prettier, Vitest, Storybook configured |

Optimized Architecture 

✅ Scalable folder structure     ❌ Flat component organization
✅ Co-located test files         ❌ Separate test directories
✅ One hook per file            ❌ Monolithic hook files
✅ Page subdirectories          ❌ Single page directory
✅ No barrel files              ❌ Re-export everything

Production Features

  • Form System: React Hook Form + Zod validation
  • Data Layer: TanStack Query with error boundaries
  • UI Components: Shadcn/ui with variant system
  • Internationalization: i18next with language switching
  • Quality Assurance: 100% working verification

🧠 AI Prompt Engineering Excellence

Why This Prompt Works

Mission-Driven Structure:

  • Clear enterprise assistant role with specific objectives
  • Mandatory web verification before any installation
  • Compatible version determination process
  • Structured package installation from official docs
  • Built-in verification and quality guarantee

Production-Ready Focus:

  • Zero-configuration development environment
  • All tools configured, tested, and verified to work perfectly
  • Co-located tests and architectural best practices
  • Complete deliverables with documentation requirements
  • Success criteria with automated verification checks

📈 Problem Solved

Before: Manual React Setup

❌ Hours researching compatible package versions
❌ Configuration conflicts between Vite, Storybook, tools
❌ Architecture inconsistency - barrel files, scattered tests
❌ Missing enterprise features (proper testing, quality gates)
❌ Setup uncertainty - no verification of working state

After: Enterprise Setup Assistant

✅ Structured approach with mandatory official documentation verification
✅ Version compatibility - determined programmatically before installation
✅ Optimized architecture - no barrel files, co-located tests, page subdirectories
✅ Enterprise-complete - full toolchain with verification commands
✅ Quality guarantee - task incomplete until all checks pass
✅ Production-ready - all features tested and working

🏢 Enterprise Applications

Industry Use Cases

Financial Services: Accessibility compliance, security patterns
Healthcare: Data privacy, HIPAA-ready architecture
E-commerce: Performance optimization, conversion tracking
SaaS Platforms: Scalable multi-tenant architecture

Team Benefits

Startups: MVP-ready foundation with enterprise scaling
Agencies: Consistent client project structure
Enterprises: Standardized development environment
Education: Current React best practices demonstration

🔧 Technical Specifications

Core Stack

| Layer | Technology | Purpose | |——-|————|———| | Framework | React + TypeScript | Type-safe React development environment | | Build | Vite | Compatible version verified with React, Tailwind, Storybook | | UI | Shadcn/ui | Pre-built accessible component library | | Styling | Tailwind CSS | Utility-first styling system | | Data | TanStack Query | Server state management with devtools | | Forms | React Hook Form + Zod | Type-safe form validation | | Testing | Vitest + Testing Library | Co-located testing framework | | Quality | ESLint + Prettier | Flat config with Tailwind plugin |

Performance Features

  • Tree Shaking Optimized: Explicit avoidance of barrel files for optimal imports
  • Architecture Guidelines: Page subdirectories, co-located tests, one hook per file
  • Verification Commands: Complete automated testing of dev, build, test, lint, storybook
  • MSW Integration: Test mocking only (not development) for better AI implementation

Quality Assurance

  • TypeScript Strict Mode: Maximum type safety enforcement
  • Zero-Error Guarantee: ESLint flat config, Prettier, all verification checks pass
  • Co-located Tests: Maintainable test structure avoiding separate test folders
  • Storybook Documentation: Component showcase with CVA variants
  • Enterprise Standards: Complete toolchain configured and verified to work perfectly

📊 Success Metrics

Setup Reliability: Mandatory web verification ensures compatible versions
Code Quality: TypeScript strict mode, ESLint flat config, zero warnings
Architecture Standards: No barrel files, co-located tests, page subdirectories enforced
Team Consistency: Standardized patterns with explicit DO/AVOID guidelines
Production Verification: Complete automated checks guarantee working deployment

Enterprise setup assistant using structured prompt engineering to generate production-ready React applications with zero-configuration development environments and guaranteed verification.