skill-fullstack

Files (2)

• README.md
• SKILL.md

SKILL.md (first lines)

# Fullstack — AI-Driven Solo Development

IRON LAW: NEVER skip Step 3 (Technical Document). It is the bridge between
requirements and code — the single highest-leverage step. Without it, AI
output quality drops dramatically and debugging cost multiplies.

Red Flags (return to Step 3 if any appear):
- AI writing code that does not match the expected architecture
- Frequent misunderstandings about what to build
- Inconsistent code style or tech choices across files
- AI inventing features not in the PRD

## Workflow

Copy this checklist and check off items as you complete them:

```
Fullstack Progress:

- [ ] Step 1: Tool Preparation ⛔ BLOCKING
  - [ ] 1.1 Set up AI coding agent + configure strongest model
  - [ ] 1.2 Set up multi-tab terminal + Git
  - [ ] 1.3 Enable file-based progress tracking + resource monitor
  - [ ] 1.4 Configure optional: Figma integration, browser automation
- [ ] Step 2: Requirements Document (PRD)
  - [ ] 2.1 Write PRD in Markdown
  - [ ] 2.2 Run AI brainstorming to fill gaps
  - [ ] 2.3 Prepare design assets (Figma or AI-generated)
- [ ] Step 3: Technical Document ⚠️ REQUIRED — MOST CRITICAL
  - [ ] 3.1 Define tech stack explicitly
  - [ ] 3.2 List all pages/routes with design links
  - [ ] 3.3 Document functional logic and interactions
  - [ ] 3.4 Define API contracts (request/response structures)
  - [ ] 3.5 Design database schema (tables, fields, relationships)
  - [ ] 3.6 Add mandatory constraints: logging, compile checks, timing
- [ ] Step 4: First Round Coding (sustained session, maximize breadth)
  - [ ] 4.1 Start with file-based progress tracking enabled
  - [ ] 4.2 Use sub-agents / agent teams for parallel work
  - [ ] 4.3 Set up self-verification mechanism
  - [ ] 4.4 Monitor context window with resource monitor
- [ ] Step 5: Independent Module Completion
  - [ ] 5.1 Identify standalone modules (auth, payment, i18n)
  - [ ] 5.2 Create git worktrees for parallel development
  - [ ] 5.3 Merge completed modules to main
- [ ] Step 6: Bug Fixing
  - [ ] 6.1 Collect context (logs, screenshots, browser traces)
  - [ ] 6.2 Fix bugs in parallel AI agent sessions
  - [ ] 6.3 Verify each fix before closing
- [ ] Step 7: Deployment & Release
  - [ ] 7.1 SSH auto-deploy to server
  - [ ] 7.2 Run pre-release cleanup scan
  - [ ] 7.3 Submit to distribution platforms
```

## Step 1: Tool Preparation ⛔ BLOCKING

Must have:
- **AI coding agent** (Claude Code, Cursor, Copilot Chat, etc.) with the
  **strongest available model** for complex work, lighter model for simple tasks
- **Git** — commit after every completed module, prevents AI from breaking code
- **Markdown** — all documents in Markdown, AI parses it most efficiently

Strongly recommended:
- **File-based progress tracking** (e.g., planning-with-files) — persists progress
  to files, enables session resume after crash
- **Resource monitor** (e.g., Claude HUD) — real-time token usage, task progress,
  model and cost tracking across sessions
- **Multi-tab terminal** (e.g., Ghostty, Kaku, iTerm, Warp) — manage multiple AI
  sessions in parallel without losing context

Optional (project-dependent):
- **Figma integration** (e.g., Figma MCP) — when a designer provides Figma files
- **Browser automation** (e.g., Chrome CDP, Playwright MCP) — for web projects,
  AI auto-verifies pages in browser
- **Brainstorming tools** (e.g., BMAD, Superpowers) — for PRD gap analysis

Model selection rule: Complex modules MUST use the strongest model available.
Using cheaper models on architecture-level work produces more rework cost than
the token savings.

## Step 2: Requirements Document (PRD)

Goal: write a PRD that AI can fully understand without guessing.

1. **Use Markdown, not Word** — structured natural language, highest AI parse efficiency
2. **Record meetings → AI transcribes → update doc** — feed transcripts to AI to
   extract requirements, no detail is lost
3. **Brainstorm with AI** — after draft, use brainstorming tools to discover edge
   cases and missing interaction states
4. **Design assets, two paths**:
   - Path A: AI generates UI directly — good enough for internal tools
   - Path B: Designer creates Figma → design integration → AI reads metadata
     Requires semantic layer naming in design files or fidelity drops to ~40%

Ask: Does the PRD describe WHAT the user wants, not HOW to build it?
Ask: Would a new developer understand every feature from this document alone?

## Step 3: Technical Document ⚠️ REQUIRED — MOST CRITICAL

Feed the PRD to AI, ask it to generate a technical implementation document.
Human reviews and supplements. This is the highest-ROI step in the entire process.

### Five Core Modules

1. **Tech Stack** — be explicit: "Flutter for client, Go for server, MySQL for
   database, Docker for deployment." If you do not specify, AI guesses — and
   inconsistent guesses are hard to unify later.

2. **Page/Route List + Design Links** — every page or route listed with its
   design reference. AI loads the corresponding design data when building each one.

3. **Functional Logic & Interaction Flow** — complete business rules for each
   feature. Prevents AI from "inventing" its own logic.

4. **API Contracts** — request/response field structures for every endpoint.
   This is the binding contract between frontend and backend.

5. **Database Schema** — tables, fields, relationships. AI generates data layer
   code from this. Avoids costly schema changes mid-development.

From coding327/lc-skills, MIT.

More from coding327/lc-skills