In short
Claude Code custom slash commands are saved prompts you run by typing / and a name, like /build-page. Each one is a markdown file in your project, so the whole team gets the same commands. They are the fastest way to turn a workflow you repeat, like building a page from your template or reviewing a change, into one short command. Below: how a command file works, a short example, and three ready-made design commands.
Updated
Where the file goes
Project commands go in .claude/commands/<name>.md, and the file name becomes the command: build-page.md runs as /build-page. Personal commands go in ~/.claude/commands/ and work in every project. Sub-folders group related commands.
Claude Code commands templates: structure
File name
Becomes the command name. build-page.md runs as /build-page.
description
Optional frontmatter shown in the command menu, so people know what it does.
argument-hint
Optional hint for what to type after the command.
$ARGUMENTS
Replaced with whatever you type after the command, so one command works for many pages.
Prompt
The instructions themselves, written like a message to Claude Code.
A short example
--- description: Build a new page from design/template.html argument-hint: [page name] --- Build this page: $ARGUMENTS 1. Read design/template.html. 2. Plan the sections, then build with existing components. 3. Check the page at 375px and 1440px.
Creating a custom slash command, step by step
Find a prompt you type again and again: build a page from the template, review the current changes, make a page responsive, write a changelog entry. Each one is a command waiting to happen.
Create .claude/commands/<name>.md. The file name becomes the command, so build-page.md runs as /build-page. Add a short description so it shows clearly in the / menu.
Write the prompt as you would type it, and use $ARGUMENTS where the variable part goes: /build-page pricing page for teams puts "pricing page for teams" into the prompt.
End with a check and a report, commit the folder, and the whole team now runs the same workflow with one short command.
Good command names read like verbs: /build-page, /review, /ship-notes. Keep the list short enough that everyone remembers it, and mention the most useful ones in CLAUDE.md so new teammates discover them on day one.
Ready-made Claude Code commands templates files
Complete files you can copy into your project and fill in. Each one works with the BrowserMoon design templates, so what the tool builds also looks professional.
/build-page command
A Claude Code slash command that builds a new page from your design template: plan, build with existing components, then check at phone and desktop width.
.claude/commands/build-page.md--- description: Build a new page from design/template.html argument-hint: [page name and what it is for] --- Build this page: $ARGUMENTS
/design-review command
A slash command that reviews the current changes against your design template and fixes spacing, type, colour and state problems.
.claude/commands/design-review.md--- description: Review and fix the current UI changes against the design template argument-hint: [optional: file or page to review] --- Review the UI changes in this branch. If a file or page is given, focus on it: $ARGUMENTS
/make-responsive command
A slash command that makes a page work on phones: fixes overflow, stacking order, tap targets and type sizes at 375px.
.claude/commands/make-responsive.md--- description: Make a page work well on phones and tablets argument-hint: [page or component path] --- Make $ARGUMENTS work well at 375px, 768px and 1440px.
Using Claude Code commands with a design template
A /build-page command that always reads design/template.html first is the simplest way to make every new page match. Anyone on the team can run it and get a page in the same design.
Pair it with /design-review to check the result against the template before you merge.
SaaS landing page · Analytics dashboard · Pricing section · Dark gradient hero · Account settings · AI chat interface
Best practices
- ·Turn any prompt you have typed three times into a command.
- ·Use $ARGUMENTS so one command covers many cases, like /build-page pricing.
- ·End every command with a check step and a short report.
- ·Commit .claude/commands so the whole team uses the same workflows.
Common mistakes and how to fix them
Hard-coding the page name
Use $ARGUMENTS so one command works for every page.
Commands that only build
Add a check step at the end so the command verifies its own work.
Personal commands nobody else has
Put team workflows in .claude/commands and commit them.
Duplicating a skill
If the workflow should run automatically, make it a skill; commands are for when you choose to run them.
Commands vs skills
These files tell Claude Code how to work. A design template tells it what to build. Use both.
Claude Code templatesFrequently asked questions
What are Claude Code slash commands?
Saved prompts you run with / and a name. Custom ones are markdown files in .claude/commands, so you can share them with your team.
Where do custom commands go?
In .claude/commands/ in your project, or ~/.claude/commands/ for personal commands that work everywhere.
How do I pass arguments to a command?
Put $ARGUMENTS in the command file. Whatever you type after the command name replaces it.
What is the difference between a command and a skill?
You run a command yourself by typing it. A skill loads automatically when Claude Code decides a task matches its description.
Should every developer on the team use the same commands?
Yes, for shared workflows like building and reviewing pages. Commit them in .claude/commands so everyone gets the same result, and keep personal shortcuts in your own ~/.claude/commands folder.
Can a command call a skill or an agent?
Yes. A command prompt can ask Claude Code to use a specific agent, like the UI reviewer, as one of its steps.
Can commands live in sub-folders?
Yes. Sub-folders group related commands and show in the command menu.
Can a command run shell commands first?
Commands can include instructions to run commands, and frontmatter can control which tools are allowed.
Are the built-in commands the same as custom ones?
Built-in commands like /init and /agents come with Claude Code. Custom ones are your own prompts in .claude/commands.
How many commands should a project have?
A handful that people actually use: building, reviewing and fixing. Too many become hard to remember.
Claude Code templates by category
Related