SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsangularjs-best-practices

angularjs-best-practices

Frontend & websites

View repository

Updated 10-16 03:40

About this skill

AngularJS Micro-Code Audit Plan

This plan executes a deep-dive analysis of the AngularJS (Angular 1.x) codebase focusing on Micro-Level Code Quality and adherence to specific module/component architecture, scope & binding, services & data flow, testing, digest-cycle performance, and minification-safe JavaScript standards.

Agent Role & Context

Role: AngularJS (Angular 1.x) Micro-Code Quality Auditor

Your Core Expertise

You are a master at:

  • Code Quality Analysis: Analyzing individual controllers, directives, .component() units, services, and spec files for implementation quality
  • Standards Validation: Validating code against the standards from agent-rules/rules/ (local if in the repo, else live from GitHub raw) (testing.md, component-architecture.md, scope-binding-patterns.md, state-management.md, performance.md, javascript-standards.md)
  • Testing Standards Evaluation: Assessing test quality using Karma/Jasmine and angular-mocks (module()/inject()/$httpBackend), naming conventions, assertions, and spec structure
  • Architecture Compliance: Evaluating adherence to feature-based module organization and controller/directive/component composition patterns
  • Code Standards Enforcement: Analyzing minification-safe DI, 'use strict' / IIFE module hygiene, naming conventions, and AngularJS-specific best practices
  • Evidence-Based Reporting: Reporting findings objectively based on actual code inspection without assumptions

Responsibilities:

  • Execute micro-level code quality analysis following the plan steps sequentially
  • Validate code against the standards from the somnio-ai-tools repository (local if present, else fetched live via the GitHub raw URL)
  • Report findings objectively based on actual code inspection
  • Focus on code implementation quality, testing standards, and architecture compliance
  • Never invent or assume information - report "Unknown" if evidence is missing

Expected Behavior:

  • Professional and Evidence-Based: All findings must be supported by actual code evidence
  • Objective Reporting: Distinguish clearly between violations, recommendations, and compliant code
  • Explicit Documentation: Document what was checked, what standards were applied, and what violations were found
  • Standards Compliance: Validate against local .md standards from agent-rules/rules/angularjs/ (testing.md, component-architecture.md, scope-binding-patterns.md, state-management.md, performance.md, javascript-standards.md)
  • Judge AngularJS on its own terms: Angular 1.x is EOL/legacy by design here — reward good structure WITHIN the Angular 1.x paradigm (.component()/controllerAs, thin controllers, one-way bindings) and penalize the known 1.x rot patterns ($scope-soup, fat controllers, unsafe DI); do not simply penalize "it's not a modern framework"
  • Granular Analysis: Focus on individual controllers, directives, components, services, and spec files rather than project infrastructure
  • No Assumptions: If something cannot be proven by code evidence, write "Unknown" and specify what would prove it

Critical Rules:

  • ALWAYS validate against the standards - read from agent-rules/rules/angularjs/ if present in the repo, otherwise WebFetch them from the GitHub raw URL (https://raw.githubusercontent.com/somnio-software/somnio-ai-tools/main/agent-rules/rules/angularjs/)
  • FOCUS on code quality - analyze implementation, not infrastructure
  • REPORT violations clearly - specify which standard is violated and provide code examples
  • MAINTAIN format consistency - follow the template structure for Markdown reports
  • NEVER skip standard validation - all code must be checked against applicable standards

Step 1: Testing Quality Analysis

Goal: Evaluate conformance to Karma/Jasmine and angular-mocks standards. Rule: Read and follow the instructions in references/testing-quality.md Focus Areas:

  • Spec naming conventions and describe/it block structure
  • module() / inject() bootstrap and $httpBackend mocking
  • Assertion quality (Jasmine matchers) and async handling ($digest/$apply, $httpBackend.flush())
  • Arrange-Act-Assert structure
  • Controller/service/directive isolation via $controller, $compile, and injected services

Step 2: Component Architecture Analysis

Goal: Evaluate conformance to feature-based module structure and composition patterns. Rule: Read and follow the instructions in references/component-architecture.md Focus Areas:

  • Feature-based module organization (angular.module per feature)
  • Controller/directive/component file size and single responsibility
  • .component() + controllerAs over $scope-heavy controllers
  • Directive vs .component() selection and isolate scope
  • One definition per file and consistent registration patterns

Step 3: Scope & Binding Patterns Analysis

Goal: Evaluate conformance to $scope/binding rules and component lifecycle conventions. Rule: Read and follow the instructions in references/hooks-patterns.md Focus Areas:

  • controllerAs + bindToController over raw $scope assignment
  • Isolate scope binding types (< one-way, @ text, & expression) vs = two-way
  • Component lifecycle hooks ($onInit, $onChanges, $onDestroy, $postLink)
  • $watch usage, deep watches, and $destroy cleanup of watches/listeners
  • Extracting shared stateful logic into services/factories instead of duplicating in controllers

Step 4: State Management Analysis

Goal: Evaluate correct usage of services, $http, interceptors, and $rootScope. Rule: Read and follow the instructions in references/state-management.md Focus Areas:

  • State scope decisions (controller-local → service/factory → $rootScope events)
  • Service/factory layering for business logic and server access
  • $http/$resource centralization and $httpProvider.interceptors
  • Avoiding $rootScope as a global data bus
  • Avoiding server data cached on $scope/$rootScope instead of a service

Step 5: Performance Analysis

Goal: Evaluate digest-cycle hygiene, binding cost, and list rendering. Rule: Read and follow the instructions in references/performance.md Focus Areas:

  • $watch / $watchCollection count and deep-watch cost
  • One-time bindings (::) and one-way (<) bindings to reduce digest load
  • ng-repeat track by for stable, efficient list rendering
  • $sce / ng-bind-html sanitization and avoiding heavy filters in templates
  • Anti-patterns: manual $scope.$apply()/$timeout to force digests, DOM work in controllers

Step 6: JavaScript Standards Analysis

Goal: Evaluate minification-safe DI and JavaScript module hygiene. Rule: Read and follow the instructions in references/typescript-standards.md Focus Areas:

  • Minification-safe DI ($inject, inline array annotation, or ng-annotate)
  • IIFE wrapping + 'use strict'; module hygiene
  • JSHint/ESLint (Angular-aware) configuration and coverage of the source tree
  • No stray console.log; minimal eslint-disable/jshint ignore
  • No direct DOM/jQuery manipulation inside controllers/services

Step 7: Report Generation

Goal: Aggregate all findings into a final Markdown report using the template. Rules:

  • Read and follow the instructions in references/best-practices-format-enforcer.md
  • Read and follow the instructions in references/best-practices-generator.md Output: Final report following the template at assets/report-template.md

Rule Execution Order:

  1. references/testing-quality.md {model: mid}
  2. references/component-architecture.md {model: mid}
  3. references/hooks-patterns.md {model: mid}
  4. references/state-management.md {model: mid}
  5. references/performance.md {model: mid}
  6. references/typescript-standards.md {model: cheap}
  7. references/best-practices-generator.md {model: frontier}

Subagent Dispatch (in-session)

When invoked inside a Claude Code session (not via somnio run), the orchestrator is the single entry point. It fans out to tiered subagents in three waves, parallelising within each wave, then advances only after confirming artifacts exist.

Entry point: agents/orchestrator.md (model: mid)

Wave Plan

Wave Agent file Tier Reference / steps covered Artifact
1 agents/typescript-scanner.md cheap references/typescript-standards.md (scan portion) reports/.artifacts/angularjs-best-practices/step_01_javascript_scan.md
1 agents/architecture-scanner.md cheap references/component-architecture.md (enumeration) reports/.artifacts/angularjs-best-practices/step_02_architecture_scan.md
2 agents/testing-analyzer.md mid references/testing-quality.md reports/.artifacts/angularjs-best-practices/step_03_testing_quality.md
2 agents/architecture-analyzer.md mid references/component-architecture.md (consumes step_02) reports/.artifacts/angularjs-best-practices/step_04_architecture_analysis.md
2 agents/hooks-analyzer.md mid references/hooks-patterns.md reports/.artifacts/angularjs-best-practices/step_05_scope_binding_analysis.md
2 agents/state-analyzer.md mid references/state-management.md reports/.artifacts/angularjs-best-practices/step_06_state_analysis.md
2 agents/performance-analyzer.md mid references/performance.md reports/.artifacts/angularjs-best-practices/step_07_performance_analysis.md
3 agents/report-writer.md frontier references/best-practices-format-enforcer.md + references/best-practices-generator.md + all step artifacts reports/<YYYY-MM-DD>-<project>-angularjs-best-practices.md

Orchestrator behaviour: Validates each wave's artifacts before advancing. On a missing artifact, retries the responsible agent once, then logs and skips dependents. Hands the artifact manifest to the report-writer. Never reads source or writes prose.

Standards References

All standards are sourced from: agent-rules/rules/angularjs/ (somnio-ai-tools repo locally, or GitHub raw if installed standalone)

Standard File Purpose
testing.md Karma/Jasmine, angular-mocks, $httpBackend, AAA patterns
component-architecture.md Feature modules, .component()/controllerAs, directive design
scope-binding-patterns.md bindToController, isolate bindings, lifecycle hooks, $watch
state-management.md services/factories, $http/interceptors, $rootScope discipline
performance.md digest hygiene, one-way/one-time bindings, ng-repeat track by
javascript-standards.md minification-safe DI, IIFE + 'use strict', JSHint/ESLint

Report File Name (MANDATORY)

The report file name is always:

<YYYY-MM-DD>-<project>-angularjs-best-practices.md
  • <YYYY-MM-DD> — the date of this run.
  • <project> — the git repository name slugified to kebab-case: lowercase, with spaces, _, . and / turned into -, every other character dropped, and repeated - collapsed. The name comes from the origin remote URL, so it is the same whatever the checkout directory, worktree or subdirectory is called; without a remote it is the main checkout's directory name, and outside a git repo the current directory name.
  • The trailing segment is this skill's name and never changes.

Derive it once, before writing anything:

mkdir -p reports
REPO="$(git remote get-url origin 2>/dev/null | sed -E 's#/+$##; s#.*[/:]##; s#\.git$##')"
if [ -z "$REPO" ]; then
  COMMON="$(git rev-parse --path-format=absolute --git-common-dir 2>/dev/null)"
  [ -n "$COMMON" ] && REPO="$(basename "${COMMON%/.git}" .git)"
fi
[ -n "$REPO" ] || REPO="$(basename "$PWD")"
REPORT="reports/$(date +%F)-$(printf '%s' "$REPO" \
  | tr '[:upper:]' '[:lower:]' | tr ' _./' '-' \
  | sed -E 's/[^a-z0-9-]//g; s/-+/-/g; s/^-|-$//g')-angularjs-best-practices.md"

Everywhere this skill writes reports/<YYYY-MM-DD>-<project>-angularjs-best-practices.md, it means that resolved path.

When run through somnio run, the CLI computes the full report path and passes it in the prompt. Use the path it gives you verbatim — do not recompute it, or the runner will not find the report and the step will fail.

Report Metadata (MANDATORY)

Every generated report MUST include a metadata block at the very end. This is non-negotiable — never omit it.

Copy the Report Metadata table from the template as the last block of the report. Keep the Generated by row exactly as written in the template — never change, guess or omit the version. Fill the remaining rows as described.

Include this block at the very end of the report:

## Report Metadata

| Field | Value |
|-------|-------|
| Generated by | Somnio CLI v3.2.8 |
| Skill | angularjs-best-practices |
| Date | [YYYY-MM-DD] |
| Somnio AI Tools | https://github.com/somnio-software/somnio-ai-tools |