273 free skills · page 1 of 5
Frontend Frameworks skills
Framework-specific frontend skills — React hooks, Next.js App Router, Vue Composition API, Angular, Svelte, and state management.
Real files from public repositories — hand-curated, never invented. Sorted by installs.
frontend-designanthropics/skillsGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.Frontend Frameworks421.8k
design-taste-frontendleonxlnx/taste-skillAnti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.Frontend Frameworks403.4k
hyperframes-creativeheygen-com/hyperframesNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.Frontend Frameworks329.2kimagegen-frontend-webleonxlnx/taste-skillElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.Frontend Frameworks259.0kremotion-to-hyperframesheygen-com/hyperframesPort an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.Frontend Frameworks256.1kimagegen-frontend-mobileleonxlnx/taste-skillElite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.Frontend Frameworks253.8kdesign-taste-frontend-v1leonxlnx/taste-skillThe original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is design-taste-frontend (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.Frontend Frameworks211.9k
vercel-react-view-transitionsvercel-labs/agent-skillsGuide for implementing smooth, native-feeling animations using React's View Transition API (<ViewTransition> component, addTransitionType, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, startViewTransition, ViewTransition, transition types, or asks about animating between UI states in React without third-party animation libraries.Frontend Frameworks112.1kweb-artifacts-builderanthropics/skillsSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.Frontend Frameworks97.6k
pick-ui-libraryemilkowalski/skillsPick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.Frontend Frameworks80.3k
remotion-renderskills-101/superpowersRender videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation videoFrontend Frameworks67.7kfrontend-designanthropics/claude-codeGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.Frontend Frameworks57.4k
frontend-designpbakaus/impeccableDEPRECATED: This skill has been renamed to 'impeccable'. Run /impeccable instead.Frontend Frameworks54.4k
expo-tailwind-setupexpo/skillsFramework (OSS). Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal stylingFrontend Frameworks54.2k
gsap-coregreensock/gsap-skillsOfficial GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, scroll-driven animation, or a framework-agnostic library. GSAP runs in any framework or vanilla JS; powers Webflow Interactions.Frontend Frameworks52.5k
ai-sdkvercel/aiAnswer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".Frontend Frameworks52.2k
react:componentsgoogle-labs-code/stitch-skillsConverts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.Frontend Frameworks50.7kgsap-reactgreensock/gsap-skillsOfficial GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.Frontend Frameworks46.4kgsap-frameworksgreensock/gsap-skillsOfficial GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy. Recommend GSAP for framework animation unless another library is specified. For React use gsap-react.Frontend Frameworks44.5kreact:componentsgoogle-labs-code/stitch-skillsConverts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.Frontend Frameworks44.4kask-sonneremilkowalski/skillsGuide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, positioning and multiple toasters. Use when working with Sonner or troubleshooting it — toasts that don't appear, appear twice, lose their styles, ignore Tailwind classes, sit behind a modal, or don't follow dark mode.Frontend Frameworks40.0k
vue-best-practicesvuejs-ai/skillsMUST be used for Vue.js tasks. Strongly recommends Composition API with <script setup> and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.Frontend Frameworks38.0k
golang-samber-rosamber/cc-skills-golangReactive streams and event-driven programming in Golang using samber/ro — ReactiveX implementation with 150+ type-safe operators, cold/hot observables, 5 subject types (Publish, Behavior, Replay, Async, Unicast), declarative pipelines via Pipe, 40+ plugins (HTTP, cron, fsnotify, JSON, logging), automatic backpressure, error propagation, and Go context integration. Apply when using or adopting samber/ro, when the codebase imports github.com/samber/ro, or when building asynchronous event-driven pipelines, real-time data processing, streams, or reactive architectures in Go. Not for finite slice transforms (→ See samber/cc-skills-golang@golang-samber-lo skill).Frontend Frameworks35.5k
vueantfu/skillsVue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.Frontend Frameworks33.0k
ckm:banner-designnextlevelbuilder/ui-ux-pro-max-skillDesign banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.Frontend Frameworks32.0k
nextjs-app-router-patternswshobson/agentsMaster Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.Frontend Frameworks28.8kanimate-expoemilkowalski/skillsBuild animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.Frontend Frameworks27.7k
gws-events-renewgoogleworkspace/cliGoogle Workspace Events: Renew/reactivate Workspace Events subscriptions.Frontend Frameworks27.4kbanner-designnextlevelbuilder/ui-ux-pro-max-skillDesign banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.Frontend Frameworks22.9kvue-best-practicesantfu/skillsMUST be used for Vue.js tasks. Strongly recommends Composition API with <script setup> and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.Frontend Frameworks22.6knuxtantfu/skillsNuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.Frontend Frameworks22.1kvueuse-functionsantfu/skillsApply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.Frontend Frameworks20.9k
shadcn-uigiuseppe-trisciuoglio/developer-kitProvides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.Frontend Frameworks20.8kvue-router-best-practicesantfu/skillsVue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.Frontend Frameworks18.2kpiniaantfu/skillsPinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.Frontend Frameworks17.7kexpo-brownfieldexpo/skillsFramework (OSS). Integrate Expo and React Native into an existing native iOS or Android app. Use when the user mentions brownfield, embedding React Native in a native app, AAR/XCFramework, or adding Expo to an existing Kotlin/Swift project. Covers both the isolated approach and the integrated approach.Frontend Frameworks17.5k
nuxt-uinuxt/uiBuild UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.Frontend Frameworks17.4k
extension-core-infrastructurecaffeinelabs/skillsCore infrastructure providing backend connection configuration, storage client, and React app entry point.Frontend Frameworks17.3k
convex-designget-convex/agent-skillsDesign and build reactive, type-safe, production-grade backends on Convex. Covers schema, queries/mutations/actions, indexes, auth, file storage, scheduling, real-time multiplayer, mobile backends, and LLM/agent workflows on Convex's one-platform stack.Frontend Frameworks16.0kconvex-monitorget-convex/agent-skillsWatch for the next dev/prod error or request in a Convex app and react to it.Frontend Frameworks15.9ktailwind-css-patternsgiuseppe-trisciuoglio/developer-kitProvides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.Frontend Frameworks15.8k
clerk-react-patternsclerk/skillsReact SPA auth patterns with @clerk/react for Vite/CRA - ClerkProviderFrontend Frameworks15.2k
argent-react-native-profilersoftware-mansion/argentProfile a React Native Hermes app to measure re-render and CPU performance using argent profiler tools. Use when optimizing for performance, measuring before/after a fix, spotting slow components, diagnosing re-renders, checking CPU hotspots, or producing a ranked issue report.Frontend Frameworks14.8kvue-pinia-best-practicesvuejs-ai/skillsPinia stores, state management patterns, store setup, and reactivity with stores.Frontend Frameworks14.4kfrontend-designanthropics/claude-plugins-officialGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.Frontend Frameworks14.0kreact-native-designwshobson/agentsMaster React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.Frontend Frameworks13.8k
migrate-radix-to-baseshadcn/uiMigrates 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 project's base library. Handles single components ("migrate accordion") and whole projects.Frontend Frameworks13.7k
angular-new-appangular/skillsCreates a new Angular app using the Angular CLI. This skill should be used whenever a user wants to create a new Angular application and contains important guidelines for how to effectively create a modern Angular application.Frontend Frameworks13.4kreact-native-architecturewshobson/agentsBuild production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.Frontend Frameworks13.4kreact-state-managementwshobson/agentsMaster modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.Frontend Frameworks13.4kslidevantfu/skillsCreate and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.Frontend Frameworks13.2k
backend-patternsaffaan-m/eccBackend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when building or reviewing Node.js, Express, or Next.js API routes and their data access.Frontend Frameworks12.8kcoding-standardsaffaan-m/eccBaseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns. Use when reviewing code quality or naming with no framework-specific skill that applies.Frontend Frameworks12.7kvue-router-best-practicesvuejs-ai/skillsVue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.Frontend Frameworks12.4k
agentationbenjitaylor/agentationAdd Agentation visual feedback toolbar to a Next.js projectFrontend Frameworks12.3k
app-store-screenshotsparthjadhav/app-store-screenshotsUse when building App Store or Google Play screenshot pages, generating exportable marketing screenshots for iOS and/or Android apps, or scaffolding a screenshot editor with Next.js. Triggers on app store, play store, screenshots, marketing assets, html-to-image, phone mockup, android screenshots, feature graphic.Frontend Frameworks12.3k
better-layoutjakubkrehel/skillsLayout structure for web interfaces. Use when structuring a page or component, deciding what collapses at small sizes, or reviewing frontend code for layout. Triggers on layout, spacing, alignment, grouping, whitespace, visual hierarchy, reading order, progressive disclosure, breakpoints, container queries, safe area, full-bleed, layout margins, RTL layout, logical properties.Frontend Frameworks12.2kclerk-react-router-patternsclerk/skillsReact Router v7/v8 patterns with Clerk — rootAuthLoader, getAuth in loaders,Frontend Frameworks12.1kclerk-tanstack-patternsclerk/skillsTanStack React Start auth patterns with @clerk/tanstack-react-startFrontend Frameworks12.0kcreate-adaptable-composablevuejs-ai/skillsCreate a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.Frontend Frameworks11.7kOther tasks
same rules, different job
