DEV Community

WEDGE Method Dev
WEDGE Method Dev

Posted on

My Claude Code Setup Builds Full SaaS Products in 90 Minutes — Here's Every File

#ai #devtools #productivity #webdev

After 6 months of daily Claude Code usage, I've built a system that turns it from a fancy autocomplete into an autonomous development agent. It reads my architecture patterns, follows my coding standards, connects to 13 external services, and self-verifies its own work.

Here's every component and how they work together.

The Architecture 

~/.claude/
├── skills/           # 23 markdown files Claude reads during builds
├── commands/         # 146 slash commands for common workflows
├── hooks/            # Shell scripts that fire on tool events
├── settings.json     # MCP servers, permissions, hook configs
└── CLAUDE.md         # Master directive (the brain)
Enter fullscreen mode Exit fullscreen mode

1. Skills System (23 Files — The Knowledge Base)

Skills are markdown files that Claude reads as context when building. Each one contains fill-in-the-blank code templates for a specific domain.

Example: skills/conversion-engine.md contains:

  • Hero section template with social proof, CTA cluster, trust badges
  • 3-tier pricing component with annual/monthly toggle
  • Exit-intent popup with useEffect hook
  • Testimonial card component with metric badges
  • Form optimization rules (minimum fields, inline validation)

When I say "build a pricing page," Claude reads this skill and produces a complete, conversion-optimized pricing section — not a generic one.

The 23 skills cover:

Category Skills
Build Process Autonomous builder, Architecture, UI/UX, Deploy, Zero-to-shipped
Revenue Offers, Funnels, Psychology, Stripe, Pricing, Acquisition, Scaling, Conversion
Quality Copywriting, SEO, Testing, AI features, Performance, Security
Anthropic Official Claude Code mastery, MCP development, Claude API patterns

Each skill is 300-450 lines of battle-tested patterns with exact TypeScript/React code.

2. CLAUDE.md (The Master Directive)

This is the file that transforms Claude Code's behavior. Mine is ~400 lines and includes:

  • Deep Reasoning Protocol: 8-step process (Understand → Research → Reason → Verify → Execute → Self-check → Web verify → Never assume)
  • Proof of Correctness: Claude MUST run build, tests, type checker, and linter before claiming done. Produces a verification receipt.
  • Zero-Error Enforcement: Read before writing, build after every change, fix in loop until green
  • Revenue-First Law: Every feature must answer "how does this generate revenue?" 
# Example from my CLAUDE.md:

## Proof of Correctness Protocol (MANDATORY)
After EVERY task that involves writing or modifying code:
1. BUILD PROOF — Run the actual build command
2. TEST PROOF — Run the actual test suite  
3. TYPE PROOF — Run type checker
4. LINT PROOF — Run linter
5. VERIFICATION RECEIPT — Output results block

If you cannot produce this receipt, the task is NOT done.
Enter fullscreen mode Exit fullscreen mode

3. MCP Servers (13 Connections)

Model Context Protocol lets Claude Code talk to external services directly:

Server What It Does
GitHub Create repos, PRs, manage issues
Stripe Create products, prices, payment links
Brave Search Web search from the terminal
Context7 Look up library docs (React, Next.js, etc.)
Playwright Browser automation (login, test, screenshot)
SQLite Query databases
Filesystem Read/write with access controls
Memory Persistent knowledge graph
Sequential Thinking Multi-step reasoning for architecture

With these connected, Claude can: create a Stripe product, generate a payment link, build the checkout page, and deploy — all in one conversation.

4. Hooks (Automated Quality Gates)

Hooks are shell scripts that fire automatically on specific events:

  • Pre-commit: Runs security scan, blocks secrets from being committed
  • Post-edit: Validates code matches project conventions
  • Revenue check: Fires when editing revenue-related files, ensures conversion patterns are followed

5. The Result

With this setup, a typical build session looks like:

Me: "Build a SaaS landing page for [product] with Stripe payments"

Claude Code:
1. Reads relevant skills (conversion-engine, architecture, stripe)
2. Scaffolds project (React + Vite + TypeScript + Tailwind)
3. Builds hero, features, pricing, FAQ sections
4. Sets up Stripe checkout with 3 tiers
5. Adds SEO meta tags, JSON-LD schema, sitemap
6. Configures security headers, rate limiting
7. Runs build + tests + type check + lint
8. Deploys to Vercel
9. Outputs verification receipt

Time: ~90 minutes
API cost: $3-8
Result: Production-ready, deployed, accepting payments
Enter fullscreen mode Exit fullscreen mode

The Setup Kit

I packaged this entire system — all 23 skills, the CLAUDE.md template, MCP configs, hook scripts, and a setup guide — into a kit you can install in under 30 minutes:

The Claude Code Power Kit — $197

It's the exact system running on my machine. Not a course — the actual files. Drop them into your ~/.claude/ directory and Claude Code immediately starts building at a completely different level.

If you want to see the output quality first, check out thewedgemethodai.com and AgentDesk — both built entirely with this setup.

Questions about specific components? Happy to go deeper in the comments.

Top comments (0)