fullstack-dev
Full-stack backend architecture and frontend-backend integration guide. TRIGGER when: building a full-stack app, creating REST API with frontend, scaffolding backend service, building todo app, building CRUD app, building real-time app, building chat app, Express + React, Next.js API, Node.js backend, Python backend, Go backend, designing service layers, implementing error handling, managing config/auth, setting up API clients, implementing auth flows, handling file uploads, adding real-time features (SSE/WebSocket), hardening for production. DO NOT TRIGGER when: pure frontend UI work, pure CS
npx skills add vibeeval/vibecosystem --skill fullstack-dev --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Instructs the agent to follow a mandatory, stepwise workflow for building a full-stack application, covering requirements gathering, architectural decisions, scaffolding with a checklist, implementing patterns, testing, and a handoff summary.
How it works
- Step 0: Gather Requirements asks user for Stack, Service type, Database, Integration, Real-time needs, and Auth to infer scope; if provided, it proceeds.
- Step 1: Architectural Decisions requires stating choices for Project structure, API client approach, Auth strategy, Real-time method, and Error handling, with brief explanations.
- Step 2: Scaffold with Checklist enforces applying the appropriate scaffolding checklist and ensuring ALL checked items are implemented.
- Step 3: Implement Following Patterns directs writing code per the patterns and referencing specific sections as you implement each part.
- Step 4: Test & Verify prescribes build, start, smoke tests, integration checks, and real-time checks, with commands for backend/frontend.
- Step 5: Handoff Summary asks for a concise recap of what was built, how to run, next steps, and key files.
When to use it
USE this skill when: building a full-stack application (backend + frontend), scaffolding a new backend service or API, designing service layers and module boundaries, implementing database access, caching, or background jobs, writing error handling/logging/config management, hardening for production, setting up API clients, auth flows, file uploads, or real-time features.
What it can touch
The skill references a complete workflow including commands and file patterns but does not list executable tools or files beyond general guidance. It mentions tools in context of patterns such as API clients, error handling, configuration, and testing steps but does not enumerate specific touchable artifacts in this summary.
Caveats
- License is MIT.
- The workflow requires following a strict, ordered process before coding.
- It emphasizes 12-factor style configuration, typed errors, centralized config, and production-ready patterns.
- It specifies using a feature-first project structure and avoidances of pure frontend-only concerns.
- It forbids hardcoding secrets and requires environment-based configuration and validation at startup.
# Full-Stack Development Practices ## MANDATORY WORKFLOW — Follow These Steps In Order **When this skill is triggered, you MUST follow this workflow before writing any code.** ### Step 0: Gather Requirements Before scaffolding anything, ask the user to clarify (or infer from context): 1. **Stack**: Language/framework for backend and frontend (e.g., Express + React, Django + Vue, Go + HTMX) 2. **Service type**: API-only, full-stack monolith, or microservice? 3. **Database**: SQL (PostgreSQL, SQLite, MySQL) or NoSQL (MongoDB, Redis)? 4. **Integration**: REST, GraphQL, tRPC, or gRPC? 5. **Real-time**: Needed? If yes — SSE, WebSocket, or polling? 6. **Auth**: Needed? If yes — JWT, session, OAuth, or third-party (Clerk, Auth.js)? If the user has already specified these in their request, skip asking and proceed. ### Step 1: Architectural Decisions Based on requirements, make and state these decisions before coding: | Decision | Options | Reference | |----------|---------|-----------| | Project structure | Feature-first (recommended) vs layer-first | [Section 1](#1-project-structure--layering-critical) | | API client approach | Typed fetch / React Query / tRPC / OpenAPI codegen | [Section
- MANDATORY WORKFLOW — Follow These Steps In Order
- Step 0: Gather Requirements
- Step 1: Architectural Decisions
- Step 2: Scaffold with Checklist
- Step 3: Implement Following Patterns
- Step 4: Test & Verify
- Step 5: Handoff Summary
- Scope
- Quick Start — New Backend Service Checklist
- Quick Start — Frontend-Backend Integration Checklist
- Quick Navigation
- Core Principles (7 Iron Rules)
- 1. Project Structure & Layering (CRITICAL)
- Feature-First Organization
cd server && npm run build cd client && npm run build curl http://localhost:3000/health curl http://localhost:3000/api/<resource> TypeScript (Prisma) # Python (Alembic) # Go (golang-migrate) npx prisma migrate dev alembic revision --autogenerate migrate -source file://migrations npx prisma migrate deploy alembic upgrade head migrate -database $DB up npx openapi-typescript-codegen \
What does the fullstack-dev skill do?
Full-stack backend architecture and frontend-backend integration guide. TRIGGER when: building a full-stack app, creating REST API with frontend, scaffolding backend service, building todo app, building CRUD app, building real-time app, building chat app, Express + React, Next.js API, Node.js backend, Python backend, Go backend, designing service layers, implementing error handling, managing config/auth, setting up API clients, implementing auth flows, handling file uploads, adding real-time features (SSE/WebSocket), hardening for production. DO NOT TRIGGER when: pure frontend UI work, pure CS
How do I install it?
Run `npx skills add vibeeval/vibecosystem --skill fullstack-dev --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From vibeeval/vibecosystem, a repository with 521 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.