Skip to content

Skill catalog

867web & frontend agent skills synced from skills.sh, with their install counts. Read them here, or let your agent fetch the right one through the Graph-of-Skills MCP server.

Want your agent to use these? Set up Graph-of-Skills or get a free key. How these skills are sourced and what we check. Cannot find one? Your agent can write a skill for your own library. Have skills of your own? Install one on another machine. A skill that comes from GitHub shows its npx skills add command on its page.

Showing 401 to 450 of 867
  1. lottie-animations freshtechbro/claudedesignskills

    After Effects animation rendering for web and React applications. Use this skill when implementing Lottie animations, JSON vector animations, interactive animated icons, micro-interactions, or loading animations. Trigge…

    2,904 installs
  2. hono honojs/skills

    Use when building Hono web applications or when the user asks about Hono APIs, routing, middleware, JSX, validation, testing, or streaming. TRIGGER when code imports from 'hono' or 'hono/*', or user mentions Hono. Use H…

    2,882 installs
  3. awwwards-animations devmartinese/awwwards-animations-skill

    Professional React animation skill for creating Awwwards/FWA-level animations using GSAP (useGSAP), Motion (Framer Motion), Anime.js, and Lenis. Use when building premium scroll experiences, custom cursors, page transit…

    2,876 installs
  4. animated-component-libraries freshtechbro/claudedesignskills

    Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated components). Use this skill when building landing pages, mar…

    2,860 installs
  5. liquid-theme-standards benjaminsehl/liquid-skills

    CSS, JavaScript, and HTML coding standards for Shopify Liquid themes. Covers BEM naming inside stylesheet tags, design tokens, CSS custom properties, Web Components for themes, defensive CSS, and progressive enhancement…

    2,858 installs
  6. react-vite-best-practices asyrafhussin/agent-skills

    React and Vite performance optimization guidelines. Use when writing, reviewing, or optimizing React components built with Vite. Triggers on tasks involving Vite configuration, build optimization, code splitting, lazy l…

    2,855 installs
  7. portable-text-serialization sanity-io/agent-toolkit

    Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in any frontend framework, building custom serializers for non-standard bloc…

    2,854 installs
  8. gsap-core nexu-io/open-design

    Official 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,…

    2,843 installs
  9. chakra-ui-refactor chakra-ui/chakra-ui

    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, Tailwind, CSS Modules, or styled-components to Chakra UI, clean…

    2,839 installs
  10. frontend-slides nexu-io/open-design

    Generate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.

    2,832 installs
  11. react-best-practices mastra-ai/mastra

    React performance optimization guidelines from Mastra Engineering. This skill should be used when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React c…

    2,832 installs
  12. web-artifacts-builder nexu-io/open-design

    Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.

    2,830 installs
  13. chrome-extension-development mindrally/skills

    Expert guidelines for Chrome extension development with Manifest V3, covering security, performance, and best practices. Use when building browser extensions, creating popup UIs, implementing content scripts, working wi…

    2,829 installs
  14. favicon brianlovin/agent-config

    Generate a complete set of favicons from a source image and update HTML. Use when setting up favicons for a web project.

    2,822 installs
  15. gsap-scrolltrigger freshtechbro/claudedesignskills

    Comprehensive skill for GSAP (GreenSock Animation Platform) and ScrollTrigger plugin. Use this skill when creating web animations, scroll-driven experiences, timelines, tweens, scroll-triggered animations, pinning, scru…

    2,820 installs
  16. nuxt-content onmax/nuxt-skills

    Build typed, content-driven Nuxt applications with @nuxt/content. Use when working with content.config.ts, collections, queryCollection, Markdown or MDC rendering, content databases, hooks, custom sources, search, or Co…

    2,813 installs
  17. trigger-realtime triggerdotdev/skills

    Trigger.dev client/frontend surface: subscribe to runs in realtime (runs.subscribeToRun and the @trigger.dev/react-hooks hook useRealtimeRun), consume metadata and AI/text streams in React (useRealtimeStream), trigger t…

    2,808 installs
  18. frontend-dev nexu-io/open-design

    Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.

    2,807 installs
  19. react-aria react-aria.adobe.com

    Build accessible UI components with React Aria Components. Use when developers mention React Aria, react-aria-components, accessible components, or need unstyled accessible primitives. Provides documentation for buildin…

    2,807 installs
  20. gsap-scrolltrigger nexu-io/open-design

    Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger,…

    2,804 installs
  21. visual-edit-precision wshobson/agents

    Use when making UI/frontend changes guided by visual context, when the user selects elements visually, draws annotations, or provides screenshots alongside change requests. Also use when editing components where spatial…

    2,803 installs
  22. emilkowal-animations pproenca/dot-skills

    Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, dr…

    2,794 installs
  23. contentful-custom-app-from-scratch contentful/skills

    Design, scaffold, build, and validate a new Contentful App Framework custom app for a customer's own repository or workspace. Use when users want to create a custom app from an idea, choose App Framework locations, buil…

    2,792 installs
  24. figma-implement-design nexu-io/open-design

    Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.

    2,783 installs
  25. gsap-react nexu-io/open-design

    Official 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…

    2,773 installs
  26. react-core copilotkit/copilotkit

    @copilotkit/react-core — mount the CopilotKit provider (from @copilotkit/react-core/v2) in a Next.js App Router / React Router v7 / TanStack Start / SPA app, drop in CopilotChat/CopilotPopup/CopilotSidebar (v2 chat comp…

    2,764 installs
  27. artifacts-builder nexu-io/open-design

    Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).

    2,749 installs
  28. full-page-screenshot nexu-io/open-design

    Capture full-page screenshots of web pages via Chrome DevTools Protocol with zero dependencies. Useful for portfolios, case studies, and audit reports.

    2,748 installs
  29. portable-text-conversion sanity-io/agent-toolkit

    Convert HTML and Markdown content into Portable Text blocks for Sanity. Use when migrating content from legacy CMSs, importing HTML or Markdown into Sanity, building content pipelines that ingest external content, conve…

    2,745 installs
  30. animejs freshtechbro/claudedesignskills

    Versatile JavaScript animation engine for DOM, CSS, SVG, and JavaScript objects. Use when creating timeline-based animations, stagger effects, SVG morphing, keyframe sequences, or complex choreographed animations. Trigg…

    2,741 installs
  31. nuxt-modules onmax/nuxt-skills

    Use when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes,…

    2,735 installs
  32. playwriter brianlovin/agent-config

    Control the user's currently open Chrome tab through the Playwriter CLI (no new browser launch). Use when you need to inspect live UI state, run scripted browser actions, capture console output, or reproduce frontend is…

    2,681 installs
  33. i18n-expert daymade/claude-code-skills

    This skill should be used when setting up, auditing, or enforcing internationalization/localization in UI codebases (React/TS, i18next or similar, JSON locales), including installing/configuring the i18n framework, repl…

    2,649 installs
  34. tailwind-v4-shadcn jezweb/claude-skills

    Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when i…

    2,643 installs
  35. mantine-form mantinedev/skills

    Build forms using @mantine/form. Use this skill when: (1) setting up a form with useForm, (2) adding validation rules, schema validation (zod, valibot, arktype) or async validation, (3) working with nested object or arr…

    2,638 installs
  36. react-devtools callstackincubator/agent-react-devtools

    React DevTools CLI for AI agents. Use when the user asks you to debug a React or React Native app at runtime, inspect component props/state/hooks, diagnose render performance, profile re-renders, find slow components, o…

    2,638 installs
  37. experience-lwr-site-generate forcedotcom/sf-skills

    Creates, modifies, or manages Salesforce Experience Cloud LWR sites via DigitalExperience metadata. Always trigger when the tasks involve LWR sites configurations, e.g. creating/modifying pages/routes/views/theme layout…

    2,633 installs
  38. web-debug sentimony/skills

    You MUST use this when interacting with or testing local web applications with Playwright - verifying frontend functionality, debugging UI behavior, capturing browser screenshots, or viewing browser console logs.

    2,625 installs
  39. experience-lwc-base-components-integrate forcedotcom/sf-skills

    Pick the right Lightning Base Component (`lightning-*`) for a given UI task, retrieve its full API (props, methods, events, slots) from the bundled per-component reference, and wire it into an LWC (LWC `.html`, `.js`, a…

    2,618 installs
  40. rive-interactive freshtechbro/claudedesignskills

    State machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, animated components with logic, or designer-created animations w…

    2,601 installs
  41. mapbox-web-integration-patterns mapbox/mapbox-agent-skills

    Official integration patterns for Mapbox GL JS across popular web frameworks (React, Vue, Svelte, Angular). Covers setup, lifecycle management, token handling, search integration, and common pitfalls. Based on Mapbox's…

    2,600 installs
  42. playground cline/skills

    Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playg…

    2,581 installs
  43. echarts sentimony/skills

    You MUST use this when building, styling, debugging, or optimizing Apache ECharts charts in JavaScript, React, or Vue - setup, lifecycle, responsive resizing, theming, large datasets, streaming, SSR, and symptoms like a…

    2,572 installs
  44. frontend-design sickn33/agentic-awesome-skills

    Design and implement a distinctive frontend within the product’s existing brand, accessibility, performance and framework constraints.

    2,568 installs
  45. dx-project-create forcedotcom/sf-skills

    Scaffold a new Salesforce DX project of any template — standard, empty, analytics, agent, or a React/Angular UI-bundle app — and set it up end-to-end: relocate the session, connect an org, set the default, enable source…

    2,544 installs
  46. locomotive-scroll freshtechbro/claudedesignskills

    Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when implementing smooth scrolling experiences, creating paralla…

    2,538 installs
  47. dt-obs-frontends dynatrace/dynatrace-for-ai

    Real User Monitoring (RUM) on Dynatrace — web and mobile frontends. Core Web Vitals, user sessions, page performance, mobile crashes, frontend errors, and frontend-backend linking. Query via `user.events`, `user.session…

    2,528 installs
  48. pixijs-2d freshtechbro/claudedesignskills

    Fast, lightweight 2D rendering engine for creating interactive graphics, particle effects, and canvas-based applications using WebGL/WebGPU. Use this skill when building 2D games, particle systems, interactive canvases,…

    2,510 installs
  49. tanstack-virtual tanstack-skills/tanstack-skills

    Headless UI for virtualizing large element lists at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit & Angular.

    2,508 installs
  50. babylonjs-engine freshtechbro/claudedesignskills

    Comprehensive skill for Babylon.js 3D web rendering engine. Use this skill when building real-time 3D experiences, browser-based games, interactive visualizations, or immersive web applications. Triggers on tasks involv…

    2,505 installs