react-project-scaffolder
React Project Scaffolder
Overview
This skill automates the creation of React projects with three distinct modes tailored to different use cases. Each mode provides a complete, production-ready project structure with modern tooling and best practices.
Three Modes:
- Sandbox - Vite + React + TypeScript (~15s setup)
- Enterprise - Next.js + Testing + CI/CD (~60s setup)
- Mobile - Expo + React Native (~60s setup)
All modes follow Connor's standards: TypeScript strict mode, Testing Trophy approach, 80% coverage, conventional commits.
When to Use This Skill
Trigger Phrases:
- "create a React project"
- "scaffold a new React app"
- "set up a React sandbox"
- "create an enterprise React project"
- "build a mobile React app"
Use Cases:
- Quick React experiments without framework overhead
- Enterprise web applications with industry-standard tooling
- Cross-platform mobile apps with React Native
- Establishing consistent project structure across teams
NOT for:
- Non-React projects (Vue, Angular, Svelte)
- Backend-only projects
- Modifying existing React projects
- Ejected Expo projects (bare workflow)
Response Style
- Efficient: Minimize questions, maximize automation
- Guided: Clear mode selection with pros/cons
- Standards-driven: Apply Connor's standards automatically
- Transparent: Explain what's being set up and why
Mode Selection
| User Request | Mode | Framework | Time |
|---|---|---|---|
| "quick React test" | Sandbox | Vite | ~15s |
| "React sandbox" | Sandbox | Vite | ~15s |
| "production React app" | Enterprise | Next.js | ~60s |
| "enterprise React" | Enterprise | Next.js | ~60s |
| "mobile app" | Mobile | Expo | ~60s |
| "React Native project" | Mobile | Expo | ~60s |
Mode Overview
Sandbox Mode
Lightning-fast Vite + React + TypeScript for quick experiments.
→ Details: modes/sandbox.md
Enterprise Mode
Production-ready Next.js with testing, linting, and CI/CD.
→ Details: modes/enterprise.md
Mobile Mode
Cross-platform Expo + React Native with enterprise standards.
→ Details: modes/mobile.md
Workflow
Phase 1: Mode Selection & Prerequisites
-
Detect mode from user request
-
If ambiguous, ask which type:
- Sandbox: Quick experiments, minimal setup
- Enterprise: Production web apps, full tooling
- Mobile: Cross-platform iOS/Android apps
-
Validate prerequisites:
node --version # >= 18.x npm --version # >= 9.x -
Get project name and validate:
- Valid directory name
- No conflicts with existing directories
Phase 2: Mode-Specific Setup
Execute the selected mode's workflow (see mode files for details).
Important Reminders
- Sandbox is for experiments: Don't add testing/CI to sandbox mode
- Enterprise defaults to yes: Testing and CI/CD are included by default
- Mobile uses managed workflow: For ejected/bare workflow, provide manual guidance
- Always strict TypeScript: All modes use strict mode
- 80% coverage threshold: Enterprise and mobile enforce this
Limitations
- Requires Node.js >= 18 and npm >= 9
- Enterprise mode creates Next.js App Router projects only
- Mobile mode uses Expo managed workflow only
- Cannot scaffold into existing directories
Reference Materials
| Resource | Purpose |
|---|---|
modes/sandbox.md |
Vite + React setup details |
modes/enterprise.md |
Next.js + full tooling details |
modes/mobile.md |
Expo + React Native details |
Success Criteria
- Prerequisites validated (Node.js, npm)
- Project directory created
- Framework scaffolded (Vite/Next.js/Expo)
- TypeScript strict mode configured
- Linting and formatting set up
- Testing configured (enterprise/mobile)
- Git initialized with initial commit
- Next steps provided to user
More from cskiro/claudex
bulletproof-react-auditor
Use PROACTIVELY when users ask about React project structure, Bulletproof React patterns, or need architecture guidance. Covers structure setup, codebase auditing, anti-pattern detection, and feature-based migration planning. Triggers on "bulletproof react", "React structure help", "organize React app", or "audit my architecture".
10codebase-auditor
Use PROACTIVELY when auditing code quality, running security scans, assessing technical debt, reviewing code for production readiness, setting up CI quality gates, or tracking DORA metrics. Analyzes codebases against OWASP Top 10, SOLID principles, Testing Trophy, and 2024-25 SDLC standards. Supports incremental audits for large codebases. Not for runtime profiling or real-time monitoring.
3skill-creator
Use PROACTIVELY when creating new Claude Code skills from scratch. Automated generation tool following Claudex marketplace standards with intelligent templates, pattern detection, and quality validation. Supports guided creation, quick start templates, clone-and-modify, and validation-only modes. Not for modifying existing skills or non-skill Claude Code configurations.
2sub-agent-creator
Use PROACTIVELY when creating specialized Claude Code sub-agents for task delegation. Automates agent creation following Anthropic's official patterns with proper frontmatter, tool configuration, and system prompts. Generates domain-specific agents, proactive auto-triggering agents, and security-sensitive agents with limited tools. Not for modifying existing agents or general prompt engineering.
2accessibility-audit
Use PROACTIVELY when user asks for accessibility review, a11y audit, WCAG compliance check, screen reader testing, keyboard navigation validation, or color contrast analysis. Audits React/TypeScript applications for WCAG 2.2 Level AA compliance with risk-based severity scoring. Includes MUI framework awareness to avoid false positives. Not for runtime accessibility testing in production, automated remediation, or non-React frameworks.
2mcp-server-creator
Use PROACTIVELY when creating Model Context Protocol servers for connecting AI applications to external data sources, tools, and workflows. Generates production-ready MCP servers with TypeScript/Python SDKs, configuration templates, and Claude Desktop integration. Includes testing workflow with MCP Inspector. Not for modifying existing MCP servers or non-MCP integrations.
1