ISA-Frontend/.claude/commands/quality.md

allowed-tools: Read, Write, Edit, Bash, Grep, Glob argument-hint: bundle | coverage [library-name] | --all description: Analyze code quality: bundle sizes, test coverage, with optimization recommendations

/quality - Code Quality Analysis

Comprehensive quality analysis including bundle sizes and test coverage.

Subcommands

• bundle - Analyze production bundle sizes
• coverage [library-name] - Test coverage analysis
• No argument - Run both analyses
• [library-name] - Coverage for specific library

Bundle Analysis

1. Run Production Build

# Clean previous build
rm -rf dist/

# Build for production
npm run build-prod

2. Analyze Bundle Output

# List bundle files with sizes
ls -lh dist/apps/isa-app/browser/*.js | awk '{print $9, $5}'

# Get total bundle size
du -sh dist/apps/isa-app/browser/

3. Identify Large Files

Parse build output and identify:

• Main bundle size
• Lazy-loaded chunk sizes
• Vendor chunks
• Files exceeding thresholds:
  • Warning: > 2MB
  • Error: > 5MB

4. Analyze Dependencies

# Check for duplicate dependencies
npm ls --depth=0 | grep -E "UNMET|deduped"

# Show largest node_modules packages
du -sh node_modules/* | sort -rh | head -20

5. Source Map Analysis (Optional)

# Install source-map-explorer if needed
npm install -g source-map-explorer

# Analyze main bundle
source-map-explorer dist/apps/isa-app/browser/main.*.js

6. Bundle Recommendations

If bundle > 2MB:

• Identify heavy dependencies to replace or remove
• Suggest lazy loading opportunities
• Check for unused imports

Code Splitting Opportunities:

• Large feature modules that could be lazy-loaded
• Heavy libraries that could be dynamically imported

Dependency Optimization:

• Replace large libraries with smaller alternatives
• Remove unused dependencies
• Use tree-shakeable imports

---

Coverage Analysis

1. Run Coverage Analysis

# Single library
npx nx test [library-name] --skip-nx-cache --coverage

# All libraries (if no library specified)
npm run ci # Runs all tests with coverage

2. Parse Coverage Report

Coverage output in: coverage/libs/[domain]/[layer]/[name]/

Extract metrics:

• Line coverage: % of executable lines tested
• Branch coverage: % of conditional branches tested
• Function coverage: % of functions called in tests
• Statement coverage: % of statements executed

3. Identify Uncovered Code

Parse coverage report to find:

• Uncovered files: Files with 0% coverage
• Partially covered files: < 80% coverage
• Uncovered lines: Specific line numbers not tested
• Uncovered branches: Conditional paths not tested

4. Categorize Coverage Gaps

Critical (High Risk):

• Service methods handling business logic
• Data transformation functions
• Error handling code paths
• Security-related functions
• State management store actions

Important (Medium Risk):

• Component public methods
• Utility functions
• Validators and guards

Low Priority:

• Getters/setters
• Simple property assignments

5. Generate Recommendations

For each coverage gap provide:

• File and line numbers
• Risk level (Critical/Important/Low)
• Suggested test type (unit/integration)
• Test approach (example test scenario)

---

Output Formats

Bundle Report

Bundle Analysis Report
======================

Total Size: X.XX MB [STATUS]
Main Bundle: X.XX MB
Largest Chunks:
  - chunk-name.js: X.XX MB

Largest Dependencies:
  1. dependency-name: X.XX MB

Recommendations:
  - [Prioritized action items]

Coverage Report

Coverage Summary for [library-name]
====================================

Line Coverage:     XX.X% (XXX/XXX lines)
Branch Coverage:   XX.X% (XXX/XXX branches)
Function Coverage: XX.X% (XXX/XXX functions)

Target: 80% (Recommended minimum)
Status: [Met/Below Target/Critical]

Files Needing Attention:
  [Categorized list with priorities]

Top Priority Tests to Add:
  [Prioritized recommendations]

Error Handling

• Build failures: Show error and suggest fixes
• Missing tools: Offer to install (source-map-explorer)
• No coverage data: Ensure --coverage flag used
• Missing library: Verify library name is correct

References

• CLAUDE.md Build Configuration section
• docs/guidelines/testing.md
• Angular build optimization: https://angular.dev/tools/cli/build
• Vitest coverage: https://vitest.dev/guide/coverage