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,139codex 4,760cursor 3,079copilot 978windsurf 55cline 34
CategoryWorkflow & Productivity 4,987AI & Agents 3,033Data & Analytics 2,347Code Review & Quality 1,377Backend & API 1,243Security 1,197Design & Presentation 1,129Documentation 967Content & Marketing 917Testing & QA 777DevOps & Cloud 576Databases 550Frontend 469Business & Finance 328Media & Video 258Other 9,845
1,034 found
193240 · page 5 / 22
alarmkitAlarmKit integration for scheduling alarms and timers with custom UI, Live Activities, and snooze support. Use when implementing…rshankrasauthor-componentCreate or review Blazor components (.razor files) with correct architecture. USE FOR: writing new Blazor components that do NOT…dotnetcode-formatterExecute automatically formats and validates code files using Prettier and other formatting tools. Use when users mention "format…jeremylongshorewritesfrontend-slidesCreate stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to…gooseworks-aidesign-standardsApply production-grade design standards when building or reviewing pages, components, or UI. Use this skill whenever the user…rampstackcoexpo-observeUse for anything related to EAS Observe — adding `expo-observe` to an Expo project (AppMetricsRoot/ObserveRoot HOC…sickn33flutter-use-column-row-firstUse when building any Flutter screen or component to choose responsive Row, Column, Expanded, Flexible, and Spacer layouts before…evancafrontend-blueprintAI frontend specialist and design consultant that guides users through a structured discovery process before generating any code.…tech-leads-clubfrontend-component-buildBuild production-ready frontend components with accessible markup, sensible props, defined states, and tested behavior. Use this…rampstackcothreejs-performanceThree.js 性能优化指南。当 Three.js/React Three Fiber 项目出现掉帧、内存增长、加载缓慢、绘制调用过多,或需要迁移 WebGPU、实现大规模粒子/实例化渲染、配置资源压缩管线时使用。触发关键词:"Three.js…staruhubhig-components-statusApple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings.sickn33interaction-designDesign and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI…wshobsonios-localizationImplement, review, or improve localization and internationalization in iOS/macOS apps — String Catalogs (.xcstrings), generated…dpearson2699langchainFramework for building LLM-powered applications with agents, chains, and RAG. Supports multiple providers (OpenAI, Anthropic…Orchestra-Researchmacos-designDesign and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app…davepoonoo-component-documentationCreate or update standardized object-oriented component documentation using a shared template plus mode-specific guidance for new…githubproviding-performance-optimization-adviceProvide comprehensive prioritized performance optimization recommendations for frontend, backend, and infrastructure. Use when…jeremylongshorewritesself-media-wechat-publisher把已确认的公众号终稿 Markdown 排版并写入微信公众号草稿箱。用于用户说"发布到公众号、写入草稿箱、公众号排版、换个排版主题、发小绿书图片消息"等场景。自动上传封面与文内图片,支持多主题与自定义 CSS、多账号和 server…yanhua1010stitch-ui-designExpert guidance for crafting effective prompts in Google Stitch, the AI-powered UI design tool by Google Labs. This skill helps…sickn33web-component-designMaster React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component…wshobsonzai-cliZ.AI CLI providing: - Vision: image/video analysis, OCR, UI-to-code, error diagnosis (GLM-4.6V) - Search: real-time web search…jeremylongshorealarmkitImplement AlarmKit alarms and countdown timers for iOS and iPadOS with Lock Screen, Dynamic Island, StandBy, and paired Apple…dpearson2699angular-state-managementMaster modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores…sickn33avkitCreate media playback experiences using AVKit. Use when adding video players with AVPlayerViewController, enabling…dpearson2699brand-voice-to-ui-copyTranslate brand voice into UI copy for websites and apps. Use for buttons, labels, empty states, loading states, errors…TheGoat395briefInteractive briefing of a plan file — explains reasoning, schema decisions, component choices. Use when developers need to…oliver-kriskacherry-electron-devDevelop, fix, and profile Cherry Studio in a tracked Electron instance. Use for everyday implementation, UI and interaction work…CherryHQcloud-claw-launch-agentUse this skill when the user wants to launch a new AltClaw, OpenClaw, PicoClaw, or Ottie deployment through Cloud Claw. Covers…internet-courtcomponent-common-domain-detectionFinds duplicate business logic spread across multiple components and suggests consolidation. Use when asking "where is this logic…tech-leads-clubcomponent-flattening-analysisDetects misplaced classes and fixes component hierarchy problems — finds code that should belong inside a component but sits at…tech-leads-clubcomponent-identification-sizingMaps architectural components in a codebase and measures their size to identify what should be extracted first. Use when asking…tech-leads-clubcss-grid-editorial-systemsCreate CSS Grid editorial layout systems for premium websites. Use for asymmetric grids, magazine layouts, portfolio indexes…TheGoat395deck-open-slide-canvasLocked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.nexu-iodomain-identification-groupingGroups existing components into logical business domains to plan service-based architecture. Use when asking "which components…tech-leads-clubfa-page-optimizer优化 Vue 页面,用 Fantastic-admin 框架内建组件(packages/components/)替换自定义实现和原生 HTML。当用户说:'帮我优化这个页面'、'把这些原生 HTML 换成框架组件'、'用…fantastic-adminfa-route-generator管理 Vue Router 路由配置,用于 Fantastic-admin 框架。当用户提到以下任何需求时必须使用此技能:新建页面需要加路由、详情页不想显示在菜单里、新增页和编辑页老是开两个标签、从列表跳详情返回后状态丢失、给菜单项加 NEW…fantastic-adminflutter-improve-designReviews Flutter code to find UI/UX improvements and writes an implementation plan for the ones you pick.kamranbekirovyzformkitUse when working with FormKit forms, validation, schema, or custom inputs in React, Vue, or Nuxt projects.formkitgsap-framer-scroll-animationUse this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned…githubkami-landingProduce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic…nexu-iokicad-schematicWorkflow skill for KiCAD schematic design via MCP tools. Triggers on: "design a circuit", "add a component", "wire up", "connect…mixelpixxmatlab-assemble-pcb-layoutBuild custom PCB structures with pcbComponent, shapes, Boolean ops, feeds, and multi-layer stackups for non-catalog geometries.…matlabmatlab-design-pcb-passiveSpiral inductors, interdigital capacitors, baluns, resonators, phase shifters for impedance matching, DC blocking, and bias tees.…matlabmatlab-design-pcb-txlineMicrostrip, stripline, CPW, differential pairs, and crosstalk analysis for impedance-controlled PCB interconnects. TRIGGER: user…matlabmodern-site-engineeringImplement beautiful modern websites and web apps with an opinionated premium frontend stack. Use for Next.js, React, Tailwind…TheGoat395motion-language-directorDefine website motion direction before implementation. Use for cinematic websites, Viktor-style motion, GSAP/ScrollTrigger pages…TheGoat395motion-react-layout-transitionsImplement Motion for React layout transitions. Use for layout prop, layoutId, shared element transitions, tabs, expanding cards…TheGoat395motion-react-microinteractionsImplement refined React and Motion for React microinteractions. Use for buttons, menus, nav, modals, tabs, cards, accordions…TheGoat395
← Prev5 / 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