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 28,838codex 6,583cursor 4,244copilot 1,341windsurf 73cline 44
CategoryAI & Agents 4,188Data & Analytics 3,152Code Review & Quality 1,857Backend & API 1,737Security 1,624Workflow & Productivity 1,614Documentation 1,361Design & Presentation 1,327Content & Marketing 1,213Testing & QA 1,074DevOps & Cloud 783Databases 735Frontend 623Business & Finance 447Media & Video 349Other 7,916
1,013 found
4996 · page 2 / 22
web-artifacts-builderSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React…ThinkInAIXYZscriptsweb-design-analyzer分析网页截图,提取设计系统(Design System)并生成结构化数据和可用的 AI Coding Prompt。适用于 UI/UX 设计师和前端工程师需要从现有网页设计中提取设计规范、配色方案、排版系统和组件风格的场景。anbeimescriptsweb-design网页设计与部署。生成精美的单页 HTML 网页(报告、落地页、数据可视化等),支持一键部署到 Cloudflare Pages。使用 Tailwind CSS + Chart.js + Font Awesome…countbot-aiscriptsxcode-compilation-analyzerAnalyze Swift and mixed-language compile hotspots using build timing summaries and Swift frontend diagnostics, then produce a…AvdLeescriptsask-user-questionAsk users questions via the UI. Use when you need clarification, user preferences, or confirmation before proceeding. The user…MemTensorscriptsdeck-factory발표급 다크 에디토리얼 HTML 덱을 손으로 짓는 디자인 시스템. 브리프/원고를 받아 Apple·Linear·Stripe 키노트급으로 보이는 프레젠테이션을 프론트엔드(HTML/CSS, 1920×1080 슬라이드)로 만들고 헤드리스…gongnyangscriptsfigma-annotationsRead and write designer annotations on Figma nodes — node-level design specs that pin properties (fills, width, fontSize, etc.)…southleftscriptsfigma-export-tokensExport Figma variables to design token files in DTCG, CSS custom properties, Tailwind v4/v3, SCSS, TypeScript, JSON, Style…southleftscriptsfigma-generate-component-docGenerate complete Markdown documentation for a Figma component — anatomy/layer tree, design tokens (colors, spacing, typography)…southleftscriptsfigma-version-historyList a Figma file's version history, snapshot the file at any past version, and diff two versions (added/removed/renamed pages…southleftscriptsfrontend-integration-yamlGenerate canonical FrontendIntegration YAML from a simplified single-menu authoring model for frontend-forge.kubespherescriptshtml-to-pdfRender HTML (with CSS) to a PDF file. Trigger when the user wants to export a styled report, invoice, label, or any…opensquillascriptsposition-meElite Website Reviewer Agent for AEO, GEO, SEO, UI/UX Psychology, and Copywriting. Use this skill when asked to review or…Varnan-Techscriptsfigma-component-propertiesAdd, edit, and delete Figma component properties (TEXT, BOOLEAN, INSTANCE_SWAP, VARIANT) on a COMPONENT or COMPONENT_SET, and…southleftscriptsfigma-import-tokensPush design tokens from code INTO Figma as variables — DTCG / tokens.json / a token object → Figma variable collections, modes…southleftscriptsfigma-scan-code-accessibilityScan generated/authored HTML for accessibility violations with axe-core (Deque) running over JSDOM — structural and semantic…southleftscriptsobsidian-rest-apiCall the Obsidian Local REST API directly (over HTTP) for vault operations the mcp__obsidian__* tools do NOT expose — move/rename…davepoonscriptsreact-flow-node-tsCreate React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for…microsoftscriptsandroid_ui_verificationAutomated end-to-end UI testing and verification on an Android Emulator using ADB.sickn33scriptsfigma-analyze-component-setAnalyze a Figma COMPONENT_SET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants…southleftscriptsfigma-arrange-component-setOrganize a Figma COMPONENT_SET's variants into a clean, labeled grid — rows and columns derived from the variant properties, with…southleftscriptsfigma-blame-nodeFind which Figma version introduced a specific change — a component property or a child node — via a binary search over version…southleftscriptsfigma-generate-changelogGenerate a human-readable markdown changelog between two Figma file versions — pages added/removed/renamed plus per-component…southleftscriptsmuapi-ui-designGenerate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design…SamurAIGPTscriptszustand-store-tsCreate Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building…microsoftscriptsvueuse-functionsApply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.antfuslidevCreate and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations…antfuai-animation-skill将科普内容文本转换为可视化PPT风格网页的完整工作流。当用户输入科普内容并希望生成演示页面时触发。支持两种模式:(1) 默认模式:将科普内容生成为仿PPT轮播的单页HTML动画网页;(2)…mingchen666design-itRoutes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific…sickn33remotion-best-practicesBest practices and domain knowledge for building videos programmatically with Remotion (videos in React/TypeScript, rendered to…guanyangvercel-react-native-skillsReact Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing…ECNU-ICALKvercel-react-native-skillsReact Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing…guanyangmacos-developmentComprehensive macOS development guidance including Swift 6+, SwiftUI, SwiftData, architecture patterns, AppKit bridging, and…rshankrasremotion-best-practicesBest practices for Remotion - Video creation in ReactECNU-ICALKreact-native-skillsUse when working with react-native-skills tasks or workflowssickn33ios-developmentComprehensive iOS development guidance including Swift best practices, SwiftUI patterns, UI/UX review against HIG, and app…rshankrassyndicGère un parc de copropriétés en France avec vue portfolio consolidée. Couvre administration, comptabilité (décret 2005, plan…romainsimonangular-developerGenerates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best…mturaclaminaRoute ordinary product implementation and explicit Lamina lifecycle requests. Use passively after initialization for changes to…aryaniyapsremotion-best-practicesBest practices for Remotion - Video creation in Reactdtsolaremotion-best-practicesBest practices for Remotion - Video creation in Reactsickn33remotion-video-creationBest practices for Remotion - Video creation in React. 29 domain-specific rules covering 3D, animations, audio, captions, charts…mturacswiftui-ui-patternsApply proven SwiftUI UI patterns for navigation, sheets, async state, and reusable screens.sickn33codedrobe-themeCreate, inspect, convert, apply, replace, verify, troubleshoot, update, publish, or restore reversible CodeDrobe themes for…CodeDrobeunocssUnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or…antfuvue-best-practicesMUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach.…antfulegacy-circuit-mockupsGenerate breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. Use when asked to create circuit…githuboma-designAI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component…first-fluke
← Prev2 / 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