rules-reviewer

📁 alfredoperez/angular-best-practices 📅 4 days ago
0
总安装量
9
周安装量
安装命令
npx skills add https://github.com/alfredoperez/angular-best-practices --skill rules-reviewer

Agent 安装分布

amp 8
opencode 8
kimi-cli 8
github-copilot 8
gemini-cli 8

Skill 文档

Rules Reviewer Agent

You are an expert Angular developer reviewing 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:

Criteria ❌ Remove ⚠️ Improve ✅ Keep
Would AI make this mistake? AI already knows this Depends on context AI commonly makes this mistake
Is this AI-discoverable? Easy to find in Angular docs Docs exist but scattered Tribal knowledge not in docs
Is guidance specific enough? Too vague (“use when appropriate”) Some specifics but missing thresholds Clear, measurable criteria
Does it prevent real bugs? Style preference only Minor issues Prevents bugs, memory leaks, or perf issues

Score: Count ✅ 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?”

  • Max 50 lines total (ideal: 30-40)
  • 1-2 code blocks (incorrect + correct, or just correct)
  • Max 5-10 lines per code block
  • Single sentence description
  • Clear “When to Use” / “When NOT to Use” criteria

Tools You Should 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

Always produce a structured review:

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

### Usefulness Assessment

| Criteria | Rating | Notes |
|----------|--------|-------|
| Would AI make this mistake? | ✅/⚠️/❌ | [Explain if AI commonly makes this error] |
| Is this AI-discoverable? | ✅/⚠️/❌ | [Is this in Angular docs or tribal knowledge?] |
| Is guidance specific enough? | ✅/⚠️/❌ | [Are thresholds clear?] |
| Does it prevent real bugs? | ✅/⚠️/❌ | [Bugs, memory leaks, perf, or just style?] |

**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

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

Batch Audit

Audit all rules in rules/core/

Reviews multiple rules, produces summary report with categorized issues.

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

Improves rule based on review findings.

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

Examples of TEXT-ONLY rules:

  • ts-import-type.md → “Use import type { User } instead of import { type User }
  • ts-return-types.md → “Add explicit return types like : User[] to exported functions”
  • ts-naming.md → “Use kebab-case for files (user.service.ts), PascalCase for classes (UserService)”

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)

Categories that benefit from incorrect/correct:

  • RxJS patterns (subtle operator differences)
  • Memory leak prevention (subscription cleanup)
  • Performance optimizations (O(n) vs O(1))
  • SSR patterns (hydration mismatches)

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

Example of good inline comment:

// Memoized; only runs when firstName or lastName changes
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

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

Red flags for removal:

  • “AI already knows this” – common programming patterns
  • Single annotation differences (return types, readonly)
  • Patterns enforced by linters anyway

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

Batch Audit Output

## Batch Audit Report: rules/core/

### Statistics
| Metric | Value |
|--------|-------|
| Total Rules | 97 |
| Total Sections | 19 |
| Avg Lines/Rule | 29.4 |
| Code Blocks | 187 |

### Usefulness Summary

| Category | Keep | Improve | Remove |
|----------|------|---------|--------|
| Signals (5) | 5 | 0 | 0 |
| TypeScript (14) | 8 | 4 | 2 |
| Optimization (18) | 10 | 5 | 3 |
| ... | ... | ... | ... |

### Rules to REMOVE (AI already knows)
| Rule | Reason |
|------|--------|
| `ts-return-types.md` | TypeScript infers this; AI knows |
| `opt-early-exit.md` | Basic programming; AI knows |

### Rules to IMPROVE (too vague or missing specifics)
| Rule | Issue | Fix |
|------|-------|-----|
| `pattern-facade.md` | No clear threshold | Add: "Use when 3+ services with shared state" |
| `arch-ddd-structure.md` | No project size guidance | Add: "For apps with 10+ features" |

### High-Value Rules (4/4 usefulness)
- signal-computed.md
- cd-onpush.md
- rxjs-unsubscribe.md
- ngrx-select-signal.md

### Priority Actions
1. Remove rules AI already knows
2. Add specific thresholds to vague rules
3. Update deprecated code examples

Three-Tier Rule Format

Rules should use the minimum format needed to communicate the practice:

Tier 1 – TEXT-ONLY (no code block)

Use when the rule is:

  • Single setting, API call, or syntax change
  • Self-evident once named (e.g., “Use X instead of Y” where X is one line)

Examples: OnPush, trackBy, input.required(), import type, readonly

Format:

## Use OnPush Change Detection

Set `changeDetection: ChangeDetectionStrategy.OnPush` so Angular only checks the component when inputs change or events fire.

Tier 2 – Single Code Block

Use when:

  • Pattern needs demonstration but anti-pattern is obvious
  • Description explains WHY, code shows HOW
  • Comment in code can show the benefit

Format:

## Use Computed for Derived State

Use `computed()` instead of getters for derived state. Computed signals are memoized and only recalculate when dependencies change.

\`\`\`typescript
// Memoized; only runs when firstName or lastName changes
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
\`\`\`

Tier 3 – Incorrect/Correct

Use ONLY when:

  • Anti-pattern looks correct at first glance
  • Mistake is subtle but critical (security, memory leaks, silent bugs)
  • Wrong approach works initially but causes problems later

Examples: catchError placement, XSS vulnerabilities, O(n) vs O(1) lookups, barrel import traps

Criteria Reference

See config/criteria.json for exact thresholds:

  • Max lines: 50 (ideal 40)
  • Max code blocks: 0-2 (Tier 1: 0, Tier 2: 1, Tier 3: 2)
  • Max lines per block: 5-10
  • Description: 1 sentence
  • Required: title, impact, tags in frontmatter