If you're building custom Angular CLI commands or code generators, this is your reference. It covers the core schematics API from Angular 21, including creating rules, working with the Tree abstraction for file manipulation, and using templates to generate boilerplate code. The examples are straightforward: setting up a schematic project, writing basic rules that modify the file tree, and applying templates with the standard apply/url/template pattern. It's lean but hits the essential patterns you need when you're tired of manually scaffolding components or want to enforce project conventions through generated code. Good starting point if you're moving beyond using schematics to actually writing them.

skills.sh installs
184
GitHub stars
7
last updated
Aug 21, 2026

Install

$ npx -y skills add oguzhan18/angular-ecosystem-skills --skill angular-schematics --agent claude-code

Installs into .claude/skills of the current project.

Files

Angular Schematics

Version: Angular 21 (2025) Tags: Schematics, Generators, CLI, Code Generation

References: Schematics Guide • @schematics/angular

Best Practices

  • Create schematic
npm install -g @angular-devkit/schematics-cli
schematics schematics .:my-schematic
  • Create rule
import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

export function myScheme(options: any): Rule {
  return (tree: Tree, context: SchematicContext) => {
    tree.create(options.path + '/file.ts', 'content');
    return tree;
  };
}
  • Use templates
import { apply, url, template } from '@angular-devkit/schematics';

export function myScheme(options: any): Rule {
  const templateSource = apply(url('./files'), [
    template({ ...options }),
    move(options.path)
  ]);
  return chain([mergeWith(templateSource)]);
}

Sponsors

Details

Repository
github.com/oguzhan18/angular-ecosystem-skills
Categories
Frontend Development, CLI & Terminal
First seen
Jun 3, 2026

More from oguzhan18/angular-ecosystem-skills

All 45
1nexu-io avatarhtml-ppt-tech-sharingnexu-io/open-designConference / internal tech-talk deck — GitHub-dark, JetBrains Mono, terminal code blocks, agenda + Q&A pages. Use for engineering presentations, internal sharin183skills.sh installs
2nexu-io avatarhtml-ppt-presenter-modenexu-io/open-design演讲者模式专用 deck — tokyo-night 默认主题,5 套主题 T 键切换,每页带 150-300 字逐字稿示例(<aside class="notes">),按 S 打开 popup(CURRENT / NEXT / SCRIPT / TIMER 四张磁吸卡片)。用于技术分享、公开演讲、课程讲解,怕忘词或182skills.sh installs
3nexu-io avatarhtml-ppt-testing-safety-alertnexu-io/open-design红琥珀警示 deck — 顶/底 45° 红黑 hazard 条纹、红色删除线否定标题、L1/L2/L3 绿/琥珀/红 tier 卡片、圆点状态 alert box、policy-yaml 代码块(红左边框 + bad 关键词高亮)、红绿 checklist、Q1 事故堆叠柱状图。适合安全 / 风险 / 事故复盘 / 182skills.sh installs
4oguzhan18 avatarangular-formsoguzhan18/angular-ecosystem-skillsALWAYS use when working with Angular Forms, reactive forms, template-driven forms, form validation, or form handling in Angular applications.182skills.sh installs
5oguzhan18 avatarangular-pipesoguzhan18/angular-ecosystem-skillsALWAYS use when working with Angular Pipes, custom pipes, pure pipes, impure pipes, or async pipes in Angular applications.180skills.sh installs
6oguzhan18 avatarangular-signalsoguzhan18/angular-ecosystem-skillsALWAYS use when working with Angular Signals, signal-based reactivity, computed signals, or effect APIs in Angular applications.178skills.sh installs