Developers already using Claude Code who want ready-made skills; you should know how slash commands and npx work.

What can you build with skills?

Explain an unfamiliar part of a codebase to yourself with diagrams and small HTML pages. Open pull requests that include a visual outline so reviewers grasp the change faster. Rewrite a long CLAUDE.md so Claude follows its instructions more reliably. Clean up React component prop types that were widened to satisfy Storybook or tests. Set up a scheduled coding-agent workflow in GitHub Actions for your repo.

How do I get started with skills?

Run the install command with the name of the skill you want, then open Claude Code in your project and call it with its slash command, such as /show-me. Commands from the README: npx skills add humanlayer/skills --skill SKILLNAME; npx skills add humanlayer/skills --skill show-me.

humanlayer /

skills

Six installable Claude Code skills for explaining code, writing PRs, and tuning agents

5.4k stars
596 stars since 3 Oct
TypeScript
Updated 14 days ago
Some experience
Agent skills & plugins

Open on GitHub (opens in a new tab)

Claude Code can load skills: packaged instructions it follows when you call a slash command. This repo from HumanLayer bundles six of them, and you install only the ones you want.

Some skills help with everyday work. show-me explains a topic with diagrams, code sketches and small HTML pages. visual-pr opens or updates a pull request with a visual outline for reviewers. narrow-react-prop-types tightens React prop types to match code paths that run in the real app, not ones that exist only in Storybook, tests or mocks.

Others help you set up agents. improve-claude-md rewrites your CLAUDE.md using <important if> blocks, aiming to make Claude follow instructions better. build-iterated-agentic-loop and design-control-loop create a repo-local skill and a scheduled coding-agent GitHub Actions workflow. design-control-loop first interviews you about your codebase. The README is brief, so check each skill's files for details.

What it does

show-me
Explains the current topic with concise diagrams, code-shape sketches, and focused HTML artifacts.
visual-pr
Creates or updates a pull request with a short visual outline so reviewers can understand the change.
improve-claude-md
Rewrites your CLAUDE.md with <important if> blocks to improve how well instructions are followed.
narrow-react-prop-types
Narrows React prop types to match live code paths instead of Storybook, test or mock-only states.
Agentic loop builders
build-iterated-agentic-loop and design-control-loop generate a skill, a GitHub Actions workflow, prompts and templates for a scheduled coding agent.

What you could build

Explain an unfamiliar part of a codebase to yourself with diagrams and small HTML pages.
Open pull requests that include a visual outline so reviewers grasp the change faster.
Rewrite a long CLAUDE.md so Claude follows its instructions more reliably.
Clean up React component prop types that were widened to satisfy Storybook or tests.
Set up a scheduled coding-agent workflow in GitHub Actions for your repo.

Get started

Run the install command with the name of the skill you want, then open Claude Code in your project and call it with its slash command, such as /show-me.

npx skills add humanlayer/skills --skill SKILLNAME

npx skills add humanlayer/skills --skill show-me

Commands are copied from the project's README. Read it on GitHub for the full setup.