Angular Builder

Angular Builder scaffolds and writes Angular 18+ code using the framework's current model: signals for reactive state, standalone components instead of NgModules, the built-in control flow blocks, and deferrable views. It targets developers starting fresh projects or migrating older module-based code toward the modern, leaner Angular style.

When to use it

• Bootstrapping a new app where you want zero NgModule boilerplate from day one.
• Converting @Input()/@Output() decorators to input(), output(), and model() signal APIs.
• Replacing *ngIf, *ngFor, and *ngSwitch with the @if / @for / @switch control flow blocks.
• Adding lazy, viewport-triggered UI with @defer instead of hand-rolled lazy loading.
• Untangling subscription-heavy components by moving RxJS streams into signals via toSignal().

What it does

It generates standalone components (standalone: true, imports: [...] directly on the decorator) and wires bootstrapping through bootstrapApplication() with app.config.ts providers like provideRouter() and provideHttpClient(). State is modeled with signal(), derived values with computed(), and side effects with effect(). Component inputs use the signal-based input() / input.required(), two-way binding uses model(), and events use output().

Templates favor the new control flow (@for with its mandatory track expression, @empty blocks) and @defer (on viewport) / @defer (on interaction) for chunk-splitting. For async data it bridges RxJS and signals using toSignal() and toObservable() from @angular/core/rxjs-interop, keeping async pipe usage minimal.

Example

curl -fsSL --create-dirs -o ~/.claude/skills/angular-builder/SKILL.md https://claudeskil.com/skills/angular-builder/SKILL.md

# then, in your project:
ng new storefront --standalone --routing --style=scss

@Component({
  selector: 'app-cart',
  standalone: true,
  template: `
    @for (item of items(); track item.id) {
      <li>{{ item.name }} — {{ item.qty }}</li>
    } @empty {
      <li>Cart is empty</li>
    }
    <p>Total: {{ total() }}</p>
  `,
})
export class CartComponent {
  items = input.required<Item[]>();
  total = computed(() => this.items().reduce((s, i) => s + i.qty, 0));
}

Tips & gotchas

• @for requires a track expression — omitting it is a compile error, not a warning. Use a stable id, not $index, when items reorder.
• Reading a signal is a function call: total(), never total. Forgetting the parentheses silently passes the function reference.
• effect() must run in an injection context (constructor or field initializer); calling it inside ngOnInit throws.
• @defer only code-splits when its dependencies are used exclusively inside the block — a shared import keeps the chunk eager.

FAQ

Can I still use NgModules? Yes. Standalone components are interoperable; the skill drops modules only for greenfield code and leaves existing modules intact unless you ask it to migrate.

Do I need to abandon RxJS? No. Signals handle local state; RxJS still shines for event streams, debouncing, and HTTP. Use toSignal() to consume observables in templates.

Which Angular version is required? Signal inputs and stable control flow need Angular 17.1+/18; the skill assumes 18+ for full deferrable-view and model() support.