Frontend and design skills
Web and UI work: React, CSS, design systems, accessibility and visual design.
184 listed skills in this category, of 2,274 in the directory.
Skills in Frontend and design
next-bundle-optimizer
Audits Next.js applications to identify and reduce browser bundle size and initial-load work by analyzing routes, dependencies and client outputs.
by VercelOfficial publisher
Claude Code, Codex, Cursor +4 · about 2.3K tokens · pinned 6 days ago
next-cache-components-optimizer
Optimize Next.js routes to display meaningful UI instantly on initial load or client navigation by encoding the optimization goal as a failing…
by VercelOfficial publisher
Claude Code, Codex, Cursor +4 · about 5.6K tokens · pinned 6 days ago
next-partial-prefetching-adoption
Enables Partial Prefetching in Next.js 16.3+ apps and guides adoption through auditing Link prefetch behavior, preserving UI in tests or manually, and…
by VercelOfficial publisher
Claude Code, Codex, Cursor +4 · about 6.7K tokens · pinned 6 days ago
remotion-interactivity
This skill teaches how to structure Remotion code so the Studio IDE recognizes and makes it interactive.
by RemotionOfficial publisher
Claude Code, Codex, Cursor +3 · about 2.4K tokens · pinned 6 days ago
remotion-interactivity
This skill teaches how to structure Remotion video components to unlock Studio interactivity features like click selection, drag-and-drop, resizing, rotation…
by RemotionOfficial publisher
Claude Code, Codex, Cursor +3 · about 4.8K tokens · pinned 6 days ago
remotion-maps
This skill enables creating map-based animations with Remotion using four different mapping libraries: Mapbox, MapLibre, MapTiler, or CesiumJS.
by RemotionOfficial publisher
Contains scripts
Claude Code, Codex, Cursor +3 · about 240 tokens · pinned 6 days ago
remotion-maps
This skill provides techniques for creating map animations in Remotion videos.
by RemotionOfficial publisher
Contains scripts
Claude Code, Codex, Cursor +3 · about 240 tokens · pinned 6 days ago
remotion-saas
This skill helps build video generation applications using Remotion, a React framework for programmatic video creation.
by RemotionOfficial publisher
Claude Code, Codex, Cursor +3 · about 240 tokens · pinned 6 days ago
brand-style
This skill lets owners set and update their brand colors, logo, and output format preferences once during setup or anytime afterward.
by AnthropicOfficial publisher
Claude Code, Codex, Cursor +4 · about 1.1K tokens · pinned 6 days ago
react-email
React Email lets agents build HTML email templates as React components and render them to HTML or plain text.
by ResendOfficial publisher
Claude Code, Codex, Cursor +4 · about 3.4K tokens · pinned 6 days ago
apollo-client
This skill guides building React applications with Apollo Client 4.x for managing GraphQL queries, mutations, and state.
by Apollo GraphQLOfficial publisher
Claude Code, Codex, Cursor +4 · about 1.7K tokens · pinned 6 days ago
huggingface-gradio
Gradio is a Python library for building interactive web UIs and ML demonstrations.
by Hugging FaceOfficial publisher
Claude Code, Codex, Cursor +4 · about 6.1K tokens · pinned 6 days ago
stitch::code-to-design
This skill converts existing frontend code (React, Vue, Angular, etc.) into a Stitch Design by extracting HTML, analyzing design systems, and uploading both…
by GoogleOfficial publisher
Claude Code, Codex, Cursor +4 · about 760 tokens · pinned 6 days ago
stitch::extract-design-md
Extracts a comprehensive design system document (DESIGN.md) by analyzing frontend source code including component files, stylesheets, Tailwind configs, and…
by GoogleOfficial publisher
Claude Code, Codex, Cursor +4 · about 3.3K tokens · pinned 6 days ago
stitch::extract-static-html
This skill extracts a self-contained static HTML file from a running web application or React components by inlining all CSS and images as base64 data.
by GoogleOfficial publisher
Contains scripts
Claude Code, Codex, Cursor +3 · about 2.6K tokens · pinned 6 days ago
stitch::upload-to-stitch
This skill uploads local assets like images, HTML files, and markdown documents to a Stitch project via a Python script, bypassing MCP tool base64 encoding…
by GoogleOfficial publisher
Contains scripts
Claude Code, Codex, Cursor +3 · about 950 tokens · pinned 6 days ago
remotion-interactivity
This skill teaches how to structure Remotion video markup to make it interactive in Remotion Studio, enabling clicking, dragging, resizing, rotating, and…
by RemotionOfficial publisher
Claude Code, Codex, Cursor +3 · about 4.6K tokens · pinned 6 days ago
remotion-maps
This skill provides multiple map animation techniques for Remotion videos, supporting static maps, Mapbox, MapLibre, MapTiler, and CesiumJS.
by RemotionOfficial publisher
Contains scripts
Claude Code, Codex, Cursor +3 · about 240 tokens · pinned 6 days ago
kumo-design
Provides design rules for Cloudflare dashboard interfaces and Kumo UI components, covering text sizing, typography, spacing, borders, icons, animations, and…
by CloudflareOfficial publisher
Claude Code, Codex, Cursor +4 · about 1.5K tokens · pinned 6 days ago
customizing-statusline
This skill creates and edits the Letta Code statusline, a customizable panel at the top of the editor UI that displays agent and model info.
by LettaOfficial publisher
Claude Code, Codex, Cursor +4 · about 790 tokens · pinned 6 days ago
frontend-design
This skill builds production-grade frontend interfaces and web components with distinctive, intentional design aesthetics.
by SnykOfficial publisher
Claude Code, Codex, Cursor +4 · about 990 tokens · pinned 6 days ago
web-artifacts-builder
This skill enables building complex React artifacts for Claude with React 18, TypeScript, Vite, Tailwind CSS, and shadcn/ui components.
by SnykOfficial publisher
Contains scripts
Claude Code, Codex, Cursor +3 · about 670 tokens · pinned 6 days ago
web-perf
Audits website performance by analyzing Core Web Vitals, Lighthouse scores, network requests, and trace data using Chrome DevTools.
by CloudflareOfficial publisher
Claude Code, Codex, Cursor +4 · about 2K tokens · pinned 6 days ago
expo-design-system
Establishes design-system conventions for Expo apps by organizing design tokens (colors, spacing, typography, radius, shadows, motion) in a theme folder…
by ExpoOfficial publisher
Claude Code, Codex, Cursor +3 · about 4.6K tokens · pinned 6 days ago
figma-code-connect
Creates and maintains Figma Code Connect template files (.figma.ts) that map Figma components to code snippets for design-to-code translation.
by FigmaOfficial publisher
Claude Code · about 6.5K tokens · pinned 6 days ago
figma-design-to-code
This skill provides the agent with detailed procedures for converting Figma designs into code.
by FigmaOfficial publisher
Claude Code · about 860 tokens · pinned 6 days ago
figma-generate-design
Builds or updates multi-section Figma layouts like pages, modals, and sidebars by reusing published design system components, variables, and styles instead of…
by FigmaOfficial publisher
Claude Code · about 6.9K tokens · pinned 6 days ago
figma-generate-design
This skill builds or updates full-page screens, modals, dialogs, drawers, sidebars, and other multi-section views in Figma by discovering and reusing…
by FigmaOfficial publisher
Claude Code · about 8.9K tokens · pinned 6 days ago
figma-generate-library
Orchestrates multi-phase design system builds in Figma from code.
by FigmaOfficial publisher
Contains scripts
Claude Code · about 5.8K tokens · pinned 6 days ago
figma-generate-library
Builds or updates professional design systems in Figma from code by creating variables, tokens, components with variants, semantic aliases, and documentation.
by FigmaOfficial publisher
Contains scripts
Claude Code · about 5.9K tokens · pinned 6 days ago
figma-generative-plugins
This skill enables creating and updating generative plugins for Figma's Design editor.
by FigmaOfficial publisher
Claude Code · about 1.1K tokens · pinned 6 days ago
figma-implement-motion
Translates Figma animations into production-ready code by fetching motion data and design structure, then merging animated nodes into the codebase using…
by FigmaOfficial publisher
Claude Code · about 5.7K tokens · pinned 6 days ago
figma-shaders
This skill enables agents to create and update shader effects and fills in Figma through the MCP server.
by FigmaOfficial publisher
Claude Code · about 1.3K tokens · pinned 6 days ago
figma-use
This skill provides the Figma Plugin API and builder patterns (`$fig`) for agents to execute JavaScript operations in Figma files.
by FigmaOfficial publisher
Contains scripts
Claude Code · about 6.6K tokens · pinned 6 days ago
figma-use
This skill provides the JavaScript Plugin API reference and critical rules for executing code in Figma files.
by FigmaOfficial publisher
Contains scripts
Claude Code · about 8.3K tokens · pinned 6 days ago
figma-use-motion
This skill adds motion and animation capabilities to Figma node editing, enabling the agent to create and modify keyframe animations, apply animation styles…
by FigmaOfficial publisher
Claude Code · about 1.6K tokens · pinned 6 days ago
video-interaction-mapper
This skill extracts key UI states from screen recordings and builds an annotated Figma storyboard.
by FigmaOfficial publisher
Contains scripts
Claude Code, Codex, Cursor +3 · about 3K tokens · pinned 6 days ago
create-site
Guides users through building a complete Power Pages code site using React, Angular, Vue, or Astro, from initial requirements discovery through deployment.
by MicrosoftOfficial publisher
Contains scripts
Claude Code · about 29.1K tokens · pinned 6 days ago
design-system
Generates a complete design system for Expo/React Native Power Apps mobile apps, producing design-system.md specification, tokens.ts for Tamagui import, and…
by MicrosoftOfficial publisher
Claude Code · about 7.4K tokens · pinned 6 days ago
exceptional-web-design
Reviews an existing Power Pages site from a live URL or project folder and provides design recommendations without making changes.
by MicrosoftOfficial publisher
Claude Code · about 2.9K tokens · pinned 6 days ago
genpage
Creates, updates, and deploys generative pages in Microsoft Power Apps model-driven apps using React 17, TypeScript, and Fluent UI V9.
by MicrosoftOfficial publisher
Claude Code · about 16.1K tokens · pinned 6 days ago
sanity-live-cache-components
Integrates Sanity Live with Next.js Cache Components in next-sanity v13+ apps, setting up shared cached data fetching through sanityFetch, live content…
by SanityOfficial publisher
Claude Code, Codex, Cursor +4 · about 4K tokens · pinned 6 days ago
shopify-hydrogen
This skill provides cookbooks and recipes for building Shopify Hydrogen storefronts, including B2B commerce, bundles, subscriptions, and integrations.
by ShopifyOfficial publisher
Claude Code, Codex, Cursor +4 · about 69 tokens · pinned 6 days ago
shopify-liquid
This skill is deprecated and has been replaced by the shopify skill.
by ShopifyOfficial publisher
Claude Code, Codex, Cursor +4 · about 67 tokens · pinned 6 days ago
shopify-polaris-admin-extensions
This skill enables building custom actions and blocks for the Shopify Admin interface, including App Home UI extensions that render app landing pages natively.
by ShopifyOfficial publisher
Claude Code, Codex, Cursor +4 · about 81 tokens · pinned 6 days ago
shopify-polaris-app-home
This skill is deprecated.
by ShopifyOfficial publisher
Claude Code, Codex, Cursor +4 · about 75 tokens · pinned 6 days ago
shopify-polaris-customer-account-extensions
This skill is deprecated and no longer maintained.
by ShopifyOfficial publisher
Claude Code, Codex, Cursor +4 · about 89 tokens · pinned 6 days ago
shopify-pos-ui
This skill is deprecated and has been replaced by the shopify skill.
by ShopifyOfficial publisher
Claude Code, Codex, Cursor +4 · about 67 tokens · pinned 6 days ago