---
title: "Frontend Skills"
description: "React, components, design systems, animations, responsive patterns."
---

# Frontend Skills

**21 skills** for react, components, design systems, animations, responsive patterns.

| Skill | Type | Complexity | Description |
|-------|------|------------|-------------|
| [Accessibility](/docs/reference/skills/accessibility) | Reference | medium | Accessibility patterns for WCAG 2.2 compliance, keyboard focus management, React Aria component patterns, cognitive i... |
| [Ai Ui Generation](/docs/reference/skills/ai-ui-generation) | Reference | medium | AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers p... |
| [Animation Motion Design](/docs/reference/skills/animation-motion-design) | Reference | medium | Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API. Use when... |
| [Component Search](/docs/reference/skills/component-search) | Command | simple | Search 21st.dev component registry for production-ready React components. Finds components by natural language descri... |
| [Design Context Extract](/docs/reference/skills/design-context-extract) | Command | medium | Extract design DNA from existing app screenshots or live URLs using Google Stitch. Produces color palettes, typograph... |
| [Design System Tokens](/docs/reference/skills/design-system-tokens) | Reference | medium | Design token management with W3C Design Token Community Group specification, three-tier token hierarchy (global/alias... |
| [Design To Code](/docs/reference/skills/design-to-code) | Command | complex | Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP. Accepts screenshots, descriptions, or ... |
| [Figma Design Handoff](/docs/reference/skills/figma-design-handoff) | Reference | medium | Figma-to-code design handoff patterns including Figma Variables to design tokens pipeline, component spec extraction,... |
| [I18n Date Patterns](/docs/reference/skills/i18n-date-patterns) | Reference | low | Implements internationalization (i18n) in React applications. Covers user-facing strings, date/time handling, locale-... |
| [Interaction Patterns](/docs/reference/skills/interaction-patterns) | Reference | medium | UI interaction design patterns for skeleton loading, infinite scroll with accessibility, progressive disclosure, moda... |
| [Json Render Catalog](/docs/reference/skills/json-render-catalog) | Reference | medium | json-render component catalog patterns for AI-safe generative UI. Define Zod-typed catalogs that constrain what AI ca... |
| [Multi Surface Render](/docs/reference/skills/multi-surface-render) | Reference | medium | Multi-surface rendering with json-render — same JSON spec produces React web, Next.js apps, React Native, Ink termina... |
| [Performance](/docs/reference/skills/performance) | Reference | high | Performance optimization patterns covering Core Web Vitals, React render optimization, lazy loading, image optimizati... |
| [Presentation Builder](/docs/reference/skills/presentation-builder) | Reference | medium | Creates zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when t... |
| [React Server Components Framework](/docs/reference/skills/react-server-components-framework) | Reference | medium | Use when building Next.js 16+ apps with React Server Components. Covers App Router, Cache Components (replacing exper... |
| [Responsive Patterns](/docs/reference/skills/responsive-patterns) | Reference | medium | Responsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic layouts, foldable devic... |
| [Storybook Mcp Integration](/docs/reference/skills/storybook-mcp-integration) | Reference | medium | Storybook MCP server integration for component-aware AI development. Covers 6 tools across 3 toolsets (dev, docs, tes... |
| [Storybook Testing](/docs/reference/skills/storybook-testing) | Reference | medium | Storybook 10 testing patterns with Vitest integration, ESM-only distribution, CSF3 typesafe factories, play() interac... |
| [Ui Components](/docs/reference/skills/ui-components) | Reference | medium | UI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, c... |
| [Vite Advanced](/docs/reference/skills/vite-advanced) | Reference | medium | Advanced Vite 8 patterns including Rolldown-powered builds, advancedChunks, Environment API, plugin development, SSR ... |
| [Zustand Patterns](/docs/reference/skills/zustand-patterns) | Reference | low | Reference for Zustand 5.x state management including slices, middleware, Immer, useShallow, persistence, selectors, a... |

## Related Agents

- [Accessibility Specialist](/docs/reference/agents/accessibility-specialist)
- [Component Curator](/docs/reference/agents/component-curator)
- [Design System Architect](/docs/reference/agents/design-system-architect)
- [Frontend Performance Engineer](/docs/reference/agents/frontend-performance-engineer)
- [Frontend Ui Developer](/docs/reference/agents/frontend-ui-developer)
