DEV Community

UNTAKA corp
UNTAKA corp

Posted on

How I organized my Claude Code workflow with skill folders (and stopped wasting 10 minutes per session)

#claudecode #webdev #nextjs #productivity

If you're using Claude Code for freelance web dev, you've probably experienced this loop:

  1. Open Claude Code
  2. Spend 10 minutes explaining your stack, conventions, and project structure
  3. Start working
  4. Close session
  5. Tomorrow: repeat from step 1

I was doing this 3-4 times a day across client projects. That's 30-40 minutes of pure context-setting — per day. So I built a system that eliminates it entirely.

This isn't a tutorial on prompting. It's a tutorial on the native Claude Code configuration system that most developers use at 20% capacity.

The fix: CLAUDE.md + Agents + Skills

Claude Code has three configuration layers that work together:

CLAUDE.md — A markdown file at your project root. Claude Code reads it automatically at every session start. Think of it as your project's "brain download" for the AI. Stack, conventions, rules, current state — all of it. One read, zero explaining.

Agents — YAML-fronted markdown files in .claude/agents/. Each defines a specialized AI role with specific tools, model settings, and instructions. The key insight: give each agent only the tools it needs. A code reviewer doesn't need Bash. A client communicator doesn't need file write access.

Skills — Markdown files in .claude/skills/. These create slash commands (/code-review, /deploy-vercel, etc.) that package your most repeated workflows into a single invocable command.

Example: My freelance CLAUDE.md

Here's a stripped-down version of what I use for Next.js + Supabase + Tailwind projects:

# CLAUDE.md — Freelance Web Dev Project

## Project Identity
- **Stack**: Next.js 14+ (App Router) · TypeScript (strict) · Tailwind CSS · Supabase
- **Deploy**: Vercel
- **Package manager**: pnpm

## Code Conventions
- Server Components by default. "use client" only when necessary.
- Zod for validation. react-hook-form for forms.
- Absolute imports with @/ prefix.

## Session Rules
- Read this file first. Read RUNBOOK.md second.
- Never touch .env files.
- Run `pnpm build` before any commit.

## Current State
- Phase: [fill in at session end]
- Last action: [fill in at session end]
- Next action: [fill in at session end]
Enter fullscreen mode Exit fullscreen mode

Claude reads this in under 2 seconds. Session starts with full context. The "Current State" section at the bottom is the most underrated part — update it at session end, and the next session orients in 30 seconds instead of 10 minutes.

Example: A code review agent 

---
name: senior-dev
description: "Code review before client delivery. Invoke with: @senior-dev review <path>"
tools: Read, Glob, Grep
model: sonnet
---

You review code for: TypeScript errors, missing error handling,
Supabase RLS configuration issues, client/server split correctness,
accessibility (ARIA labels, keyboard nav), and security (XSS, unsanitized input).

Output: severity-rated findings (CRITICAL / WARNING / INFO).
Flag anything that would be embarrassing to deliver to a client.
Enter fullscreen mode Exit fullscreen mode

Type @senior-dev review src/ and you get a structured pre-delivery report. I caught a Supabase RLS misconfiguration this way before a client saw it.

Two points worth noting:

  • tools: Read, Glob, Grep — no write access, no Bash. The agent can review but cannot modify or execute anything.
  • model: sonnet — this is the model that costs more. I only use Sonnet for review, not for scaffolding. Model layering saves real money at scale.

Example: A feature scaffolding skill 

---
description: "Scaffold a new feature with consistent structure."
argument-hint: "<feature-name>"
allowed-tools: Read, Write, Glob
---
# /dev-kickstart

Creates: component file, page route, Zod type definitions, custom hook.
Follows naming conventions from CLAUDE.md.
Includes loading.tsx and error.tsx in every route segment.
Enter fullscreen mode Exit fullscreen mode

Type /dev-kickstart auth-flow and Claude scaffolds the entire feature following your project conventions. Not a generic scaffold — your conventions, your structure.

The result

Before: 10 min context per session, inconsistent outputs, no pre-delivery safety net.

After: 0 min context, consistent patterns across all client projects, automated code review before every delivery.

The ROI math: 10 minutes saved × 4 sessions/day × 20 working days = 13+ hours/month. That's a full billing day recovered.

The full setup

I run 3 CLAUDE.md templates (freelance, SaaS MVP, e-commerce), 3 agents (senior-dev, qa-tester, client-communicator), and 7 skills (dev-kickstart, code-review, deploy-vercel, generate-api-route, create-component, fix-bugs, write-tests).

If you want to build your own: the format above is everything you need. Start with a single CLAUDE.md and one agent. Add skills when you notice yourself doing the same workflow three times.

If you'd rather start from a working setup: I packaged everything above as a $19 bundle — Claude Code Skill Folders on Gumroad. Drop-in, 2-minute install.

Questions or variations welcome in the comments — especially curious what agents other freelancers have found useful.

Part 2: The Blueprint Method — how to turn Claude Code into a full autonomous operating system (agents, hooks, decision pipeline, governance layer). Coming next week.

Top comments (0)