god-frontend-mastery

What problem does it solve?

This Skill provides expert-level guidance for modern frontend engineering, covering React, TypeScript, performance optimization, CSS architecture, testing, accessibility, WebSockets, Web Workers, Progressive Web Apps, micro-frontends, monorepo tooling, build systems, animation, and debugging.

Core Features & Use Cases

• React 18+ Fundamentals: Deep dive into React 18 features like Concurrent Mode, useTransition, and useDeferredValue.
• TypeScript Deep Types: Explore advanced TypeScript features like mapped types, conditional types, and template literal types.
• State Management Deep Dive: Understand Zustand, Jotai, Redux Toolkit, and RTK Query for state management.
• Performance Optimization: Learn to optimize Core Web Vitals, bundle analysis, code splitting, and lazy loading.
• CSS Architecture: Master Tailwind CSS, CSS Modules, and Container Queries.
• Testing: Cover Vitest, Jest, React Testing Library, MSW, and Playwright for testing.
• Accessibility: Implement WCAG 2.2 and ARIA for accessible web applications.
• WebSockets and Web Workers: Utilize WebSockets for real-time communication and Web Workers for CPU-heavy tasks.
• Progressive Web Apps (PWA): Build PWA with Service Workers and Background Sync.
• Micro-Frontends: Implement micro-frontends with Webpack 5 Module Federation.
• Monorepo Tooling: Use Turborepo and Nx for managing large codebases.
• Build Systems: Configure Vite and esbuild for efficient builds.
• Animation: Explore Framer Motion and GSAP for web animations.
• Debugging: Use React DevTools Profiler and Chrome Performance Tab for debugging.
• Anti-Hallucination Protocol: Follow a strict protocol to ensure accurate API usage and documentation verification.

Quick Start

Load the god-frontend-mastery skill to gain access to expert-level frontend engineering resources, tutorials, and best practices.