frontend-web-dev-skill_skill

Overview

This skill is an advanced frontend web development expert system that coordinates specialized experts, modern tooling, and proven workflows to deliver production-grade web applications. It covers architecture design, UI/UX implementation, performance optimization, engineering setup, testing, and cross-platform strategies. The system emphasizes accessibility, scalability, and measurable performance improvements.

How this skill works

The skill orchestrates role-based experts (Frontend Architect, UI/UX Engineer, Performance Expert, Engineering Expert, Modern Technologies Expert) across defined phases: requirements, architecture, component development, optimization, testing, and deployment. It combines automated tools, component generation, CI/CD configuration, and performance monitoring to produce repeatable deliverables like architecture docs, design systems, optimized bundles, and test suites. Outputs include concrete implementation plans, production-ready components, and monitoring pipelines.

When to use it

• Starting a new single-page application or major frontend rewrite
• Designing a scalable component system and architecture for growth
• Improving Core Web Vitals and loading/runtime performance
• Establishing frontend tooling, CI/CD, and quality automation
• Converting a site into a Progressive Web App with offline support
• Creating an enterprise design system and component library

Best practices

• Perform a requirements-driven framework selection (trade-offs documented)
• Design components with accessibility and reusability as first-class goals
• Apply code splitting, lazy loading, and caching strategies for performance
• Enforce code quality with TypeScript strict mode, ESLint, and automated tests
• Integrate CI/CD with automated accessibility, visual, and performance checks
• Use monitoring and performance budgets to prevent regressions

Example use cases

• Build a modern React + TypeScript app optimized for accessibility and Core Web Vitals
• Refactor an e-commerce frontend to reduce TTFB and improve mobile UX
• Implement a PWA with service workers, offline caching, and background sync
• Create an enterprise design system with tokens, Storybook docs, and adoption plan
• Set up end-to-end testing, visual regression, and CI pipelines for a large team