Cui Javascript

JavaScript Development Standards

Overview

This skill provides comprehensive JavaScript development standards for CUI projects, covering modern JavaScript features (ES2022+), code quality practices, async programming patterns, and tooling configuration.

Prerequisites

To effectively use this skill, you should have:

• Modern JavaScript knowledge (ES2015+, ES modules, async/await)
• Understanding of JavaScript runtime environments (browser, Node.js)
• Experience with npm and JavaScript build tools

Standards Documents

This skill includes the following standards documents:

• javascript-fundamentals.md - ES modules, variables, functions, vanilla JavaScript preference, core patterns
• code-quality.md - Complexity limits, refactoring strategies, code organization, maintainability
• modern-patterns.md - Destructuring, template literals, spread/rest operators, object/array methods
• async-programming.md - Promises, async/await, error handling, concurrent operations
• tooling-guide.md - ESLint, Prettier, npm scripts, IDE integration, quality checks

What This Skill Provides

JavaScript Fundamentals

• ES Modules: Import/export syntax, module organization, circular dependency avoidance
• Variables: const/let best practices, no var usage, scope management
• Functions: Arrow functions vs regular functions, pure functions, higher-order functions
• Vanilla JavaScript: Preference for native APIs (fetch, DOM, etc.) over libraries

Code Quality

• Complexity Limits: Cyclomatic complexity (max 15), statement count (max 20)
• Refactoring Strategies: Extract methods, guard clauses, early returns
• Code Organization: Single Responsibility Principle, function size limits
• Maintainability: Clear naming, documentation, avoiding magic numbers

Modern Patterns

• Destructuring: Object and array destructuring patterns
• Template Literals: String interpolation, multi-line strings
• Spread/Rest: Object/array spreading, rest parameters
• Object/Array Methods: map, filter, reduce, find, destructive vs non-destructive

Async Programming

• Promises: Creation, chaining, error handling
• Async/Await: Modern async patterns, try/catch best practices
• Error Handling: Proper error propagation, custom errors
• Concurrent Operations: Promise.all, Promise.race, parallel execution

Tooling Guide

• ESLint: Configuration, rules, plugins
• Prettier: Code formatting, IDE integration
• npm Scripts: Development workflow, quality checks
• Build Pipeline: Development and production builds

When to Activate

This skill should be activated when:

1. JavaScript Development Tasks: Writing or modifying JavaScript code for CUI projects
2. Code Review: Reviewing JavaScript code for standards compliance
3. Refactoring: Improving code quality, reducing complexity
4. Modern Migration: Updating legacy JavaScript to modern patterns
5. Tooling Setup: Configuring ESLint, Prettier, or build tools
6. Async Operations: Implementing Promise-based or async/await code
7. Performance Optimization: Optimizing JavaScript execution

Workflow

When this skill is activated:

1. Understand Context

• Identify the specific JavaScript task or requirement
• Determine which standards documents are most relevant
• Check project-specific JavaScript configuration

2. Apply Standards

• Reference appropriate standards documents for guidance
• Follow ES module patterns for imports/exports
• Use const/let appropriately, avoid var
• Prefer vanilla JavaScript APIs over library dependencies
• Ensure functions meet complexity limits
• Apply modern patterns (destructuring, template literals, etc.)

3. Quality Assurance

• Run ESLint to check for rule violations
• Run Prettier to ensure consistent formatting
• Verify code meets complexity thresholds
• Test async operations for proper error handling
• Check for common anti-patterns

4. Documentation

• Document complex logic with clear comments
• Explain non-obvious patterns or workarounds
• Note any browser-specific considerations
• Update relevant documentation if adding new patterns

Tool Access

This skill provides access to JavaScript development standards through:

• Read tool for accessing standards documents
• Standards documents use Markdown format for compatibility
• All standards are self-contained within this skill
• Cross-references between standards use relative paths

Integration Notes

Related Skills

For comprehensive frontend development, this skill works with:

• CSS standards (cui-css skill)
• Testing standards (to be provided in separate skill)
• Web components standards (to be provided in separate skill)

Build Integration

JavaScript standards integrate with:

• npm for package management and scripts
• ESLint for linting and code quality
• Prettier for consistent formatting
• Maven frontend-maven-plugin for build automation

Quality Tools

JavaScript quality is enforced through:

• ESLint for linting and best practices
• Prettier for consistent formatting
• Jest or similar for unit testing
• Browser DevTools for debugging

Best Practices

When working with JavaScript in CUI projects:

1. Always use ES modules for imports/exports
2. Prefer const over let, never use var
3. Use vanilla JavaScript where possible (fetch, DOM methods, etc.)
4. Keep functions simple - max 15 cyclomatic complexity, max 20 statements
5. Use modern patterns - destructuring, template literals, spread/rest
6. Handle async properly - async/await with try/catch, Promise error handling
7. Document complex logic with clear comments
8. Run quality tools before committing (ESLint, Prettier)