In this article we will deep dive into Claude's Skills, Agents and Commands. We will understand what skills, agents and commands are, why we need them, how we can create them and how we can use them in Claude. Let's jump into actual work and first understand Claude's skills.

Let's start with basic understanding. A skill is knowledge Claude reads. An agent is a separate helper that does a whole job.

To be able to use skills and agents we need to create folder .claude on our project root directory. This is how the folder structure looks like.

.claude/
└── agents/                                ← folder that contains all the agents
	└── figma-to-react-native-agent.md   ← agent file
└── skills/
	└── figma-to-react-native
		└── SKILL.md                    ← skill file
└── commands/
	└── rn-figma-screen.md                  ← command file

Skill

A skill is a set of instructions and reference notes that Claude reads when it needs them.

• It doesn’t do anything by itself. It teaches Claude how to do something.
• It’s used inside whatever conversation loads it, usually your chat.
• Example: figma-to-react-native skill tells Claude how to turn a Figma screen into React Native code, step by step, and which component and token to use for each element.

Agent

An agent is another Claude that you hand a job to. It does the job away from your chat and comes back with a report.

• It works on its own and keeps your chat clean.
• t can’t stop to ask you questions, so give it everything up front.
• It can use skills too: our figma-to-react-native-agent agent reads the skill above.

The Difference

	Skill	Agent
What it is	Know-how	A helper that does work
Where it works	In your chat	Separately
Ask you questions?	Yes	No
What you see	Every step	Only the final report

When to use which

Use a skill when:

• you want to watch the work and steer it.
• you might need to answer questions along the way.
• It's a single task, like building one screen.

Use an agent when:

• the job is clear and you can describe it fully up front.
• it’s big or repetitive, like planning a feature or building several screens one after another.
• you only care about the result, not each step.

Rule of thumb: if you’d rather sit next to someone while they work, use a skill. If you’d hand it over and say “tell me when it’s done”, use an agent.

Question: Do agents pick skills automatically whatever is required or we have to define which skills are to use in an agent ?

Answer: Both. Agents can pick skills on their own, but you can also tell them which to use, and that’s more reliable.

1. Automatic: possible, not guaranteed
   Every agent sees a list of the installed skills, with each skill’s name and a one-line description. If the task matches a description, the agent may load that skill without being told.

   • Good: you don’t have to set anything up.
   • Risk: the agent might skip it, especially if the description doesn’t clearly match the task.

2. Told in the agent’s instructions: reliable in practice
   You write it in the agent file, for example:

   “Step 1: Load the figma-to-react-native skill and follow it.”
   

   This is how our agents work:

   • figma-to-react-native-agent is told to load figma-to-react-native skill.

3. Preloaded in the agent’s header: guaranteed
   Agent files have a skills: field at the top. Any skill listed there is fully loaded when the agent starts, so it can’t be skipped:

   ---
   name: figma-to-react-native-agent
   description: ...
   skills: ethr-figma-to-react-native
   ---
   

Ways to Create Skill and Agent

Skill

Location: a folder with a SKILL.md file inside.

skills/
└── my-skill/                ← folder name = skill name
    ├── SKILL.md             ← required
    ├── REFERENCE.md         ← optional extra files, read only when needed
    └── scripts/…            ← optional helper scripts

SKILL.md structure:

---
name: my-skill
description: What it does AND when to use it. Claude reads this to decide whether to load the skill.
---

# My Skill
Your instructions in plain Markdown: steps, rules, examples, links to REFERENCE.md.

• Required: name and description.
• The description matters most. It’s the only part Claude sees before deciding to load the skill. Say what it does and when to use it.

Agent

Location: a single .md file in an agents/ folder.

agents/
└── my-agent.md

Agent file structure:

---
name: my-agent
description: What job it does and when Claude should hand work to it.
tools: Read, Grep, Glob, Write        # optional; leave out to give it all the standard tools
model: sonnet                          # optional; leave out to use the same model as your chat
skills:                                # optional; skills to preload when it starts
  - my-skill
---

You are a … Your job is to …

Your rules, steps and the report format you want back.

• Required: name and description.
• The body works differently from a skill. It becomes the agent’s whole set of instructions. Write it as a role (“You are…”), then the steps, then what its final report should contain.

Best Way to create Skills and Agents

1. Write the file by hand using the templates above.
2. Ask Claude: “Create a skill that…” or “Create an agent that…”. This is how we made ours.
3. For agents, use the /agents command in a terminal Claude Code session. It walks you through creating one.
4. For skills, use the skill-creator skill: “Use skill-creator to make a skill for…”. It also helps test whether the skill triggers when it should.

Do	Avoid
Write a specific description with real trigger words (“Figma URL”, “build this screen”)	Vague descriptions like “helps with UI”
Keep SKILL.md short (under ~500 lines) and move big tables into separate files	One huge file
Give agents a clear role, numbered steps and a final report format	Assuming the agent can ask you things (it can’t)
Refer to other skills by name	Pointing to file paths like .claude/skills/...

Commands

A command is a saved prompt that you run by typing “/” and its name.

A command is a saved message. Typing /rn-figma-screen is just a short way to send a long, carefully written message to Claude.

It’s a Markdown file in a commands/ folder. When you type /command-name something, Claude Code takes the file’s text, swaps in what you typed after the name (the file marks that spot with $ARGUMENTS), and sends the result to Claude as if you had typed all of it.

commands/rn-figma-screen.md   →   you type:  /rn-figma-screen <figma link>

This is how a minimal command file looks like:

---
description: Shown in the / menu
argument-hint: <figma url>
---
Convert this Figma design into an Ethr React Native screen: $ARGUMENTS
Load the ethr-figma-to-react-native skill and follow it.

Ways to use Skills, Agents and Command to tell Claude to Generate Code

1. The command (recommended for one screen)

   /rn-figma-screen <link>
   Output: src/screens/login
   Component name: LoginScreen
   Purpose: "Sign in" navigates to Home
   

• How it works: Claude in your chat loads the skill and follows it, step by step.
• Benefits:
  • shortest to type;
  • the same steps for everyone on the team;
  • the skill is always used;
  • you see everything and can answer questions.

2. Plain English, naming the skill

   Use the figma-to-react-native skill to build the login screen from <link>
   into src/screens/login. Sign in navigates to Home.
   

   • How it works: the same as the command. Claude loads the skill in your chat.
   • Benefits: no command syntax to remember; you can add any special instructions in your own words.

3. Start the skill directly with a slash

   /ethr-figma-to-react-native <link> into src/screens/login
   

   • How it works: loads the skill straight away, without the command’s extra wrapper.
   • Benefits: guaranteed to use the skill, still short. It skips the command’s extras (input format, stop rules, report format), but the skill already covers most of them.

4. Hand it to the agent

   Use the figma-to-react-native-agent agent to implement <link>
   Output: src/screens/login
   Component name: LoginScreen
   "Sign in" navigates to Home. Leave the API call as a TODO.
   

   • How it works: a separate helper with the skill preloaded does the whole job, then sends back only the final report.
   • Benefits:
     • keeps your chat short;
     • good for several screens in a row;
     • you can keep chatting about other things while it works.
   • Catch: it can’t ask you questions, so give it all the details up front.

5. Just ask, without naming anything

   Build the login screen from <link>
   

   • How it works: Claude sees the Figma link in a React Native project with Ethr and may load the skill by itself, because the skill’s description matches.
   • Benefit: most natural, nothing to remember.
   • Catch: not guaranteed. Claude might skip the skill and produce code that doesn’t follow the figma to react native rules. Fine for a quick try, not for real work.

Comparison

Way	You type	Uses skill	Who works	You see	Can ask you	Best for
1. Command	/rn-figma-screen <link>	Always	Your chat	Every step	Yes	Day-to-day single screens
2. Name the skill	“Use the … skill…”	Always	Your chat	Every step	Yes	Custom instructions
3. Slash the skill	/ethr-figma-to-react-native …	Always	Your chat	Every step	Yes	Quick, skill only
4. Agent	“Use the … agent…”	Always (preloaded)	Separate helper	Final report	No	Hand-offs, batches
5. Just ask	“Build … from <link>”	Maybe	Your chat	Every step	Yes	Quick experiments