Skip to content

Skill catalog

880web & 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 301 to 350 of 880
  1. grafana-scenes grafana/skills

    Build Grafana plugin pages using the @grafana/scenes framework. Use when creating new scene pages, adding panels/visualizations, setting up drilldown navigation, defining variables, configuring query runners, building t…

    4,292 installs
  2. plugin-bundle-size grafana/skills

    Optimise Grafana app plugin bundle size using React.lazy, Suspense, and webpack code splitting. Use when the user asks to reduce plugin bundle size, optimise module.js, add code splitting, improve initial plugin load pe…

    4,273 installs
  3. wp-interactivity-api wordpress/agent-skills

    Use when building or debugging WordPress Interactivity API features (data-wp-* directives, @wordpress/interactivity store/state/actions, block viewScriptModule integration, wp_interactivity_*()) including performance, h…

    4,269 installs
  4. react-19-plugin-migration grafana/skills

    Migrate a Grafana plugin to React 19 compatibility. Use when the user asks to update a plugin for React 19, prepare for React 19, fix React 19 compatibility, upgrade to React 19, migrate to React 19, bump grafanaDepende…

    4,268 installs
  5. i18n-localization sickn33/agentic-awesome-skills

    Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.

    4,261 installs
  6. building-storefronts medusajs/medusa-agent-skills

    Load automatically when planning, researching, or implementing Medusa storefront features (calling custom API routes, SDK integration, React Query patterns, data fetching). REQUIRED for all storefront development in ALL…

    4,222 installs
  7. html-diagram plannotator/effective-html

    Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly…

    4,209 installs
  8. modal lobehub/lobehub

    Use for modals, dialogs and confirmations with createModal, confirmModal, ModalHost or base-ui modal APIs.

    4,205 installs
  9. ant-design ant-design/antd-skill

    Decision guide for antd 6.x, Ant Design Pro 5/ProComponents, Ant Design X v2, and the offline `@ant-design/cli`. Use for component selection, theming/tokens, SSR, a11y, performance, routing/access/CRUD, AI/chat UI patte…

    4,163 installs
  10. react-dev softaworks/agent-toolkit

    This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 inc…

    4,134 installs
  11. pwa-development alinaqi/maggy

    Progressive Web Apps - service workers, caching strategies, offline, Workbox

    4,128 installs
  12. vue-expert-js jeffallan/claude-skills

    Creates Vue 3 components, builds vanilla JS composables, configures Vite projects, and sets up routing and state management using JavaScript only — no TypeScript. Generates JSDoc-typed code with @typedef, @param, and @r…

    4,128 installs
  13. react-useeffect softaworks/agent-toolkit

    React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.

    4,083 installs
  14. browser-screenshot zc277584121/marketing-skills

    Take focused, region-specific screenshots from web pages using a dedicated headed Chrome profile with persistent login state. Navigates to the right page based on user context (URL, search query, social media post), loc…

    4,068 installs
  15. aspnet-core openai/skills

    Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web API…

    3,970 installs
  16. preview-dev starchild-ai-agent/official-skills

    Frontend & fullstack development with live preview. Use when the user wants to build a web page, frontend app, fullstack project, or any web UI — including React, Vue, Vite, static HTML, Express, FastAPI, or any framewo…

    3,962 installs
  17. generating-flexipage forcedotcom/sf-skills

    Use this skill when users need to create, generate, modify, or validate Salesforce Lightning pages (FlexiPages). Trigger when users mention RecordPage, AppPage, HomePage, Lightning pages, page layouts, adding components…

    3,955 installs
  18. figma-implement-design figma/mcp-server-guide

    Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", pr…

    3,951 installs
  19. understand-dashboard egonex-ai/understand-anything

    Launch the interactive web dashboard to visualize a codebase's knowledge graph

    3,933 installs
  20. html plannotator/effective-html

    Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject. Use when HTML is the deliverable for a report, explainer, landing page, presentation…

    3,925 installs
  21. angular-ssr analogjs/angular-skills

    DEPRECATED - this skill is unmaintained. Use the official Angular skills at https://github.com/angular/skills instead. Implement server-side rendering and hydration in Angular v20+ using @angular/ssr. Use for SSR setup,…

    3,915 installs
  22. gsap-framer-scroll-animation github/awesome-copilot

    Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vani…

    3,915 installs
  23. tanstack-start tanstack-skills/tanstack-skills

    Full-stack React framework powered by TanStack Router with SSR, streaming, server functions, and deployment to any hosting provider.

    3,901 installs
  24. react-three-fiber freshtechbro/claudedesignskills

    Build declarative 3D scenes with React Three Fiber (R3F) - a React renderer for Three.js. Use when building interactive 3D experiences in React applications with component-based architecture, state management, and reusa…

    3,865 installs
  25. nextjs-app-router giuseppe-trisciuoglio/developer-kit

    Provides patterns and code examples for building Next.js 16+ applications with App Router architecture. Use when creating projects with App Router, implementing Server Components and Client Components ("use client"), cr…

    3,863 installs
  26. html-plan plannotator/effective-html

    Direct-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies, and reviewability. Use when the user explicitly invokes html-…

    3,855 installs
  27. tailwindcss hairyf/skills

    Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables.

    3,806 installs
  28. beautiful-article conardli/garden-skills

    把用户提供的素材（网页 URL / PDF / DOCX / Markdown / 纯文本 / 截图 / 粘贴材料）编辑、设计成一篇美丽的、可离线打开和分享的**单文件 HTML 网页文章**。基于 reacticle 组件协议：不手写裸 HTML/CSS，而用语义组件 + 受主题约束的 Raw 自由层；按 source→规划→双确认→生成→终审→修复的小型 harness 流程推进，默认 100% 信息保留的长文。触发场景：把 UR…

    3,805 installs
  29. tiptap ueberdosis/tiptap

    Integrate, build and debug Tiptap editors in applications. Use for Tiptap setup, installing or creating extensions, collaboration, comments, AI features, and document conversion. Excludes contributions to the Tiptap mon…

    3,791 installs
  30. nextjs-authentication giuseppe-trisciuoglio/developer-kit

    Provides authentication implementation patterns for Next.js 15+ App Router using Auth.js 5 (NextAuth.js). Use when setting up authentication flows, implementing protected routes, managing sessions in Server Components a…

    3,781 installs
  31. nextjs-data-fetching giuseppe-trisciuoglio/developer-kit

    Provides Next.js App Router data fetching patterns including SWR and React Query integration, parallel data fetching, Incremental Static Regeneration (ISR), revalidation strategies, and error boundaries. Use when implem…

    3,743 installs
  32. shopify-liquid-themes benjaminsehl/liquid-skills

    Generate Shopify Liquid theme code (sections, blocks, snippets) with correct schema JSON, LiquidDoc headers, translation keys, and CSS/JS patterns. Use when creating or editing .liquid files for Shopify themes, working…

    3,731 installs
  33. mantine-custom-components mantinedev/skills

    Build custom components that integrate with Mantine's theming, Styles API, and core features. Use this skill when: (1) creating a new component using factory(), polymorphicFactory(), or genericFactory(), (2) adding Styl…

    3,723 installs
  34. frontend-design bytedance/deer-flow

    Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landin…

    3,720 installs
  35. a11y-debugging chromedevtools/chrome-devtools-mcp

    Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.

    3,712 installs
  36. animate delphi-ai/animate-skill

    Animation patterns and best practices for Next.js/React applications. Use this skill when implementing animations, transitions, hover effects, page transitions, modals, or any motion in React components. Based on Emil K…

    3,700 installs
  37. vueuse-functions vueuse/skills

    Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.

    3,699 installs
  38. component-refactoring langgenius/dify

    Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduct…

    3,697 installs
  39. generating-ui-bundle-metadata forcedotcom/sf-skills

    MUST activate when the project contains a uiBundles/*/src/ directory and scaffolding a new UI bundle or app, or when editing ui-bundle.json, .uibundle-meta.xml, or CSP trusted site files. Use this skill when scaffolding…

    3,678 installs
  40. building-ui-bundle-app forcedotcom/sf-skills

    MUST activate when the user wants to build, create, or generate a React application, React app, web application, single-page application (SPA), or frontend application — even if no project files exist yet. MUST also act…

    3,671 installs
  41. building-ui-bundle-frontend forcedotcom/sf-skills

    MUST activate before editing ANY file under uiBundles/*/src/ for visual or UI changes to an EXISTING app — pages, components, sections, layout, styling, colors, fonts, navigation, animations, or any look-and-feel change…

    3,666 installs
  42. generating-ui-bundle-features forcedotcom/sf-skills

    MUST activate when the project contains a uiBundles/*/src/ directory and the user wants to add authentication or search to their app. Use this skill when adding authentication or search to a UI bundle app. Only covers t…

    3,665 installs
  43. sentry-nextjs-sdk getsentry/sentry-for-ai

    Full Sentry SDK setup for Next.js. Use when asked to "add Sentry to Next.js", "install @sentry/nextjs", or configure error monitoring, tracing, session replay, logging, profiling, AI monitoring, or crons for Next.js app…

    3,658 installs
  44. debug-optimize-lcp chromedevtools/chrome-devtools-mcp

    Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to und…

    3,649 installs
  45. ui-designer daniel-dan-conrad/ui-designer-skill

    Craft one-of-a-kind, ship-ready frontend interfaces with elevated design quality. Apply this skill whenever the user wants to build web components, pages, artifacts, posters, or applications (for example, websites, land…

    3,638 installs
  46. generating-ui-bundle-site forcedotcom/sf-skills

    MUST activate when the project contains a uiBundles/*/src/ directory and the task involves creating or configuring site infrastructure. Use this skill when creating or configuring a Salesforce Digital Experience Site fo…

    3,632 installs
  47. superwall-editor superwall/skills

    Build, edit, or review Superwall paywall, onboarding, and web2app flows from a local coding agent with terminal access. Launch a browser editor session through the local CLI or attach to one with a pairing code, then di…

    3,622 installs
  48. mantine-combobox mantinedev/skills

    Build custom dropdown/select/autocomplete/multiselect components using Mantine's Combobox primitives. Use this skill when: (1) creating a new custom select-like component with Combobox primitives, (2) building a searcha…

    3,621 installs
  49. coss-particles cosscom/coss

    Index of all COSS UI particle examples. Use when implementing UI features to find copy-paste-ready component patterns built on coss primitives. Each particle has a description and a JSON URL for easy installation.

    3,616 installs
  50. react-router-framework-mode remix-run/agent-skills

    Build full-stack React applications using React Router's framework mode. Use when configuring routes, working with loaders and actions, handling forms, handling navigation, pending/optimistic UI, error boundaries, or wo…

    3,608 installs