home / skills / htooayelwinict / claude-config / fullstack-implementation

fullstack-implementation skill

/skills/fullstack-implementation

This skill guides end-to-end feature implementation in Laravel or FastAPI stacks, wiring routes, controllers, validation, and tests to deliver complete

npx playbooks add skill htooayelwinict/claude-config --skill fullstack-implementation

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
4.0 KB
---
name: fullstack-implementation
description: |
  Implement features end-to-end in Laravel 12 + Inertia.js + React 19 + TypeScript OR Python + FastAPI + LangChain. Use when building
  new features, wiring controllers to pages, or implementing CRUD operations. EXCLUSIVE to fullstack-developer agent.
allowed-tools: Read, Edit, Bash, Grep, Glob, Write, mcp_context7
---
# Fullstack Implementation

**Exclusive to:** `fullstack-developer` agent

## 📚 Context7 (Memory) — Up-to-Date Docs

Before implementing unfamiliar APIs, lookup the latest documentation:
```
mcp_context7_resolve-library-id(libraryName="[library]", query="[feature]")
mcp_context7_query-docs(libraryId="/[resolved-id]", query="[specific API]")
```

**Common lookups:**
- React hooks, Server Components, Suspense
- Laravel Eloquent, Inertia responses
- FastAPI dependencies, Pydantic models
- LangChain chains, agents, tools

## Validation Loop (MANDATORY)

Before completing ANY implementation, run this verification sequence:
```bash
composer test           # All PHP tests pass
npm run types          # No TypeScript errors
npm run lint           # No linting errors
./vendor/bin/pint      # PHP code styled
python -m pytest       # Python tests pass
ruff check .           # Python lint clean
mypy .                 # Python typing clean
```

**Do NOT report completion until all checks pass.**

## Instructions

1. Review `docs/code-standards.md` for naming conventions
2. Check `docs/codebase-summary.md` for current structure
3. Follow patterns in `docs/system-architecture.md`
4. Implement backend first, then frontend
5. Run verification commands before committing

## Implementation Order

### Backend First (Laravel)
1. **Route** → `routes/web.php` or `routes/api.php`
2. **Controller** → `app/Http/Controllers/`
3. **FormRequest** → `app/Http/Requests/`
4. **Model** → `app/Models/`
5. **Policy** → `app/Policies/`

### Backend First (FastAPI)
1. **Router** → `src/api/`
2. **Schema** → `src/schemas/`
3. **Model** → `src/models/`
4. **Service** → `src/services/`
5. **Migration** → Alembic revision (if applicable)

### Frontend Second
1. **Types** → `resources/js/types/`
2. **Page** → `resources/js/pages/`
3. **Components** → `resources/js/components/`
4. **Hooks** → `resources/js/hooks/`

## Laravel 12 Patterns

### Controllers
```php
// Invokable for single action
class ShowDashboardController
{
    public function __invoke(): Response
    {
        return Inertia::render('Dashboard', [...]);
    }
}

// Resource for CRUD
class PostController extends Controller
{
    public function store(StorePostRequest $request) { ... }
}
```

### Form Requests
```php
class StorePostRequest extends FormRequest
{
    public function authorize(): bool
    {
        return $this->user()->can('create', Post::class);
    }

    public function rules(): array
    {
        return [
            'title' => ['required', 'string', 'max:255'],
        ];
    }
}
```

## React 19 Patterns

### Inertia Form
```tsx
const { data, setData, post, processing, errors } = useForm({
    title: '',
});

const submit = (e: FormEvent) => {
    e.preventDefault();
    post(route('posts.store'));
};
```

### TypeScript Types
```tsx
interface Post {
    id: number;
    title: string;
    created_at: string;
}

interface Props {
    posts: Post[];
}
```

## Verification
```bash
composer test            # PHP tests
npm run types           # TypeScript
npm run lint            # ESLint
./vendor/bin/pint       # PHP style
python -m pytest        # Python tests
ruff check .            # Python lint
mypy .                  # Python typing
```

## Instructions
1. Read project docs for context and conventions
2. Identify entry points (routes/controllers/pages)
3. Follow patterns in `docs/code-standards.md`
4. Keep changes minimal and cohesive
5. Add or update tests when behavior changes
6. Update `docs/codebase-summary.md` if adding new files

## Examples
- "Add a new CRUD page with validation and tests"
- "Wire a form to a controller endpoint and handle errors"
- "Add a FastAPI router, schema, service, and tests"

Overview

This skill implements end-to-end features in either Laravel 12 + Inertia.js + React 19 + TypeScript or Python + FastAPI + LangChain. It is exclusive to the fullstack-developer agent and focuses on shipping backend-first implementations, wiring controllers/routers to pages, and delivering tested CRUD flows. Use it to add new features with consistent patterns, validation, and automated checks.

How this skill works

The skill follows a backend-first workflow: add routes/routers, controllers/services, request/schema validation, models, and policies/migrations, then implement frontend types, pages, components, and hooks. It enforces project conventions by referencing the code standards and architecture docs, and mandates a verification loop of tests, linters, and type checks before marking work complete. It also supports context lookups for up-to-date library docs when implementing unfamiliar APIs.

When to use it

  • Building a new CRUD resource end-to-end
  • Wiring a form or page to a backend endpoint
  • Migrating or adding a backend service with frontend consumption
  • Adding authorization and validation rules for a feature
  • Integrating a third-party API with UI and tests

Best practices

  • Follow project docs: code-standards.md, codebase-summary.md, and system-architecture.md
  • Implement backend first, then add frontend types, pages, components, and hooks
  • Keep changes minimal and cohesive; update or add tests for any behavior change
  • Use FormRequest (Laravel) or Pydantic schemas (FastAPI) for validation and authorization checks
  • Run the full verification loop (tests, linters, type checks) and do not report completion until all pass

Example use cases

  • Add posts CRUD: route → controller → FormRequest → model → policy, then Inertia page and React components with types and tests
  • Hook up a contact form: FastAPI router → Pydantic schema → service → frontend form component with client-side validation
  • Implement a new dashboard view: invokable Laravel controller rendering an Inertia page with server-provided props and React components
  • Integrate LangChain agent: add FastAPI router, schema, service, and tests, then expose controls in the React admin UI

FAQ

What verification steps are mandatory before marking work done?

Run all tests and linters and type checks: composer test, npm run types, npm run lint, ./vendor/bin/pint, python -m pytest, ruff check ., and mypy .; do not report completion until all pass.

Which stack should I choose for a feature?

Choose Laravel + Inertia + React for traditional fullstack Laravel apps; choose FastAPI + LangChain when building API-first services or integrating LLM chains and tools.