Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.
56
66%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/angular-best-practices/SKILL.mdQuality
Discovery
67%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
The description has a solid structure with an explicit 'Use when...' clause that clearly communicates both purpose and trigger conditions. However, it lacks specific concrete actions (e.g., lazy loading, OnPush change detection, tree shaking) that would help Claude distinguish this skill from a general Angular skill, and the trigger terms could be expanded to cover more natural user phrasings.
Suggestions
Add specific concrete actions like 'configure lazy loading, implement OnPush change detection, optimize bundle size with tree shaking, reduce unnecessary re-renders'.
Expand trigger terms to include natural phrases users might say such as 'slow Angular app', 'change detection strategy', 'lazy loading', 'AOT', 'trackBy', or 'zone.js optimization'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Angular performance optimization) and mentions some areas (bundle size, rendering efficiency), but doesn't list specific concrete actions like 'configure lazy loading', 'implement OnPush change detection', or 'tree-shake unused modules'. | 2 / 3 |
Completeness | Clearly answers both 'what' (Angular performance optimization and best practices guide) and 'when' (Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency) with an explicit 'Use when...' clause. | 3 / 3 |
Trigger Term Quality | Includes relevant terms like 'Angular', 'performance', 'bundle size', 'rendering efficiency', 'refactoring', but misses common natural variations users might say such as 'slow Angular app', 'change detection', 'lazy loading', 'AOT compilation', 'trackBy', or 'zone.js'. | 2 / 3 |
Distinctiveness Conflict Risk | The Angular focus provides some distinctiveness, but 'performance optimization' and 'best practices guide' are broad enough to potentially overlap with general Angular development skills or general web performance optimization skills. | 2 / 3 |
Total | 9 / 12 Passed |
Implementation
64%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a solid, actionable Angular performance guide with excellent code examples showing correct and incorrect patterns across all major optimization areas. Its main weaknesses are its length (could be more concise by trimming explanatory text and splitting into sub-files) and the lack of verification/measurement steps for confirming performance improvements. The priority categorization table is a strong organizational choice.
Suggestions
Add verification steps: include commands like `npx ng build --stats-json` + `npx webpack-bundle-analyzer` or Lighthouse CLI checks so users can validate that optimizations are working.
Split into sub-files (e.g., SSR.md, BUNDLE.md, CHANGE_DETECTION.md) and keep SKILL.md as a concise overview with the priority table and quick reference checklist, linking to detailed guides.
Remove the 'When to Use' and 'Limitations' boilerplate sections — Claude can infer applicability from the description and content.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is generally well-structured with good code examples, but includes some unnecessary content like the 'When to Use' section (Claude can infer this), the 'Benefits' list for zoneless, and the boilerplate 'Limitations' section at the end. The priority table is useful but the descriptions are somewhat redundant with the section headers. At ~400 lines, it could be tightened. | 2 / 3 |
Actionability | Every rule includes fully executable, copy-paste-ready TypeScript and HTML code examples with clear CORRECT/WRONG patterns. The code is concrete, uses real Angular APIs, and covers specific imports and configurations. The checklists at the end provide additional actionable guidance. | 3 / 3 |
Workflow Clarity | The skill is structured as a reference guide rather than a multi-step workflow, which is appropriate for its purpose. However, it lacks validation/verification steps — there's no guidance on how to measure or verify performance improvements (e.g., bundle analysis commands, Lighthouse checks, or how to confirm OnPush is working correctly). For a performance optimization guide, verification checkpoints would be valuable. | 2 / 3 |
Progressive Disclosure | The content is well-organized with clear sections and a priority table serving as a table of contents. However, at ~400 lines it's a monolithic document that could benefit from splitting detailed sections (SSR, state management) into separate files. The external resource links at the end are helpful but the skill itself doesn't reference any bundle files for deeper content. | 2 / 3 |
Total | 9 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 9 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (564 lines); consider splitting into references/ and linking | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 9 / 11 Passed | |
76aea27
Table of Contents
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.