Agent skills

Frontend skills

Read straight from the source repositories, not from submitted listings. Every skill shows what it does, what is inside, where it came from — and whether attention around its source is actually growing.

Toolclaude-code 29,140codex 4,755cursor 3,111copilot 976windsurf 55cline 34
CategoryWorkflow & Productivity 4,979AI & Agents 3,037Data & Analytics 2,345Code Review & Quality 1,376Backend & API 1,244Security 1,194Design & Presentation 1,154Documentation 965Content & Marketing 916Testing & QA 777DevOps & Cloud 576Databases 550Frontend 469Business & Finance 328Media & Video 257Other 9,833
1,015 found
817864 · page 18 / 22
posthog-sdk-patternsProduction-ready PostHog SDK patterns: singleton client, typed events, React hooks, Next.js App Router integration, and Python…jeremylongshorewritespower-platform-architectUse this skill when the user needs to transform business requirements, use case descriptions, or meeting transcripts into a…githubpremium-frontend-uiA comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography…githubprismFrontend engineer — UI components, dashboards, design system implementation, and frontend audits.jeremylongshorewritesproduct-inventorProduct Inventor e Design Alchemist de nivel maximo — combina Product Thinking, Design Systems, UI Engineering, Psicologia…sickn33progressive-enhancementBuild web applications using progressive enhancement — baseline HTML, layered CSS and JS, graceful degradation, and feature…a5c-aiwritesprogressive-web-appBuild Progressive Web Apps (PWAs) with offline support, installability, and caching strategies. Trigger whenever the user…sickn33project-documentation-to-confluenceCreates or updates project documentation for a feature, system, or component and publishes it to a user-specified Confluence…testdoublepromo-asset-producer宣传片两包素材生产。Pack A 使用当前可用图片生成能力生成产品图、概念图、UI 模拟图或风格补充图;Pack B 使用官网、应用截图、浏览器搜索、GitHub 或开源素材收集真实产品信号。当 storyboard 确认后进入。kangarookingpseudo-mergeTakes a proofread or apsa-style report file (or any markdown file using **Original:** / **Recommended:** syntax) and rewrites the…brycewang-stanfordpwa-manifest-generatorGenerate pwa manifest generator operations. Auto-activating skill for Frontend Development. Triggers on: pwa manifest generator…jeremylongshorewritesPygame Modular Project StructureA reusable architectural pattern for organizing a Pygame project into separate files (`settings.py`, `game.py`, `menu.py`…ECNU-ICALKPython 28x28 Drawing to NumPy Array GUICreate a Python GUI using Tkinter and PIL that provides a 28x28 pixel drawing surface, handles color inversion, and exports the…ECNU-ICALKPython Flask Web App for LLaVA Image Captioning via Replicate APIDevelop a Python Flask web application that serves an HTML frontend and uses the Replicate API to generate image captions using…ECNU-ICALKrayden-codeGenerate React code with Rayden UI components using correct props, tokens, and premium layout patternssickn33rayden-useBuild and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcementsickn33rde-evalRun a targeted local React Doctor Evals loop against an uncommitted rule change. Use after focused rule tests pass, while…millioncoReact 3D Tilt Card with RGB Animated BorderImplements a 3D perspective tilt effect on React cards based on mouse position relative to the element, combined with a cycling…ECNU-ICALKReact 3D Tilt Card with RGB Glowing BorderImplement a React product card component that features a mouse-relative 3D tilt effect and a hover-triggered RGB glowing border…ECNU-ICALKReact Canvas 高性能虚拟表格开发针对海量数据场景,使用 Canvas 和 React 开发高性能虚拟表格,支持局部渲染和单元格级更新优化。ECNU-ICALKReact Code Refactoring with ESLint RulesRefactors React code snippets based on specific ESLint rules or documentation provided by the user, prioritizing concise…ECNU-ICALKreact-component-generatorGenerate react component generator operations. Auto-activating skill for Frontend Development. Triggers on: react component…jeremylongshorewritesReact Concept Hierarchy DisplayRenders a selected concept with its parent and child relationships in a hierarchical layout using Ant Design components…ECNU-ICALKreact-context-setupConfigure react context setup operations. Auto-activating skill for Frontend Development. Triggers on: react context setup, react…jeremylongshorewritesreact_flask_announce_media_crudImplement a full-stack React and Flask solution for creating and updating 'annonce' entries with media. Features include…ECNU-ICALKreact-flow-architectBuild production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state…sickn33react-flow-node-tsCreate React Flow node components following established patterns with proper TypeScript types and store integration.sickn33React Form Logic: Editable Fields with Confirmation ResetImplementa um comportamento de formulário onde os campos permanecem editáveis após o envio, mas editar eles aciona um diálogo de…ECNU-ICALKreact-hook-creatorCreate react hook creator operations. Auto-activating skill for Frontend Development. Triggers on: react hook creator, react hook…jeremylongshorewritesReact Hook Form Nested Controller ValidationImplement and debug validation for nested form fields using React Hook Form Controller, ensuring error state paths match the…ECNU-ICALKReact JSON 数据多行格式化展示编写 React 组件,接收 JSON 对象,根据 value 类型(数组或字符串)进行分割处理,将 Key 独占一行加粗显示,Value 的每一项独占一行显示。ECNU-ICALKReact JSON数据按行展示组件编写一个React组件,用于展示JSON格式的键值对数据。该组件需处理value为数组或包含换行符的字符串的情况,要求Key独占一行并加粗,每个Value元素独占一行。ECNU-ICALKreact-nativeReact Native and Expo patterns for building performant mobile apps. Covers list performance, animations with Reanimated…jezwebwritesreact-native-patternsNavigation, state management, native modules, performance, animations, and cross-platform strategiescosmicstack-labsreact-nextjs-developmentReact and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend…sickn33react-patternsComponent patterns, hooks, state management, and performance optimization for React applicationscosmicstack-labsreact-patternsReact 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact —…jezwebreact-patternsReact 19 patterns including Server Components, Actions, Suspense, hooks, and component compositionrohitg00react-patternsModern React patterns and principles. Hooks, composition, performance, TypeScript best practices.sickn33React Pixi.js Interactive Graphics DevelopmentDevelop interactive 2D graphics applications using React and Pixi.js (@pixi/react). Includes rendering shapes from arrays…ECNU-ICALKReact Platformer with Gravity and CollisionGenerates a React functional component for a 2D platformer game using hooks for state management, refs for the game loop, and…ECNU-ICALKreact-state-managementMaster modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state…sickn33recipe-front-adjustAdjust an already-implemented UI in-session with verification against the design sourceshinprrecipe-front-buildExecute materialized frontend task files in autonomous execution modeshinprrecipe-front-designExecute from repository evidence through applicable UI Spec and optional ADR decisions to complete frontend Design Doc approvalshinprrecipe-front-planCreate frontend work plan from design document and obtain plan approvalshinprrecipe-fullstack-implementOrchestrate full-cycle implementation across backend and frontend layersshinprredesign-existing-projectsUpgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies…Leonxlnx
← Prev18 / 22Next →
How the catalog works
What is an agent skill?

A folder with a SKILL.md inside — instructions, and often scripts and assets, that an AI agent loads when the task matches. Claude Code, Codex, Cursor and Copilot all read the same format, so one skill usually works across them.

Where does this catalog come from?

We read 660 source repositories straight from their file trees rather than from submitted listings — what you see is what is actually published. 98 repositories were rejected because they advertise skills but contain none: link lists, not folders.

Why is there no install counter?

Because install counts live in the registry that serves `npx skills add`, and that is not ours — publishing a number we cannot verify would be worse than showing none. Instead we show where a skill comes from and whether attention around its source is actually growing, measured from our own weekly snapshots.

Do you deduplicate?

Yes, and it matters more than expected. Aggregator repositories republish the same skill in several places — one source carried 6,317 SKILL.md files for 2,001 actual skills. We collapse by folder name and keep the canonical copy, so the catalog counts things, not copies.

Keep going