Angular Skills

A collection of skills for AI-assisted Angular development. These skills provide coding agents such as Claude, Gemini, OpenCode, etc with up-to-date Angular v20+ patterns, best practices, and code examples.

Installation

Install all skills from this repository:

npx skills add analogjs/angular-skills

Or install individual skills:

npx skills add analogjs/angular-skills/skills/angular-component
npx skills add analogjs/angular-skills/skills/angular-signals
npx skills add analogjs/angular-skills/skills/angular-forms
# etc.

Give the GitHub repo a ⭐️!

Available Skills

Skill	Description
angular-component	Standalone components with signal inputs/outputs, OnPush change detection, host bindings, content projection, and lifecycle hooks
angular-di	Dependency injection with inject(), injection tokens, provider configuration, and hierarchical DI patterns
angular-directives	Attribute directives, structural directives for portals/overlays, and host directive composition
angular-forms	Signal Forms (experimental) with schema-based validation, field state management, and reactive patterns
angular-http	Data fetching with httpResource(), resource(), HttpClient, and functional interceptors
angular-routing	Routing with lazy loading, functional guards/resolvers, and signal-based route parameters
angular-signals	Reactive state with signal(), computed(), linkedSignal(), effect(), and RxJS interop
angular-ssr	Server-side rendering, incremental hydration, prerendering, and browser-only code patterns
angular-testing	Testing with TestBed, component harnesses, signal testing, and OnPush component testing
angular-tooling	Angular CLI commands, code generation, build configuration, and workspace setup

Skill Structure

Each skill follows the standard structure:

skills/
└── angular-{name}/
    ├── SKILL.md              # Main skill file with patterns and examples
    └── references/
        └── {name}-patterns.md  # Advanced patterns and additional examples

Angular Version

These skills target Angular v20+ with modern defaults:

• Standalone components (no standalone: true needed)
• Signal-based inputs, outputs, and queries
• Native control flow (@if, @for, @switch)
• inject() function for dependency injection
• Functional guards and interceptors
• Signal Forms (experimental)

Key Patterns

Components

@Component({
  selector: 'app-user-card',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <h2>{{ name() }}</h2>
    @if (showEmail()) {
      <p>{{ email() }}</p>
    }
  `,
})
export class UserCardComponent {
  name = input.required<string>();
  email = input<string>('');
  showEmail = input(false);
  selected = output<string>();
}

Signals

const count = signal(0);
const doubled = computed(() => count() * 2);

effect(() => {
  console.log('Count changed:', count());
});

Dependency Injection

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);
  private config = inject(APP_CONFIG);
}

HTTP Resources

userResource = httpResource<User>(() => `/api/users/${this.userId()}`);

Signal Forms

loginModel = signal({ email: '', password: '' });
loginForm = form(this.loginModel, (schemaPath) => {
  required(schemaPath.email);
  email(schemaPath.email);
  required(schemaPath.password);
});

Contributing

Contributions are welcome! Please ensure any additions:

1. Target Angular v20+ patterns
2. Follow the existing skill structure
3. Include practical, working code examples
4. Avoid deprecated patterns (NgModules, @Input() decorators, *ngIf, etc.)

Resources

• Angular Documentation
• Angular AI Documentation
• Skills.sh

License

MIT