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
241288 · page 6 / 22
oma-translatorContext-aware translation that preserves tone, style, and natural word order. Use when translating UI strings, documentation…first-flukeopenai-frontend-designUse for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or…fcakyonphx-briefInteractive briefing of a plan file — explains reasoning, schema decisions, component choices. Use when developers need to…oliver-kriskapremium-visual-reference-libraryUse when Codex needs premium visual inspiration sources, website galleries, studio references, product-site references, motion…TheGoat395prototypeBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic…rengwuprototypeBuild a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several…sickn33radix-accessible-primitivesUse Radix Primitives for accessible custom React UI. Use for dialogs, dropdown menus, popovers, tooltips, tabs, accordions…TheGoat395react-accessible-componentsBuild accessible React components for websites and apps. Use when creating buttons, links, menus, dialogs, tabs, accordions…TheGoat395react-component-compositionCraft React component composition for websites and apps. Use when splitting large JSX files, creating reusable sections…TheGoat395react-component-craftCraft polished React components for websites and apps. Use for reusable sections, UI primitives, composition, props, state…TheGoat395react-component-performanceDiagnose slow React components and suggest targeted performance fixes.sickn33react-container-presentation-componentCreate a React component using the Container/Presentation pattern in src/components by asking for the component name and type (ui…githubreact-form-patternsImplement polished React form patterns. Use for contact forms, lead forms, booking forms, waitlists, checkout steps, newsletter…TheGoat395react18-dep-compatibilityReact 18.3.1 and React 19 dependency compatibility matrix.githubrouterRoutes any game-development request to the right specialized skill(s): it detects the engine (Godot, Unity, Unreal, Bevy, Phaser…gamedev-skillsstitch-design-tasteSemantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI…nexu-iosurface-shadow-material-systemsDesign surface, shadow, border, material, radius, glass, elevation, overlay, divider, and depth systems for premium websites and…TheGoat395tailwind-design-systemBuild scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when…wshobsontailwind-design-tokensCreate token-driven Tailwind and CSS variable systems for premium websites. Use for color tokens, typography tokens, spacing…TheGoat395tipkitImplement and review Apple TipKit feature-discovery UI for iOS 17+ apps. Use when adding or auditing in-app tips, contextual…dpearson2699tweaksWrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme —…nexu-ioui-primitives-shadcn-lucideUse shadcn/ui, Radix-style primitives, and lucide-react icons without producing generic default UI. Use for dialogs, menus…TheGoat395ui-screenshot-compositionCompose UI screenshots inside website layouts. Use for product sections, feature blocks, app showcases, case studies, dashboards…TheGoat395web-design-guidelinesReview UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion…nexu-ioweb-design-reviewerThis skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on…brycewang-stanfordweb-design-reviewerThis skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on…githubwebsite-operating-rulesApply strict website-building operating rules for any frontend, website, landing page, portfolio, product site, luxury site…TheGoat395prompt-architectCreate and enhance prompts, system instructions, and principle files. Capabilities: transform verbose prompts, add…majiayu000aads-training-lifecycleMaintain AADS-ULoRA phase1, phase2, and phase3 training behavior plus adapter lifecycle invariants across local and Colab flows.…majiayu000adk-agent-builderBuild production-ready AI agents using Google's Agent Development Kit with AI assistant integration, React patterns, multi-agent…majiayu000writesagent-browserBrowser automation via agent-browser CLI for web navigation, form filling, screenshots, scraping, login flows, and UI testing.BioTender-maxagent-builder-vercel-sdkBuild conversational AI agents using Vercel AI SDK + OpenRouter. Use when creating Next.js frontends with streaming UI, tool…majiayu000agent-canvasInteractive element picker for web pages. Opens a browser with click-to-select UI overlay. Use when you need to let users…majiayu000agent-eyesVisual context analyzer for AI agents. Provides screenshots, accessibility scans, DOM snapshots, and element descriptions for web…majiayu000agent-loopsAgentic workflow patterns for autonomous LLM reasoning. Use when building ReAct agents, implementing reasoning loops, or creating…majiayu000agentic-workflowsDesign and implement agentic AI workflows and patterns. Covers ReAct, planning agents, tool use, memory systems, and multi-agent…majiayu000agents-sdkBuild AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time…shobcoderai-analysisCommand-line tools that delegate analysis tasks to AI models. Includes image description, screenshot comparison, essay generation…majiayu000ai-engineerMASTER AI: LLM Apps, Advanced RAG, Agents (ReAct/Plan), Prompting (CoT/Few-shot), LangGraph, VectorDBs, RAGAS Eval. Use for ANY…majiayu000ai-langchain4j基于若依-vue-plus框架的LangChain4j AI大模型集成标准规范。全面规范模型配置管理、类型安全服务定义、RAG(检索增强生成)实现、流式响应处理及安全性保障。 触发场景: - 开发智能客服系统、文档问答助手、代码生成工具 -…majiayu000ai-model-webUse this skill when developing browser/Web applications (React/Vue/Angular, static websites, SPAs) that need AI capabilities.…majiayu000ai-sdkAnswer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like…majiayu000ai-sdkAnswer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like…majiayu000ai-sdk-handlerIntegrate Vercel AI SDK for LLMs, Chatbots, Generative UI, and Agentic Workflows.majiayu000ai-sdk-uiBuild React chat interfaces with Vercel AI SDK v6. Covers useChat/useCompletion/useObject hooks, message parts structure, tool…majiayu000ai-sdk-uiVercel AI SDK v5 React hooks (useChat, useCompletion, useObject) for AI chat interfaces. Use for React/Next.js AI apps or…majiayu000aibridge-prefab-patchUnity Prefab asset patch workflow for AIBridge. Use when modifying complex prefab assets with prefab patch operations, child or…FlameskyDexiveanalyze-architectureUse this skill when you need to analyze code changes from an architectural perspective, evaluate system design decisions, or…majiayu000
← Prev6 / 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