菜单
Angular CLI and MCP server integration for AI-assisted development. Includes Web Codegen Scorer for code quality, CLI commands, and project scaffolding. Use when setting up Angular projects, running ng generate, or evaluating AI-generated code quality.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | frontend-angular-tooling |
| description | Angular CLI and MCP server integration for AI-assisted development. Includes Web Codegen Scorer for code quality, CLI commands, and project scaffolding. Use when setting up Angular projects, running ng generate, or evaluating AI-generated code quality. |
| kb-sources | ["wiki/software-engineering/frontend-angular-tooling"] |
| updated | "2026-05-21T00:00:00.000Z" |
Angular CLI and AI-assisted development tools for Angular 21+.
Connect Claude Code to Angular's official MCP server for AI-assisted development.
# Add MCP server to your project
claude mcp add angular-cli --scope project -- npx -y @angular/cli mcp
# Verify connection
claude mcp list
{
"mcpServers": {
"angular-cli": {
"command": "npx",
"args": ["-y", "@angular/cli", "mcp"]
}
}
}
| Tool | Purpose |
|---|---|
ai_tutor | Interactive Angular guidance for v21+ |
get_best_practices | Current Angular patterns (signals, standalone) |
search_documentation | Query angular.dev in real-time |
find_examples | Official code examples |
list_projects | Workspace structure from angular.json |
onpush_zoneless_migration | Migration guidance for zoneless |
--read-only - Analysis only, no code modifications--local-only - Disable internet-dependent tools--experimental-tool - Enable preview featuresEvaluate AI-generated Angular code quality.
# Install globally
npm install -g @anthropic-ai/web-codegen-scorer
# Score a directory
web-codegen-scorer score ./src/app
# Score specific files
web-codegen-scorer score ./src/app/dashboard --verbose
| Category | Checks |
|---|---|
| Modern Patterns | Signals, standalone, control flow |
| TypeScript | Strict mode, no any, proper types |
| Accessibility | ARIA attributes, keyboard nav |
| Performance | Bundle size, lazy loading |
# New project with AI config
ng new my-app --ai-config=claude
# Generate components
ng generate component dashboard --standalone
ng generate service auth
ng generate guard auth --functional
# Build
ng build --configuration production
# Serve with SSR
ng serve --ssr
# Add AI configuration to existing project
ng generate ai-config
# Options: claude, copilot, cursor, gemini
ng new app --ai-config=claude
This creates .claude/instructions.md with Angular 21+ best practices.
See reference.md for detailed MCP usage and examples.md for workflows.
Sprint planning patterns including effort estimation, cross-project validation, ticket refinement workflows, two-validator parallel intent-only refinement, Foundation→Gates ticket pairs, workstream split thresholds, and hub/per-project reconciliation. Use for sprint capacity planning, ticket validation, dependency discovery, tier-gated dispatch, strategic pivots, or coordinating multi-agent ticket processing.
Multimodal AI patterns for extracting structured information from video using Gemini, GPT-4o, and Claude vision. Frame sampling strategies, structured output with Pydantic, temporal reasoning, and cost optimization. Use for video analysis, report generation from video, and visual inspection.
Apple Foundation Models framework for on-device AI. LanguageModelSession, @Generable macro, structured output, token management, and availability checking.
Tactical DDD patterns for clean Python architecture including Domain Model, Repository, Service Layer, Unit of Work, and Aggregates. Use for backend architecture decisions, implementing data access layers, separating business logic from infrastructure, or reviewing code separation.
Architecture Decision Records (ADRs) for documenting significant technical decisions. Use for capturing decision context, rationale, consequences, and maintaining decision history.
Architecture visualization patterns using Mermaid and ASCII diagrams. Use for service flows, sequence diagrams, C4 models, decision matrices, or expressing architectural ideas visually.