Claude skills examples that aren't toy demos

Search for Claude skills examples and you mostly get a hello-world SKILL.md. That shows the folder shape. It rarely shows how a real skill loads work in stages. Here are five public skills that ship progressive disclosure, scripts, references or careful trigger design, plus the anti-patterns they dodge.

How we checked: layouts and frontmatter come from the public GitHub folders linked below, read on November 3, 2026. Install and validate commands were run the same day with Skillpack CLI 0.3.5. We didn't run Claude Code on these skills for this article. Trigger behavior below is inferred from their descriptions and the Claude Code skills docs.

What makes a Claude skill example worth studying

A skill is a folder with a SKILL.md file. Per the open Agent Skills format and Claude Code's docs, hosts load skills in stages: discover name and description, activate the full instructions when the task matches, then run bundled scripts or open references as needed. That's progressive disclosure. Toy demos skip it. They dump every tip into one file, write a vague description, and never show where a script or a reference belongs.

If you're new to the format, start with What is SKILL.md? and how to create a Claude Code skill. The rest assumes you know the basics and want patterns worth copying.

Example 1: frontend-design (opinionated instructions, no scripts)

Source: anthropics/skills skills/frontend-design.

skillpack install github:anthropics/skills/skills/frontend-design --scope project

In our CLI 0.3.5 run this installed into .agents/skills/frontend-design and .claude/skills/frontend-design. skillpack skills validate returned valid: true with 2 files (SKILL.md plus LICENSE.txt). No scripts/ folder.

What to copy:

• The description names the job and the failure mode: distinctive UI work that avoids "templated defaults".
• The body is a design brief for the agent: ground choices in the subject, plan tokens first, then critique against known AI-default looks.
• It stays instruction-only. That fits a judgment skill where deterministic scripts wouldn't help.

Why it isn't a toy: it encodes a review process and a list of defaults to refuse. A toy would be a one-line "make nice CSS" prompt.

Example 2: webapp-testing (scripts/ + examples/)

Source: anthropics/skills skills/webapp-testing.

skillpack install github:anthropics/skills/skills/webapp-testing --scope project

Our install wrote 6 files under the skill folder, including scripts/with_server.py and three files in examples/. Validate returned valid: true. The CLI warning flagged scripts/with_server.py as an executable file. Useful: you see what can run before you commit the skill.

What to copy:

• The description lists concrete triggers: verifying frontend behavior, screenshots, browser logs.
• SKILL.md tells the agent to treat helper scripts as black boxes. Run --help first. Don't read the Python source unless you must. That keeps the script out of the context window until it's needed.
• A decision tree in the body picks static HTML vs dynamic app, and whether a server is already running.
• examples/ holds patterns the agent can open on demand: element discovery, static HTML, console logging.

That's progressive disclosure done with folders. The Agent Skills overview describes the same three stages; webapp-testing designs for all three.

Example 3: grill-me (manual trigger + handoff)

Source: mattpocock/skills skills/productivity/grill-me.

skillpack install github:mattpocock/skills/skills/productivity/grill-me --scope project

Dry-run with CLI 0.3.5 resolved the path and listed targets under .agents/skills/grill-me and .claude/skills/grill-me. The SKILL.md itself is tiny:

---
name: grill-me
description: A relentless interview to sharpen a plan or design.
disable-model-invocation: true
---

Call the Skill tool with "grilling".

What to copy:

• disable-model-invocation: true keeps Claude from starting a hard interview on its own. You type /grill-me when you want it. Claude Code's docs recommend that for workflows with side effects or timing you control.
• The body is a handoff. The real procedure lives in a paired grilling skill. Install both, or the stub does nothing useful.
• The description is short and specific. It names the outcome (a sharper plan or design), not "helps with planning".

Pair this with the planning set in best Claude Code skills for planning if you want the wider list.

Example 4: brainstorming (must-use description + supporting files)

Source: obra/superpowers skills/brainstorming.

skillpack install github:obra/superpowers/skills/brainstorming --scope project

Dry-run listed several files under scripts/ (including a small local server helper) plus supporting markdown such as visual-companion.md and builder-check-prompt.md beside SKILL.md.

What to copy:

• The description is aggressive on purpose: "You MUST use this before any creative work…" followed by concrete cases (features, components, talks). That's how you force discovery matching when the skill is meant to gate other work.
• The body sequences the conversation: check what you already know, ask one question whose answer would change the design most, size the design doc, get approval, then call writing-plans.
• Extra files sit one hop from SKILL.md. That matches Anthropic's guidance to keep SKILL.md short and link detail instead of nesting references.

It overlaps with grill-me. Most teams pick one planning interview style, not both.

Example 5: agent-browser (stub that loads versioned guides)

Source: vercel-labs/agent-browser skills/agent-browser.

skillpack install github:vercel-labs/agent-browser/skills/agent-browser --scope project

Dry-run with CLI 0.3.5 resolved the skill path. Install from the skills/agent-browser path above, not from the repo root.

What to copy:

• The checked-in SKILL.md is a discovery stub. It tells the agent to install the CLI, then run agent-browser skills get core so the guide matches the installed binary version.
• Specialized guides (electron, slack, dogfood, …) load only when the task needs them. That's progressive disclosure pushed one step further: out of the repo and into the tool.
• The description is long on purpose. It front-loads browser tasks and lists trigger phrases ("open a website", "take a screenshot", "test this web app") so implicit matching still works if the host shortens descriptions, which Codex docs also warn about.
• allowed-tools: Bash(agent-browser:*) pre-approves the CLI for the turn. Review that the same way you review a dependency.

More browser and QA options sit in best Claude Code skills for testing.

Side-by-side: what each example teaches

Install counts move. Treat skills.sh numbers as a discovery signal, not a quality score. Open the folder and read it.

Anti-patterns these examples avoid

If a skill is installed but never used, walk the checklist in Claude Code skills not working. For team installs and drift checks, use how to check agent skills in CI.

How to study a skill before you invent one

1. Open the public folder. Confirm SKILL.md sits at the skill root.
2. Read the frontmatter. Note description, and any of disable-model-invocation, allowed-tools or context.
3. List scripts/, references/, examples/ and assets/. Ask which stage of progressive disclosure each file serves.
4. Dry-run an install: skillpack install github:owner/repo/path --scope project --dry-run.
5. Install into a scratch repo and run skillpack skills validate ./path-to-skill.
6. Write three prompts you expect to trigger it, then decide if the description would match them.

The same SKILL.md works in Codex if you keep to the shared fields. Codex reads .agents/skills in the repo and ~/.agents/skills on your machine (Codex skills docs). Claude Code reads .claude/skills. A project install from Skillpack writes the shared copy plus the host copies so you don't maintain them by hand. More on that in how to use skills in Codex.

When the skill is worth keeping across repos, create a free Skillpack workspace and publish or lock it so every machine runs the same version.