Stop Writing Prompts Manually! Claude Code's Skill Feature Doubles My Efficiency

A True Story

Last October, I had a React project that needed refactoring - over 2000 lines of God class code, just looking at it gave me a headache. Every time I asked Claude Code to help optimize the code, I had to repeat the same instructions:

• “Remember to use TypeScript strict mode”
• “Add error handling for API calls”
• “Components should follow single responsibility principle”

Copy-pasting these requirements took at least two or three minutes each time. Even worse, after chatting for dozens of rounds, Claude Code would often “forget” my original requirements and start writing code that didn’t meet the standards again.

Until I discovered the Skill feature in the documentation.

After trying it for a week, I packaged all those repetitive requirements into several skill files. Now with just one command @skill react-refactor, Claude Code immediately knows what to do. That 2000-line class, which was estimated to take three days to refactor, was completed in just two afternoons.

What Exactly is a Skill

Simply put, a Skill is like equipping Claude Code with ability packages.

You create a markdown file in the .claude/skills/ directory and write your common prompts, workflows, and code standards into it. When needed, just call it with @skill skill-name. It’s like equipping different skills for a game character - equip damage skills when you need output, equip defensive skills when you need tanking.

Let’s look at the simplest example:

---
title: "React Code Review Expert"
description: "Specialized in reviewing React code quality, performance, and best practices"
---

# React Code Review Process

You are an experienced React code review expert. Please review the code according to the following standards:

## Review Focus
1. **Component Design**
   - Single responsibility principle
   - Completeness of Props type definitions
   - Rationality of component decomposition

2. **Performance Optimization**
   - Unnecessary re-renders
   - Usage of useMemo/useCallback
   - Key values in list rendering

3. **Code Quality**
   - TypeScript type safety
   - Error boundary handling
   - Accessibility (a11y)

## Output Format
- Issue list (sorted by severity)
- Specific code suggestions
- Priority labels (P0/P1/P2)

Save this file as .claude/skills/react-review.md, and from now on, when reviewing React code, just use @skill react-review. Claude Code will strictly follow your defined standards for review.

Why Manual Prompts Can’t Keep Up Anymore

I used to be a prompt engineer too, with dozens of carefully crafted prompt templates stored in Notion. But after using them for a few months, I found this approach had major flaws:

Too Much Repetitive Work Every time I had to copy and paste from Notion, sometimes adjusting a few words based on the current project. In a day, just copying and pasting prompts would take half an hour.

Messy Version Control The prompts used today are different from last week’s, and the results are inconsistent. Want to go back to “that good version from last time”? Sorry, can’t find it.

Team Collaboration is a Disaster My good prompts - colleagues want to use them? Manually send via WeChat. Colleagues improved them? Have to manually sync back. This efficiency is no different from the Stone Age.

AI Forgets In long conversations, Claude Code easily forgets your initial requirements. By the 20th round, you find it’s making mistakes you explicitly said not to make.

Skills solve all these problems at once:

• Versioning: Managed with Git, rollback anytime
• Shareable: Pull from team repo, everyone syncs
• Always effective: Won’t fail due to long conversations

My First Skill: API Interface Generator

In that e-commerce project, the backend threw me a Swagger doc with over 100 interfaces. If I manually integrated them, each interface would require writing:

1. TypeScript type definitions
2. axios request functions
3. Error handling logic
4. Loading state management

Calculated it would take about 30 hours for 100 interfaces.

I spent 1 hour writing an api-generator skill:

---
title: "API Interface Code Generator"
description: "Generate TS type definitions and axios wrappers based on API documentation"
version: "1.3.0"
---

# API Code Generation Expert

You are a full-stack engineer, skilled in front-end and back-end interface integration. Your task is to generate high-quality TypeScript code based on API documentation.

## Generated Content

### 1. TypeScript Type Definitions
```typescript
// Request parameter type
interface GetUserRequest {
  userId: string;
  includeDetails?: boolean;
}

// Response data type
interface GetUserResponse {
  id: string;
  name: string;
  email: string;
  createdAt: string;
}

2. Axios Request Function

import request from '@/utils/request';

export const getUserAPI = async (
  params: GetUserRequest
): Promise<GetUserResponse> => {
  try {
    const response = await request.get<GetUserResponse>('/api/user', { params });
    return response.data;
  } catch (error) {
    console.error('Failed to get user info:', error);
    throw error;
  }
};

3. React Hook Wrapper (Optional)

export const useGetUser = (userId: string) => {
  const [data, setData] = useState<GetUserResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const result = await getUserAPI({ userId });
        setData(result);
      } catch (err) {
        setError(err as Error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [userId]);

  return { data, loading, error };
};

Code Standards

• Naming follows camelCase convention
• API functions end with API
• Hook functions start with use
• All async functions must have error handling
• All exported types and functions must have JSDoc comments

Output Format

1. First output type definitions
2. Then output API functions
3. If it’s a commonly used interface, generate Hook wrapper
4. Finally provide usage examples

With this skill, integrating one interface was reduced from 30 minutes to 5 minutes. 100 interfaces took only two days in total. More importantly, new team members could generate code with the same standards, making the entire project's code style highly consistent.

## Advanced Usage: Making Skills Work Together

After getting proficient, I found that single skills weren't enough. Real development scenarios often require multiple skills working together.

For example, my standard workflow when refactoring old code:

```bash
# Step 1: Analyze code issues
@skill code-analyzer src/legacy/UserService.ts

# Step 2: Formulate refactoring plan
@skill refactor-planner

# Step 3: Generate test cases (must have tests before refactoring)
@skill test-generator

# Step 4: Execute refactoring
(Manual refactoring or assisted by Claude Code)

# Step 5: Final code review
@skill code-reviewer

These four skills are called sequentially, forming a complete refactoring workflow. I even wrote a shell script to automatically execute this process:

#!/bin/bash
# refactor-workflow.sh

echo "🔍 Step 1/4: Analyzing code issues..."
claude-code @skill code-analyzer $1

read -p "Press Enter to continue..."

echo "📋 Step 2/4: Formulating refactoring plan..."
claude-code @skill refactor-planner

read -p "Press Enter to continue..."

echo "🧪 Step 3/4: Generating test cases..."
claude-code @skill test-generator

read -p "After running tests and confirming they pass, press Enter to continue..."

echo "✅ Step 4/4: Final code review..."
claude-code @skill code-reviewer

Used this script to refactor a 2000-line God class, broke it down into 7 small classes with clear responsibilities. Test coverage increased from 40% to 85%, the whole process went much smoother than expected.

Team Sharing: Treating Skills as Infrastructure

Our team now manages skills as infrastructure. Created a Git repository specifically for team-skills:

team-skills/
├── frontend/
│   ├── react-review.md          # React code review
│   ├── vue-component-gen.md     # Vue component generation
│   └── css-optimizer.md         # CSS performance optimization
├── backend/
│   ├── api-design.md            # API design standards
│   ├── database-review.md       # Database review
│   └── security-audit.md       # Security audit
└── common/
    ├── code-cleaner.md          # Code cleanup
    ├── test-generator.md        # Test generation
    └── commit-msg.md            # Git commit message generation

Each developer symlinks to this repository in their local project:

# One-time setup
git clone [email protected]:your-team/team-skills.git ~/.team-skills
ln -s ~/.team-skills/* .claude/skills/

The benefits are immediate:

• Beginner-friendly: Day one onboarding comes with a complete skill library, instantly able to write code according to standards
• Auto-sync: After team updates skills, everyone git pulls to get the latest version
• Code consistency: No matter who writes the code, the style is highly consistent

Last month an intern joined, and by the second day could write code that met team standards. In the past, it would have taken at least a week of training.

Skills and CLAUDE.md are the Golden Duo

The more powerful way to use Skills is to pair them with the CLAUDE.md file in the project root directory.

Define project-wide rules in CLAUDE.md:

# Project Context

- Tech stack: React 18 + TypeScript 5.0 + Vite 4
- Code standards: Airbnb ESLint rules
- Commit conventions: Conventional Commits
- State management: Zustand (Redux forbidden)

## Important Conventions
- All components must have complete TypeScript type definitions
- API calls unified using src/utils/request.ts wrapper
- Component filenames use PascalCase (like UserProfile.tsx)
- Utility function filenames use camelCase (like formatDate.ts)

## Directory Structure
src/
├── components/    # Common components
├── pages/        # Page components
├── hooks/        # Custom Hooks
├── utils/        # Utility functions
├── services/     # API services
└── stores/       # Zustand state management

Then reference these rules in your skill:

---
title: "React Component Generator"
---

# Component Generation Instructions

Strictly follow the tech stack, directory structure, and naming conventions defined in CLAUDE.md to generate React components.

Generated components must:
- Use TypeScript
- Comply with project's ESLint rules
- Be placed in the correct directory
- Use the project's agreed-upon state management solution

This way, skills automatically read CLAUDE.md configuration, and generated code fully complies with project standards. When cloning a new project, skills can adapt immediately.

My 5 Essential Skills

After using them for half a year, my skills directory has accumulated over 20 skills. Let me share some of the most frequently used ones:

1. Test Case Generator (test-gen.md)

The most annoying thing after writing functional code is supplementing tests. This skill can analyze function logic and automatically generate unit tests, including boundary cases and exception scenarios.

Effect: My test coverage increased from 40% to 85%, saving at least half the time writing tests.

2. Git Commit Message Generator (commit-msg.md)

Every commit requires thinking of a commit message, which wastes brain cells. This skill analyzes git diff content and automatically generates commit messages that comply with Conventional Commits standards.

Example output:

feat(user-auth): Add OAuth2.0 login functionality

- Integrate Google and GitHub third-party login
- Add JWT token refresh mechanism
- Improve user permission verification middleware

Closes #123

Although it’s only 30 lines of code, this is a skill I use every day. The cumulative time saved has been several hours.

3. Code Refactoring Assistant (refactor.md)

When old code needs optimization but you don’t know where to start, this skill can:

• Identify code smells
• Provide refactoring priority ranking
• Offer step-by-step refactoring plan
• Ensure functional consistency before and after refactoring

That 2000-line God class was handled with this skill.

4. Security Review Expert (security-audit.md)

Specifically checks code security issues:

• SQL injection risks
• XSS attack protection
• Sensitive information leakage
• Permission verification completeness

Once before going live, I scanned with this skill and found 3 potential security vulnerabilities, breaking out in a cold sweat.

5. Documentation Generator (doc-gen.md)

Project documentation always lags behind code? This skill can automatically generate API documentation based on code, extract function comments to generate Markdown, and maintain changelogs.

Documentation update time reduced from 2 hours to 10 minutes, and no more “code changed but documentation didn’t” situations.

5 Tips for Writing Good Skills

After half a year, I’ve summarized several experiences for writing skills:

1. Take Frontmatter Seriously

Although it seems optional, title and description appear in the skill list:

---
title: "Full-stack Code Review Expert"
description: "Review front-end and back-end code, focusing on security, performance, and maintainability"
version: "2.1.0"
tags: ["code review", "security", "performance"]
---

The version field is convenient for version management, and tags are convenient for categorized searching.

2. Role Definitions Should Be Clear

Opening with “You are a…expert” is very useful, helping Claude Code quickly get into character:

You are a full-stack engineer with 10 years of experience, skilled in code review and security auditing.

Much more effective than directly saying “please review the code”.

3. Use Comparative Examples to Explain

Using ✅ and ❌ to contrast good and bad code makes Claude Code understand more accurately:

### SQL Injection Risk

❌ Dangerous approach:
```javascript
const query = `SELECT * FROM users WHERE id = ${userId}`;

✅ Safe approach:

const query = 'SELECT * FROM users WHERE id = ?';
db.query(query, [userId]);

### 4. Output Format Should Be Specific

Don't say "please give suggestions", say "output in the following format":

```markdown
## Output Format

### 🔴 Critical Issues (Must Fix)
- [filename:line] Issue description
- Risk explanation
- Fix suggestions (with code examples)

### 🟡 Recommended Improvements (Optimization suggested)
- [filename:line] Issue description
- Improvement rationale
- Optimization approach

5. Add Error Handling Rules

Tell the AI what to do when encountering problems:

## Error Handling

If encountering the following situations:
- Code syntax errors: Point out error location first, don't continue review
- File inaccessible: Prompt user to check path
- Code too large (>5000 lines): Suggest batch review

Common Questions

Too Many Skills to Remember Names?

Use good naming conventions:

• review-*: Code review category
• gen-*: Code generation category
• util-*: Utility category
• fix-*: Problem fixing category

My naming: review-frontend.md, gen-api.md, util-commit.md

Skill Output Too Long to Read?

Add a brief mode to the skill:

Default uses detailed mode. If user adds `--brief` parameter, output concise version:
- Issue list (one per line)
- Severity labels
- Key fix suggestions

Skill Performance Inconsistent Across Different Projects?

Have the skill actively request context:

## Pre-analysis Steps

Before starting, please:
1. Read package.json to understand dependency versions
2. Check tsconfig.json to understand TS configuration
3. View .eslintrc to understand code standards
4. Browse README.md to understand project architecture

Final Words

After using the skill feature for half a year, my development efficiency has improved by at least 40%. More importantly, a lot of repetitive mental work has been liberated, allowing me to spend time on architectural design and business logic that truly require thinking.

If you’re still writing prompts manually, I suggest:

1. Start today: Begin with a simple skill, like code review or test generation
2. Gradually improve: After each use, reflect on what can be improved and update the version
3. Share with team: Good skills are like good utility libraries, they should be shared
4. Continuous learning: Follow official documentation updates, new features may change how you write them

Finally, I’ll share one insight: The value of Skills lies not in how complex they are, but in solving real problems. My simplest commit-msg generator is only 30 lines, but I use it every day, and the cumulative time saved has been several hours.

Starting now, try organizing the prompts you repeatedly input every day into skills. Three months from now, you’ll thank today’s self.

Related Resources

• Claude Code Official Documentation
• Skill Best Practices Guide
• Community Skill Template Library

Published on: Nov 23, 2025 · Modified on: Dec 4, 2025

Easton

AI & Intelligence