By Category
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 | Reference | medium | Accessibility patterns for WCAG 2.2 compliance, keyboard focus management, React Aria component patterns, cognitive i... |
| 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 | Reference | medium | Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API. Use when... |
| Component Search | Command | simple | Search 21st.dev component registry for production-ready React components. Finds components by natural language descri... |
| 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 | Reference | medium | Design token management with W3C Design Token Community Group specification, three-tier token hierarchy (global/alias... |
| Design To Code | Command | complex | Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP. Accepts screenshots, descriptions, or ... |
| Figma Design Handoff | Reference | medium | Figma-to-code design handoff patterns including Figma Variables to design tokens pipeline, component spec extraction,... |
| I18n Date Patterns | Reference | low | Implements internationalization (i18n) in React applications. Covers user-facing strings, date/time handling, locale-... |
| Interaction Patterns | Reference | medium | UI interaction design patterns for skeleton loading, infinite scroll with accessibility, progressive disclosure, moda... |
| 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 | Reference | medium | Multi-surface rendering with json-render — same JSON spec produces React web, Next.js apps, React Native, Ink termina... |
| Performance | Reference | high | Performance optimization patterns covering Core Web Vitals, React render optimization, lazy loading, image optimizati... |
| 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 | Reference | medium | Use when building Next.js 16+ apps with React Server Components. Covers App Router, Cache Components (replacing exper... |
| Responsive Patterns | Reference | medium | Responsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic layouts, foldable devic... |
| 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 | Reference | medium | Storybook 10 testing patterns with Vitest integration, ESM-only distribution, CSF3 typesafe factories, play() interac... |
| Ui Components | Reference | medium | UI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, c... |
| Vite Advanced | Reference | medium | Advanced Vite 8 patterns including Rolldown-powered builds, advancedChunks, Environment API, plugin development, SSR ... |
| Zustand Patterns | Reference | low | Reference for Zustand 5.x state management including slices, middleware, Immer, useShallow, persistence, selectors, a... |
Related Agents
Backend Skills
API design, databases, Python, async patterns, distributed systems.
Testing Skills
Unit, integration, E2E, performance, and LLM testing patterns.
Edit on GitHub
Last updated on