Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific scaffolding. Use as the capstone skill after running theming, layout, dashboard, data-viz, or feedback skills to wire components into working React/Next.js, Python, or Rust projects.
WeChat Official Account article pipeline · use it when the end state is **formatted WeChat Official Account HTML** or **the article placed into your own WeChat Official Account drafts** (saves drafts only, never mass-sends). The input is **already-written** Markdown/HTML; this pipeline does not write the body text, only the deterministic operations that follow: render → pre-upload images → cover → save draft. ⚠️ It **writes to the user's own WeChat Official Account backend**; do not run it on your own initiative just because a draft is ready. Saving a draft requires an bound account + DOUBAOYA_API_KEY; not needed for local rendering / theme switching only. Trigger words: 正文写好了怎么发 / 要排版好的公众号 HTML / 接着排版发草稿 / 写公众号 / 转公众号排版 / 推公众号草稿 / 重新推草稿 / 带封面发布到草稿箱 / 把文章存进公众号草稿箱 / 公众号图文流水线 / dby-publish / 存公众号草稿 / 公众号草稿箱 / 代发公众号草稿箱 / addDraft / draft/add / 图文推进公众号 / 稿子发到公众号后台。
Opinionated product-design skill for building, reviewing, polishing, and iterating on landing pages, apps, dashboards, AI products, design systems, and brand touchpoints. UX and comprehension first, then restraint (three type sizes, delete decoration), then foundations, then tactical craft — hierarchy, spacing systems, type scales, HSL palettes, shadows, finishing touches. Distilled from 20 YC Design Review videos (Linear, Stripe, Cursor, Framer) plus the Refactoring UI book. Use whenever the user asks to design, redesign, critique, or polish anything user-facing: "make it look better/more professional/trustworthy", de-slop the AI/vibe-coded look, fix a landing or pricing page, improve conversion, design an AI feature or agent UI, set up tokens or a design system, review a URL/screenshot/mockup. Also trigger for tactical UI questions — spacing feels off, visual hierarchy, choosing colors, typography, empty states, Tailwind/CSS styling — even without the word "design". Not for pure backend/DevOps work.
TRIGGER when: user asks to draw, illustrate, or visualize any process, structure, or concept — "画个流程图", "draw an architecture diagram", "帮我画个对比图", "visualize this process", "make a diagram for this doc", or mentions 流程图/架构图/示意图/对比图/时序图/泳道图/时间线. Also trigger when user provides a document/article and asks for illustrations or diagrams. DO NOT trigger for: chart/plot requests (bar charts, line graphs — those need a charting library, not draw.io), or artistic image requests (logos, mascots, drawings of objects/people — those need an image tool).
Best practices for HarmonyOS application development with ArkTS and ArkUI, covering components, state management, resources, layout, lifecycle, and accessibility. Use when writing .ets component files, using ArkUI decorators like @Component/@State/@Prop/@Link, building layouts with Column/Row/Stack/List, managing HarmonyOS app resources with $r(), or handling component lifecycle and accessibility on HarmonyOS.
Research-backed UX best practices for Shopify Hydrogen storefronts, based on Baymard Institute (200,000+ hours of usability research) and Nielsen Norman Group studies. Use this skill WHENEVER the user is building, reviewing, or improving any part of a Shopify Hydrogen e-commerce site — including homepage, collection/listing pages, product pages, cart, checkout, search, filters, mobile UX, accessibility, or trust/credibility concerns. Also use when the user asks for code review on Hydrogen components, wants to scaffold a new route or component, or mentions conversion, cart abandonment, or shopping experience issues. Trigger even if the user doesn't explicitly say "UX" — any Hydrogen storefront work benefits from these guidelines.
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
Improve product interfaces with tasteful UI craft, micro-interactions, accessibility-preserving polish, and detail-oriented review. Use when building UI, reviewing components, improving perceived quality, making an interface feel better, or auditing forms, buttons, motion, typography, empty states, loading states, and navigation polish.
Discover and import design tokens from SUBSCRIBED Figma team libraries into the current file. Use when the user wants to reuse tokens that live in a shared library: triggers 'list library variables', 'what tokens are in our shared library', 'import a variable from our design system library', 'pull in the brand color token from the library'. Works on ANY plan via the Plugin API teamLibrary methods. For LOCAL variables use export-tokens-figma / manage-variables-figma.
Maintain the LovStudio website's partners section AND align partner logo rows on event posters / hero strips: reuse lovstudio-find-logo for brand logo discovery, normalize collected logos to a 240px-tall content canvas (retina-ready), rasterize SVGs via rsvg-convert before normalizing (so SVG viewBox padding gets cropped), strip embedded background rects from icon-style SVGs, composite icon + wordmark when only an icon is available (using brand fonts), wrap logos in a fixed-size grid box (96×30 with subtle border) for stable matrix layouts, replace existing logos with user-provided files, append new partners to the PARTNERS array with i18n taglines across zh-CN/en/ja/th, and audit the section for dead URLs / missing files / missing translations. Also handles cross-asset visual height parity (multi-logo strips on dark backgrounds, "logo 不等高", unified-color filter recipe). Trigger when the user mentions "合作伙伴", "partners", "trusted by", "新增 logo", "标准化 logo", "替换 logo", "审计合作伙伴", "维护合作伙伴", "logo 不一样高", "logo 对齐", "logo 大小不一致", "logo 颜色不统一", "logo 不清晰", "logo 糊了", "矩阵格子", "等宽 box", "图标加文字", "compose wordmark".
Material Design 3 (Material You) design system knowledge for modern web and Angular applications. Use when implementing Material Design 3 theming, components, typography, color systems, dynamic color, accessibility patterns, or migrating from Material Design 2. Covers design tokens, theming APIs, and Material You principles.
Expert guidance for creating stunning, professional 2025 UI designs using Tailwind CSS and shadcn/ui. Ensures clean minimal aesthetics, 8px grid consistency, mobile-first responsive patterns, and WCAG accessibility compliance. Use when designing interfaces, reviewing UI, creating components, or when visual design needs modern professional standards.
Design and build cohesive web pages with custom visual identity — landing pages and portfolios get rich anatomy + section archetypes; any other page type (blog, about, pricing, contact, coming-soon, dashboard, admin, e-commerce, custom) is supported through generic anatomy + skeleton. Use this skill whenever the user mentions: landing page, portfolio, personal site, hero section, marketing page, product page, sales page, splash page, blog page, about page, pricing page, contact page, coming-soon, waitlist, dashboard, admin panel, e-commerce store, redesign my site, design my portfolio, build a portfolio, work showcase, hire-me page, perfect-ui, perfect landing, or asks to create any web page surface. Two tiers: special (landing | portfolio — rich treatment) and generic (everything else — universal craft toolkit). Self-contained 8-phase pipeline: vibe discovery → visual direction (color/typography/mood) → custom icon set (NO emoji, NO icon library) → AI-generated visuals → optional shader effects layer → inline plan + implement on Next.js + Tailwind + shadcn. Always proposes effect layer as optional. No refusals; outputs distinctive sites, not AI slop.
Diagnose and fix how slow a frontend feels and measures: optimistic UI for mutations, latency masking (skeletons, blur-up, preloading, staggering), request batching/deduplication, and Core Web Vitals (LCP/INP/CLS) remediation. Use when the user says 'the app feels slow', 'clicks feel laggy', 'improve performance', 'my Lighthouse score is bad', 'fix my Core Web Vitals / LCP / CLS', 'make saves feel instant', or when interactions visibly wait on the network. Produces a performance audit (findings ranked by user impact, with measured or user-reported evidence) plus the implemented fixes — optimistic mutation code, masking treatments, and network-layer improvements.
First Time User Experience (FTUE) design that teaches through play, hooks players in 30 seconds, and retains them for lifeUse when "tutorial, onboarding, teach player, first time user, FTUE, new player experience, how to teach, teaching mechanics, tutorial level, intro sequence, player retention, drop-off, skip tutorial, contextual hints, help system, onboarding, tutorial, ftue, first-time-user-experience, player-retention, teaching, learning, progressive-disclosure, difficulty-curve, new-player-experience, hooks, engagement" mentioned.
Perform a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the work is functionally complete and needs finishing touches—not when the hierarchy, structure, tone, or technical foundation still need major changes.
Create, inspect, edit, and validate professional PowerPoint presentations (.pptx), including uploaded source decks and templates, with design-system extraction, OOXML-preserving edits, structural linting, and rendered visual QA.
Create covers with Chinese titles for finalized articles or videos: article covers (WeChat Official Account 2.33:1, X 16:9, X Article 5:2) use the Punk style library (MIT edition); video covers (3:4 by default, Xiaolin style A by default; 9:16 portrait and 16:9 landscape when needed) use real photos of Ray plus a large headline. Compile prompts according to Ray’s black, white, gray, and dark green IP. By default, generate platform-specific images with the OpenAI image API (or fall back to calling Image 2 through Codex CLI). Supports editing only part of an image without redrawing it. Use for “make a cover,” “video cover,” “portrait cover,” “landscape cover,” “try another style,” or “change the cover title.” Not for illustrations within article bodies or video frames.
Use when building charts, data visualisations, or dashboards with Recharts. Also use when integrating Recharts with HeroUI, reviewing chart components, or creating responsive chart containers. Generates Recharts charts styled with HeroUI v3 design tokens and Tailwind CSS v4.
Generate HTML slide presentations (1 slide = 1 HTML file, 1280x720px) using Tailwind CSS, Font Awesome, and Google Fonts. Use when the user asks to create a new presentation deck or slide HTML files. Covers design guidelines, 43 layout patterns, component library, and PPTX conversion compatibility rules. Supports style selection (creative, elegant, modern, professional, minimalist) and theme selection (marketing, portfolio, business, technology, education).
Write or revise user-facing product and marketing copy with a specific voice, verifiable claims, natural rhythm, and useful actions. Use for interface labels, onboarding, landing pages, help text, and product messaging. Do not use for code comments or neutral technical documentation unless tone editing is requested.
Design, implement, or repair responsive web and app layouts across narrow, wide, zoomed, and touch-oriented viewports. Use for mobile and desktop composition variants, reflow, overflow, adaptive navigation, content-driven breakpoints, and mobile interaction layout. Do not use for purely visual styling with no responsive impact.
Typed chart grammar guidance for marks, scales, layouts, interaction, accessibility, rendering, and framework adapters. Use when a project uses TanStack Charts or when the task needs its setup, implementation, debugging, testing, migration, or integration guidance.
Use as the UI/UX quality gate for frontend work that materially affects web product surfaces: design/build/redesign/review/polish/refactor pages or component systems, screenshot/UX critiques, rescue of GPT/Codex-looking UI, stack or UI-foundation choices, shadcn/Tailwind/table/form patterns, loading/empty/error/mobile/accessibility states, or installing frontend governance docs such as DESIGN.md, FRONTEND_CONTRACT.md, PAGE_BRIEF.md, and visual QA norms. Trigger lightly for small UI-sensitive tweaks using the Tiny change gate. Coordinate with visual implementation skills when asked to build a polished interface; this skill supplies product cognition, UX judgment, guardrails, and verification. Skip for pure backend/API/data/model changes, tests with no UI surface, mechanical renames, dependency chores, or edits that do not affect layout, interaction, copy, visual behavior, accessibility, or frontend rules.
Unity 6 UI development guide. Use when building user interfaces, menus, HUD, buttons, or any UI elements. Covers UI Toolkit (recommended for new projects — USS, UXML, UI Builder, data binding), uGUI/Canvas (legacy runtime UI), and IMGUI. Based on Unity 6.3 LTS documentation.
Symfony UX Icons for rendering SVG icons in Twig templates. Supports 200,000+ Iconify icons (Lucide, Heroicons, Tabler, Material Design, etc.), local SVG files, and custom icon sets with aliases. Use when displaying icons, configuring icon defaults, importing or locking on-demand icons, creating icon aliases, or styling SVG icons with CSS. Code triggers: <twig:ux:icon />, ux_icon(), UX_ICONS_DEFAULT_ICON_ATTRIBUTES, icon.yaml, icons/, iconify:, lucide:, heroicons:, tabler:, mdi:, bin/console ux:icons:lock, bin/console ux:icons:import. Also trigger when the user asks "how to add an icon", "how to use Lucide/Heroicons/Tabler icons", "how to render an SVG icon in Twig", "how to lock icons for production", "how to create icon aliases", "how to style an icon", "icon not found", "icon not rendering". Do NOT trigger for interactive maps (use ux-map) or general Twig components (use twig-component).
AppKit macOS UI reference. Liquid Glass (NSGlassEffectView), NSApplication, NSWindow, NSViewController, NSView, NSMenu, NSToolbar, NSTableView, NSOutlineView, NSCollectionView, NSSplitViewController, NSTabView, NSPopover, NSOpenPanel / NSSavePanel, NSSearchField, NSControl, NSStackView, NSScrollView, Diffable Data Source, target-action, responder chain
Author Figma Slides presentations — list/create/duplicate/reorder/delete slides, read the slide grid, add text and shapes to a slide, set slide background color, set or read slide transitions (dissolve, slide-from, push-from, smart-animate), focus a slide, and toggle skip. Use when the user wants to build or edit a Figma Slides deck. Triggers: 'create a slide', 'add a slide to the deck', 'reorder slides', 'set the slide background', 'add a transition between slides', 'add text/shape to slide 3', 'read what's on this slide', 'skip this slide in the presentation'. Figma Slides files only (figma.editorType === 'slides'). Requires the Figma Desktop app (Plugin API).
Use this skill to render every Jetpack Compose `@Preview` as a screenshot on a real Android device or emulator and publish a browsable HTML catalog from CI. Covers the Compose HotSwan Gradle compiler plugin (`com.github.skydoves.compose.hotswan.compiler`) and `debugImplementation("com.github.skydoves.compose.hotswan:preview")`, the `captureAllPreviews` task, capturing one preview over ADB via `HotSwanPreviewActivity` + `screencap`, the `hotSwanCompiler { preview { renderDelayMs; demoMode; sdkModeEnabled } }` DSL, per-preview `@PreviewScreenshot(renderDelay = …)`, running it on an emulator in GitHub Actions (`reactivecircus/android-emulator-runner` or Gradle Managed Devices) and deploying the catalog to GitHub Pages, and how device rendering differs from host-JVM tools (Paparazzi, Roborazzi). Use when the user mentions "captureAllPreviews", "HotSwan", "preview screenshots in CI", "screenshot catalog", "preview catalog on GitHub Pages", or "Paparazzi vs Roborazzi vs device screenshots".
Designing anatomically plausible, visually distinctive creatures that communicate threat, personality, and role through form - from terrifying bosses to collectible companionsUse when "creature design, design a creature, design a monster, monster design, boss design, enemy creature, companion creature, pet design, wildlife design, alien creature, fantasy creature, horror monster, cute creature, pokemon style, creature anatomy, creature silhouette, creature movement, hybrid animal, ecosystem creatures, creature family, mount design, dragon design, beast design, creature, monster, boss, enemy, companion, wildlife, horror, cute, pokemon, anatomy, silhouette, locomotion, ecosystem, hybrid, fantasy, sci-fi, kaiju, cryptid" mentioned.
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.