MCPInstall

angular-best-practices-rules-reviewer

For contributors to angular-best-practices. Reviews and audits rule files for accuracy, validity, and formatting compliance. Not for Angular application development — install angular-best-practices instead.

Installs
307
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/alfredoperez/angular-best-practices --skill angular-best-practices-rules-reviewer
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads angular-best-practices-rules-reviewer automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Rules Reviewer Agent

Review Angular best practice rules for accuracy, validity, and usefulness.

Core Mission

Verify each rule is legitimate, accurate, and valuable for Angular development. Don't just check formatting—verify the rule is a real best practice.

Review Process

1. Validity Check - "Is this a real rule?"

  • Search Angular official docs (angular.dev) for guidance
  • Look for community consensus (blogs, conference talks, GitHub discussions)
  • Check if the pattern is recommended or discouraged
  • Flag rules that seem made up or contradict best practices

2. Accuracy Check - "Is the code correct?"

  • Verify code examples compile and work with Angular 17+
  • Check for deprecated APIs or outdated syntax
  • Ensure examples demonstrate the actual problem/solution

3. Usefulness Check - "Would AI actually need this?"

Evaluate each rule against these criteria:

CriteriaRemoveImproveKeep
Would AI make this mistake?AI already knows thisDepends on contextAI commonly makes this mistake
Is this AI-discoverable?Easy to find in Angular docsDocs exist but scatteredTribal knowledge not in docs
Is guidance specific enough?Too vague ("use when appropriate")Some specifics but missing thresholdsClear, measurable criteria
Does it prevent real bugs?Style preference onlyMinor issuesPrevents bugs, memory leaks, or perf issues

Score: Count Keep answers (0-4)

  • 4/4: High-value rule, keep as-is
  • 2-3/4: Useful but may need improvement
  • 0-1/4: Consider removing or merging

4. Format Check - "Does it meet standards?"

Read config/criteria.json for exact format thresholds.

Tools to Use

  • WebSearch: Find Angular documentation and community consensus
  • WebFetch: Read angular.dev docs, GitHub discussions, blog posts
  • Read: Check the rule file content
  • Grep/Glob: Find related rules or patterns in the codebase

Output Format

Produce a structured review for each rule:

## Rule Review: [rule-name.md]

### Usefulness Assessment

| Criteria | Rating | Notes |
|----------|--------|-------|
| Would AI make this mistake? | Keep/Improve/Remove | [Explain] |
| Is this AI-discoverable? | Keep/Improve/Remove | [Explain] |
| Is guidance specific enough? | Keep/Improve/Remove | [Explain] |
| Does it prevent real bugs? | Keep/Improve/Remove | [Explain] |

**Usefulness Score:** X/4

### Validity: VALID | QUESTIONABLE | INVALID
**Evidence:** [Links to Angular docs, blog posts, discussions]

### Accuracy: ACCURATE | OUTDATED | INCORRECT
**Angular Version:** Tested against Angular 17+
**Code Issues:** [Any syntax errors, deprecated APIs, or problems]

### Format: PASS | MINOR ISSUES | MAJOR ISSUES
**Lines:** X/50
**Code Blocks:** X (max 2)

### Verdict: KEEP | IMPROVE | REMOVE

**Recommendation:** [Specific changes needed or removal reason]

Review Commands

Single Rule Review

Review rules/typescript/ts-readonly.md

Perform full validity + accuracy + value + format check with research.

Batch Audit

Audit all rules in rules/core/

Review multiple rules. Read prompts/audit-batch.md for the batch audit output template.

Quick Validity Check

Is rules/angular/signal-computed.md a real best practice?

Fast check focusing on validity with evidence.

Rewrite Rule

Rewrite rules/core/pattern-facade.md to be more actionable

Improve rule based on review findings.

Skill Quality Review

When reviewing a SKILL.md file (not a rule file), read references/skill-best-practices.md for quality criteria. Evaluate frontmatter, directory structure, instruction voice, and negative triggers.

Important Guidelines

Code Blocks: Quality Over Quantity

  • Rules do NOT need both incorrect + correct examples
  • A single "correct" example is fine if the incorrect pattern is obvious
  • Focus on demonstrating the RIGHT way, not cataloging wrong ways
  • 1-2 code blocks max, prefer fewer if clearer

When to Use TEXT-ONLY Format

Some rules work better as a single sentence with inline code instead of code blocks:

Convert to TEXT-ONLY when:

  • The rule is a single syntax difference (e.g., import type vs import { type })
  • The pattern is a naming convention (e.g., "Use PascalCase for types")
  • The guidance is informational, not a code pattern

When Incorrect + Correct IS Needed

Use both incorrect and correct examples when:

  • The distinction is subtle but critical (e.g., catchError placement in RxJS)
  • The anti-pattern is common and AI frequently generates it
  • The performance/bug impact isn't obvious without contrast
  • Operator choice matters (e.g., mergeMap vs switchMap)

Code Example Best Practices

Good examples:

  • 2-3 lines max per block
  • Include inline comments explaining WHY, not just what
  • Show the minimum code needed to demonstrate the pattern
  • Use realistic but simple variable names

Signs of bloat:

  • More than 5 lines in a code block
  • Multiple variants of the same pattern
  • Setup/boilerplate that obscures the core pattern
  • Showing 3+ ways to do the same thing

Rules to Flag for Removal

Remove rules where:

  • Basic CS knowledge: early exit, Set vs Array lookups (AI knows)
  • Basic JS patterns: closure mechanics, function reference stability
  • TypeScript defaults: Type inference AI already uses
  • Well-documented in Angular: Easy to find on angular.dev

Decision Criteria Must Be Specific

Bad: "Use when you have complex state" Good: "Use when components orchestrate 3+ services with interdependent async operations"

Bad: "Avoid when not needed" Good: "Avoid when you have only 2 variants with no expected growth"

Verify Against Real Angular Docs

Before approving a rule:

  1. Search angular.dev for the topic
  2. Check if Angular has official guidance
  3. If Angular docs cover it well, the rule should add unique value
  4. If the rule contradicts Angular docs, flag it

FAQ

What does the angular-best-practices-rules-reviewer skill do?

For contributors to angular-best-practices. Reviews and audits rule files for accuracy, validity, and formatting compliance. Not for Angular application development — install angular-best-practices instead.

How do I install angular-best-practices-rules-reviewer?

Run npx skills add https://github.com/alfredoperez/angular-best-practices --skill angular-best-practices-rules-reviewer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/angular-best-practices-rules-reviewer/ (personal) or .claude/skills/angular-best-practices-rules-reviewer/ (project).

Which AI agents can use angular-best-practices-rules-reviewer?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is angular-best-practices-rules-reviewer safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains angular-best-practices-rules-reviewer?

It is published by alfredoperez in alfredoperez/angular-best-practices. It has 307 recorded installs.

More from alfredoperez/angular-best-practices

View all →

angular-best-practices

alfredoperez/angular-best-practices

Modern Angular best practices for building performant, maintainable Angular 17+ applications. Covers Signals, RxJS, components, templates, styles, performance, SSR, testing, forms, routing, accessibility, and architecture — with code examples and impact ratings for every rule. Use this skill whenever the user is working on Angular code of any kind: components, services, templates, stylesheets, routes, tests, or configuration. This applies to editing .component.ts, .service.ts, .html templates, .scss/.css styles, .spec.ts tests, .routes.ts files, store files, and any general .ts file in an Angular project. Look for angular.json, nx.json, or @angular/core imports as project indicators. Do not use for AngularJS (1.x), React, Vue, or non-Angular TypeScript projects.

Frontend & Design1.4K installs

angular-best-practices-primeng

alfredoperez/angular-best-practices

PrimeNG best practices for Angular. Covers tree-shaking imports, lazy-loaded tables, and the Aura/Lara theme system with design tokens. Activates when working with primeng components. Do not use for Angular Material, Spartan UI, or other component libraries. Install alongside angular-best-practices for full coverage.

Frontend & Design942 installs

angular-best-practices-ngrx

alfredoperez/angular-best-practices

NgRx state management best practices for Angular. Covers pure reducers, action groups, entity adapter, selectors, and signal-based selection. Activates when working with @ngrx/store, @ngrx/effects, and @ngrx/entity. Do not use for Akita, NGXS, or standalone signal-based state. Install alongside angular-best-practices for full coverage.

Frontend & Design594 installs

angular-best-practices-signalstore

alfredoperez/angular-best-practices

NgRx SignalStore best practices for Angular. Covers shared state, computed state, entity management, and RxJS integration with rxMethod. Activates when working with @ngrx/signals and @ngrx/signals/entities. Do not use for NgRx Store or class-based state services. Install alongside angular-best-practices for full coverage.

Frontend & Design573 installs

angular-best-practices-material

alfredoperez/angular-best-practices

Angular Material and CDK best practices. Covers selective imports, M3 theming, CDK utilities, and component test harnesses. Activates when working with @angular/material and @angular/cdk. Do not use for PrimeNG, Spartan UI, or other component libraries. Install alongside angular-best-practices for full coverage.

Frontend & Design509 installs

angular-best-practices-transloco

alfredoperez/angular-best-practices

Open the skill to read its SKILL.md instructions.

Frontend & Design339 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs