Auto-invoked
Claude Code Frontend skills :)
Flowy lists 389 skills in the Frontend category for Claude Code, across 63 plugins. A skill is a folder of instructions an agent loads while you work. Every one here shows what is inside before you install, who wrote it, and whether it is Auto-invoked, meaning a FLOW.md router fires it as you prompt.
Auto-invoked
Auto-invoked
migrate-radix-to-base
Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert…
@shadcn-uiInstall Skillshadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat…
@shadcn-uiInstall Skill
Auto-invoked
taste-skill
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One…
@leonxlnxInstall Skill
component-docs
Look up the components of a project with Storybook, with their props and usage examples, to answer questions about them or to…
@storybookjsInstall Skillinit
Use when adding Storybook to a project that does not have Storybook configured yet.
@storybookjsInstall Skillsetup
Use this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components.
@storybookjsInstall Skill
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing…
@chakra-uiInstall Skillchakra-ui-migrate
Migrate Chakra UI projects from v2 to v3, covering package changes, codemods, provider setup, color mode, prop renaming, compound…
@chakra-uiInstall Skillchakra-ui-refactor
Review, convert, and improve UI code using Chakra UI v3. Use this skill whenever a user wants to review Chakra UI code for…
@chakra-uiInstall Skill
heroui-migration
HeroUI v2 to v3 migration guide for agents. Use when migrating HeroUI v2 apps to v3, upgrading components, or accessing migration…
@heroui-incInstall Skillheroui-native
HeroUI Native component library for React Native (Tailwind v4 via Uniwind). Use when building mobile UIs with HeroUI Native —…
@heroui-incInstall Skillheroui-react
HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals,…
@heroui-incInstall Skill
magic-ui
Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers…
@magicuidesignInstall Skillgpui-kit
How to build desktop applications with GPUI Kit, the Rust framework published as the gpui-kit crate (GPUI plus…
@longbridgeInstall Skillgpui-kit-design-guides
The normative Design Guides for GPUI Kit desktop applications. Read in full before designing or changing any screen, layout,…
@longbridgeInstall Skillcodegen
Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing…
@vercel-labs-2Install Skillcore
Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core,…
@vercel-labs-2Install Skilldevtools
Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit…
@vercel-labs-2Install Skill
shadcn-vue
Manages shadcn-vue components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project…
@unovueInstall Skillshadcn-svelte
Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project…
@huntabyteInstall Skillreact-joyride
Guide for implementing, configuring, and debugging React Joyride v3 guided tours. Use this skill whenever the user mentions…
@gilbarbaraInstall SkillStar-Office-UI
Star Office UI 一键化 Skill：帮主人快速部署像素办公室看板，支持多 Agent 加入、状态可视化、移动端查看与公网访问。
@ringhyacinthInstall Skill
preline-mcp
Add, integrate, or build Preline UI components and blocks into HTML files via the Preline MCP server. Use when the user mentions…
@htmlstreamofficialInstall Skilltheme-generator
Generate, preview, save, or validate Preline theme CSS using the bundled local generator in this skill. Use when the user asks to…
@htmlstreamofficialInstall Skilldata-table
Build virtualized data tables with @virtuoso.dev/data-table. Use this skill when (1) building a data grid with sorting,…
@petyosiInstall Skillmessage-list
Build chat, messaging, and AI conversation UIs with @virtuoso.dev/message-list. Use this skill when (1) building a chat or…
@petyosiInstall Skillreact-virtuoso
Build virtualized lists, grids, and tables with react-virtuoso. Use this skill when (1) rendering large or infinite lists, (2)…
@petyosiInstall Skilltransitions-dev
Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page…
@jakubantalikInstall Skilltransitions-polish
Polish and refine existing motion against the transitions.dev motion-token scale — duration, distance, scale, blur, and easing —…
@jakubantalikInstall Skilltransitions-ui-generat…
Make any UI, headline or image appear as if an AI agent is generating it. Five variants: ui (the default: a dotted wireframe…
@jakubantalikInstall Skill
scroll-craft
Build premium scroll-driven landing pages for service, product, food, and drink brands. Plan the visitor journey, page grammar,…
@nateherkaiInstall Skillthreejs-animation
Keyframe, skeletal and morph-target animation, procedural motion and clip blending, on WebGL or with WebGPU and TSL. Use when…
@cloudai-xInstall Skillthreejs-asset-pipeline
Shrinking glTF assets for three.js with gltf-transform: inspect, validate and optimize commands, Draco, meshopt and quantization,…
@cloudai-xInstall Skillthreejs-fundamentals
Three.js scene setup: scenes and fog, cameras, the renderer and tone mapping, the animation loop, object hierarchies, transforms,…
@cloudai-xInstall Skillhairline-adopt
Use when someone has an SVG (an icon, a logo, an illustration) and wants it as a Hairline figure, or runs /hairline-adopt with a…
@lucasmarkesInstall Skillhairline-create
Use when someone asks for a new Hairline figure, or runs /hairline-create with an idea. Draws one isometric line figure that…
@lucasmarkesInstall Skillchrome-extensions
Build and publish Chrome Extensions using Manifest V3 best practices. Use this skill whenever the user asks to create, modify,…
@googlechromeInstall Skillmodern-web-guidance
Search tool for modern web development best practices. MANDATORY: Execute FIRST for all HTML/CSS and clientside JS tasks. Do NOT…
@googlechromeInstall Skill
add-app-to-server
This skill should be used when the user asks to "add an app to my MCP server", "add UI to my MCP server", "add a view to my MCP…
@modelcontextprotocolInstall Skillconvert-web-app
This skill should be used when the user asks to "add MCP App support to my web app", "turn my web app into a hybrid MCP App",…
@modelcontextprotocolInstall Skillcreate-mcp-app
This skill should be used when the user asks to "create an MCP App", "add a UI to an MCP tool", "build an interactive MCP View",…
@modelcontextprotocolInstall Skillshadcn-ui-flutter
A comprehensive Flutter UI library inspired by shadcn/ui. Provides high-quality, customizable, and accessible components…
@nank1roInstall Skillweb-haptics
Add haptic feedback to web apps using the web-haptics library. Use when building mobile-facing UIs that need tactile feedback on…
@lochieInstall Skill
ai-elements
Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and more. Use when…
@vercelInstall Skilldata-table-filters
Install and extend data-table-filters — a React data table system with faceted filters (checkbox, input, slider, timerange),…
@openstatushqInstall Skill8-bit-pixel-art-patter…
Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that…
@theorcdevInstall Skill8bit-docs-patterns
Create documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gaming blocks,…
@theorcdevInstall Skillanimation-performance-…
Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled…
@theorcdevInstall Skillmigrate-nativewind-to-…
Migrate a React Native project from NativeWind to Uniwind. Use when the user wants to replace NativeWind with Uniwind, upgrade…
@uni-stackInstall Skilluniwind
Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project…
@uni-stackInstall Skillwebsite-rebuild
1:1 rebuild of award-winning creative websites (WebGL / scroll-animation / portfolio sites). Evidence-driven pipeline -…
@boyang-huInstall Skillfluid-functionalism
Build React UIs with Fluid Functionalism — a shadcn/ui registry (@fluid) of animated components with a shared motion system:…
@mickadesignInstall Skillanalytical-table
Use ALWAYS for AnalyticalTable internals — react-table v7 plugin architecture, vendored react-table code at…
@ui5Install Skillui5wc-upgrade
Guide a complete UI5 Web Components version upgrade in the ui5-webcomponents-react monorepo. Updates root and peer dependencies,…
@ui5Install Skillnerv-ui
NERV Operations Console v2 — Evangelion-inspired UI component library. Data-driven Three.js MAGI visualization (yield surface…
@thegreatgildoInstall Skillswiftui-design-skill
SwiftUI frontend visual design skill. Creates beautiful, distinctive iOS/macOS interfaces that avoid generic AI slop patterns.…
@wholiverInstall Skillwatch-it-expert
Expert guidance on watch_it reactive widget state management for Flutter. Covers watch functions (watch, watchIt, watchValue,…
@flutter-itInstall Skill
hwc-forms-validation
Handle Hotwire form workflows: form submission lifecycle, inline editing, validation errors, typeahead/autocomplete, modal forms,…
@thehotwireclubInstall Skill293 more in Frontend. See them all →