How to Create an OpenClaw Skill From a CLAUDE.md File

If you have been using a CLAUDE.md file to guide your AI coding agent, you already have the raw material for an OpenClaw skill. CLAUDE.md files contain project-specific instructions, preferred patterns, and coding conventions. The problem is they are tied to a single project. Converting them into OpenClaw skills makes those patterns reusable across projects and shareable with the community on the Bazaar.

What Is a CLAUDE.md File?

A CLAUDE.md file sits in your project root and provides instructions to your AI coding agent. It might include things like:

• Project architecture overview
• Preferred coding patterns
• Testing conventions
• Commands to run
• Files and directories to focus on or avoid

Here is a typical CLAUDE.md excerpt:

# CLAUDE.md

## Code Style
- Use functional components with hooks, never class components
- Prefer named exports over default exports
- Always use TypeScript strict mode
- Use Zod for runtime validation

## Testing
- Use Vitest for unit tests
- Use Playwright for E2E tests
- Test files live next to source files with .test.ts suffix
- Always test error states, not just happy paths

## Project Commands
- Dev server: bun dev
- Tests: bun test
- Lint: bun lint
- Build: bun run build

Why Convert to a Skill?

A CLAUDE.md file works for one project. A skill works for every project that shares those patterns. Here is what you gain by converting:

1. Reusability. Install the same patterns in multiple projects with one command.
2. Shareability. Other developers can benefit from your hard-won conventions.
3. Versioning. Track changes over time with semantic versioning.
4. Composability. Skills combine with other skills without conflicts.

Step 1: Identify the Reusable Parts

Not everything in a CLAUDE.md belongs in a skill. Sort your instructions into two categories:

Skill material (reusable across projects):

• Language and framework conventions
• Testing patterns and preferences
• Code style rules
• Security practices

Project-specific (stays in CLAUDE.md):

• File paths and directory structures
• Environment variables and secrets
• Deployment commands
• Team member names or roles

Go through your CLAUDE.md and highlight everything in the first category. That is your skill content.

Example Extraction

From the CLAUDE.md above, the reusable parts are:

# Reusable patterns:
- Functional components with hooks
- Named exports over default exports
- TypeScript strict mode
- Zod for runtime validation
- Vitest for unit tests
- Playwright for E2E tests
- Co-located test files with .test.ts suffix
- Always test error states

The project commands (bun dev, bun test) stay in the CLAUDE.md because they are specific to this project's setup.

Step 2: Create the Skill Structure

Create a new directory for your skill and set up the required files:

mkdir react-ts-vitest-skill
cd react-ts-vitest-skill
touch skill.md
touch CHANGELOG.md
touch README.md

Add the frontmatter to skill.md:

---
name: react-ts-vitest
description: React + TypeScript + Vitest conventions with strict patterns
version: 1.0.0
author: your-github-username
tags: [react, typescript, vitest, playwright, zod]
compatibility:
  agents: [openclaw, claude-code]
  languages: [typescript, tsx]
---

Step 3: Restructure the Content

CLAUDE.md files tend to be flat lists of rules. Skills benefit from more structure. Organize your content into clear sections with headings, explanations, and code examples.

Before: Flat CLAUDE.md Style

- Use functional components with hooks, never class components
- Prefer named exports over default exports

After: Structured Skill Style

## Component Patterns

Always use functional components with hooks. Never use class components,
even for error boundaries (use the react-error-boundary library instead).

### Preferred pattern:

\`\`\`tsx
// Good: functional component with named export
export function UserProfile({ userId }: UserProfileProps) {
  const { data, error } = useUser(userId);

  if (error) return <ErrorDisplay error={error} />;
  if (!data) return <Skeleton />;

  return <ProfileCard user={data} />;
}
\`\`\`

### Avoid:

\`\`\`tsx
// Bad: class component with default export
export default class UserProfile extends React.Component {
  // ...
}
\`\`\`

The structured version gives the agent much more context about why a pattern is preferred and what the correct implementation looks like.

Step 4: Add Code Examples for Every Rule

The most effective skills include concrete code examples. For each rule in your CLAUDE.md, add at least one "do this" example and one "not this" example.

## Runtime Validation

Use Zod schemas for all runtime validation. Never use manual type guards
or assertion functions for validating external data.

### Preferred pattern:

\`\`\`typescript
import { z } from "zod";

const UserSchema = z.object({
  id: z.string().uuid(),
  email: z.string().email(),
  role: z.enum(["admin", "user", "viewer"]),
  createdAt: z.string().datetime(),
});

type User = z.infer<typeof UserSchema>;

export function parseUser(data: unknown): User {
  return UserSchema.parse(data);
}
\`\`\`

### Avoid:

\`\`\`typescript
// Bad: manual type guard without runtime validation
function isUser(data: unknown): data is User {
  return typeof data === "object" && data !== null && "id" in data;
}
\`\`\`

Step 5: Add Testing Instructions

If your CLAUDE.md included testing conventions, expand them with complete test examples:

## Testing Conventions

Use Vitest for unit and integration tests. Place test files next to
the source file with a .test.ts or .test.tsx suffix.

### Test structure:

\`\`\`typescript
import { describe, test, expect } from "vitest";
import { parseUser } from "./user";

describe("parseUser", () => {
  test("parses a valid user object", () => {
    const input = {
      id: "550e8400-e29b-41d4-a716-446655440000",
      email: "test@example.com",
      role: "admin",
      createdAt: "2026-03-29T00:00:00Z",
    };

    const result = parseUser(input);
    expect(result.email).toBe("test@example.com");
  });

  test("throws on invalid email", () => {
    const input = {
      id: "550e8400-e29b-41d4-a716-446655440000",
      email: "not-an-email",
      role: "admin",
      createdAt: "2026-03-29T00:00:00Z",
    };

    expect(() => parseUser(input)).toThrow();
  });
});
\`\`\`

Always test error states and edge cases, not just the happy path.

Step 6: Test the Skill Locally

Install your new skill from the local directory and verify it works:

# Install from local path
openclaw skill install ./react-ts-vitest-skill

# Verify installation
openclaw skill list

# Test with a prompt
openclaw "Create a new React component for a login form with Zod validation"

Check that the agent follows your skill's conventions in its output. If something is off, adjust the wording in skill.md and test again.

Step 7: Publish to the Bazaar

Once you are satisfied with the skill, publish it:

# Initialize a git repo for the skill
cd react-ts-vitest-skill
git init
git add .
git commit -m "Initial release of react-ts-vitest skill"

# Push to GitHub
gh repo create react-ts-vitest-skill --public --push

# Publish to the Bazaar
openclaw skill publish

Keep Your CLAUDE.md Lean

After extracting reusable patterns into a skill, update your CLAUDE.md to reference the skill instead of duplicating instructions:

# CLAUDE.md

## Skills
This project uses the react-ts-vitest skill for coding conventions.
See .openclaw/skills/react-ts-vitest/skill.md for details.

## Project-Specific
- Dev server: bun dev
- Tests: bun test
- Build: bun run build
- Database: PostgreSQL on port 5432

Your CLAUDE.md stays short and project-specific, while your skill handles the reusable conventions.

Summary

Converting a CLAUDE.md file into an OpenClaw skill takes your hard-earned coding conventions and makes them reusable, shareable, and versioned. Extract the reusable patterns, add structure and code examples, test locally, and publish to the Bazaar. Your future self and the wider community will benefit from the effort.

Browse the Skills Directory

Find the right skill for your workflow. The OpenClaw Bazaar skills directory has over 2,300 community-rated skills — searchable, sortable, and free to install.

Browse Skills →

Built a Skill? List It on the Bazaar

If you have built a skill that others would find useful, publish it on the Bazaar. Reach thousands of developers and get feedback from the community.

Learn how to publish →