PHPackages laravel-agent-kits/claude-react-starter-kit - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. laravel-agent-kits/claude-react-starter-kit ActiveProject[Framework](/categories/framework) laravel-agent-kits/claude-react-starter-kit =========================================== Laravel starter kit for VueJs with InertiaJs fined tuned for agentic development using Claude Code. v1.0.2(3mo ago)30MITTypeScriptPHP ^8.2CI passing Since Jan 29Pushed 3mo agoCompare [ Source](https://github.com/laravel-agent-kits/claude-react-starter-kit)[ Packagist](https://packagist.org/packages/laravel-agent-kits/claude-react-starter-kit)[ RSS](/packages/laravel-agent-kits-claude-react-starter-kit/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (2)Dependencies (14)Versions (3)Used By (0) Claude React Starter Kit ======================== [](#claude-react-starter-kit) **Build Laravel apps faster with AI-powered agentic development.** [![Laravel](https://camo.githubusercontent.com/06ea735703a9f1df04eafc3035859ba230f5b3396114bb712770feb5eb1ded4f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d31322d4646324432303f7374796c653d666c61742d737175617265266c6f676f3d6c61726176656c266c6f676f436f6c6f723d7768697465)](https://laravel.com)[![React](https://camo.githubusercontent.com/cb89c1be9ffc064dd34acff3f2d555dc57f1dc36873e05c3ae6e53c8a7e1bb3a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f52656163742d31392d3631444146423f7374796c653d666c61742d737175617265266c6f676f3d7265616374266c6f676f436f6c6f723d7768697465)](https://react.dev)[![Inertia.js](https://camo.githubusercontent.com/a00a73a0269a13290324a7383a818e9124bb56a337742e8ce61f42404fb169dc/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f496e65727469612e6a732d322d3935353345393f7374796c653d666c61742d737175617265266c6f676f3d696e6572746961266c6f676f436f6c6f723d7768697465)](https://inertiajs.com)[![PHP](https://camo.githubusercontent.com/55239fed202a8d0166ef8d9fcc163425f68eb6123d9b0edf0579051291553f6e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322b2d3737374242343f7374796c653d666c61742d737175617265266c6f676f3d706870266c6f676f436f6c6f723d7768697465)](https://php.net)[![License](https://camo.githubusercontent.com/152aa2a37725b9fd554b28ff24d270f6071c67927a63e6d635a55c8e188e20c7/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e3f7374796c653d666c61742d737175617265)](LICENSE) --- What is this? ------------- [](#what-is-this) An opinionated Laravel starter kit fine-tuned for **agentic development with Claude Code**. Instead of writing every line yourself, you collaborate with specialized AI agents that understand Laravel conventions, React patterns, and testing best practices. This kit provides: - **Multi-agent orchestration** — Three specialized agents (backend, UI, QA) that handle different aspects of development - **Structured workflow** — A 4-phase development cycle (Explore → Plan → Validate → Implement) that ensures quality - **Domain-specific skills** — Pre-loaded knowledge for React 19, Inertia.js v2, Pest testing, and Fortify authentication - **MCP integrations** — Laravel Boost for app introspection and Playwright for browser testing Think of it as pair programming where your partner already knows Laravel and React inside and out. --- Features -------- [](#features) - **Pre-configured Claude Code agents** - `backend-engineer` — APIs, database, Eloquent, services, authentication, Inertia controllers - `ui-engineer` — React components, Inertia pages, shadcn/ui, Tailwind, TypeScript - `qa-expert` — Test strategy, E2E testing, quality metrics - **Domain-specific skills** that activate automatically - React 19 with hooks and functional components - Inertia.js v2 with deferred props, polling, and prefetching - Pest 4 testing framework - Laravel Fortify authentication - Wayfinder for type-safe routes - **Structured development workflow** - Mandatory exploration before implementation - Plan approval gates - Subagent delegation rules - **Modern Laravel stack** - Laravel 12 with streamlined structure - React 19 with hooks and TypeScript - Inertia.js v2 for SPA-like navigation - Tailwind CSS 4 with CSS-first configuration - shadcn/ui (Radix UI) for polished components - **Ready-to-use authentication** - Login, registration, password reset - Email verification - Two-factor authentication (2FA) - Profile management --- Tech Stack ---------- [](#tech-stack) TechnologyVersionPurposeLaravel12.xPHP frameworkReact19.xUI libraryInertia.js2.xSPA-like navigationTypeScript5.xType-safe JavaScriptTailwind CSS4.xUtility-first CSSshadcn/ui-Component library (Radix UI)Pest4.xTesting frameworkFortify1.xAuthentication backendWayfinder0.xType-safe route generationPHP8.2+Runtime--- Prerequisites ------------- [](#prerequisites) Before you begin, make sure you have: - **PHP 8.2+** with required extensions - **Composer** for PHP dependencies - **Node.js 18+** and npm for frontend assets - **Claude Code CLI** installed and authenticated - **SQLite** (default) or MySQL/PostgreSQL ### Install Claude Code [](#install-claude-code) If you haven't already, install Claude Code: ``` npm install -g @anthropic-ai/claude-code ``` Then authenticate: ``` claude login ``` --- Quick Start ----------- [](#quick-start) ### Option 1: Laravel Installer (Recommended) [](#option-1-laravel-installer-recommended) ``` laravel new my-app --using=laravel-agent-kits/claude-react-starter-kit ``` ### Option 2: Composer Create-Project [](#option-2-composer-create-project) ``` composer create-project laravel-agent-kits/claude-react-starter-kit my-app cd my-app ``` ### Post-Installation [](#post-installation) ``` # Install frontend dependencies npm install # Build assets npm run build # Start the development server composer run dev ``` Then open your browser to `http://localhost:8000`. --- MCP Server Setup ---------------- [](#mcp-server-setup) This starter kit is designed to work with two MCP (Model Context Protocol) servers that supercharge Claude Code's capabilities. ### 1. Laravel Boost (Required) [](#1-laravel-boost-required) Laravel Boost gives Claude Code deep insight into your Laravel application — database schemas, routes, configurations, error logs, and version-specific documentation. #### Installation [](#installation) ``` # It's already included as a dev dependency composer require laravel/boost --dev ``` #### What it provides [](#what-it-provides) ToolPurpose`application-info`App overview, packages, environment`database-schema`Table structures and relationships`list-routes`All registered routes`search-docs`Version-specific Laravel documentation`tinker`Execute PHP in app context`last-error`Recent application errors`browser-logs`Frontend console output#### Configuration [](#configuration) Laravel Boost is auto-configured via the `mcp.json` file in your project root. No additional setup required. ### 2. Playwright MCP (Recommended) [](#2-playwright-mcp-recommended) Playwright MCP enables Claude Code to interact with your application in a real browser — taking screenshots, filling forms, clicking buttons, and verifying visual output. #### Installation [](#installation-1) ``` # Add Playwright MCP to Claude Code claude mcp add playwright npx @playwright/mcp@latest ``` That's it! Claude Code will handle the rest. #### What it provides [](#what-it-provides-1) ToolPurpose`browser_navigate`Load pages`browser_click`Click elements`browser_fill_form`Complete forms`browser_take_screenshot`Capture visual state`browser_console_messages`Check for JS errors`browser_resize`Test responsive design--- Project Structure ----------------- [](#project-structure) ``` .claude/ ├── agents/ # Subagent definitions │ ├── backend-engineer.md # Backend/API specialist │ ├── ui-engineer.md # Frontend/React specialist │ └── qa-expert.md # Testing/QA specialist ├── rules/ # Workflow rules │ ├── structured-workflow.md # 4-phase development cycle │ └── subagents-delegation.md # When to use which agent └── skills/ # Domain-specific knowledge ├── wayfinder-development/ ├── pest-testing/ └── developing-with-fortify/ app/ ├── Http/ │ ├── Controllers/ # Inertia controllers │ └── Requests/ # Form request validation ├── Models/ # Eloquent models └── ... resources/ └── js/ ├── components/ # Reusable React components │ └── ui/ # shadcn/ui components ├── hooks/ # React custom hooks ├── layouts/ # Page layouts ├── pages/ # Inertia page components └── types/ # TypeScript definitions tests/ ├── Feature/ # Feature tests └── Unit/ # Unit tests ``` --- The Agent System ---------------- [](#the-agent-system) This starter kit uses a **multi-agent orchestration pattern**. You (or the main Claude instance) act as the orchestrator, delegating work to specialized agents. ### How It Works [](#how-it-works) ``` You (Orchestrator) │ ├── Analyze request ├── Break into subtasks ├── Delegate to agents │ ▼ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ backend-engineer│ │ ui-engineer │ │ qa-expert │ │ │ │ │ │ │ │ • APIs │ │ • React components│ │ • Test strategy │ │ • Database │ │ • Inertia pages │ │ • E2E tests │ │ • Auth/Authz │ │ • shadcn/ui │ │ • Bug hunting │ │ • Queues │ │ • TypeScript │ │ • Performance │ └─────────────────┘ └─────────────────┘ └─────────────────┘ ``` ### The 4-Phase Workflow [](#the-4-phase-workflow) Every non-trivial task follows this cycle: 1. **Explore** — Gather context, read files, understand existing patterns 2. **Plan** — Design the implementation approach, present for approval 3. **Validate** — Wait for explicit user approval before writing code 4. **Implement** — Delegate to appropriate agents, execute the plan This prevents wasted effort and ensures alignment with your vision. ### Example Delegation [](#example-delegation) ``` User: "Add a contact form to the site" Orchestrator thinking: → This needs a React page component (ui-engineer) → Needs an Inertia controller (backend-engineer) → Might need email sending logic (backend-engineer) → Should have tests (qa-expert) Orchestrator: "I'll coordinate this across agents: 1. backend-engineer for controller and email service 2. ui-engineer for the React form component 3. qa-expert for test coverage" ``` --- Available Scripts ----------------- [](#available-scripts) ### Composer Scripts [](#composer-scripts) ``` # Start development (server + queue + logs + vite) composer run dev # Run all tests with linting composer run test # Format code with Pint composer run lint # Initial setup (install, migrate, build) composer run setup ``` ### NPM Scripts [](#npm-scripts) ``` # Build assets for production npm run build # Start Vite dev server with HMR npm run dev # Type check React components npm run type-check # Format frontend code npm run format ``` ### Artisan Commands [](#artisan-commands) ``` # Run tests php artisan test --compact # Run specific test php artisan test --filter=ProfileUpdateTest # Generate Wayfinder routes php artisan wayfinder:generate # List all routes php artisan route:list ``` --- Skills Reference ---------------- [](#skills-reference) Skills activate automatically based on what you're working on: SkillActivates When`wayfinder-development`Importing routes from `@/actions` or `@/routes`, using type-safe route functions`pest-testing`Writing tests, TDD, assertions, debugging test failures, testing Inertia responses`developing-with-fortify`Authentication features, 2FA, password reset, email verificationYou can also manually invoke skills: ``` /wayfinder-development /pest-testing ``` --- Tips for Best Results --------------------- [](#tips-for-best-results) 1. **Be specific about what you want** — "Add a contact form with name, email, and message fields that sends an email" is better than "add a form" 2. **Let the workflow guide you** — Don't skip the exploration and planning phases; they prevent rework 3. **Trust the agents** — Each agent is specialized; let them do their job 4. **Review the plans** — The validation phase exists for a reason; use it to catch misunderstandings early 5. **Use the MCP tools** — Laravel Boost's `search-docs` tool provides version-specific documentation that's invaluable --- Troubleshooting --------------- [](#troubleshooting) ### Vite manifest error [](#vite-manifest-error) ``` Illuminate\Foundation\ViteException: Unable to locate file in Vite manifest ``` Run `npm run build` or start the dev server with `npm run dev`. ### MCP server not connecting [](#mcp-server-not-connecting) 1. Ensure the MCP server is installed (`npm list -g @anthropic-ai/mcp-playwright`) 2. Check your `settings.json` configuration 3. Restart Claude Code ### Tests failing after changes [](#tests-failing-after-changes) ``` # Clear config cache php artisan config:clear # Run tests php artisan test --compact ``` ### TypeScript errors [](#typescript-errors) ``` # Run type checking npm run type-check # Regenerate Wayfinder routes php artisan wayfinder:generate ``` --- Contributing ------------ [](#contributing) Contributions are welcome! Please feel free to submit a Pull Request. 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/amazing-feature`) 3. Commit your changes (`git commit -m 'Add some amazing feature'`) 4. Push to the branch (`git push origin feature/amazing-feature`) 5. Open a Pull Request --- License ------- [](#license) This project is open-sourced software licensed under the [MIT license](LICENSE). --- Built with Laravel, React, Inertia.js, and Claude Code. ### Health Score 37 — LowBetter than 83% of packages Maintenance81 Actively maintained with recent releases Popularity4 Limited adoption so far Community6 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 2 Last Release 102d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/3db0a14dead2c0a8eec8526b1cfa43aabff2e4cde044fefb9d4ddccb0fbc8128?d=identicon)[percymamedy](/maintainers/percymamedy) --- Top Contributors [![percymamedy](https://avatars.githubusercontent.com/u/11259669?v=4)](https://github.com/percymamedy "percymamedy (4 commits)") --- Tags frameworklaravel ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/laravel-agent-kits-claude-react-starter-kit/health.svg) ``` [![Health](https://phpackages.com/badges/laravel-agent-kits-claude-react-starter-kit/health.svg)](https://phpackages.com/packages/laravel-agent-kits-claude-react-starter-kit) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)