Claude Code Tutorial 6 - Slash Commands

title: "Claude Code Tutorial #6 - Slash Commands"
Youtube_Thumbnail: https://img.youtube.com/vi/52KBhQqqHuc/hqdefault.jpg
sources:
  - https://www.youtube.com/watch?v=52KBhQqqHuc
media_link: https://www.youtube.com/watch?v=52KBhQqqHuc
Authors: "[[Net Ninja]]"
contentPublished: 2025-08-28
noteCreated: 2025-12-13
description: In this course, you'll learn how to harness the power of Claude Code within your development workflow, including how to install, setup a new project, add con...
tags:
  - clippings
  - video
takeaways:
subjects:
  - "[[Claude Code]]"
Status: ✅ Read

Description

In this course, you'll learn how to harness the power of Claude Code within your development workflow, including how to install, setup a new project, add con...

Notes

00:01 Introduction to Slash Commands

Commands are shortcuts in Claude Code that start with a forward slash (/)
Both built-in commands and custom commands are available

00:08 Built-in Commands Overview

00:19 Available commands can be viewed by typing /
Common built-in commands include:
- /add-dir - Provide Claude access to another working directory for multi-repository development
- /forward/agents - Manage sub-agents
- /clear and /compact - Clear context or compact output
- /model - Choose which AI model to use (e.g., Sonic 4)
- /permissions - Add permissions for tools in Claude Code and update local settings

01:30 Creating Custom Commands for Workflows

Custom commands are useful for automating repetitive tasks specific to a project
01:40 Example use case: Create a command for generating UI components with detailed prompts and context

02:04 Setting up the Command File Structure

Create a commands folder inside the .claw folder
Create a markdown file with the command name (e.g., ui-component.md)

02:25 Command File Contents

Define where files should be created and naming conventions
02:47 Specify component variants and sizes
Use the @ symbol to load external files as context (e.g., CSS theme variables)
Include instructions for creating test files
Specify where the component should be added (e.g., preview page only)
03:31 Prevent Claude from adding components to multiple locations by being explicit in instructions

03:42 Activating New Commands

Restart the Claude Code session after creating a new command file for it to be recognized

04:03 Testing the UI Component Command

04:14 Without specifying arguments, the command allows Claude to decide what component to create
Review generated output and approve or request changes
04:53 The command automatically:
- Creates the component file
- Generates test files
- Creates multiple variants and sizes
- Runs tests to ensure they pass
- Adds the component to the preview page

05:07 Review Generated Files

Check the /UI folder for the created component
Verify changes in the preview page file

05:51 Browser Preview

View the created components in the browser preview
06:10 Example card component variations: primary, secondary, success, warning, danger with hover effects
Test different sizes and interactive states
06:43 Check dark mode variations

06:53 Adding Command Arguments

Use command arguments to specify what component to create (e.g., /ui-component card with brief description)
07:12 Add front matter metadata to the command file:
- description - Explains what the command does
- argument-hint - Shows expected arguments in the chat interface

07:33 Capturing Arguments

Use $arguments variable to capture passed arguments
Arguments are combined into a single variable regardless of quantity

08:05 Parsing Multiple Arguments

How to refer to multiple arguments

He doesn't mention it in the video but the docs to tell us how to handle multiple arguments here. We use $1 $2 syntax to refer to the argument based on it's position. (It looks like these are 1-based numbers).

08:54 Updated Command Instructions

Replace generic instructions with specific ones that use the extracted argument values
Instructions now reference the component name and summary in the implementation

09:16 Testing Arguments in Commands

Restart Claude Code to apply command file changes
09:28 Command now displays description and argument hints when invoked
09:40 Example usage: /ui-component icon | an icon component for showing icons with a circular background
Use pipe (|) to separate multiple arguments

10:18 Reviewing Generated Icon Component

Component file created with appropriate props (variants, sizes, onClick, className)
Files organized in the UI folder

11:07 Initial Preview and Iteration

Initial implementation used emojis for icons
11:27 Importance of staying in the loop with Claude Code:
- Review generated code
- Request modifications if needed
- Let Claude update files based on feedback
Updated implementation now uses an icon library instead of emojis

11:56 Final Result

Icon component with improved visual appearance
Multiple variants and sizes available
Interactive examples and action bars demonstrated

12:05 Summary

Custom commands streamline repetitive workflows in Claude Code
Next topic: MCP servers