社内で「え、そんなことできるの？」と話題になった Claude Code Custom slash commands の実践活用

/dependabot-check https://github.com/org/repo/security/dependabot/123

.claude/commands/dependabot-check.md

---
allowed-tools: Bash(gh:*), Bash(git:*), Bash(pnpm:*)
description: Analyze Dependabot security advisory and provide resolution strategy
---

## Context

Dependabot URL (GitHub Security Advisory or PR URL): {{ dependabot_url }}

## Your task

Analyze Dependabot security advisory and provide resolution strategy.

### Step 1: Gather Advisory Information

Execute the following commands to collect information:

**Query Dependabot Information:**
First, determine the URL type and use appropriate command:
- If URL contains `/security/dependabot/[number]`: Use `gh api /repos/[owner]/[repo]/dependabot/alerts/[number]`
- If URL contains `/pull/`: Use `gh pr view {{ dependabot_url }} --json title,body,commits`
- If URL contains GitHub Security Advisory ID (GHSA-xxxx): Use `gh api /advisories/[GHSA-ID]`

**Important**: Only execute the command that matches the provided URL type to avoid 404 errors.

**Check Current Project Status:**
- git status
- pnpm list --depth=0 (check direct dependencies)
- If vulnerable package found: pnpm why [package-name]

**Verify Actual Usage (to avoid cache issues):**
- grep -r "[package-name]" package.json pnpm-lock.yaml (check if package exists in lock files)
- If package not found in lock files: likely already resolved or cache issue

### Step 2: Dependency Analysis

Analyze the vulnerable package as follows:

1. **Check Direct vs Indirect Dependency**
   - Check if the package exists in package.json
   - If yes: Direct dependency
   - If no: Indirect dependency

2. **Analyze Dependency Tree**
   - Analyze pnpm why [package-name] results
   - Identify which parent packages depend on this package

### Step 3: Resolution Strategy

**For Direct Dependencies:**
# Update the package directly
pnpm update [package-name]
# Or modify package.json version then
pnpm install

**For Indirect Dependencies:**
1. **Analyze Parent Package Update Requirements**
   # Check what version of parent package would resolve the vulnerability
   pnpm info [parent-package-name] versions --json
   # Check current version in package.json
   cat package.json | grep [parent-package-name]

2. **Resolution Options Analysis**
   - Check if parent package update is **minor/patch** (low risk) or **major** (high risk)
   - For minor/patch updates: Recommend direct parent package update
   - For major updates: Provide both options with trade-off analysis

3. **Option A: Update Parent Package (Recommended for minor/patch)**
   pnpm update [parent-package-name]@[specific-version]

4. **Option B: Use Overrides (Recommended for major updates)**
   // Add to package.json
   {
     "pnpm": {
       "overrides": {
         "[package-name]": "^[safe-version]"
       }
     }
   }

### Step 4: Generate Analysis Report

Present the analysis results in the following format:

## 🚨 Dependabot Advisory Analysis

**Reference URL**: {{ dependabot_url }}

### Vulnerable Package
- **Package Name**: [package-name] ([direct/indirect dependency])
- **Current Version**: [current-version] → **Recommended**: [recommended-version]
- **Severity**: [severity-level]

### 🔧 Resolution Strategy
**For indirect dependencies, include this analysis:**
- **Parent Package**: [parent-package] ([current] → [required version])
- **Update Level**: [Major/Minor/Patch]
- **Recommended Method**: [Parent package update/Use overrides]
- **Reason**: [Major update has breaking changes risk/Minor update has minimal impact, etc.]

[Specific resolution steps]

### 📋 Checklist
- [ ] Verify if only pnpm-lock.yaml changed without package.json changes
- [ ] For indirect dependencies, dependency source identified
- [ ] Package actually exists in lock files (not stale cache)
- [ ] Breaking changes reviewed

**Execute all commands and provide comprehensive analysis results in the above format.**

.claude/commands/pr.md

---
allowed-tools: Bash(gh:*), Bash(git:*)
description: Generate PR description and automatically create pull request on GitHub
---

## Context

- Current git status: !`git status`
- Changes in this PR: !`git diff master...HEAD`
- Commits in this PR: !`git log --oneline master..HEAD`
- PR template: @.github/pull_request_template.md

## Your task

Based on the provided option, perform one of the following actions:

### Options:

- **No option or default**: Generate PR description and create pull request
- **-p**: Push current branch and create pull request
- **-u**: Update existing pull request description only

### Default behavior (no option):

1. Create a PR description following the **exact format** of the PR template in Japanese
2. **Add a Mermaid diagram** that visualizes the changes made in this PR
3. Execute `gh pr create --draft` with the generated title and description

### With -p option:

1. Push current branch to remote repository using `git push -u origin `
2. Create a PR description following the **exact format** of the PR template in Japanese
3. **Add a Mermaid diagram** that visualizes the changes made in this PR
4. Execute `gh pr create --draft` with the generated title and description

### With -u option:

1. Create a PR description following the **exact format** of the PR template in Japanese
2. **Add a Mermaid diagram** that visualizes the changes made in this PR
3. Update existing pull request description using `gh pr edit --body `

### Requirements:

1. Follow the template structure exactly
2. Use Japanese for all content
3. Include specific implementation details
4. List concrete testing steps
5. Always include a Mermaid diagram that shows:
   - Architecture changes (if any)
   - Data flow modifications
   - Component relationships
   - Process flows affected by the changes
6. Be comprehensive but concise

### Mermaid Diagram Guidelines:

- Use appropriate diagram types (flowchart, sequence, class, etc.)
- Show before/after states if applicable
- Highlight new or modified components
- Use consistent styling and colors
- Add the diagram in a dedicated section of the PR description

**Generate the PR description and create the pull request automatically.**

/ui-advice [画像URL or 画像アップロード]

.claude/commands/ui-advice.md

---
allowed-tools: WebFetch, mcp__contex7__search
description: Provides UI/UX design pattern advice and generates text wireframes
---

## Context

You are a UI/UX design expert with knowledge from world-renowned designers. When users ask about specific UI elements or screens, you provide various design pattern options and explain their pros and cons.

## Your task

Analyze the user's UI/UX design requirements and provide:

1. **Design Pattern Suggestions**: Propose 3-5 design patterns suitable for the requirements
2. **Pattern Explanations**: Features, pros/cons, and use cases for each pattern
3. **Text Wireframes**: Simple ASCII text wireframes for each pattern
4. **Recommendations**: Most suitable pattern for the user's situation

### Guidelines:

- Reference patterns from famous design systems (Material Design, Apple HIG, Ant Design, etc.)
- Consider usability, accessibility, and current trends
- Create wireframes that are simple yet easy to understand
- Include implementation complexity for each pattern
- Given that users primarily use Mantine, use the mcp__contex7__search tool to retrieve latest Mantine component information and analyze implementation feasibility

### Wireframe Creation Rules:

┌─────────────────────────┐
│ Header Title            │
├─────────────────────────┤
│ [ Button ] [ Button ]   │
│                         │
│ Content Area            │
│ ┌─────┐ ┌─────┐         │
│ │Card │ │Card │         │
│ └─────┘ └─────┘         │
└─────────────────────────┘

Use simple ASCII characters to clearly express the structure like this.