frontend_mastery
Advanced React patterns, performance optimization, and state management rules.
Best use case
frontend_mastery is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Advanced React patterns, performance optimization, and state management rules.
Teams using frontend_mastery should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/frontend_mastery/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend_mastery Compares
| Feature / Agent | frontend_mastery | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Advanced React patterns, performance optimization, and state management rules.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Frontend Mastery Protocol (React + Vite + Tailwind)
## 1. Performance "Pro" Checklist
**Before submitting any UI component, verify:**
- [ ] **Re-renders**: Are we re-rendering unnecessarily? Use `React.memo` or `useCallback` for stable props.
- [ ] **Lazy Loading**: Are strict routes lazy-loaded? (`React.lazy`)
- [ ] **Image Optimization**: Are images using proper formats (WebP/AVIF) and `loading="lazy"`?
- [ ] **Zustand Selectors**: Are we selecting _only_ what we need?
- ❌ `const { user, token } = useAuthStore()`
- ✅ `const user = useAuthStore((s) => s.user)`
- [ ] **Bundle Size**: Did we import a huge library for one function? (e.g. import `lodash` vs `lodash/debounce`)
## 2. State Management Rules (Zustand + React Query)
- **Server State**: MUST use `React Query`.
- NEVER store server data in global Zustand store manually (unless caching for UI sync).
- Use `staleTime` and `cacheTime` appropriately.
- **Client State**: Use `Zustand` for global, `useState` for local.
- Avoid "Prop Drilling" > 2 levels. Use Context or Zustand.
## 3. Architectectural Patterns
- **Container/Presenter**: Separate logic (Hooks) from View (JSX).
- Complex components should have a custom hook (e.g., `useComponentLogic.ts`).
- **Composition**: Use `children` prop instead of passing components as props where possible.
- **Custom Hooks**: Extract reusable logic immediately. `useBoolean`, `useToggle`, etc.
## 4. Code Quality & Formatting
- **Naming**: `use[Action]` for hooks, `handle[Event]` for handlers.
- **CSS (Tailwind)**:
- Group layout (`flex`, `grid`) first, then spacing, then visual (`bg`, `text`).
- Use `clsx` or `tailwind-merge` for conditional classes.
- NO inline styles (`style={{}}`) except for dynamic coordinates.
## 6. Error Boundaries
- Critical UI parts MUST have an `<ErrorBoundary>`.
- Async components (Suspense) must handle loading states gracefully.Related Skills
gemini-frontend-design
Create distinctive, production-grade frontend interfaces using Gemini 3 Pro for design ideation. Use this skill when you want Gemini's creative perspective on web components, pages, or applications. Generates bold, polished code that avoids generic AI aesthetics.
frontend
Apply distinctive frontend design to React + TailwindCSS apps. Use when building UI components, pages, or improving visual design. Breaks generic "AI slop" patterns.
frontend-web-dev-expert
Advanced frontend web development expert system that provides comprehensive modern web development services including architecture design, UI/UX implementation, performance optimization, engineering setup, and cross-platform development through expert collaboration and intelligent tool integration.
frontend-ui-tailwind-standards
Standardized guidelines and patterns for Frontend Ui Tailwind Standards.
frontend-ui
Create aesthetically pleasing, visually distinctive frontend UIs using research-backed prompting strategies from Anthropic's frontend aesthetics cookbook
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces...
frontend-ui-animator
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".
frontend-svelte
Technical knowledge for SvelteKit 5 development. Build reactive applications with Svelte's compile-time magic. Expert in SvelteKit, stores, and reactive patterns. Activate for Svelte development, performance optimization, or modern web apps. This skill provides MCP usage patterns and Svelte 5 conventions. Use when implementing Svelte components or SvelteKit routes.
frontend-specialist
Master of UI/UX, React, TypeScript, and modern CSS.
frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a...
frontend-shadcn
Frontend development using Vite + React + shadcn/ui + Tailwind CSS + React Router v7. Use when creating new frontend projects, adding UI components, implementing routing, styling with Tailwind, or working with shadcn/ui component library.
frontend-security-coder
Expert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns.