Claude Code Skills: Teach the AI Your Project

Claude Code is useful out of the box. But its real power shows when you teach it about your own project: what conventions you follow, what structure you use, and what tasks need to be done regularly.

Two mechanisms are available for this: the CLAUDE.md file and the skills system. The former provides the context, the latter automates repetitive tasks.

What Is CLAUDE.md?#

CLAUDE.md is a simple markdown file at the root of your project. When Claude Code starts working, it automatically reads this file and follows the instructions inside it.

Think of it as an onboarding document for a new team member. You describe:

• What the project does
• What technologies it uses
• What rules to follow
• What naming conventions exist
• How to build, test, and deploy

How to Build a Good CLAUDE.md File?#

The key is to be specific and unambiguous. Don't write generalities -- spell out the project's specific rules.

# Project: Webshop Admin

## Tech Stack
- Next.js 15 (App Router)
- TypeScript strict mode
- Tailwind CSS v4
- Supabase (database + auth)
- Vitest (tests)

## Project Structure
- src/app/ - pages (App Router)
- src/components/ui/ - reusable UI elements
- src/components/features/ - feature-specific components
- src/lib/ - utility functions, configurations
- src/hooks/ - custom React hooks

## Conventions

### Files
- Components: PascalCase (Button.tsx)
- Hooks: camelCase, use prefix (useAuth.ts)
- Utilities: camelCase (formatDate.ts)

### Components
- Each component in its own folder with index.tsx
- Props types in the component file, not separate
- Server Component by default, "use client" only when needed

### CSS
- Tailwind utility classes, no inline styles
- Complex styles: globals.css utility classes
- Responsive: mobile-first (base = mobile, md: tablet, lg: desktop)

### Git
- Commit messages in English
- Format: "feat: ...", "fix: ...", "refactor: ..."
- Each commit is one logical unit

## Important Commands
- npm run dev - development server
- npm run build - production build
- npm run test - run tests
- npm run lint - linter check

## Testing Rules
- Every new feature needs a test
- Vitest + React Testing Library
- Test files next to the component: Button.test.tsx

This file ensures that Claude Code always works according to the project's rules. For example, if you ask for a new component, it automatically uses a PascalCase filename, puts it in its own folder, and creates it as a Server Component unless client-side functionality is required.

The Skills System#

CLAUDE.md provides context. The skills system goes further: you can create pre-defined tasks that Claude Code executes with a single command.

Skills live in the .claude/skills/ folder as markdown files. Each skill is a set of instructions describing what to do.

Creating a Skill#

Create the .claude/skills/ folder at your project root:

mkdir -p .claude/skills

Create a skill file:

# Deploy Skill

When the user wants to deploy, follow these steps:

## Steps

1. Run the linter: `npm run lint`
2. If there are lint errors, fix them automatically
3. Run the tests: `npm run test`
4. If all tests pass, create a production build: `npm run build`
5. If the build succeeds, commit the changes
6. Push to the main branch: `git push origin main`
7. Confirm that the deploy has started (Cloudflare Pages builds automatically)

## Important
- Do NOT deploy if any test fails
- The commit message should be: "deploy: [brief description of changes]"
- If the build throws an error, report the error, don't try to deploy

# Code Review Skill

When the user asks for a code review, follow this process:

## Review Criteria

1. **TypeScript types:** Are there any `any` types? If yes, flag them
2. **Error handling:** Does every async function have try-catch?
3. **Conventions:** Does the code follow the CLAUDE.md rules?
4. **Security:** Is there user input that isn't validated?
5. **Performance:** Are there unnecessary re-renders, missing memoization?
6. **Tests:** Are there tests for new features?

## Output Format

Create a summary:
- Critical issues (fix immediately)
- Suggestions (worth fixing)
- Positives (what's done well)

If requested, fix the critical issues automatically.

Using Skills#

You can invoke skills in Claude Code's interactive interface using the / character:

claude

> /deploy
# Claude Code executes the deploy skill steps

> /code-review
# Reviews the code based on the specified criteria

You can also reference them in natural language:

claude "run the deploy skill"
claude "do a code review on the latest changes"

Practical Examples in an SMB Setting#

New Developer Onboarding#

When a new developer joins the team, CLAUDE.md helps them be productive right away. No need to spend hours getting familiar with the project -- Claude Code knows the rules and helps with navigation.

claude "show me the project structure and the most important
  conventions"

Automating Repetitive Tasks#

Create skills for tasks you do on a weekly basis:

• Dependency update: checks for outdated packages and updates them
• Database backup check: verifies that backups are running properly
• Performance audit: runs a Lighthouse test and reports the results

Maintaining Code Quality#

The code review skill ensures that every change goes through an automated check. This is especially useful for small teams where a senior developer isn't always available for review.

Best Practices#

Summary#

CLAUDE.md and the skills system are what turn Claude Code from a general AI tool into your personal development partner. The investment is minimal: an hour or two to write the documentation, and minutes each week to maintain it. In return, the AI always works according to the project's rules and handles repetitive tasks with a single command.

In the next part of this series, we'll present a specific use case: how to combine the Remotion video library with Claude Code to automate content production.