Skills
96,770 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
This skill should be used when the user asks to "create an MCP App", "add a UI to an MCP tool", "build an interactive MCP View", or needs guidance on MCP Apps SDK patterns, UI-resource registration, MCP App lifecycle, or host integration. Provides guidance for building MCP Apps with interactive UIs.
Enforce anti-AI UI design rules based on the Uncodixfy methodology. Use when generating HTML, CSS, React, Vue, Svelte, or any frontend UI code. Prevents generic AI aesthetic — soft gradients, glassmorphism, hero sections in dashboards, oversized rounded corners, and decorative copy. Applies constraints from Linear/Raycast/Stripe/GitHub design philosophy for functional, honest, human-designed interfaces. Triggers on UI generation, dashboard building, component creation, CSS styling, landing page design, or any task producing visual interface code.
Directly generate design-oriented AI images with strong creative direction and prompt engineering. Use this skill for posters, product visuals, PPT illustrations, infographics, teaching/demo diagrams, campaign key visuals, cover art, or when the user wants design-quality image generation rather than generic AI art. This skill turns a loose brief into a design brief, assembles a structured prompt, routes to the right Volcengine Seedream settings, and can generate the image immediately.
Apply curated design style prompts to frontend projects. Use when the user wants to build or style a UI in a specific aesthetic (e.g., "use glassmorphism style", "make it brutalist", "cyberpunk design", "design in Art Deco style"). Supports 30 distinct design styles from designprompts.dev. Each style includes a comprehensive, ready-to-use design prompt covering layout, colors, typography, spacing, effects, and component patterns.
Audit a design system for consistency, coverage, and quality. Use when asked to audit a design system, review a component library, assess design token coverage, or evaluate the health of a shared design system. Produces a structured audit with a health score, component coverage gaps, token inconsistencies, accessibility issues, and a prioritised remediation roadmap.
Compares a component or screen's design spec with its code and logs each gap as a build error or spec gap. Use it for design QA, handover review or sign-off: whenever someone asks if a build matches its design or spec, even for one component with the spec pasted in. For system-wide drift, use drift-detection.
Professional diagram generation skill: automatically selects the appropriate chart type based on the requirement and generates PNG charts that conform to the design spec. Covers 29 chart types: structural diagrams (flowchart, swimlane diagram, sequence diagram, architecture diagram, state diagram, ER diagram, class diagram, mind map, Gantt chart, Kanban, Git Graph, etc.) and statistical charts (bar chart, line chart, pie chart, radar chart, heatmap, scatter plot, Sankey diagram, funnel chart, waterfall chart, treemap, bar-line combo chart, etc.). Unified toolset: HTML/SVG + inline JS layout computation. ER/class diagrams use the ELKjs layout engine. All charts follow a unified design spec (color/font/component/spacing) with a modern, clean style. Supports three outputs: PNG (default), HTML (rich document embedding), DSL (Mermaid text, embedded in MD documents). Trigger words: draw a diagram, draw one, generate a chart, flowchart, architecture diagram, sequence diagram, bar chart, comparison chart, relationship diagram. Even if the user does not say "draw a diagram", this skill should trigger whenever the request involves visual presentation (process, architecture, data comparison, relationships). When called by other skills such as deep-research, it likewise follows this spec to generate diagrams.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics
Use when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps. Applies to Figma-to-code work, visual consistency fixes, design tokens, typography, spacing, layout, buttons, cards, navigation chrome, safe areas, responsive behavior, and component reuse. Helps prevent scattered hardcoded values, one-off layout patches, duplicated components, and UI drift from the design system
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
Comprehensive frontend design skill — 23 commands for shaping, auditing, polishing, and refining UI. Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, empty states. Handles UX review, visual hierarchy, info architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems/tokens. Also use for bland designs needing boldness, loud designs needing quiet, live browser iteration, or ambitious visual effects. Not for backend-only or non-UI tasks.
Applies Material Design 3 Expressive dynamic color and theming principles to user interfaces. Use this when working on color palettes, themes, dynamic color systems, accessibility, or when the user asks to apply Material Design 3 color guidelines to a design or application.
Applies Material Design 3 Expressive motion and animation principles to create natural, intuitive, and engaging user experiences. Use this when implementing animations, transitions, micro-interactions, or when the user asks to apply Material Design 3 motion guidelines.
Simplify on-page WeChat Mini Program copy so main surfaces become shorter, more action-first, and more user-facing. Use when Codex needs to trim verbose labels, mixed implementation detail, over-explained settings, or long empty-state and status text without changing the underlying business flow.
Implicit use requires an explicit or already-established Nature Portfolio context. Design, revise, audit, and export submission-grade quantitative figures and multi-panel layouts using Python or R, and route manuscript schematics or graphical abstracts through an appropriate visual workflow. Within that scope, use for 论文配图、科研绘图、Figure 1 or journal-ready SVG/PDF/TIFF. Do not use for statistics-only inference, dashboards, slide decks, photo editing, or general illustration
Generate presentations in NetEase Red + White (网易红) style as both HTML slides and PPTX files. Use when user says "红白风格PPT", "网易红演示", "红白slides", "netease red slides", "做个红白PPT", "做个红白HTML演示", or wants to create presentations matching the NetEase brand aesthetic (red D51312, RGB 213/19/18 + white, Swiss Modern style with diagonal clip-path accents). Supports two output formats: interactive HTML (with animations, nav, inline editing) and static PPTX (via PptxGenJS). Can generate both from the same content.
NocoBase 2 only; never use in a NocoBase 3 project. Design, build, and verify source-code applications in NocoBase AI Portals based on @nocobase/portal-template-default. This skill is mandatory whenever the selected Portal has portalType "ai". Use it for complete systems, pages, navigation, CRUD, dashboards, forms, dialogs, drawers, URL-addressable subpages, authentication UI, frontend access control, localization, themes, NocoBase API integration, responsive design, test-driven verification, and safe upgrades of existing Portal template, SDK, and Registry source
Generate Open Graph (OG) images and social media preview cards for websites, blog posts, and products. Use when creating social share images, Twitter/X cards, LinkedIn post images, or any visual preview that appears when sharing links on social platforms. Produces properly sized images (1200x630, 1200x675, etc.) with crisp typography and professional layouts.
Use when user wants to create a full slide deck or presentation using PaperBanana image generation, OR modify/regenerate an existing PaperBanana slide deck, OR build an editable PPTX with native text/tables/charts. Triggers on "make slides", "create presentation", "PPT", "slide deck", "regenerate slides", "update slides", "paperbanana slides", "editable PPTX", "editable slides". Also triggers when user has an existing slide-deck directory with outline.md and wants to regenerate images or make changes. This is the PRIMARY slide deck skill — always prefer over baoyu-slide-deck.
Design conventions and visual quality guide for Phoenix projects using DuskMoon UI. Defines component color defaults, theme setup, surface elevation, color pairing rules, typography, layout composition, and motion patterns. Read this before writing any HEEX template, CSS, layout code, or creating new pages/views.
Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions \"deck,\" \"slides,\" \"presentation,\" or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill.
Write product requirements documents (PRD) and generate interactive prototypes. Triggered when the user mentions "需求文档", "PRD", "产品需求", "写需求", "原型", "feature list" and similar keywords. Integrates the UI-UX-Pro-Max design system and supports Cloudflare Pages deployment.
Create distinctive, production-grade frontend interfaces with high design quality using the primer design system and brand guidelines. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates polished code and UI design that fully conforms to the primer design system.
Apply a brand-neutral Quiet Editorial UI edit style to an existing HyperFrames project. Use when someone asks to apply Quiet Editorial UI, use a quiet editorial editing style, add a refined editorial software look, restyle HyperFrames with serif-led editorial graphics, place elegant overlays in negative space or over footage, or use the same visual system for a full-frame graphic composition.
Build slide decks and presentations for research talks. Use this for making PowerPoint slides, conference presentations, seminar talks, research presentations, thesis defense slides, or any scientific talk. Provides slide structure, design templates, timing guidance, and visual validation. Works with PowerPoint and LaTeX Beamer.
Persona and expertise framework for a Senior UI/UX Designer specializing in B2B e-commerce floral marketplaces. Use this skill when designing interfaces, creating wireframes, prototypes, or design systems for wholesale flower businesses, floral supply chains, bulk ordering platforms, florist-to-supplier marketplaces, or any B2B floriculture digital product. Triggers include: floral marketplace design, wholesale flower platform UX, B2B floral e-commerce, florist ordering systems, flower supply chain interfaces, bulk floral ordering UI.
Build Shopify applications, extensions, and themes using GraphQL/REST APIs, Shopify CLI, Polaris UI components, and Liquid templating. Capabilities include app development with OAuth authentication, checkout UI extensions for customizing checkout flow, admin UI extensions for dashboard integration, POS extensions for retail, theme development with Liquid, webhook management, billing API integration, product/order/customer management. Use when building Shopify apps, implementing checkout customizations, creating admin interfaces, developing themes, integrating payment processing, managing store data via APIs, or extending Shopify functionality.
Audit and refactor UI code so every color value comes from the theme. Replace hex codes, rgba(), hsl(), oklch() literals, and named CSS colors with theme palette tokens (primary, secondary, error, warning, info, success, background, text) and the alpha() helper for transparency. Use when writing or reviewing any UI component, when starting a new MUI or design-system theme, when a designer hands off colors as hex annotations, when seeing color literals scattered across component files, or when an LLM produced styling with hardcoded hex values. Counterweight to LLM training corpora dominated by tutorial code that inlines hex codes and rgba literals instead of role-based theme tokens.
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
Guides TinyRobot Vue AI chat UI implementation, setup, and code generation. Use when the user mentions TinyRobot, OpenTiny TinyRobot, Bubble, Sender, Prompts, chat container, message list, conversation tools, or asks to build chat interfaces with TinyRobot components.
Expert tvOS decisions for iOS developers: when to use custom focus effects vs system defaults, Siri Remote gesture trade-offs, Top Shelf content strategies, and 10-foot UI adaptation patterns. Use when building tvOS apps, debugging focus issues, or designing TV-optimized interfaces. Trigger keywords: tvOS, Focus Engine, @FocusState, isFocused, focusable, focusSection, Siri Remote, Top Shelf, TVTopShelfContentProvider, 10-foot UI, CardButtonStyle, large cards
Create lightweight user personas and usage scenarios from problem framing or raw research. Use when a user needs to clarify who they're building for beyond a basic target user description. Outputs practical personas and scenarios that inform feature priorities and UX decisions—not marketing fluff.
Create web interface designs that match Chinese aesthetic sensibilities. Use when the user needs to design web pages, components, pages, or app interfaces. Focuses on a clean, refined, harmonious design style and generates front-end code that can be used directly. Not for reviewing existing UI code, optimizing existing component implementations, or generating pure back-end code or non-web UI.
WCAG 2.1/2.2 compliance, WAI-ARIA implementation, screen reader optimization, keyboard navigation, and accessibility testing expert. Use PROACTIVELY for accessibility violations, ARIA errors, keyboard navigation issues, screen reader compatibility problems, or accessibility testing automation needs.
Plan, conduct, and synthesize high-signal user interviews and produce a User Interview Pack (recruiting plan, screener, discussion guide, notes template, synthesis report). Use for user interview, customer interview, discovery interview, JTBD switch interview, concept interview.
Distill a DESIGN.md from a website — crawl and analyze a site's rendered design (colors, typography, spacing, components, signature motifs) and produce a brand-accurate DESIGN.md design-system spec. On request, also generate a token-preview page (preview.html) or a realistic website demo (demo.html). Use when the user gives a URL and asks to "make/generate a DESIGN.md", "extract this site's design system", "capture a brand's visual language", or "turn this website into design tokens".
Generate draw.io diagrams from Mermaid, XML, or CSV code. Use this skill when the user requests any visual diagram including flowcharts, UML diagrams, ERD, architecture diagrams, mind maps, timelines, org charts, network topology, wireframes, BPMN, or any other visual representation. The skill creates a markdown link that opens the diagram in draw.io.
Use the DuskMoon CSS Art Elements (`<el-dm-art-*>` web components). Use when adding pure CSS art animations to web pages — atom, moon, sun, plasma-ball, gemini-input, synthwave-starfield, and more. Covers all 15 CSS art packages, registration patterns, size variants, and the @layer stripping technique required for Shadow DOM compatibility.
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.