Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Design high-quality product apps, marketing sites, dashboards, and desktop UI. Use for art direction, critique, redesign, hierarchy, layout, typography, color, motion, or lightweight design systems. Do NOT use for logos, illustration-only work, image prompts, or backend-only tasks.
Build responsive HTML emails with React Email components. Covers email structure (Html, Head, Body, Container), content components (Text, Heading, Button, Link, Img), layout (Section, Row, Column), styling with inline CSS and Tailwind, custom fonts, preview text, and rendering to HTML. Use when creating transactional emails, marketing templates, or email design systems. Use for email rendering, preview, Tailwind email styling, and provider integration with Resend, Nodemailer, or SendGrid.
shadcn-vue component integration for Inertia Rails Vue 3 (NOT Nuxt): forms, dialogs, tables, toasts, dark mode, and more. Use when building UI with shadcn-vue components in an Inertia + Vue app or adapting shadcn-vue examples from Nuxt. Wire shadcn-vue inputs to Inertia Form via name attribute and #default scoped slot. Flash toasts require Rails flash_keys initializer config.
SRT subtitle-driven HyperFrames + GSAP generation of Editorial-style videos. Use this skill when the user says "create an Editorial animation based on an SRT subtitle file" or says "make an Editorial video" and provides an SRT subtitle file
Build self-contained static HTML artifacts opened in a browser: interactive diagrams, dashboards, infographics. Pure HTML5+CSS3+inline SVG, zero toolchain. Triggers on: "interactive HTML", "open in browser", "HTML artifact", "visual dashboard", "HTML infographic". NOT for PNG/SVG output, use concept-to-image. NOT for throwaway prototypes that answer a state-model or layout question, use prototype
A user-empowering data visualization Vue 3 components library (69 components) for eloquent data storytelling. ALWAYS use when writing code importing "vue-data-ui". Consult for component choice, config, theming, slots, tooltips, exports, SSR, debugging, or modifying vue-data-ui, vue data ui.
Convert Markdown articles to WeChat Official Account compatible HTML format. Use when users need to convert Markdown files to WeChat articles, apply themed styling for WeChat formatting, generate inline CSS HTML compatible with WeChat editor, process technical articles with code blocks and tables for WeChat, or apply professional WeChat-style layouts with headers and footers.
Use when authoring a user-flows document — the map of the paths a user takes through a product to accomplish each goal: entry points + the navigation/IA frame, the happy path, decision branches, error/recovery + edge states (incl. loading + success), interaction resilience (undo/resume/system-status), flow-level accessibility, and the screens/states traversed, each flow traced to a goal/persona job. Guides the METHOD, not the outline: deriving flows from upstream goals + prior-art patterns (never inventing them), enumerating every branch + error path so no path dead-ends, judging flow quality with objective heuristics, rendering each flow as a synced diagram + numbered narrative, and amending an existing doc as a scoped versioned delta. Composes with a separate user-flows template tool and a research capability. Assumes an approved PRD as upstream input — never a blank page. Not for reviewing a finished user-flows doc, not for screen layout/wireframes, and not for authoring the PRD itself.
Dark theme design and implementation for web UIs: surface elevation, desaturated brand colors, text/border tokens, color-scheme, system-preference detection, a no-flash theme toggle, and Tailwind dark variants. Use when the user asks to "add dark mode", "create a dark theme", "dark mode support", "implement dark/light toggle", "theme switcher", "prefers-color-scheme", "design for dark background", "night mode", or any dark theme work. For dark mode in HTML email use email-design; for building the full color palette use color-palette.
Generate meaning-carrying editorial data-illustrations in the monotykamary / Linear aesthetic (near-black grayscale, Inter display + mono labels, hairline framed figures) with a single coral accent. This is a GENERATIVE GUIDE, not a template gallery: it teaches the "claim -> geometry" method so any session can invent the RIGHT figure for what a post actually argues, then render it as a self-contained, theme-aware, reduced-motion-safe HTML/SVG figure. Use when writing/illustrating a blog post, essay, spec, or slide and you want a chart, diagram, or illustration that carries a thesis (not decoration) in the house style. Triggers: "make a chart/diagram/illustration for this", "visualize this argument", "monotykamary/Linear style figure", "editorial graphic".
Generate and edit images with OpenAI GPT Image 2 (ChatGPT Images 2.0) on RunComfy. Documents GPT Image 2's strengths (embedded text, logos, multilingual typography, instruction precision), its 3 fixed sizes, edit-with-preservation language, and when to route to a sibling (Flux 2 / Nano Banana Pro / Seedream) instead. Calls `runcomfy run openai/gpt-image-2/text-to-image` or `/edit` through the local RunComfy CLI. Triggers on "gpt image 2", "gpt-image-2", "ChatGPT Images 2", "image 2", or any explicit ask to generate or edit with this model.
Image assistant - turn article/module content into uniform-style, low-text, highly readable 16:9 infographic prompts; first decide "how many images are needed + what each one covers", then compress the copy and metaphors, and finally output directly copyable image-generation prompts and iterate.
Provides motion design guidance for UI components. Triggers on animation requests ("animate this", "add transition", "motion for"), refinement requests ("clean up this animation", "clean up the motion", "this feels too fast/slow", "make this feel more alive/natural"), and questions about easing, timing, or micro-interactions.
Use this skill when the user asks you to build, list or publish any document in PageCraft — a page, a 4CMS template (catalog rubric, product card) or a layout document that wraps pages — by selecting blocks from the library, filling their placeholders via the V1 REST API, and optionally publishing to 4CMS. Trigger phrases include "сделай страницу", "собери лендинг", "напиши статью на сайте", "наполни рубрику", "создай страницу в PageCraft", "сгенерируй landing", "сделай шаблон рубрики", "сделай шаблон карточки товара", "собери макет сайта", "сделай макет с шапкой и подвалом", "какие есть шаблоны", "какие есть шаблоны рубрик", "какие есть типы шаблонов", "какие есть макеты", "покажи мои страницы", "наполни блоки контентом", "опубликуй страницу", "обнови опубликованную страницу", "обнови устаревшие блоки", "приведи страницу к актуальным версиям", "найди где используется блок", "мигрируй мажорную версию блока", "сделай аудит блоков на странице".
Design a product change before building it. Decides which of BRD, PRD, XDS, and SDD the change needs, and supplies the story, scenario, and state grammars for writing them, a vocabulary for naming controls precisely, and the review and verification rules. Use for any user-facing change, from a one-line fix to a new journey.
Run a structured WCAG 2.1 AA accessibility audit on a design, screen, component, or page. Produces a prioritized issue list — each finding cites the violated WCAG criterion, a severity rating (Critical/Major/Minor), and a concrete fix. Use when auditing for a11y compliance or as a validation step after generating UI.
Design or critique navigation systems — match the nav pattern (top bar, sidebar, tabs, hamburger, mega menu, bottom nav) to the information architecture, and apply wayfinding, header, breadcrumb, and pagination best practices. Trigger when the user asks to design or review navigation, menus, navbars, sidebars, tabs, breadcrumbs, headers, pagination, or asks "how should users move around" a site or app.
Runs a progressive interview, without requiring UX or design vocabulary, to create or evolve a software project's canonical UX standard and generate three coordinated artifacts: UX_STANDARD.md, a custom ux-review skill, and UX_REVIEW_TEMPLATE.md. Use when you want to define look and feel, audience, principles, design system, accessibility, responsiveness, tone of voice, references, interactions, quality criteria, or UX governance before reviewing features. The generated ux-review becomes the SDD step between Define and Design. It does not run a feature review in place of the generated skill.
Full-pipeline AI skill for producing PowerPoint presentations, benchmarked against top-tier consulting firms such as McKinsey and Deloitte (Aham UI v6.1 · Office track · PPT). Triggers immediately when the user says "帮我做PPT", "做演示文稿", "做一个汇报", "根据这份资料做PPT", "做客户方案PPT", or "制作幻灯片". Triggers even if the request is a single sentence. Eight-stage modular process: specification loading → material analysis → argument distillation → narrative skeleton → outline and layout → sample approval → page-by-page design → quality check and delivery. Built-in adaptive coaching mechanism that guides users of any skill level to above-passing output. Note: this skill is for PowerPoint / pptx output; for the SVG/HTML version see the ppt-svg skill.
Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.
Recolor every overlay, text element, background, and shape in an existing video to the brand palette in one pass, leaving footage, narration, and timing untouched. Use when the user says "apply our brand colors", "make this video on-brand", "recolor the overlays to our palette", "fix the colors to match our brand", or "this video doesn't match our brand kit".
Audits web UI quality across accessibility, interaction, forms, typography, navigation, layout, performance, motion, and microcopy. Use when reviewing or refining frontend UI before merge or release, or when the user asks for a UI, UX, or accessibility audit.
Apply interface craft when building or reviewing UI - motion, easing, timing, springs, component feel, and visual foundations. Use when building a component, animation, transition, hover or press state, modal, drawer, toast, or when polishing an interface so it feels right. Says "make this feel better", "add an animation", "polish the UI", "review this component".
Build a coded design system: three-layer design tokens (CSS variables and W3C DTCG JSON), spacing/radius/shadow/motion scales, light/dark/multi-brand theming, and component APIs with states and docs. Use when building or extending a component library or token architecture. Trigger phrases: "design system", "design tokens", "component library", "theming", "css variables", "spacing scale", "elevation system", "component API", "token hierarchy", "tokens.json". Consumes color-palette (colors) and typography (type scale); for capturing brand basics only, use design-context.
Provides comprehensive guidance for Element Plus Vue 3 component library including installation, components, themes, internationalization, and API reference. Use when the user asks about Element Plus for Vue 3, needs to build Vue 3 applications with Element Plus, or customize component styles.
Design and implement consistent SVG icon systems for UI: keyline grids, stroke rules, optical corrections, outline/filled/duotone styles, icon+text alignment, animation, and accessible markup. Use for UI icons in code; for a logo mark use brand-identity, for illustrations use image-generation. Trigger phrases: "icon design", "svg icon", "icon system", "custom icons", "icon animation", "icon grid", "icon accessibility", "duotone icon", "icon set", "animated icon"
Generate localized cover images and reusable image prompts from the shared Punk style library for articles, Xiaohongshu notes, WeChat public account posts, X posts, Instagram, Facebook, LinkedIn, YouTube, TikTok, Pinterest, Snapchat, Reddit, Threads, Bluesky, Medium, topic drafts, and requests for covers, social cover images, poster prompts, style-template-based image prompts, or image generation from long-form text. Use this skill to analyze source content, resolve unsupported ratios to the closest available generation ratio, select a localized visual style, save the final prompt, and generate the image when an image-generation tool is available.
Use when reviewing/judging a finished user-flows document to decide whether a downstream wireframing pass can enumerate every screen and whether each path is complete, walkable, resilient, accessible, and sound — an acceptance gate, not authoring. A user-flows doc is the navigation/interaction graph: entries + IA frame, happy path, branches, error/recovery + edge states, resilience, flow-level accessibility, screens traversed. Judges it against a single-sourced bar: goals map to flows (no orphans), entries+exits defined, branches resolve, no dead ends, states (incl. loading+success) covered, irreversible actions guarded, every path keyboard/ AT-completable, the flow objectively sound, notations synced, screens enumerable; plus a delta-scoped review when amending. Emits exactly `VERDICT: approve|revise` with actionable findings. Approves a doc meeting the bar (no false-revise on a thin one), revises only on a named gap. Not for authoring, not for wireframes, not for the PRD.
Optimize Roblox monetization strategy. Use for game passes, developer products, bundles, store UX, pricing ladders, premium anchors, cosmetics, conversion experiments, offer placement, revenue analysis, and fair non-pay-to-win monetization.
Use when you need to execute R4 in the sdlc-dev product requirements Spec workflow (generate an interactive Demo project based on requirements/prototype.md), and need to avoid skipping spec-context, continuing when prototype.md is missing or the runnable Demo project root directory is missing, or inventing pages/directories that cause untraceability and an inability to close the feedback loop.
Universal React UI framework for web and native (v1.144.0+). Use when building cross-platform apps with React Native + Web, creating styled components with `styled()`, configuring design tokens/themes, using Tamagui UI components (Button, Dialog, Sheet, Input, Select, Tabs, etc.), working with animations, or needing Bento/Takeout premium components. Triggers: "tamagui", "universal UI", "react native web", "styled()", "design tokens", "$token", "XStack/YStack/ZStack", "useTheme", "useMedia", "@tamagui/*" imports, "bento", "takeout", "one.js router", "createStyledContext", "withStaticProperties", "@tanstack/react-table", "zero sync", "better auth".
Conduct usability tests and identify UX issues through systematic observation. Use when testing user flows, validating designs, identifying friction points, running heuristic evaluations, or ensuring users can complete core tasks. Use for test planning, think-aloud protocol, task scenarios, severity rating, accessibility evaluation.
Run a structured information architecture audit on a sitemap, navigation tree, category structure, menu labels, or multi-screen product. Produces a severity-rated issue list with concrete fixes — catches scheme/task mismatches, narrow-and-deep hierarchies, low-information-scent labels, inconsistent labeling systems, single-path findability, and dead-end pages. Use when auditing IA, site structure, categories, taxonomy, or labels, or as a validation step after generating navigation or any multi-screen structure.
Design or critique forms and input fields — field selection, labels, layout, validation, error states, and submission. Applies the always-true core (minimal fields, one column, labels outside inputs, inline validation) and gates levers like multi-step splitting, floating labels, and smart defaults. Trigger when the user asks to design, build, or review a form, signup/checkout/survey fields, input validation, or error messages.
Lay out a screen with disciplined spacing, sizing, and grids — every value on one base unit (8px/4px scale), content aligned to a grid, proximity and whitespace doing the grouping, and space establishing visual hierarchy. Replaces arbitrary pixel values and ad-hoc alignment with a system. Also carries the spatial visual-hierarchy/alignment/composition fundamentals. Trigger when asked to design or critique a layout, set spacing/padding/margins, build a spacing scale or design tokens, choose or apply a grid/columns, fix inconsistent spacing or alignment, or establish visual hierarchy through space and position.
Configure the current weapp-tailwindcss v5 with Tailwind CSS 4 for new projects, covering uni-app, uni-app x, Taro, Mpx, native mini programs, weapp-vite, Vite, Webpack 5, Rspack, Gulp, the standalone CLI, and mini program/H5/Web/App multi-platform targets. Use when setting up, installing, integrating, choosing a framework configuration, or building CSS with `weapp-tw`; not for legacy migration, troubleshooting, custom build tools, Expo React Native, or ReactLynx.
Plan and write conversion-grade Amazon A+ Content (formerly called Enhanced Brand Content, renamed in 2019), including Premium A+ tier modules (video, carousel, interactive hotspots, larger comparison chart, Q&A) and the Brand Story carousel that runs across the catalog. Selects the right module layout, writes persuasive module copy, designs the comparison chart, and produces designer-ready image briefs. Use when a user asks to create, plan, improve, or audit A+ Content, Enhanced Brand Content, Premium A+, brand story modules, comparison charts, interactive A+ modules, A+ video, or the visual section below the bullet points on an Amazon listing. Trigger phrases include "A+ content", "EBC", "enhanced brand content", "brand story module", "comparison chart", "below the fold", "premium A+", "brand story", "A+ video", "interactive modules", "premium content". Works with zero tools. the user describes the product and pastes any existing copy.
Plan an Amazon Brand Store. designs the page structure, the navigation, the shoppable content, and the traffic plan so the Store works as a real branded destination, not a dead page. Use when a user asks about the Amazon Store, Brand Store, storefront design, store pages, shoppable images, or driving traffic to a store. Trigger phrases: "amazon store", "brand store", "storefront", "store design", "store pages", "shoppable images", "store traffic". Works with zero tools.
Pick the right way to represent a dataset so a reader gets the finding in three seconds — a catalog of 20+ chart and diagram forms with when-to-use and failure modes, plus the encoding decisions that make any of them readable (takeaway headline, direct labels, kill the axis, highlight-and-mute, show the caveat). Style-agnostic — use with whatever palette or design system the destination already has. Use when charting survey results, benchmark data, usage metrics, or research findings for a post, brief, deck, or report, and whenever the default bar chart feels like it's burying the point.
Core visual design principles (visual hierarchy, Gestalt grouping, composition, balance, contrast, white space, color, typography) with UI fixes, a checklist, and deep-dive references. Use when making or defending a layout, type, or color decision, or when a design feels off and you need to name why.
This skill should be used when the user asks to create a monochrome technical diagram, schematic, or systems/architecture diagram in black-and-white line-art style. Trigger phrases include "create a diagram", "monochrome diagram", "systems diagram", "draw a schematic".
Edit images with OpenAI GPT Image 2 (the `/edit` endpoint of ChatGPT Images 2.0) on RunComfy — bundled with the model's documented prompting patterns so the skill gets sharper output than naive prompting against the same model. Documents GPT Image Edit's strengths (preservation language, multilingual in-image text editing, multi-reference up to 10 images, layout / typography precision), the schema, and when to route to Nano Banana Edit / Flux Kontext / GPT Image 2 t2i instead. Calls `runcomfy run openai/gpt-image-2/edit` through the local RunComfy CLI. Triggers on "gpt image edit", "gpt-image-edit", "chatgpt image edit", "edit with gpt image 2", or any explicit ask to edit with this model
Production guidance for authoring, integrating, and reviewing GSAP animation in browser-rendered media. Use for deterministic kinetic typography, SVG drawing and morphing, motion paths, FLIP transitions, responsive motion systems, or frame-seekable GSAP timelines inside HTML video composition and React-based renderers; not for ordinary CSS transitions or generic frontend development.
Browse and query the documentation for Hexagone frontend components (@his/hexa-components). Use when the user asks about Hexagone Vue.js components, UI patterns, beta-scss CSS classes, Vuex store modules, custom directives, form validation rules, or the Hexagone frontend design system. Fetches LLM-optimized documentation from the GitLab repository.
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.