Skills: teach it your stack

Remix 3 and Cloudflare's agents package are newer than most of what any model was trained on. Left alone, an agent writes the Remix it remembers: Remix 2, React, the wrong imports. A skill fixes that. It's a folder with a SKILL.md: a description that says when to load it, and instructions that change what the agent does, such as "read the installed docs before using an API".

Skills load only when they're needed: Claude Code reads every skill's short description up front, and the full instructions only when a task matches. So four skills cost almost nothing until they're used.

1. Install four skills

From klippy/:

npx skills@1.7.6 add remix-run/remix -s remix -a claude-code -y
npx skills@1.7.6 add cloudflare/skills -s cloudflare -s agents-sdk -a claude-code -y
npx skills@1.7.6 add anthropics/skills -s frontend-design -a claude-code -y

• remix, from the Remix team: read the installed docs first; routes, router and controllers the Remix 3 way.

• cloudflare: pick the right Cloudflare product, then its docs.

• agents-sdk: the agents package (AIChatAgent, AgentClient), which the chat in lesson 9 builds on.

• frontend-design, from Anthropic: choose a deliberate look, not a template's defaults.

They land in .claude/skills/, and skills-lock.json records each one's source and a hash of its contents. Add .claude/skills/ to .gitignore and commit the lock: the skills are other people's files (MIT and Apache-2.0), and a fresh clone restores them with npx skills@1.7.6 experimental_install. That command's name says experimental; the three add lines above are the stable path.

2. Ask what changed

Start a fresh session (/clear), then:

Goal: explain the four skills just installed in .claude/skills, so I know when each one changes what you do.
Read each SKILL.md's frontmatter and first section only.
Constraints:
- Don't change any file. This is a read-only step.
- For each skill: its name, when it loads (from its description), and one thing it makes you do differently.
Done when you've covered remix, cloudflare, agents-sdk and frontend-design, and named the one you'd load first
to add a Remix page.
Report as a four-row table, then that one line.

• Read-only, said out loud. Nothing to review but the answer.

• Frontmatter and first section only. The description is what decides loading; the rest would spend context for nothing.

• A table. A short, checkable reply.

3. What to expect

No file changes, and a table. Our check, with one line per skill (a real run; excerpt):

Our machine has other skills installed for the user, so the list is longer than four. Yours will differ. It also said it couldn't tell which skills came from this repo without reading skills-lock.json: one more reason to keep the lock.

And what the remix skill actually changes:

That's the habit you want: installed docs over memory.

4. Review it

• skills-lock.json lists exactly four skills, from remix-run/remix, cloudflare/skills and anthropics/skills.

• .claude/skills/ is gitignored (git check-ignore .claude/skills/remix/SKILL.md prints the path).

• Reject: a skill from a repo you don't recognise, or one whose description says it loads "always". A skill is instructions your agent follows: install only ones you trust.

Steer prompts for the usual misses:

Your table describes the cloudflare skill from memory. Read .claude/skills/cloudflare/SKILL.md and quote its description line instead.

You edited AGENTS.md. This step is read-only: revert it with git checkout AGENTS.md.

Your repo matches tag d-02 (changes from d-01).