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:

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

Step 2: Apply Standards Based on Task

For Code Analysis Tasks:

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
Document all findings with locations and descriptions

For Test Analysis Tasks:

Use test-quality-standards.md to identify issues:
- Common test anti-patterns
- Framework compliance violations
- Mock management problems
- Coverage gaps
- Async handling issues
Document test quality findings

For Prioritization Tasks:

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
Consider contextual factors:
- Impact scope
- Technical debt interest
- Team context
- Risk assessment
Create prioritized work list

For Verification Tasks:

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
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:

[ ] All trigger criteria have been checked
[ ] Violations prioritized using framework
[ ] High priority items addressed
[ ] Compliance checklist completed
[ ] Build verification passed
[ ] Tests passing with adequate coverage
[ ] Lint and format checks passing
[ ] 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:

Build failures: Use npm-builder agent to diagnose and fix
Test failures: Review test output and fix broken tests
Coverage regressions: Add tests for uncovered code paths
Lint issues: Run npm run lint:fix for auto-fixable issues
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