cui-frontend-development

What problem does it solve?

Frontend development often suffers from inconsistent coding styles, poor documentation, and inadequate testing, leading to maintainability issues and bugs. This Skill provides a comprehensive set of standards for JavaScript, CSS, Web Components, JSDoc, and Cypress, ensuring a unified, high-quality, and efficient frontend development process, so you can build beautiful UIs faster.

Core Features & Use Cases

• Modern JavaScript: Enforces ES2022+ syntax, vanilla JS preference, and strict complexity limits for clean, performant code.
• Structured CSS: Guides the use of CSS custom properties, Grid/Flexbox, BEM conventions, and Stylelint for maintainable styles.
• Lit Web Components: Standardizes component structure, property management, and CSS-in-JS for reusable UI elements.
• Comprehensive Testing: Provides Cypress E2E testing patterns with data-testid selectors and console error monitoring for robust quality assurance.
• Use Case: When developing a new user interface, use this skill to ensure your JavaScript adheres to modern best practices, your CSS is modular and responsive, your web components are well-structured, and your E2E tests provide reliable coverage, letting you focus on user experience.

Quick Start

Create New Web Component

1. Define component class extending LitElement
2. Add static styles with CSS-in-JS
3. Define properties with decorators
4. Implement render() method
5. Register with customElements.define()
6. Add JSDoc documentation
7. Write Cypress tests

Add E2E Test

1. Create test file in cypress/e2e/
2. Use data-testid for selectors
3. Test user workflows end-to-end
4. Verify console errors
5. Ensure test independence
6. Run: npm run cypress:run