Appearance

Install your first skill for Claude Code ​

In this tutorial you install Anthropic's frontend-design skill for Claude Code. You install it for your user, so it is available in every project where Claude Code uses your personal setup.

You will use a public GitHub repository as the registry, save the selection in your personal configuration file, and check the skill that agent-marketplace writes for Claude Code.

Before you begin ​

You need:

  • Claude Code.
  • Git. Run git --version to check.
  • agent-marketplace on your PATH. Install explains how.

Check that the program is available:

bash
agent-marketplace --help

You should see a list of commands that includes init, list, status, and sync. If the terminal answers command not found, the program isn't on your PATH yet; go back to Install.

A skill is a set of instructions that your coding agent follows. Review third-party skills before you install them. You can read the frontend-design source used in this tutorial.

Run the tutorial from your home folder. A project folder can have its own harness settings that override your personal ones, and your home folder has none:

bash
cd ~

1. Select Claude Code as your harness ​

agent-marketplace needs to know which coding tool, or harness, should receive the resources you install. Create a personal configuration that targets Claude Code:

bash
agent-marketplace init --harnesses claude

The command creates ~/.agents/config.yaml and prints its path:

text
Initialized user personal config: <home>/.agents/config.yaml

If it prints User personal config already initialized. instead, you already have a personal configuration. Step 3 replaces that file, and the sync after it removes anything your old configuration installed into your personal harness folders. Copy the configuration first, and its lockfile if you have one:

bash
cp ~/.agents/config.yaml ~/.agents/config.yaml.bak
if [ -f ~/.agents/lock.yaml ]; then cp ~/.agents/lock.yaml ~/.agents/lock.yaml.bak; fi

If you made these copies, you can undo the tutorial afterwards. Restore the configuration, then restore your lockfile, or remove the tutorial's lockfile if you had none, and sync:

bash
cp ~/.agents/config.yaml.bak ~/.agents/config.yaml
if [ -f ~/.agents/lock.yaml.bak ]; then cp ~/.agents/lock.yaml.bak ~/.agents/lock.yaml; else rm -f ~/.agents/lock.yaml; fi
agent-marketplace sync

Back up and restore machine resources covers the fuller procedure.

Check which harness is selected:

bash
agent-marketplace status

Under TARGET HARNESS SET, confirm that the target is claude and its source is USER:

text
TARGET HARNESS SET
TARGET HARNESSES  SOURCE
claude            USER

2. Browse the skill ​

This lists the registry without changing your configuration:

bash
agent-marketplace list \
  --from https://github.com/anthropics/skills.git \
  --ref main \
  --path skills/frontend-design

--ref main reads the main branch, and --path limits the search to the skill's folder. The first run downloads the repository into a local cache, which can take a few seconds. The result should show an available skill named frontend-design:

text
REGISTRY  KIND   NAME             TAGS (metadata)  STATUS
skills    skill  frontend-design                   available

If the command fails with an error about git, check that Git is installed and that you can reach GitHub.

3. Select the skill in your configuration ​

Replace your personal configuration with one that declares the Git source and asks for the skill. Copy the whole block, including the final EOF line:

bash
cat > ~/.agents/config.yaml <<'EOF'
apiVersion: agent-marketplace/v4
harnesses:
  - claude
sources:
  anthropic-skills:
    git: https://github.com/anthropics/skills.git
    ref: main
    path: skills
resources:
  anthropic-skills:
    include:
      - skill/frontend-design
EOF

sources gives the registry the name anthropic-skills. resources asks for one skill from that source.

Write the skill into Claude Code's folders:

bash
agent-marketplace sync

You should see:

text
Installed 2  Removed 0  Malformed 0  Errors 0
  → ~/.claude/.claude-plugin (1 written), ~/.claude/skills (1 written)

"Installed" counts files written: the skill, and a Claude Code manifest that lists installed skills. If Errors is not 0, read the lines below the summary. They usually name the setting or the registry that failed.

4. Check the installation ​

bash
agent-marketplace status

Look at these tables in the output:

  • EXACT REGISTRY LOCKS has a USER row for https://github.com/anthropics/skills. It shows the main ref and the exact commit this installation used.
  • SYNCED RESOURCES has a frontend-design row with kind skill, harness claude, source USER, registry https://github.com/anthropics/skills.git, and ref main.
  • HARNESS TARGETS shows Claude Code's machine root as default=<home>/.claude.
  • DRIFT says In sync.

The skill is now at:

text
~/.claude/skills/frontend-design/SKILL.md

agent-marketplace normally creates this skill folder as a symlink (a shortcut) to its cache. Don't edit the file there. Change the configuration and run sync instead.

5. Use the skill ​

Start a new Claude Code session so it finds the new skill. Then give it a frontend task, for example:

text
Create a distinctive landing page for a neighborhood film photography club.
Use the frontend-design skill and explain the visual direction before building it.

Claude Code follows the skill's guidance when it plans and builds the design.

What happened ​

You did three things:

  1. selected Claude Code as the target harness;
  2. added Anthropic's repository and the frontend-design selection to your personal configuration; and
  3. ran sync, which wrote the skill into Claude Code's personal folder and recorded the commit in ~/.agents/lock.yaml.

This tutorial follows the repository's main branch. The lockfile keeps you on the recorded commit until you run agent-marketplace update; the reproducibility and lockfiles explanation describes how that works and when to pin a tag or commit instead.

Next steps ​