Skip to content

Skill catalog

883web & 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 883
  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,976 installs
  2. 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,958 installs
  3. wordpress-elementor jezweb/claude-skills

    Edit Elementor pages and manage templates on WordPress sites via browser automation (for visual / structural changes) or WP-CLI (for safe text replacements). Use whenever the user wants to edit an Elementor page, update…

    2,945 installs
  4. sentry-browser-sdk getsentry/sentry-for-ai

    Full Sentry SDK setup for browser JavaScript. Use when asked to "add Sentry to a website", "install @sentry/browser", or configure error monitoring, tracing, session replay, or logging for vanilla JavaScript, jQuery, st…

    2,934 installs
  5. 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,930 installs
  6. 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,928 installs
  7. 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,927 installs
  8. 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,923 installs
  9. 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,909 installs
  10. 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,908 installs
  11. 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,896 installs
  12. 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,888 installs
  13. 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,887 installs
  14. 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,880 installs
  15. 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,878 installs
  16. 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,877 installs
  17. 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,875 installs
  18. 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,875 installs
  19. 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,873 installs
  20. 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,864 installs
  21. 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,856 installs
  22. 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,856 installs
  23. 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,848 installs
  24. 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,835 installs
  25. 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,832 installs
  26. 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,826 installs
  27. 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,824 installs
  28. 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,814 installs
  29. 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,800 installs
  30. 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,797 installs
  31. 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,797 installs
  32. 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,797 installs
  33. 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,796 installs
  34. 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
  35. 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,746 installs
  36. 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,701 installs
  37. 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,688 installs
  38. 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,682 installs
  39. 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,678 installs
  40. gsap-web iart-ai/web-animation-skills

    This skill should be used when the user asks to "build a scroll animation", "add ScrollTrigger", "pin a section while scrolling", "scrub an animation to scroll", "create a hero timeline", "do a horizontal scroll section…

    2,676 installs
  41. 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,663 installs
  42. 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,659 installs
  43. 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,647 installs
  44. 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,646 installs
  45. 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,625 installs
  46. next-partial-prefetching-optimizer vercel/next.js

    Optimize what selected Next.js client navigations include before the click under Partial Prefetching. Use after Cache Components and Partial Prefetching are adopted when the user wants selected URL-specific UI to be ins…

    2,617 installs
  47. 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,599 installs
  48. 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,594 installs
  49. 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,583 installs
  50. frontend-design sickn33/agentic-awesome-skills

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

    2,579 installs