skill-creator

skills/
├── angular/
│   ├── core/
│   │   └── your-skill-name.md
│   ├── forms/
│   │   ├── reactive-forms/
│   │   │   └── SKILL.md
│   │   └── signal-forms/
│   │       └── SKILL.md
│   ├── router/
│   ├── http/
│   ├── performance/
│   ├── testing/
│   └── migrations/
│       ├── pattern-migrations/
│       │   └── feature-to-feature/
│       │       └── SKILL.md
│       └── version-upgrades/
│           └── v18-to-v19/
│               └── SKILL.md
├── ngrx/
├── rxjs/
└── skill-creator/
    └── SKILL.md

---
name: your-skill-name
description: >
  Brief description of what this Angular skill covers.
  Trigger: When working with [Angular feature], when building [type of component/service], when using [Angular API].
metadata:
  version: "1.0.0"
  author:
    - name: Your Name
      url: https://your-website-or-github
  angular:
    minVersion: "15.0.0"
    maxVersion: "21.0.0"
    supportedVersions: ["15", "16", "17", "18", "19", "20", "21"]
---

## Version Support

**Minimum Angular Version:** 15.0.0  
**Maximum Angular Version:** 21.0.0  
**Supported Versions:** 15, 16, 17, 18, 19, 20, 21

## When to Use

Load this skill when:
- [Condition 1, e.g., "Working with Reactive Forms"]
- [Condition 2, e.g., "Implementing form validation"]
- [Condition 3, e.g., "Using FormBuilder or FormControl"]

## Critical Patterns

### Pattern 1: [Name]

**Supported in:** v15+

[Explanation of the pattern]

```typescript
// ✅ GOOD - Modern Angular pattern
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  standalone: true,
  template: `...`
})
export class ExampleComponent {
  // Your code here
}

// ✅ GOOD - Angular v17+ with built-in control flow
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  standalone: true,
  template: `
    @if (condition) {
      <div>Content</div>
    }
  `
})
export class ExampleComponent {
  condition = true;
}

// Complete working example
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-example',
  standalone: true,
  template: `
    <div>{{ value() }}</div>
  `
})
export class ExampleComponent {
  value = signal(0);
}

// Another complete example

// ❌ BAD - Don't do this
export class BadComponent {
  // What NOT to do
}

// ✅ GOOD - Correct approach
export class GoodComponent {
  // Correct implementation
}

---

## Naming Conventions

| Type | Pattern | Examples |
|------|---------|----------|
| Core feature | `{feature-name}` | `signal-inputs`, `standalone-components`, `defer-loading` |
| Forms skill | `{form-type}` | `reactive-forms`, `signal-forms`, `template-driven-forms` |
| Router skill | `router-{feature}` | `router-guards`, `router-resolvers`, `lazy-loading` |
| Migration pattern | `{old}-to-{new}` | `ng-module-to-standalone`, `reactive-forms-to-signal-forms` |
| Version upgrade | `v{x}-to-v{y}` | `v18-to-v19`, `v19-to-v20` |
| Testing skill | `testing-{type}` | `testing-components`, `testing-services`, `testing-http` |

---

## Decision: Where to Place the Skill

---

## Decision: Single File vs Folder Structure

**Examples:**
- `skills/angular/core/signal-inputs.md` - Simple, single file
- `skills/angular/forms/reactive-forms/SKILL.md` - Complex, needs folder
- `skills/angular/migrations/v18-to-v19/SKILL.md` - Migration, needs assets

---

## Frontmatter Fields

| Field | Required | Description |
|-------|----------|-------------|
| `name` | Yes | Skill identifier (lowercase, hyphens) |
| `description` | Yes | What + Trigger in one block |
| `metadata.version` | Yes | Semantic version as string |
| `metadata.angular.minVersion` | Yes | Minimum Angular version (e.g., "15.0.0") |
| `metadata.angular.maxVersion` | Yes | Maximum tested Angular version |
| `metadata.angular.supportedVersions` | Yes | Array of supported major versions |

---

## Content Guidelines

### DO
- **Version Label Everything**: Mark each pattern with Angular version
- **Show Evolution**: When patterns changed between versions, show both
- **Complete Examples**: Include all imports, decorators, and types
- **Use Latest APIs**: Prefer standalone, signals, built-in control flow
- **Migration Paths**: Show how to migrate from old to new
- **TypeScript Strict**: All examples should compile with strict mode
- **Real-World Context**: Explain when and why to use each pattern

### DON'T
- Duplicate Angular documentation (reference instead)
- Mix patterns from different versions without labels
- Use deprecated APIs without migration notes
- Include incomplete code that won't compile
- Skip TypeScript types
- Use NgModule when standalone is available (v14+)
- Ignore Angular Style Guide conventions
- Add outdated patterns without historical context

---

## Version Support Guidelines

### Minimum Version Strategy

**Use v15 as minimum** for most skills because:
- Standalone APIs became stable in v15
- Still widely used in production
- Good baseline for modern Angular

**Use v16+** when skill requires:
- Signals (introduced in v16)
- Required inputs (v16+)
- Signal-based APIs

**Use v17+** when skill requires:
- Built-in control flow (@if, @for, @switch)
- @defer for lazy loading
- New application builder

### Version Labeling

Always label patterns with version introduced:

```typescript
// ✅ GOOD - Clear version label
### Pattern: Signal Inputs

**Supported in:** v17.1+

// ❌ BAD - No version context
### Pattern: Signal Inputs

// ❌ BEFORE (v16)
export class OldComponent {
  @Input() value: string = '';
}

// ✅ AFTER (v17.1+)
export class NewComponent {
  value = input.required<string>();
}

| `{skill-name}` | {Description} | [SKILL.md](skills/angular/{category}/{skill-name}/SKILL.md) | v15-v21 |

npx @angular/cli@latest new test-project
cd test-project