skill-development skill

---
name: [TODO: lowercase-hyphen-case-name]
description: |
  [TODO: Action verb + what you build with technology. 250-350 chars total. Example: "Build type-safe APIs with Hono - fast routing for Cloudflare Workers. Includes middleware, validation (Zod), and RPC with full type inference."]

  Use when: [TODO: 3-5 specific scenarios], or troubleshooting [TODO: 2-3 distinctive errors].

  [GUIDELINES: Active voice (NOT "This skill provides..."). Two-paragraph format. Cap features at 5 max. Preserve USPs. No meta-commentary. Max 1024 chars. See planning/claude-code-skill-standards.md]
---

# [TODO: Skill Display Name]

**Status**: [TODO: Production Ready / Beta / Experimental]
**Last Updated**: [TODO: YYYY-MM-DD]
**Dependencies**: [TODO: List prerequisite skills or tools, or write "None"]
**Latest Versions**: [TODO: package@version, package2@version]

---

## Quick Start ([TODO: X] Minutes)

### 1. [TODO: First Major Step]

[TODO: Provide clear, actionable instructions]

```bash
# [TODO: Example command]
```

**Why this matters:**
- [TODO: Explain the reasoning]
- [TODO: Key benefits]

### 2. [TODO: Second Major Step]

[TODO: Continue with step-by-step instructions]

```typescript
// [TODO: Code example with comments]
```

**CRITICAL:**
- [TODO: Important notes that prevent common mistakes]

### 3. [TODO: Third Major Step]

[TODO: Keep going until setup is complete]

---

## The [TODO: Number]-Step Setup Process

### Step 1: [TODO: First Step Name]

[TODO: Detailed instructions]

```
[TODO: Code examples, configurations, etc.]
```

**Key Points:**
- [TODO: Important details]
- [TODO: What to avoid]

### Step 2: [TODO: Second Step Name]

[TODO: Continue with detailed steps]

---

## Critical Rules

### Always Do

✅ [TODO: Best practice #1]
✅ [TODO: Best practice #2]
✅ [TODO: Best practice #3]

### Never Do

❌ [TODO: Anti-pattern #1]
❌ [TODO: Anti-pattern #2]
❌ [TODO: Anti-pattern #3]

---

## Known Issues Prevention

This skill prevents **[TODO: number]** documented issues:

### Issue #1: [TODO: Issue Name]
**Error**: [TODO: Exact error message or description]
**Source**: [TODO: GitHub issue link, Stack Overflow link, or official docs]
**Why It Happens**: [TODO: Root cause]
**Prevention**: [TODO: How this skill fixes it]

### Issue #2: [TODO: Issue Name]
[TODO: Repeat pattern for each issue]

---

## Configuration Files Reference

### [TODO: config-file.ext] (Full Example)

```[language]
[TODO: Complete, working configuration file]
```

**Why these settings:**
- [TODO: Explain key configuration decisions]

---

## Common Patterns

### Pattern 1: [TODO: Pattern Name]

```typescript
// [TODO: Code example]
```

**When to use**: [TODO: Specific scenarios]

### Pattern 2: [TODO: Pattern Name]

[TODO: More examples]

---

## Using Bundled Resources

[TODO: Only include this section if you have scripts/, references/, or assets/]

### Scripts (scripts/)

[TODO: List and explain any executable scripts]

**Example Usage:**
```bash
./scripts/[TODO: script-name].sh
```

### References (references/)

[TODO: List documentation files that Claude can load when needed]

- `references/[TODO: filename].md` - [TODO: What it contains]

**When Claude should load these**: [TODO: Specific scenarios]

### Assets (assets/)

[TODO: List template files, images, etc. that get used in output]

- `assets/[TODO: filename]` - [TODO: What it's for]

---

## Advanced Topics

### [TODO: Advanced Topic 1]

[TODO: Deep dive into complex scenarios]

### [TODO: Advanced Topic 2]

[TODO: Additional advanced content]

---

## Dependencies

**Required**:
- [TODO: package@version] - [TODO: What it's used for]
- [TODO: package@version] - [TODO: What it's used for]

**Optional**:
- [TODO: package@version] - [TODO: What it's used for]

---

## Official Documentation

- **[TODO: Technology Name]**: [TODO: Official docs URL]
- **[TODO: Related Tool]**: [TODO: Official docs URL]
- **Context7 Library ID**: [TODO: /org/project if applicable]

---

## Package Versions (Verified [TODO: YYYY-MM-DD])

```json
{
  "dependencies": {
    "[TODO: package]": "^[TODO: version]"
  },
  "devDependencies": {
    "[TODO: package]": "^[TODO: version]"
  }
}
```

---

## Production Example

[TODO: Optional - provide evidence of production usage]

This skill is based on [TODO: project name]:
- **Live**: [TODO: URL if applicable]
- **Build Time**: [TODO: time]
- **Errors**: 0 (all [TODO: number] known issues prevented)
- **Validation**: ✅ [TODO: What was tested]

---

## Troubleshooting

### Problem: [TODO: Common issue]
**Solution**: [TODO: How to fix]

### Problem: [TODO: Another issue]
**Solution**: [TODO: How to fix]

---

## Complete Setup Checklist

Use this checklist to verify your setup:

- [ ] [TODO: First verification step]
- [ ] [TODO: Second verification step]
- [ ] [TODO: Third verification step]
- [ ] [TODO: All package versions correct]
- [ ] [TODO: Dev server runs without errors]
- [ ] [TODO: Production build succeeds]
- [ ] [TODO: Deployed successfully (if applicable)]

---

**Questions? Issues?**

1. Check [TODO: reference/common-issues.md] if you created one
2. Verify all steps in the setup process
3. Check official docs: [TODO: URL]
4. Ensure [TODO: critical requirement] is configured

---

## INSTRUCTIONS FOR USING THIS TEMPLATE

1. **Search for [TODO:**** - Replace every [TODO: ...] with actual content
2. **Delete this section** when done
3. **Remove sections** that don't apply to your skill
4. **Add sections** as needed for your specific use case
5. **Test everything** before committing
6. **Verify against** ONE_PAGE_CHECKLIST.md

**Key Reminders:**
- Use third-person for description: "This skill provides..." not "This skill helps you..."
- Write in imperative form: "To do X, run Y" not "You should run Y to do X"
- Include actual error messages and GitHub issue links
- Document all package versions with verification date
- Test all code examples
- Remove all [TODO:] markers before committing

**Example Good Description:**
```yaml
description: |
  This skill provides comprehensive knowledge for building React applications with
  Vite and TypeScript. It should be used when scaffolding new Vite projects,
  configuring TypeScript settings, or encountering HMR issues.

  Keywords: vite, react, typescript, hmr, vite config, react setup
```

**Example Bad Description:**
```yaml
description: "A skill for Vite and React"  # ❌ Too vague, no keywords
```

---

**Ready to build?** Fill in all [TODO:] markers and create an amazing skill!