---
title: "Frontend Skills"
description: "React, components, design systems, animations, responsive patterns."
canonical: "https://orchestkit.yonyon.ai/docs/skills/by-category/frontend"
---

# Frontend Skills

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 app screenshots, live URLs, or screen recordings using Google Stitch — color palettes, typogr... |
| [Design Stylecards](/docs/reference/skills/design-stylecards) | Command | low | Declarative catalog of named aesthetic recipes — exact shadow stacks, glass surfaces, gradient treatments, and type s... |
| [Design System Tokens](/docs/reference/skills/design-system-tokens) | Reference | medium | Design token management with the W3C Design Token spec, three-tier hierarchy (global/alias/component), OKLCH color, S... |
| [Design To Code](/docs/reference/skills/design-to-code) | Command | complex | Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP. Accepts a screenshot, a description, o... |
| [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 — one JSON spec produces React web, Next.js, React Native, Ink terminal UIs,... |
| [Performance](/docs/reference/skills/performance) | Reference | high | Performance optimization patterns covering Core Web Vitals, React render optimization, lazy loading, image optimizati... |
| [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 | Reference for the Storybook MCP server itself (@storybook/addon-mcp): 6 tools across 3 toolsets (dev, docs, testing),... |
| [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)