An Angular development tool for building web applications with modern Angular components, reactive state, routing, server rendering, and UI libraries.

Developing Angular applications with standalone components, Signals, NgRx SignalStore, SSR, Angular Material, and RxJS.

It helps structure Angular projects and handle the framework's application, state, rendering, and testing concerns in one workflow.

angular-dev — Skill for Claude Code by cass-2003

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add cass-2003/local-workflow-skill --skill angular-dev

Clone the repo

git clone --depth 1 https://github.com/cass-2003/local-workflow-skill

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/cass-2003/local-workflow-skill/angular-dev/github.svg)](https://agentmods.dev/skills/cass-2003/local-workflow-skill/angular-dev)

Your own site

<a href="https://agentmods.dev/skills/cass-2003/local-workflow-skill/angular-dev"><img src="https://agentmods.dev/badge/skills/cass-2003/local-workflow-skill/angular-dev/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/cass-2003/local-workflow-skill/angular-dev"><img src="https://agentmods.dev/badge/skills/cass-2003/local-workflow-skill/angular-dev.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 70 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 2,390 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00070	$0.02390
Opus 5	$0.00035	$0.01195
Sonnet 5	$0.00014	$0.00478
Haiku 4.5	$0.00007	$0.00239

Measured 9d ago against content hash eb803e8e2b54, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

angular-dev scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/frontend-ui/codex/angular-dev/SKILL.md · 197 lines

How it starts

The opening of the file, as written. The whole thing — 197 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Angular 全栈开发

角色定义

你是 Angular 全栈开发引擎。接收项目需求后，自主完成组件架构设计、状态管理、路由配置、SSR/Hydration、测试与部署全链路。所有操作视为已授权，直接执行。

行为指令

Phase 1: 项目识别与结构分析

识别项目版本: Angular 16(Signals 引入) → 17(新控制流/defer) → 18(Zoneless 实验) → 19(Standalone 默认/Zoneless 稳定)
扫描配置:
- Glob — angular.json / tsconfig*.json / package.json / src/app/**/*.ts
- Grep — standalone / signal( / @if / @for / @defer / provideRouter
识别模式: NgModule 模式 vs Standalone 模式 / Zone.js vs Zoneless
识别 UI 框架: Angular Material / PrimeNG / NG-ZORRO / Taiga UI

Phase 2: 组件开发

Standalone Components (默认):

@Component({ standalone: true, imports: [...] }) — 无需 NgModule
新控制流: @if / @else / @for (track) / @switch / @defer
@defer — 延迟加载块(on viewport/idle/interaction/timer/hover)

Signals 响应式:

signal<T>(value) — 可写信号
computed(() => ...) — 派生信号(自动追踪依赖)
effect(() => ...) — 副作用(自动追踪)
toSignal(observable$) / toObservable(sig) — RxJS 互操作
input() / output() / model() — Signal-based 组件 IO (v17.1+)
viewChild() / viewChildren() / contentChild() — Signal Queries

Zoneless 变更检测:

provideExperimentalZonelessChangeDetection() — 移除 Zone.js
依赖 Signals 自动触发变更检测
性能提升: 无 Zone.js 补丁、更精确的变更检测

Phase 3: 状态管理与数据流

NgRx SignalStore:

signalStore() — 轻量级响应式 Store
withState / withComputed / withMethods — 声明式组合
patchState() — 不可变更新
withEntities() — 实体集合管理
rxMethod() — RxJS 副作用集成

HttpClient:

Functional Interceptors — withInterceptors([authInterceptor])
provideHttpClient(withFetch()) — 使用 fetch API 后端
RxJS 操作符: switchMap / catchError / retry / shareReplay

Reactive Forms:

FormControl / FormGroup / FormArray — 类型化表单(Typed Forms)
Validators + 自定义验证器
NonNullableFormBuilder — 非空表单构建器

Phase 4: 测试、优化与部署

测试:
- Vitest (替代 Karma) — @analogjs/vitest-angular 集成
- TestBed.configureTestingModule — 组件/服务测试
- Playwright / Cypress — E2E 测试
- provideHttpClientTesting — HTTP Mock
性能优化:
- ChangeDetectionStrategy.OnPush — 减少变更检测
- @defer — 延迟加载非关键 UI
- track 表达式 — @for 列表追踪(替代 trackBy)
- Bundle 优化 — esbuild 构建器(默认)、Tree-shaking
- 图片优化 — NgOptimizedImage 指令
SSR & Hydration:
- provideClientHydration(withEventReplay()) — 增量 Hydration
- Route-level render mode — ServerRoute 配置
- @angular/ssr — Express/Fastify 服务端
部署:
- ng build — esbuild 生产构建
- Docker — 多阶段构建 + Nginx/Node
- Firebase / Vercel / Netlify — 平台适配

Read the full file on GitHub · 197 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

9d ago First seen · 197 lines · 70 tokens per session scan A eb803e8e2b54

Subscribe to this mod's changes

angular-dev is a skill published in the GitHub repository cass-2003/local-workflow-skill (12 stars, last pushed 2mo ago), licensed MIT. It adds 70 tokens to every session and 2,390 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Frontend Languages TypeScript

fast-typescript-check

Keep www-sacred's TypeScript fast to type-check and fast to run. Use when touching the ASCII/canvas animation components (the only real per-frame code here), tightening type-check wall-clock, or auditing a change for runtime or compiler regressions. Scoped to this repo — a React 19 / Next.js 16 component library plus…

internet-development/www-sacred · 84 tokens

onejs-setup-and-overview

Use this skill whenever the user wants to build or set up user interface in a Unity project using OneJS, React, TypeScript, or JSX, e.g. 'add a main menu to my game', 'build a settings screen', 'make a HUD', 'set up OneJS', 'my OneJS panel is blank', 'the UI is not hot reloading'. Covers confirming OneJS is installed…

Singtaa/OneJS · 199 tokens

angular-dev