skills.rest
ArdurAI
ArdurAIOFFICIAL
Explore all skills by this author →
GitHub

god-frontend-mastery

Provide expert guidance on React, TypeScript, and modern frontend engineering.

1|Updated Apr 23, 2026
Search Tags:#testing#accessibility#React#TypeScript#performance optimization#frontend engineering#CSS architecture
One-click install
npx skills add https://github.com/ArdurAI/god-skill-suite --skill god-frontend-mastery
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: god-frontend-mastery
Source: https://github.com/ArdurAI/god-skill-suite/tree/main/skills/god-frontend-mastery
Command: npx skills add https://github.com/ArdurAI/god-skill-suite --skill god-frontend-mastery

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

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.

Frequently Asked Questions about god-frontend-mastery

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize React performance and improve Core Web Vitals?▼

Optimize React performance by analyzing bundles, implementing code splitting, and applying lazy loading to improve Core Web Vitals. This guidance covers using React 18 Concurrent Mode features like useTransition and useDeferredValue to reduce render blocking.

What is the best way to manage state in a modern React and TypeScript application?▼

State management in modern React applications can be handled using Zustand, Jotai, or Redux Toolkit with RTK Query. These solutions integrate seamlessly with advanced TypeScript features like mapped types and conditional types for strictly typed data flows.

How do I set up a micro-frontend architecture using Webpack 5 Module Federation?▼

Set up micro-frontends using Webpack 5 Module Federation to enable independent deployment and runtime integration. This approach is supported by monorepo tooling like Turborepo and Nx to manage large codebases and streamline builds.

Do I need prior TypeScript experience to implement advanced CSS architecture and PWAs?▼

Prior TypeScript and modern web development experience is required. Advanced CSS architecture involving Tailwind CSS and Container Queries, alongside PWA implementation using Service Workers, builds upon foundational React and TypeScript knowledge.

Which testing tools should I use for React 18 components and end-to-end accessibility?▼

Use Vitest or Jest with React Testing Library for component testing, MSW for API mocking, and Playwright for end-to-end testing. Accessibility testing ensures WCAG 2.2 and ARIA compliance for accessible web applications.

Why should I use Web Workers for CPU-heavy tasks in a Progressive Web App?▼

Use Web Workers for CPU-heavy tasks in a Progressive Web App to prevent main thread blocking and maintain UI responsiveness. This pairs with WebSockets for real-time communication and Service Workers for Background Sync capabilities.

Related Skills

Explore More Software Engineering Skills→
pingqLINpingqLIN

tanstack-start-shadcn-tailwind

Guide TanStack Start, Shadcn/ui, and Tailwind CSS application development.

Community
Intermediate
7a336e6e7a336e6e
1

bundling-frontend

Configure Vite for optimized production builds with code splitting and tree-shaking.

Community
Intermediate
CenredJunCenredJun

performance-profiling

Profile Node.js, browser, React, and database performance to rank bottlenecks.

Community
Advanced
ccfccf

monorepo-management

Configure pnpm workspaces and Turborepo or Nx pipelines for monorepos.

Community
Advanced