web-frontend-development

What problem does it solve?

This Skill provides a comprehensive framework and best practices for building modern, high-performance, and secure web-frontend applications, ensuring cross-browser compatibility and maintainability.

Core Features & Use Cases

• Technology Stack Guidance: Recommends and demonstrates modern tools like React, Vue, TypeScript, and Vite.
• Component Development Patterns: Offers examples for building reusable UI components in React, Vue, and Web Components.
• State Management Solutions: Details patterns for Context API, Zustand, and Redux Toolkit.
• API Integration: Shows how to effectively integrate with backend services using Fetch API, React Query, and WebSockets.
• Responsive Design: Employs mobile-first strategies and modern CSS techniques like Flexbox, Grid, and Container Queries.
• Performance Optimization: Covers code splitting, lazy loading, image optimization, and memoization.
• Security Best Practices: Includes guidance on XSS prevention, CSP, secure authentication, and input validation.
• Testing Strategies: Outlines unit, integration, and E2E testing with Vitest and Playwright.
• Use Case: Develop a new customer-facing dashboard for a SaaS product, ensuring it is fast, secure, responsive across devices, and easy to maintain.

Quick Start

Use the web-frontend-development skill to create a new React + TypeScript project using Vite.