PopularSkill
Frontend
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 radix primitives, or switch a…
@shadcn-uiView SkillClaude Code Frontend skills :)
Flowy lists 67 skills in the Frontend category for Claude Code, across 20 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.
Showing 67 of 67
@shadcn-uiView SkillPopularSkill
Frontend
shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context,…
@shadcn-uiView SkillSkill
Skill
Skill
Skill
Frontend
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable…
@chakra-uiView SkillSkill
Frontend
chakra-ui-migrate
Migrate Chakra UI projects from v2 to v3, covering package changes, codemods, provider setup, color mode, prop renaming, compound components, theming, recipes,…
@chakra-uiView SkillSkill
Frontend
chakra-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 issues, convert plain HTML/CSS,…
@chakra-uiView SkillSkill
Frontend
shadcn-vue
Manages shadcn-vue components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and…
@unovueView SkillSkill
Frontend
shadcn-svelte
Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and…
@huntabyteView SkillSkill
Frontend
code-to-design
Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload.…
@google-labs-codeView SkillSkill
Frontend
design-md
Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
@google-labs-codeView SkillSkill
Frontend
enhance-prompt
Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures…
@google-labs-codeView SkillSkill
Frontend
react-joyride
Guide for implementing, configuring, and debugging React Joyride v3 guided tours. Use this skill whenever the user mentions joyride, guided tour, onboarding…
@gilbarbaraView SkillSkill
Skill
Frontend
theme-generator
Generate, preview, save, or validate Preline theme CSS using the bundled local generator in this skill. Use when the user asks to create a new Preline theme,…
@htmlstreamofficialView SkillSkill
Frontend
shadcn-ui-flutter
A comprehensive Flutter UI library inspired by shadcn/ui. Provides high-quality, customizable, and accessible components including Buttons, Cards, Forms, and…
@nank1roView SkillSkill
Frontend
accessibility
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader…
@addyosmani-2View SkillSkill
Frontend
best-practices
Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit",…
@addyosmani-2View SkillSkill
Frontend
core-web-vitals
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS",…
@addyosmani-2View SkillSkill
Frontend
ai-elements
Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and more. Use when the user wants to build a…
@vercelView SkillSkill
Skill
Skill
Skill
Skill
Skill
Frontend
fix-github-issue
Fix a GitHub issue by number. Use when asked to fix GitHub issues.
@agnosticuiView SkillSkill
Frontend
building-components
Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs,…
@vercelView SkillSkill
Frontend
figma-build
Build a Figma design from code or a description — the reverse of figma-codegen. Reuses the connected file's existing design system (components, variables,…
@awdr74100View SkillSkill
Frontend
figma-codegen
Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework…
@awdr74100View SkillSkill
Frontend
figma-typings-audit
Upgrade @figma/plugin-typings and absorb what the new version exposes. Diffs the .d.ts between the installed and the target version (that package ships no…
@awdr74100View SkillSkill
Frontend
ai-friendly-web-design
Build, review, and refactor web interfaces that are easy for humans, screen readers, browser automation, Playwright tests, and AI agents to understand and…
@ianho7View SkillSkill
Frontend
Ak-Elementor-Studio
AK Elementor Studio — built by Abanoub Khalil (akstudio.me). Converts ANY input — HTML/CSS/JS code, screenshots, images (PNG, JPG, WebP), PDFs, Figma exports,…
@abanoubkhaliilView SkillSkill
Frontend
add-accessibility
Scan SwiftUI views and add missing accessibility identifiers using a consistent {screen}-{type}-{name} naming convention. Also flags Dynamic Type compatibility…
@yusufkaranView SkillSkill
Frontend
ios-test
Build, launch, and visually test iOS/SwiftUI apps in the Simulator using computer use. Automated screen navigation, crash log analysis, state testing…
@yusufkaranView SkillSkill
Frontend
design-fidelity-verify
Prove a running app matches its design spec by measuring rendered values, not eyeballing a screenshot. Use when the user says "verify the design", "is this…
@jeltehommingaView SkillSkill
Frontend
figma-design-extract
Extract exact design values from a Figma node into a build-ready spec table, instead of eyeballing a screenshot. Use when the user shares a figma.com node URL,…
@jeltehommingaView SkillSkill
Skill
Skill
Frontend
extract-design-md
Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework.…
@google-labs-codeView SkillSkill
Frontend
extract-static-html
Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a…
@google-labs-codeView SkillSkill
Frontend
generate-design
Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP.…
@google-labs-codeView SkillSkill
Frontend
performance
Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix…
@addyosmani-2View SkillSkill
Frontend
seo
Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap…
@addyosmani-2View SkillSkill
Frontend
web-quality-audit
Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run…
@addyosmani-2View SkillSkill
Skill
Skill
Skill
Frontend
implement-ag-playbook
Implement a playbook from its PROMPT specification files. Supports both single-framework (PROMPT-REACT.md, etc.) and 3-framework (PROMPT-3-FRAMEWORKS.md) modes.
@agnosticuiView SkillSkill
Frontend
implement-github-featu…
Design and implement a new feature or component from a GitHub issue. Use for net-new functionality, not bug fixes.
@agnosticuiView SkillSkill
Skill
Frontend
mcp-sdk-audit
Upgrade @modelcontextprotocol/server (the MCP TypeScript SDK v2) and prove the wire contract survived. The SDK is a runtime dependency whose breakage lands on…
@awdr74100View SkillSkill
Frontend
manage-design-system
Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.
@google-labs-codeView SkillSkill
Frontend
react-components
Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using…
@google-labs-codeView SkillSkill
Frontend
react-native
Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.
@google-labs-codeView SkillSkill
Skill
Skill
Skill
Frontend
react-vite-dashboard
Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
@google-labs-codeView SkillSkill
Frontend
remotion
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
@google-labs-codeView SkillSkill
Frontend
shadcn-ui
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best…
@google-labs-codeView SkillSkill
Skill
Skill
Skill
Frontend
stitch-loop
Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern
@google-labs-codeView SkillSkill
Frontend
taste-design
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography,…
@google-labs-codeView SkillSkill
Frontend
upload-to-stitch
Upload local assets (images, mockups, extracted HTML, design markdown) to a Stitch project. ALWAYS use this skill when you need to upload visual assets, HTML…
@google-labs-codeView Skill