Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Use when the user explicitly requests award-winning, creative, or designer-quality web design. Activated by invoking the skill directly -- NOT auto-triggered on general frontend tasks. Use when the user says "use web-designer", "design mode", "make it look amazing", "designer quality", or references this plugin by name.
Use this skill when a content-complete website has missing/placeholder images and needs visual assets — scenario illustrations, tool screenshots, instructor cards, conceptual diagrams, classroom location maps, QR codes. Triggers on phrases like "插圖", "工具截圖", "QR", "講師卡", "地圖", "示意圖", "Playwright 爬蟲", "AI 生圖", "visual assets", "screenshots", "illustrations", "QR codes", "instructor cards". This skill covers the four asset sources (scraping, AI generation, hand-drawn SVG, generated codes), the PNG-first + SVG-fallback render pattern, and verification scripts. Usually invoked AFTER interactions are wired (so missing images are visible), but can be invoked earlier if assets are pre-planned.
WordPress admin UI review and development guidance. Use when reviewing admin pages, settings screens, menu pages, notices, list tables, metabox-like interfaces, screen options, capability checks, admin scripts or styles, or when user mentions "admin UI", "settings page", "wp-admin", "admin screen", "options page", "list table", "admin menu", "admin notice", "screen options", or "dashboard page". Detects capability issues, Settings API misuse, admin-only performance problems, and UX mistakes in WordPress admin interfaces.
Generate a beautiful dark-mode analytics dashboard for Xiaohongshu (Little Red Book / RED) creator data. Use when the user wants to: (1) create a data dashboard for their Xiaohongshu account, (2) visualize their Xiaohongshu/RED post performance data, (3) analyze their content metrics including impressions, CTR, likes, followers, keyword analysis, etc. Triggers on mentions of "xiaohongshu dashboard", "xiaohongshu analytics", "RED analytics", or similar requests in Chinese like "xiaohongshu kanban", "xiaohongshu shuju fenxi".
Adapt designs for narrow, medium, wide, embedded, or print web contexts without losing usability, hierarchy, or target sizing. Use when the user mentions responsive design, breakpoints, narrow layouts, viewport changes, coarse-pointer browsers, or cross-context adaptation.
Brand-first landing page designer — interviews the user to discover brand identity (adjectives, colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML output. Preferred over frontend-design for standalone landing/marketing pages where the user hasn't established visual direction yet. TRIGGER when: user asks to "create/design/build a landing page", "make a homepage for my project/product/service", "build a marketing page", or wants to promote an app/side project. Especially when they haven't defined brand colors, fonts, or visual style — the guided brand interview is the core value. DO NOT TRIGGER when: user has a specific design mockup to implement, wants a dashboard or app UI, needs component-level frontend work (buttons, forms, navbars), is building a multi-page application, or is restyling an existing page with known design tokens. Use frontend-design for those cases.
Design charts, metrics, and data tables that help users interpret and compare data. Use when the user asks to visualize data, choose chart types, improve dashboard analytics, or make data presentation accessible. Dashboard navigation and shell layout alone belong to add-ui or arrange.
Current award-winning design patterns and emerging techniques in web design (Q1/Q2 2026). Covers motion, typography, color, layout innovations, and interaction patterns derived from Awwwards, CSSDA, Godly, and SiteInspire analysis. Structured for periodic updates.
Expert in enterprise system design (ERP, CRM, HRM, SCM, etc.) and corporate policies. Use when asked to review, reflect on, or critique enterprise software interface design. Provides domain expertise from existing systems and end-user role-playing for constructive feedback.
Translate Figma nodes into production-ready code with 1:1 visual fidelity using Framelink Figma-Context-MCP (get_figma_data and download_figma_images). Trigger when the user provides Figma URLs or node IDs, or asks to implement components/pages that must match Figma precisely, and the workflow should use Figma-Context-MCP instead of the official Figma MCP server.
Schema-first validation with Zod, timing patterns (reward early, punish late), async validation, and error message design. Use when implementing form validation for any framework. The foundation skill that all framework-specific skills depend on.
Design, structure, or improve form interfaces for clarity, completion rates, and user confidence. Use when the user asks to build a form, redesign a form flow, improve form conversion, add multi-step forms, fix form UX, or structure field layouts and validation.
Holistic, framework-agnostic playbook for shipping ultra-fast, accessible, search-friendly, visually distinctive web interfaces. Combines Lighthouse mastery (target 95+ mobile, 99+ desktop, 100 A11y/BP/SEO), UI/UX patterns drawn from Apple HIG and Material Design, design aesthetics that avoid generic AI styling, plus deep guidance on performance, accessibility, SEO, motion, forms, layout, and data visualization. Apply this when building, reviewing, refactoring, or polishing any web UI regardless of framework (vanilla HTML/CSS/JS, React, Vue, Svelte, Astro, Solid, Next.js, Nuxt, SvelteKit, Remix, Qwik, Lit, Web Components). Use to make decisions about typography, color, spacing, motion, contrast, semantic structure, asset loading, render strategy, hydration, third-party scripts, image formats, font loading, JS budgets, CSS architecture, ARIA, keyboard flows, focus management, structured data, meta tags, and Core Web Vitals.
Use when the user says 'convert this html to breakdance' or 'paste html into breakdance', or has a Webflow, Framer, CodePen, or old static export to bring into a Breakdance site. Converts raw HTML and CSS into native EssentialElements nodes in _breakdance_data, mapping colors, type, and spacing to Breakdance Variables, and refusing element types Breakdance would skip-render.
Expert guidance on image optimization for web performance. Use when auditing or improving image delivery, Core Web Vitals (LCP/CLS/INP), responsive images (srcset/sizes), lazy loading, preloading, image CDN pipelines (Sirv, Cloudinary, imgix, Vercel, Cloudflare), format choice (AVIF, WebP, JPEG XL, SVG, HDR), compression and quality settings, placeholders, image alt text, or image-heavy frontend code. For Sirv URL parameters, Sirv REST API calls, Sirv Media Viewer galleries, or video, the sibling skills own the details.
Guide for developing Lit web components in the Common UI v2 system (@commonfabric/ui). Use when creating or modifying cf- prefixed components, implementing theme integration, working with Cell abstractions, or building reactive UI components that integrate with the Common Fabric runtime.
Guidance for implementing CollectionView in .NET MAUI apps — data display, layouts (list & grid), selection, grouping, scrolling, empty views, templates, incremental loading, swipe actions, and pull-to-refresh. USE FOR: "CollectionView", "list view", "grid layout", "data template", "item template", "grouping", "pull to refresh", "incremental loading", "swipe actions", "empty view", "selection mode", "scroll to item". DO NOT USE FOR: simple static layouts (use maui-data-binding), map pin lists (use maui-maps), or table-based data entry forms.
Use Miles AI, an expert WordPress designer, through composable CLI primitives. Use when the user wants to design or build a website, get design options for content they already have, design around existing copy or a brief, convert HTML into a WordPress block theme, edit or redesign a site, export site deliverables, resume work on an existing Miles site, or update/uninstall the Miles skill. Triggers include mentions of Miles, bymiles.ai, start.bymiles.ai, "build a website", "design directions", "WordPress theme", or supplying content/briefs that need a designed site.
OpenDesign design token guide. Use this skill when you need to work with the CSS variables in the @opensig/opendesign-token package. It covers the complete token system of six themes (openEuler/Ascend/Kunpeng/Mindspore/openGauss/openUBMC) and supports all design tokens such as color, spacing, border radius, fonts, shadows, responsive typography, and the grid system. Use cases: (1) find the semantic token for a color value, (2) get the token names for spacing/border radius/fonts, (3) understand the differences between the six themes, (4) use CSS variables instead of hard-coded values in code, (5) use responsive tokens for multi-breakpoint adaptation, (6) import HarmonyOS font files and use font family/weight tokens (including seven weights, automatic Latin/Chinese splitting, and on-demand import by weight)
Skill for generating production UI based on a Store. Vue 3 + TypeScript + NuxtUI v4. Triggered by "UI 만들어줘", "화면 생성", "CRUD 화면", "목록 화면". A Store must exist, and it generates production code integrated with real APIs. If you need a Mock-data prototype, use peach-team-ui-proto.
Recreate screenshots/design mockups as Pencil .pen designs and output a structured design document alongside on the same canvas. Use this Skill when the user mentions "recreate from an image", "build a page from a screenshot", "image to pencil", "make an identical page", "create a design mockup from this image", or "output the design and document". Also applies when the user asks to modify an existing .pen page, append a design document on the right, do pixel-level alignment, or combine multiple screenshots into one set of pages. This Skill must call the pencil MCP tools for reading, drawing, and screenshot verification; if information is incomplete, ask the user for the missing details before drawing.
Diagnose and design product adoption for onboarding, activation, behavior change, feature discovery, rollout, and sustained use after launch. Covers consumer, B2B, internal-tool, and public-service contexts with evidence-based decision points and cohort segmentation. Does not own acquisition campaigns or marketing conversion (routes to go-to-market), product-analytics instrumentation (routes to product-analytics-and-measurement), or customer-success account management and health scoring (routes to conditional-customer-success). Do not use this skill for unrelated requests; route to the nearest named specialist.
Create polished, code-driven Remotion motion explainers from scripts, narration, subtitles, product specifications, reference videos, UI recordings, diagrams, or abstract concepts. Use for product launches, AI demonstrations, UI interactions, algorithms, scientific principles, electrical systems, data flows, architecture, charts, equations, and concepts best expressed with React, SVG, Canvas, WebGL, or Three.js. Prioritize continuous spatial logic, visible cause and effect, precise interaction states, editable parameters, deterministic rendering, and evidence-backed visual QA.
Optimizes BUYER-side checkout pages, upsells, order bumps, payment collection, and cart abandonment recovery — increase average order value and reduce checkout friction. Use when checkout conversion rate is too low, cart abandonment is high, average order value isn't growing, not sure which checkout platform to pick, payment plans not converting, or buyers dropping off at the payment step. Do NOT use for full funnel strategy (use /sales-funnel), email follow-up after purchase (use /sales-email-marketing), affiliate tracking on sales (use /sales-affiliate-program), or supply-side / seller-side marketplace payouts to 1099 workers, sellers, drivers, or creators (use /sales-marketplace-payouts). For Groove-specific help, use /sales-groove.
Gather and persist audience, brand, UX goals, React framework, Tailwind setup, and component defaults for future design work. Use when the user asks to establish or update reusable project design guidance. A request to build UI can proceed with existing context without running setup.
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.