Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Laws of UX (Fitts, Hick, Miller, Jakob, Peak-End, Doherty), Gestalt principles, cognitive biases, mental models, attention, and memory constraints. Use when auditing cognitive load, sizing tap targets, reducing choice overload, fixing decision fatigue, or grounding a design decision in research.
Design token management with the W3C Design Token spec, three-tier hierarchy (global/alias/component), OKLCH color, Style Dictionary transforms, and dark mode theming. Use when creating token files, implementing theme systems, or building design-to-code pipelines.
Create or audit maintainable diagrams when relationships, sequence, state, hierarchy, or quantitative comparisons are materially clearer visually than in prose. Selects a format the destination actually renders, preserves source authority, validates output, and includes an accessible text explanation.
Define the workbench before anyone builds it — the Workbench Architect turns one vague sentence into a build-ready Workbench Spec. It runs BEFORE any interface exists and never writes one: it decides WHAT the thing is and hands finesse-ui (or Cursor, v0, 通义, a human) a spec complete enough to build a page from. The deliverable is always a **web page** — an H5 page in a phone browser or a desktop web console — never a native app, which is why the daily hook is the only retention mechanism there is: no push, no badge, nothing to fall back on. Covers **two domains under one method**. **Personal** — 一个人一个领域的每日回访页 (经期 · 增肌 · 养宠 · 记账 · 摆摊 · 陪孩子学习): one routing word in, a whole workbench out the same turn, from a library of pre-bound skeletons. **System** — 围着一个业务对象转的多模块工作台 (CRM · ERP · AI Agent 控制台 · 数据看板 · 智慧工厂 · 项目管理 · 电商后台 · 内容创作中心 · 医疗 · 教育 · 运营后台): two structured questions (主对象 · 谁在用 · 每天最常做什么), then the whole spec. Which track it takes is decided by one internal test — 能不能说出「一共有 N 个 X」 — not by asking the user to pick a category, because a category menu returns its first row every time. Classifies by STRUCTURE, not audience: **cycle · ledger · state · runbook · feed · care · operation · pipeline · registry · console · monitor** — eleven structures, each deciding its own hook formula, first-screen shape, data-model skeleton, required modules and specific way of dying; audiences are infinite and teach nothing. Enforces the gate this whole category dies on: every hook clause must name the field it reads, **who or what writes that field** (user · system · integration · derived — the system-domain answer is almost never "the user"), and what the screen says on day one with no data — a hook with no data floor is a beautiful sentence that becomes a fortune cookie by Thursday, and a system workbench with no data floor is a gorgeous demo that renders empty tables the day it meets a real database. Outputs `.workbench/spec.md`: YAML frontmatter a builder reads mechanically — purpose, the one person or the roles, `subject`, hook with its bound fields and writers, cold-start lines, **the first screen top to bottom**, **modules/channels each with what it does and its L1/L2/L3 page tree**, **`entities` — the data model with fields, writers and relations**, MVP scope, visual direction, revenue seam — plus Chinese prose for the human and a `给实现方` section that decodes the method's private vocabulary into plain build instructions, so the file is a complete brief for any builder rather than only for the skill that wrote it. Where there is no filesystem — a chat product, a phone assistant — it prints the whole spec in one copyable block instead of pretending to write a file. Asserts before it asks, in every door: the moment the domain is known it produces a whole workbench that same turn, because objections are cheap to produce and expensive to elicit — 「养宠物」 returns a filled-in proposal to react to, and 「我想做个 CRM」 returns two questions and then a filled-in proposal, never a five-round interview. Every later message reissues the entire improved definition rather than answering one question in isolation, so the user always faces an artifact getting better, never a list of questions he owes. Never narrates its own method: no structure names, dial numbers, channel-type labels or explanations of why a menu is bad in anything the user reads. Ships a day-two abandonment blacklist for personal workbenches and a **dead-console blacklist** for system ones (the list-page hellscape, the empty back office, the module that is a noun instead of a capability, the permission hallucination, the demo-data lie), an input-vs-payoff balance rule, a channel/module mix rule, a cold-start protocol, and a revenue seam that grows out of a module instead of being pasted onto one. Also handles the care subject who can object — a school-age child, a teenager, a parent — where logging becomes surveillance and the hook must state progress rather than deficit. Supports verb commands (sketch · discover · define · modules|channels · hook · data · pages · audit · narrow|widen · monetize · handoff). Triggers on "个人工作台", "专属工作台", "AI 工作台", "AI Agent 工作台", "Agent 控制台", "工作台", "后台", "管理后台", "控制台", "CRM", "ERP", "进销存", "数据看板", "BI 看板", "驾驶舱", "大屏", "智慧工厂", "IoT 控制中心", "项目管理系统", "内容创作中心", "电商后台", "运营后台", "教务系统", "医疗系统", "知识库", "我想做个自己的工具", "帮我想一个工作台", "帮我定义一下这个产品", "不知道做什么产品", "personal dashboard", "admin console", "back office", "what should I build", "每日钩子", "daily hook", "左轨", "频道设计", "模块划分", "信息架构", "页面层级", "数据模型", "留存机制", "第二天没人打开", "用户不会录数据", "冷启动", "空数据", "这个功能有人用吗", "先给我看看效果", "直接做出来我看看", "给孩子做个", "给我妈做个", "经期/健身/睡眠/备考/养宠/育儿/记账/摆摊 工作台", "/workbench".
Design, build, review, and polish production frontend and mobile interfaces with distinctive visual direction, searchable UX and design-system guidance, responsive and accessibility rules, stack-specific recommendations, and concise product copy. Use whenever creating or changing pages, components, layouts, styling, interaction, navigation, motion, charts, visual assets, UI copy, or frontend usability in web, Flutter, React Native, SwiftUI, desktop, or similar interfaces.
Build a professional HTML slide deck from source content and convert it to a pixel-perfect PDF. Covers slide architecture, layout patterns, print-safe CSS, Puppeteer PDF conversion, and quality verification. Use when creating presentation decks, converting documents to slide format, or generating PDF decks from HTML.
Audit and fix image and media accessibility for a page — detect missing, empty, duplicated, or keyword-stuffed alt text; check alt quality and length, missing width/height (CLS), legacy formats, and absent VideoObject schema; generate contextual alt text and dimensions. Module M9. Feeds both the Search SEO and AI Visibility scores
Match UI/UX interaction needs to proven SwiftUI animation patterns from curated open-source catalogs. Use when planning or building iOS/macOS screens where an interaction should feel alive — loaders, likes, toggles, card decks, reveals, shaders — or when asked which animation fits a moment. Recommends system-first restraint before custom motion.
Implements Syncfusion .NET MAUI Backdrop Page (SfBackdropPage) with back layer and front layer surfaces. Use when working with backdrop pages, SfBackdropPage, back layer, front layer, or reveal/conceal animations. Covers backdrop navigation patterns, header icons, corner shapes, reveal height, layer state events, and liquid glass effect.
Implements Syncfusion .NET MAUI Color Picker (SfColorPicker). Use when implementing color picker functionality, color selection UI, palette mode, spectrum mode, or alpha slider configuration in .NET MAUI applications. Covers inline rendering, popup customization, color changed events, localization, and liquid glass effect.
Implements Syncfusion® .NET MAUI Linear Gauge (SfLinearGauge) for data visualization with scales, pointers, and ranges. Use when creating linear gauges, displaying measurements on linear scales, showing progress indicators, or building thermometer-style visualizations. Covers gauge pointer configuration, bar pointers or shape markers, draggable gauge pointers, and animated gauge transitions.
Implements Syncfusion .NET MAUI Radial Menu (SfRadialMenu) - a hierarchical circular menu optimized for touch. Use when working with radial menus, circular menus, context menus, touch-optimized menus, or hierarchical circular navigation. Covers floating menus, drag-enabled menus, nested circular menus, and custom segmented layouts in .NET MAUI applications.
Implements the Syncfusion .NET MAUI Range Selector (SfRangeSelector) component. Use when working with range selection with embedded charts, numeric range input, RangeStart/RangeEnd, track customization, or thumb styling in .NET MAUI. Covers tooltip configuration, label formatting, ticks/dividers, selection modes, events, and embedding SfCartesianChart inside a range control.
Implements Syncfusion .NET MAUI Rotator (SfRotator) control for displaying image carousels, slideshows, or rotating content. Use this for image galleries, product showcases, testimonial sliders, banner rotators, or scenarios requiring automatic or manual navigation through visual content.
Implements Syncfusion® .NET MAUI StepProgressBar (SfStepProgressBar) control. Use when implementing step progress visualization, multi-step process tracking, or sequential progress indication. This skill covers step appearance customization, step states (completed/in-progress/not-started), orientation options, tooltips, and accessibility for order tracking, registration forms, or checkout processes.
Implements Syncfusion .NET MAUI Toolbar (SfToolbar) for navigation bars and command bars. Use when working with toolbars, toolbar items, navigation bars, toolbar buttons, or action toolbars in .NET MAUI applications. This skill covers toolbar item configuration, icons, text, overflow behavior, orientation, selection modes, and toolbar customization.
Publish a React component to the user's team library on 21st.dev so teammates can install it with a single command, or install an existing one. Triggers when the user says things like "publish/share/upload this to 21st", "залей в наш регистр", "опубликуй компонент", "share with team", "make this reusable", "install our Button", "use the team button".
The craft of creating and maintaining cohesive brand identity systems. Branding translates brand strategy into tangible visual and verbal identity—logos, color systems, typography, imagery, and voice guidelines that work together to make a brand recognizable and memorable. This skill covers logo design, visual identity systems, brand guidelines, naming, verbal identity, and brand application across touchpoints. Great branding is invisible when done right—it feels inevitable, as if the brand couldn't have looked any other way. Use when "logo, branding, brand identity, brand guidelines, visual identity, color palette, typography, brand book, naming, rebrand, brand refresh, brand system, branding, identity, logo, visual-design, guidelines, naming, typography, color" mentioned.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Load this skill whenever the project contains forms, inputs, selects, checkboxes, radio buttons, text areas, or any validation flow. Under no circumstances create a form without visible labels, error identification, and keyboard accessibility. Absolutely always associate every input with a label and provide clear, accessible error messages
Implements Syncfusion® .NET MAUI DigitalGauge (SfDigitalGauge) control to display alphanumeric characters in LED-style digital format. Use when working with digital gauges, LED displays, seven-segment displays, digital clocks, or digital counters. Ideal for displaying numbers, letters, or special characters in a digital/electronic display format.
Implements Syncfusion .NET MAUI Kanban Board (SfKanban) control. Use when implementing kanban boards, task management visualizations, workflow tracking, or agile boards in .NET MAUI applications. Covers installation, data binding with default and custom models, card customization, column configuration, workflow transitions, and drag-and-drop events.
Implements Syncfusion .NET MAUI Rating (SfRating) control. Use when implementing star ratings, review systems, feedback mechanisms, or product ratings in MAUI apps. Covers rating control configuration, star rating, half-star rating, custom rating shapes, rating precision, and rating events.
Implements Syncfusion .NET MAUI SignaturePad (SfSignaturePad) for capturing digital signatures with realistic handwritten appearance. Use when working with signature capture, digital signatures, electronic signatures, or signing documents in .NET MAUI applications. Covers stroke customization, saving signatures as images, signature point data retrieval, and signature validation.
Implements Syncfusion® .NET MAUI TreeMap (SfTreeMap) for visualizing hierarchical data with rectangles sized and colored by values. Use when implementing hierarchical data visualization, heat maps, squarified layouts, multi-level data grouping, or brush settings for hierarchical displays. This skill covers installation, data binding, layout types, hierarchical levels with GroupPath, legend configuration, tooltips, and TreeMap customization.
Generates infographic image card series with 12 visual styles, 8 layouts, and 3 color palettes. Breaks content into 1-10 cartoon-style image cards optimized for social media engagement. Use when user mentions "小红书图片", "小红书种草", "小绿书", "微信图文", "微信贴图", "image cards", "图片卡片", baoyu-xhs-images, or wants social media infographic series.
Accessibility audit and remediation for Canvas LMS courses. Scans content for WCAG-oriented issues, generates prioritized reports, guides fixes, and verifies remediation. Use when asked to "audit accessibility", "check WCAG", "fix accessibility issues", or "run accessibility review".
Load when reviewing UI code; designing a component or layout; picking an easing curve or transition; deciding whether something should animate or make a sound; choosing typography, color (OKLCH, contrast), or avatars; writing UI copy or errors; auditing for AI-default tells, code tells, or a11y misses; making a screen look less generated; using DESIGN.md or .design tokens; writing design-system docs for agents; giving Agentation feedback; asking why a UI feels flat or unfinished; judging when delight earns its weight; designing or generating UI sound effects and syncing them to motion; planning, cutting, scoring, or reviewing a product launch video; creating or animating SVG (icons, mascots, logo reveals, video-to-vector); drawing a diagram or tldraw canvas; prototyping directions behind a picker; building a tool instead of re-prompting; or choosing which design skill should own a job. Distills Emil Kowalski, Benji Taylor, transitions.dev, guidelines.sh, Vercel, Index, Apple, and 47 measured launch films.
Reference for the Rust frontend framework fandhe-frontend. SSR / SPA / SSG / View Transitions, hydration, Document builder (built-in SSR), CSP meta, single executable distribution, Vercel, default escaping. Crates: core / app / interactive / server (generate_pages) / headless-ui (Primitives, AutocompleteToken, passkey) / pre-styled-ui (Themes, motion) / wireframe-ui (Wireframes) / animation (data-* attributes) / wasm-full. Blocks (335 section examples, such as Hero / Pricing / Cart). CLI fw
Validate that the problem you want to solve is real, painful, and worth solving before building anything. Master Cindy Alvarez's structured approach to problem discovery interviews. Use when: **Before solution interviews** to confirm the problem exists; **Early customer discovery** to understand the problem space; **Pivoting** to find new problems worth solving; **Market expansion** to understand problems in new segments; **Feature prioritization** to validate which problems matter most
Analyze product screenshots to extract feature lists and generate development task checklists. Use when: (1) Analyzing competitor product screenshots for feature extraction, (2) Generating PRD/task lists from UI designs, (3) Batch analyzing multiple app screens, (4) Conducting competitive analysis from visual references.
Implements Syncfusion .NET MAUI Smart DataGrid (SfSmartDataGrid) with AI-powered features. Use when working with SfSmartDataGrid, AI-powered grid operations, natural language data commands, AI sorting, AI filtering, or conversational grid interaction. Covers Azure OpenAI grid integration and natural language commands for grids.
Implements Syncfusion® .NET MAUI Sunburst Chart (SfSunburstChart) for hierarchical data visualization using a radial, multi-level circular layout. Use this for sunburst charts, radial hierarchical charts, multi-level pie charts, or hierarchical data visualization with drill-down capabilities. Ideal for visualizing organizational structures, file systems, or nested categorical data.
Intelligent typesetting for WeChat Official Accounts. No fixed templates—understand each article, then design its layout on the spot: derive the structure, reading rhythm, style, colors, and fonts from the content, making every layout unique, and provide alternative style references. Generate fully inline HTML using WeChat-safe implementation techniques, with four publishing gates—content integrity, compatibility, output contract, and actual rendering—to reduce the risk of layout breakage after pasting. Output a preview page with a “Copy with one click” button. Trigger when the user mentions “WeChat article,” “Official Account article,” “post to Official Account,” “format this for me,” “Official Account typesetting,” “WeChat formatting,” “format as WeChat,” or “Official Account HTML,” or provides an article/Markdown to publish to an Official Account. Also use to check existing Official Account HTML for compatibility and layout quality, or restyle and reformat an article.
Generate App Store and Google Play screenshot assets using each::sense AI. Create device-framed screenshots, feature highlights, localized versions, and promotional visuals optimized for iOS App Store and Google Play Store requirements.
Use this skill whenever the user asks to build, create, design, redesign, polish, audit, animate, improve, fix, or "make prettier/cleaner/nicer" ANY frontend interface — landing pages, dashboards, portfolios, SaaS apps, marketing sites, components, hero sections, navbars, footers, pricing tables, posters, mobile UIs, or any web/React/Next.js/Vue/Svelte UI work. Also use when the user mentions Tailwind, shadcn, Framer Motion, 21st.dev, React Bits, animations, typography, color palettes, design taste, "make it look premium," "fix the look," or "make this less generic." Enforces production-grade design discipline (typography, color, motion, layout, accessibility, copy) and bans generic AI aesthetics like Inter font, purple-to-blue gradients, three-card feature rows, h-screen heroes, John Doe placeholder data, and "elevate/seamless/unleash" filler copy. Generates a project DESIGN.md to lock in tokens across sessions. Consolidates rules from UI/UX Pro Max, Framer Motion, 21st.dev Magic, React Bits, Anthropic frontend-design, Impeccable, and design-taste-frontend.
Used when the user asks to “create HTML slides”, “generate an HTML presentation”, “make animated slides”, “build interactive slides”, “create web slides”, “GSAP presentation”, “browser-based slides”, “convert PPTX to HTML”, “animated deck”, “reveal.js slides”, or when the output format is HTML for any presentation task. Also triggers on “single-file presentation”, “CSS animations in slides”, “scroll-based slides”, or “web presentation”. Generates self-contained, single-file HTML with viewport fitting, CSS/GSAP animations, and curated style presets
Design fluency for frontend development. One skill with a suite of slash commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.), curated anti-pattern detection, and a runtime launcher script. Covers UI design, redesign, critique, accessibility, motion, theming, typography, and component craft across websites, dashboards, and apps.
This skill should be used when the user asks to "add health bar", "create menu", "UI elements", "dialog box", "inventory system", "create buttons", "HUD overlay", "score display", "minimap", "progress bar", "bitmap text", "interactive button", or "UI layout".
Implements Syncfusion .NET MAUI TimePicker (SfTimePicker) control. Use when implementing time selection, time picker controls, or time input UI in .NET MAUI. This skill covers installation, configuration, time formats (14 predefined formats), picker modes (Dialog/RelativeDialog), intervals, time restrictions, looping, events, and customization.
Tailwind CSS plugins — official plugins and custom plugin development. PROACTIVELY activate for: (1) @tailwindcss/typography (prose), (2) @tailwindcss/forms, (3) @tailwindcss/aspect-ratio (now built-in), (4) @tailwindcss/container-queries, (5) writing custom plugins via plugin() API, (6) addUtilities, addComponents, addVariant from plugin API, (7) third-party plugins (tailwindcss-animate, tailwind-merge), (8) in-CSS @utility and @variant in v4 (often replaces JS plugins), (9) plugin migration from v3 JS API to v4 CSS API. Provides: official plugin install/setup, plugin API reference, custom plugin examples, and v3-to-v4 plugin migration guide.
This skill provides guidance for building workflow visualizations with Vercel AI Elements and React Flow. Use when implementing interactive node-based interfaces, workflow diagrams, or process flow visualizations in Next.js applications. Covers the Canvas, Node, Edge, Connection, Controls, Panel, and Toolbar components.
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.