CUI JavaScript Maintenance Skill

REFERENCE MODE: This skill provides reference material. Load specific standards on-demand based on current task.

Standards for systematic JavaScript code maintenance including violation detection, prioritization frameworks, and compliance verification.

Purpose

This skill provides comprehensive standards for:

• •Detecting when code needs refactoring (trigger criteria)
• •Prioritizing maintenance work (impact-based framework)
• •Verifying standards compliance (comprehensive checklist)
• •Improving test quality (test standards and patterns)

When to Use This Skill

Activate this skill when:

Planning Maintenance Work:

• •Conducting code quality audits
• •Planning refactoring sprints
• •Identifying technical debt
• •Analyzing codebases for violations

During Refactoring:

• •Need trigger criteria for when to refactor
• •Need prioritization guidance
• •Verifying standards compliance after changes

Code Reviews:

• •Assessing code quality systematically
• •Identifying improvement opportunities
• •Validating maintenance work completeness

Test Quality Improvement:

• •Identifying test anti-patterns
• •Improving test coverage
• •Refactoring test code

Workflow

Step 1: Load Core Maintenance Standards

Load all four standards files (always loaded together):

Read: standards/refactoring-triggers.md
Read: standards/maintenance-prioritization.md
Read: standards/compliance-checklist.md
Read: standards/test-quality-standards.md

These standards work together as a complete maintenance framework:

1. •Triggers - Identify WHAT needs fixing (detection criteria)
2. •Prioritization - Decide WHEN to fix it (impact framework)
3. •Checklist - Verify fixes are COMPLETE (compliance verification)
4. •Test Quality - Ensure tests are EFFECTIVE (test standards)

Step 2: Apply Standards Based on Task

For Code Analysis Tasks:

1. •

   Use refactoring-triggers.md to scan for violations:

   • •Vanilla JavaScript enforcement opportunities
   • •Test/mock code in production files
   • •Modularization issues
   • •Package.json problems
   • •JSDoc gaps
2. •

   Document all findings with locations and descriptions

For Test Analysis Tasks:

1. •

   Use test-quality-standards.md to identify issues:

   • •Common test anti-patterns
   • •Framework compliance violations
   • •Mock management problems
   • •Coverage gaps
   • •Async handling issues
2. •

   Document test quality findings

For Prioritization Tasks:

1. •

   Use maintenance-prioritization.md to categorize findings:

   • •HIGH: Critical violations (security, bugs, fundamental design)
   • •MEDIUM: Maintainability issues (code quality, modernization)
   • •LOW: Style and speculative optimizations
2. •

   Consider contextual factors:

   • •Impact scope
   • •Technical debt interest
   • •Team context
   • •Risk assessment
3. •

   Create prioritized work list

For Verification Tasks:

1. •

   Use compliance-checklist.md to verify fixes:

   • •Work through each checklist section
   • •Mark compliant/non-compliant items
   • •Address all non-compliant findings
   • •Re-verify after fixes
   • •Document intentional deviations
2. •

   Execute build verification:

   • •Build: npm run build
   • •Tests: npm test
   • •Coverage: npm run test:coverage
   • •Lint: npm run lint
   • •Format: npm run format:check

Step 3: Load Implementation Standards (Optional)

When implementing fixes, load relevant implementation skills:

For code implementation:

Skill: pm-dev-frontend:cui-javascript

Provides actual implementation patterns for:

• •Core patterns and modern JavaScript
• •Vanilla JavaScript alternatives
• •ES modules and modern features

For linting work:

Skill: pm-dev-frontend:cui-javascript-linting

Provides ESLint configuration and rules.

For documentation work:

Skill: pm-dev-frontend:cui-jsdoc

Provides JSDoc standards and patterns.

For testing work:

Skill: pm-dev-frontend:cui-javascript-unit-testing

Provides Jest testing standards and patterns.

For E2E testing:

Skill: pm-dev-frontend:cui-cypress

Provides Cypress E2E testing standards.

Step 4: Report Findings

Provide structured output:

For Analysis:

Violations Found:
- HIGH Priority: [count] issues
  - [Category]: [specific violations]
- MEDIUM Priority: [count] issues
  - [Category]: [specific violations]
- LOW Priority: [count] issues
  - [Category]: [specific violations]

Recommended Actions:
1. Address HIGH priority items first
2. [Specific recommendations]

For Verification:

Compliance Verification Results:
✅ Vanilla JavaScript: Compliant
✅ Test Code Separation: Compliant
⚠️ Modularization: 3 files over 400 lines
⚠️ Package.json: 5 outdated dependencies
✅ JSDoc Coverage: Compliant
...

Next Steps:
- Fix identified non-compliant items
- Re-run verification

Common Patterns and Examples

Pattern 1: Code Quality Audit

## Step 1: Load Maintenance Standards
Skill: cui-javascript-maintenance

## Step 2: Analyze Codebase
Use Grep/Glob to scan for violations based on trigger criteria:
- Search for jQuery usage: $ function calls
- Search for test imports in production files
- Check for missing package.json scripts
- Identify files > 400 lines

## Step 3: Categorize and Prioritize
Apply prioritization framework:
- Security issues → HIGH
- Test code in production → HIGH
- Large files → MEDIUM
- Missing scripts → MEDIUM

## Step 4: Create Action Plan
Generate prioritized list of fixes needed.

Pattern 2: Refactoring Verification

## Step 1: Load Maintenance Standards
Skill: cui-javascript-maintenance

## Step 2: Apply Compliance Checklist
Work through checklist for modified files:
- Vanilla JavaScript ✅
- Test Code Separation ✅
- Modularization ⚠️ (2 files still large)
- Package.json ✅
- JSDoc Coverage ✅

## Step 3: Fix Non-Compliant Items
Split large files to comply with standards.

## Step 4: Re-Verify
Run through checklist again and verify build passes.

Pattern 3: File-by-File Maintenance

## Step 1: Load Maintenance Standards
Skill: cui-javascript-maintenance

## Step 2: For Each File
1. Apply trigger criteria to identify violations
2. Prioritize using framework
3. Implement fixes using cui-javascript
4. Verify using compliance checklist
5. Commit file changes

## Step 3: Final Verification
Verify all files pass build and tests.

Pattern 4: Test Quality Improvement

## Step 1: Load Maintenance Standards
Skill: cui-javascript-maintenance

## Step 2: Analyze Test Files
Use test-quality-standards.md to identify:
- Overly complex setup
- Missing async handling
- Hardcoded test data
- DOM cleanup issues

## Step 3: Prioritize Improvements
Focus on business logic tests first.

## Step 4: Apply Test Patterns
Use test-quality-standards.md patterns to refactor.

## Step 5: Verify Coverage
Ensure coverage maintained or improved.

Integration with Commands

This skill is designed to be used by:

/js-refactor-code command:

• •Loads this skill for detection, prioritization, and verification
• •Orchestrates systematic refactoring workflow
• •Uses trigger criteria to identify issues
• •Uses prioritization to order work
• •Uses checklist to verify completeness

/js-maintain-tests command:

• •Loads this skill for test quality improvement
• •Uses test-quality-standards.md for detection
• •Uses prioritization for test work ordering
• •Ensures no production code changes

Other maintenance commands:

• •Any command performing code quality work
• •Automated refactoring commands
• •Code review automation

Relationship with Other Skills

Complementary Skills

cui-javascript - Implementation standards:

• •This skill identifies WHAT needs fixing
• •cui-javascript provides HOW to implement fixes

cui-jsdoc - Documentation standards:

• •This skill detects documentation gaps
• •cui-jsdoc provides documentation patterns

cui-javascript-unit-testing - Testing standards:

• •This skill identifies testing needs
• •cui-javascript-unit-testing provides testing patterns

cui-javascript-linting - Linting standards:

• •This skill detects linting violations
• •cui-javascript-linting provides ESLint configuration

cui-cypress - E2E testing standards:

• •This skill identifies E2E test quality issues
• •cui-cypress provides E2E testing patterns

Clear Separation of Concerns

This skill (cui-javascript-maintenance):

• •✅ Detection criteria (WHEN to refactor)
• •✅ Prioritization framework (WHAT order)
• •✅ Verification checklist (HOW to verify)
• •✅ Test quality standards (HOW to test)
• •❌ Implementation patterns (see cui-javascript)
• •❌ Workflow orchestration (see /js-refactor-code command)

Implementation skills (cui-javascript, etc.):

• •✅ Implementation patterns (HOW to implement)
• •✅ Code examples and templates
• •✅ Best practices for writing code
• •❌ Detection criteria
• •❌ Prioritization decisions

Standards Organization

standards/
├── refactoring-triggers.md          # Detection criteria
├── maintenance-prioritization.md    # Priority framework
├── compliance-checklist.md          # Verification checklist
└── test-quality-standards.md        # Test quality standards

Design principles:

• •Self-contained standards (no external references except URLs)
• •Markdown format for compatibility
• •Practical examples included
• •Clear decision guidance
• •Agent-friendly structure

Quality Verification

Before completing maintenance work:

1. • All trigger criteria have been checked
2. • Violations prioritized using framework
3. • High priority items addressed
4. • Compliance checklist completed
5. • Build verification passed
6. • Tests passing with adequate coverage
7. • Lint and format checks passing
8. • Deviations documented with rationale

Example Usage

In a Command

---
name: my-maintenance-command
---

## Step 1: Load Maintenance Standards

Skill: cui-javascript-maintenance

This loads refactoring triggers, prioritization framework, compliance checklist, and test quality standards.

## Step 2: Analyze Code

Apply trigger criteria from refactoring-triggers.md to identify violations.

## Step 3: Prioritize Work

Use maintenance-prioritization.md to order fixes by impact.

## Step 4: Implement Fixes

For implementation patterns, load cui-javascript or other implementation skills.

## Step 5: Verify Compliance

Use compliance-checklist.md to verify all standards met.

In an Agent

## Maintenance Analysis Agent

### Step 1: Load Standards

Read: standards/refactoring-triggers.md Read: standards/maintenance-prioritization.md

### Step 2: Scan Codebase
Apply trigger criteria to identify all violations.

### Step 3: Apply Prioritization
Use prioritization framework to categorize findings.

### Step 4: Report Results
Return structured analysis with prioritized action items.

Error Handling

If issues arise during maintenance:

1. •Build failures: Use npm-builder agent to diagnose and fix
2. •Test failures: Review test output and fix broken tests
3. •Coverage regressions: Add tests for uncovered code paths
4. •Lint issues: Run npm run lint:fix for auto-fixable issues
5. •Ambiguous violations: Ask user for guidance on priority

References

Internal Standards:

• •standards/refactoring-triggers.md - Detection criteria
• •standards/maintenance-prioritization.md - Priority framework
• •standards/compliance-checklist.md - Verification checklist
• •standards/test-quality-standards.md - Test quality standards

Related Skills:

• •cui-javascript - Core implementation patterns
• •cui-jsdoc - Documentation standards
• •cui-javascript-unit-testing - Testing standards
• •cui-javascript-linting - Linting standards
• •cui-cypress - E2E testing standards

Related Commands:

• •/js-refactor-code - Systematic refactoring workflow
• •/js-maintain-tests - Test quality improvement workflow
• •/javascript-coverage-report - Coverage analysis