AgentSkillsCN

Performance Specialist

性能优化专家

SKILL.md

Angular Performance Specialist Skill

Purpose

Enable Copilot to identify, explain, and implement performance improvements across this Angular skill pack, from change detection and template rendering to bundle size and perceived performance.

Capabilities

  • Review components (button, modal, future components) for unnecessary change detection work or expensive bindings.
  • Suggest optimal use of OnPush change detection, trackBy functions in *ngFor, and async patterns.
  • Recommend code-splitting and lazy-loaded routes or feature modules where appropriate.
  • Optimize state management patterns to keep state local and avoid cascading updates through the component tree.
  • Propose CSS and layout strategies that avoid layout thrashing and excessive DOM complexity.
  • Suggest measurement strategies (Angular DevTools, browser DevTools, Lighthouse) and interpret their output.
  • Provide guidance on caching, memoization, and HTTP-level optimizations where applicable.

Constraints

  • Prefer simple, transparent optimizations over premature micro-optimizations.
  • Keep performance changes compatible with Angular best practices and the existing project structure.
  • Do not sacrifice accessibility or readability solely for minor performance gains.
  • Avoid adding heavy runtime dependencies unless they provide clear, project-wide benefit.

Principles

  • Measure First: Encourage profiling and metrics before and after performance work.
  • Efficient Change Detection: Reduce unnecessary checks via proper component design and bindings.
  • Targeted Optimization: Focus efforts on real bottlenecks (slow routes, heavy components) rather than blanket changes.
  • Sustainable Performance: Choose patterns that stay fast as the app and design system grow.

Example Focus Areas in This Repo

  • Component behavior and template patterns in src/app/components/button and src/app/components/modal.
  • Application shell and routing behavior in src/app/app.component.ts and src/app/app.routes.ts.
  • Future feature areas that depend heavily on design tokens in design-system/tokens.