A Frustrating Loop

A while back, every time I opened a new chat with an AI assistant to write code, I had to repeat:

“Our project uses React 18, Zustand for state, Tailwind for styles, and shadcn/ui. Please stick to this stack…”

Saying it once was fine. Saying it ten or twenty times was exhausting.

Even worse, sometimes the AI would “helpfully” recommend Redux or spit out a bunch of styled-components code. I kept thinking: I already said Tailwind, why are you doing this?

Then I discovered the Skills feature, and the problem vanished.

What Are Skills?

Think of Skills as “memory cards” for your AI.

Imagine you hire a smart intern who knows nothing about your company. Every task requires 30 minutes of background briefing. Eventually, you’d want to hand them a doc to read first, right?

Skills are that doc.

You write down the tech stack, coding conventions, and common commands. The AI “reads” it before working, so it knows how to collaborate with you.

Two Ways to Use Them

Option 1: Global Skills

This approach stores skill files in a fixed place on your machine, usable across projects.

Great for general preferences, like your personal coding style or go-to toolchains.

How to set it up:

# Create a folder
mkdir -p ~/.codex/skills/my-coding-style

# Then create SKILL.md inside

SKILL.md looks like this:

---
name: my-coding-style
description: My personal coding style preferences; follow these when writing code
---

# Coding Style

- Use camelCase for variable names
- Keep functions under 20 lines when possible
- Skip useless comments—if the code is clear, no comment needed
- Handle errors seriously; no empty catch blocks

Restart Codex and it auto-loads the skill.

Option 2: Project-Level Skills (My Favorite)

This approach keeps skills inside the project, so they travel with the repo. New laptop? New teammate? The skills are already there.

How to set it up:

# In the project root
mkdir -p .claude/skills

Drop SKILL.md in there and you’re done.

The benefit: each project gets its own skills. Frontend project uses frontend skills, backend project uses backend skills—no cross-contamination.

A Real Example

We have a React project where code reviews often surfaced the same issues:

  • Someone forgot to handle loading states
  • useEffect dependency arrays were messy
  • Component names were inconsistent

Repeating these in every review was painful.

Code review

So I wrote a code-review skill:

---
name: react-code-reviewer
description: React code review assistant; use when reviewing React code
---

# Review Checklist

## Must Check
- [ ] Are loading, error, and empty states handled?
- [ ] Is the `useEffect` dependency array complete and correct?
- [ ] Any memory leaks (uncleared subscriptions, timers)?
- [ ] Are Prop types defined completely?

## Naming Rules
- Components: PascalCase, e.g., UserProfile
- Hooks: start with use, e.g., useUserData
- Utility functions: camelCase, e.g., formatDate

## Performance Focus
- Large lists use virtualization
- Frequently rendered components use memo
- Heavy computations use useMemo

With that configured, I hand code to the AI and say “review this component.” It checks each item, outputs a consistent report, and never misses a checklist item.

How to Invoke Skills

Two ways:

Automatic: If your request matches a skill’s description, the AI loads it automatically. Saying “review this React code” triggers the skill above.

Manual: Use @ to specify:

@.claude/skills/react-code-reviewer Please check this component for issues

I mostly rely on auto—it’s easier. If multiple skills might match, manual is safer.

Advanced Play: MCP + Skills Combo

Skills get really powerful when paired with MCP (Model Context Protocol).

Real scenario: every morning I read JIN10’s financial news and summarize key points. I used to open the site, scan updates one by one, and filter manually—tedious.

Financial data analysis

Now, with a “financial analyst” skill plus MCP web scraping, I solve it in one command:

.claude/skills/finance-analyst/
├── SKILL.md
└── templates/
    └── daily-report.md

SKILL.md:

---
name: finance-analyst
description: Financial data analyst; use for analyzing financial news, market moves, and investment opportunities
---

# Workflow

1. Use MCP fetch to grab JIN10 (https://www.jin10.com/)
2. Pull key info from the news stream
3. Organize by:
   - Macro (central bank policy, GDP, CPI, etc.)
   - Equities (A-shares, HK stocks, US stocks)
   - Commodities (oil, gold, base metals)
   - FX (USD, CNY, JPY)

# Output Format

## Today's Highlights (3-5 most important)
Keep it concise and human-readable

## Market Sentiment
One-liner: bullish / bearish / sideways

## Watchlist
Events likely to matter next

Now I just say “check today’s financial news,” and the AI will:

  1. Use MCP to fetch the latest from JIN10
  2. Classify according to my framework
  3. Output a concise morning brief

If today’s feed includes “lithium carbonate up 8%,” “30-year Treasury futures +0.42%,” and “Suning’s 230B debt restructuring,” it will group them, flagging commodity rebounds in new energy, ongoing bond strength, and retail risk.

That’s the power of Skills: you define the analysis framework; the AI executes it.