What I Actually Use Claude Code For (and What I Don't)

How I actually set it up

Most people use Claude Code like a smarter autocomplete. Type, accept, move on. That works for a while. But it doesn't scale — you end up re-explaining yourself every session and correcting the same mistakes over and over.

The reason it works for me is configuration. There are four layers.

1. CLAUDE.md — project-wide context

Drop a CLAUDE.md at the root of your project. Claude Code reads it at the start of every session. This is where you put everything that should always be true: architecture overview, naming conventions, design tokens, hard rules about what not to do.

This is a condensed version of mine for this site:

## Architecture

**App Router** with `src/` directory structure:
- `src/app/` — Routes using file-based routing
- `src/components/` — Shared components

## Design Tokens

- `text-primary` — main text color
- `text-secondary` — body/paragraph text
- `text-tertiary` — dates, metadata
- `text-accent` — hover states

## Component Patterns

- Headings: `text-2xl font-medium mb-6`
- Body text: `text-secondary leading-relaxed`
- Links: `prose-link text-primary` with hover → `text-accent`
- Cards: `group` wrapper with `group-hover:text-accent transition-colors`

## Rules

- Never add UI libraries (no Chakra, MUI, etc.) — Tailwind only
- Never add animations beyond `transition-colors`
- No emojis in UI text

Now Claude Code knows my design system without me explaining it every time. It won't reach for Chakra UI. It won't use font-bold. It knows what “text-accent” means.

2. Rules — scoped to file types

Rules files live in .claude/rules/. The difference from CLAUDE.md: rules can be scoped to specific file patterns using a paths frontmatter field. They only load when Claude is working on matching files.

I have design-consistency.md that fires for every .tsx file:

---
paths: "**/*.tsx"
---

# Design Consistency

Before creating or modifying any component:

1. Use ONLY the design tokens defined in globals.css
2. Headings are `font-medium`, never `font-bold` or `font-semibold`
3. All interactive elements need `transition-colors` on hover
4. Use `group` / `group-hover` pattern for card-like elements
5. No box shadows, no rounded corners larger than `rounded`, no gradients

Scoped context. Claude gets the right rules for the right files without loading everything all the time. I also have content-style.md with Boris's writing voice, applied only when it matters.

3. Commands — repeatable one-off tasks

Commands live in .claude/commands/. Each one is a markdown file. When you type /command-name, Claude runs it. No explanation needed.

My /preflight command runs TypeScript, ESLint, and a full Next.js build before every commit:

---
description: Build, lint, and verify the site before committing
allowed-tools: Bash(npm run build:*), Bash(npm run lint:*)
---

## Pre-deploy Check

Run in order:
1. `npx tsc --noEmit` — TypeScript check
2. `npm run lint` — ESLint check
3. `npm run build` — Full Next.js build

Report any errors with file paths. If all pass, confirm ready to push.

The allowed-tools frontmatter field locks down what Claude can execute — it can only run the commands I explicitly listed. One slash command, full pre-deploy check, no thinking required.

4. Skills — structured multi-step workflows

Skills are a level above commands. They live in .claude/skills/[name]/SKILL.md and are meant for tasks that follow a repeatable spec: what to ask for, what to generate, what rules to follow. More like a mini playbook than a command.

My /add-resource skill adds a new tool to the resources page. It knows to ask me for the name, URL, and category. It knows exactly what markup to generate. It knows to write in my voice:

---
name: add-resource
description: Add a new resource/tool recommendation to the resources page.
---

# Add Resource

## 1. Gather Info
Ask for: name, URL, category, one-liner in Boris's voice

## 2. Component Pattern
```tsx
<a href="https://url.com" target="_blank" className="group block space-y-1">
  <div className="flex items-baseline justify-between gap-4">
    <h3 className="font-medium text-primary group-hover:text-accent transition-colors">
      Tool Name
    </h3>
    <span className="text-sm text-tertiary shrink-0">Category</span>
  </div>
  <p className="text-sm text-secondary">One-liner.</p>
</a>
```

## 3. Rules
- Keep one-liners under 15 words
- Write in Boris's voice: honest, casual, first-person
- Don't add tools Boris doesn't actually use

I also have /add-blog-post, /new-page, and /advisor which runs a site audit. Each one encodes a workflow I'd otherwise have to explain from scratch.

The pattern across all four layers is the same: write it once, inherit it forever. You're not prompting — you're programming the context.