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.
- 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,146 installs - 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,130 installs - 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,128 installs - 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,125 installs - 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,122 installs - 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,100 installs - 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,067 installs - pwa-development alinaqi/maggy
Progressive Web Apps - service workers, caching strategies, offline, Workbox
4,057 installs - 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,049 installs - 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,047 installs - 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 - 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 - 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 - 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,894 installs - 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,891 installs - 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,878 installs - 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,866 installs - 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,841 installs - 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,830 installs - understand-dashboard egonex-ai/understand-anything
Launch the interactive web dashboard to visualize a codebase's knowledge graph
3,794 installs - 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,774 installs - 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,747 installs - 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,742 installs - 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,714 installs - 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,712 installs - 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 - 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,697 installs - 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 - 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 - 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 - 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 - beautiful-article conardli/garden-skills
把用户提供的素材（网页 URL / PDF / DOCX / Markdown / 纯文本 / 截图 / 粘贴材料）编辑、设计成一篇美丽的、可离线打开和分享的**单文件 HTML 网页文章**。基于 reacticle 组件协议：不手写裸 HTML/CSS，而用语义组件 + 受主题约束的 Raw 自由层；按 source→规划→双确认→生成→终审→修复的小型 harness 流程推进，默认 100% 信息保留的长文。触发场景：把 UR…
3,664 installs - 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,634 installs - 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 - 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,628 installs - 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,622 installs - 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,619 installs - vueuse-functions vueuse/skills
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
3,617 installs - 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 - 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,607 installs - 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,597 installs - 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,596 installs - shadcn-ui jezweb/claude-skills
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, naviga…
3,590 installs - roblox-ui gamedev-skills/awesome-gamedev-agent-skills
Build production Roblox interfaces with ScreenGui/PlayerGui lifecycle, responsive UDim2 layouts, safe insets, reusable editable Instances, cross-device input and selection, restrained motion, cleanup, and multi-viewport…
3,587 installs - uplifting-components-to-slds2 forcedotcom/sf-skills
Migrate Lightning Web Components from SLDS 1 to SLDS 2 by running the SLDS linter and fixing violations. Use this skill whenever users mention SLDS 2, SLDS uplift, linter violations, LWC token migration, class overrides…
3,586 installs - 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,582 installs - anywidget-generator marimo-team/skills
Generate anywidget components for marimo notebooks.
3,564 installs - 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,562 installs - image-taste-frontend leonxlnx/taste-skill
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In…
3,553 installs - state-machine jakubkrehel/skills
Renders every state of a component you choose on a throwaway page, with mock data and a switcher, so you can work on each state.
3,550 installs