Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Implement Flutter UI against a project-owned design system instead of stock Material 3 / Cupertino chrome. Covers ThemeExtension tokens, 1:1 token discipline, a house Pressable that replaces ink ripples, branded type/spacing, and detecting an existing system before inventing a new one. Use when the app has custom tokens, a *Pressable, a ThemeExtension, Figma/CSS token files, or the user says custom design system, branded UI, no Material look, no ripple; or when they run /flutter-custom-design-system
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. Generates creative, polished code that avoids generic AI aesthetics.
Use when authoring or modifying a Datex Studio grid (configurationTypeId=3, *-grid.json suffix) on a branch — the densest UI component. Owns the pre-author rows-source decision (owned vs standalone datasource, OData vs flow), the five-location dynamic-filter wiring rule, secondary enrichment datasources, imperative cell API, and the mandatory grid-validator gate after every edit. Triggers: "create a grid", "add a column to xxx grid", "make the grid filterable/sortable by X", "add a toolbar button", "add a filter", "enrich rows with extra data", "empty column", "dynamic filter contract mismatch", "grid renders blank", "tailored/custom grid variants", enrichment-datasource work.
Use when the user says 'migrate elementor to gutenberg', 'convert elementor to blocks', 'remove the elementor dependency', or 'go back to native wordpress'. Maps Elementor widgets to core blocks and creates draft duplicates for review.
Anti-slop design skill for BUILDING React Native / Expo apps (iOS, Android, web). Commits to an App Read and Nav Read before writing code; ships screens, navigation, and motion that do not look AI-generated. Use when creating new screens, features, or apps in React Native. For auditing an existing app use mobile-design-review; for upgrading existing screens use mobile-redesign-screen or mobile-redesign-app; for navigation planning alone use mobile-nav-plan; for tokens/theming use mobile-design-system.
Design, enforce, audit, and validate Power BI report themes through the pbir CLI. Invoke when a report uses a default or minimal theme, visuals have inconsistent formatting or many local overrides, or the user asks to create, copy, apply, standardize, rebrand, audit, or validate a theme; change theme colors or typography; define style presets; promote visual formatting into the theme; clear overrides; or improve theme compliance.
Animation as communication. Feedback, orientation, emphasis, delight. If motion doesn't serve one of these four purposes, it shouldn't exist. Use when evaluating animation quality, designing transitions, or deciding whether motion adds or subtracts.
Use when authoring or modifying a Datex Studio selector (configurationTypeId=7, *-selector.json suffix) on a branch — datasource-backed dropdown / autocomplete control. Owns the hard component-variant rule (backing must be a -datasource.json, never a -footprintDatasource.json), the sort-by-display-label rule, and the three-piece full-text-search contract (getList filter + getByKeys keyset + full-text param). Triggers: "create a dropdown", "create an xxx_dd selector", "autocomplete for entity X", "enum dropdown", "dropdown is empty", "full-text search doesn't filter the dropdown", "selector backing-datasource is wrong variant".
A complete guide to using Semi Design components, including MCP tool workflows, common patterns, validation after page generation, and best practices. Use this skill when you need to look up Semi Design components, generate component pages, or resolve usage issues.
A pixel / sprite-style animated explainer slide—full-bleed cream stage, bold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom, or 8-bit console), kinetic Japanese display type, ticking timeline ribbon. Reads like a single frame of an educational motion video—looping CSS keyframes, no JS, ready to be screen-recorded into a vertical video. Use when the brief asks for a "sprite animation", "pixel-art video", "8-bit explainer", "history of X explainer", "kinetic typography history", "Nintendo-style", "精灵图动画", "像素动画", or "复古动画"
Stimulus JS framework for Symfony UX -- client-side behavior via HTML data attributes, zero server round-trips. Use when creating controllers for DOM manipulation, handling click/input/submit events, managing targets and values, wiring outlets between controllers, wrapping third-party JS libraries, or building toggles, dropdowns, modals, tabs, clipboard interactions. Code triggers: data-controller, data-action, data-target, data-*-value, data-*-class, data-*-outlet, stimulusFetch lazy, connect(), disconnect(), static targets, static values. Also trigger when the user asks "how do I add a click handler", "how to toggle a class", "how to build a dropdown/modal/tabs", "how to wrap a JS library in Symfony", "add keyboard shortcuts", "lazy-load a controller", "listen to global events", "communicate between controllers". Do NOT trigger for partial page updates without JS (use turbo), server-rendered reactivity (use live-component), or reusable Twig templates (use twig-component).
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples
Comprehensive website content and UX audit. Use this skill whenever someone asks to review, audit, check, or improve a website, landing page, or web product. Triggers include: "audit my website", "review my site", "check my content", "is my website ready to launch", "what's wrong with my site", "content review", "UX review", "website feedback", "check for broken links", "check for lorem ipsum", "review my copy", or any request that involves evaluating an existing website's content quality, UX structure, copy, or readiness for launch. Also trigger when someone shares a URL and asks for feedback, improvements, or a teardown. This skill combines content editing, UX strategy, creative direction, and technical QA into a single structured audit.
Generate webpages from a description — landing pages, portfolios, event pages. View, edit, and share with one click via YouMind. Use when user wants to "create webpage", "make website", "generate page", "landing page", "创建网页", "生成页面", "ウェブページ作成", "웹페이지 만들기".
Design, implement, or visually refine a web interface when the visible experience is a primary deliverable. Use for greenfield UI, redesigns, reference matching, and visual polish; skip backend-only work and behavior-only frontend changes.
Builds form components and data collection interfaces including contact forms, registration flows, checkout processes, surveys, and settings pages. Includes 50+ input types, validation strategies, accessibility patterns (WCAG 2.1), multi-step wizards, and UX best practices. Provides decision trees from data type to component selection, validation timing guidance, and error handling patterns. Use when creating forms, collecting user input, building surveys, implementing validation, designing multi-step workflows, or ensuring form accessibility.
Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids. Use when creating tables, implementing sorting/filtering/pagination, handling large datasets (10-1M+ rows), building spreadsheet-like interfaces, or designing data-heavy components. Provides performance optimization strategies, accessibility patterns (WCAG/ARIA), responsive designs, and library recommendations (TanStack Table, AG Grid).
Expert-level CSS development with modern features and best practices. Use when asked to (1) write or debug CSS, (2) implement layouts with flexbox, grid, or container queries, (3) create animations and transitions, (4) optimize CSS performance, (5) work with CSS preprocessors or CSS-in-JS, (6) implement responsive design, or when phrases like "style", "CSS", "stylesheet", "design", "layout", "animation" appear.
The VS Code design philosophy — a shared Values→Principles→Moves vocabulary for reasoning about UI in design terms instead of raw pixels. Use when designing, building, reviewing, or giving feedback on any visual surface; when deciding a radius, spacing, type role, icon size, border, color, or motion; or when translating a "this feels off" observation into a concrete, principled fix.
Design frictionless signup experiences for developers including GitHub OAuth, API key generation, and onboarding personalization. Trigger phrases: developer signup, dev registration, OAuth flow, API key onboarding, reduce signup friction, developer authentication, signup conversion, registration UX
Native UI integration for Electrobun desktop applications including ApplicationMenu, ContextMenu, system Tray, native dialogs, keyboard shortcuts, and platform-specific UI patterns. This skill covers creating application menus with submenus and accelerators, context menus triggered by right-click, system tray icons with menus, file/folder dialogs, message boxes, notification systems, global keyboard shortcuts, menu item roles, dynamic menu updates, platform-specific menu conventions (macOS menu bar, Windows system menu), drag-and-drop integration, and native theming. Use when implementing application menus, adding system tray functionality, creating context menus, showing file pickers, implementing keyboard shortcuts, displaying notifications or dialogs, or building platform-native UI experiences. Triggers include "menu", "tray icon", "context menu", "file dialog", "shortcuts", "accelerator", "native dialog", "system tray", "notification", "menu bar", or "right-click menu".
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
Invoke when the user wants to plan, execute, or analyze a structured playtest session with behavioral observation. Covers protocol design, observer guides, and data synthesis. Triggers on: "playtest", "player feedback", "usability test", "observation session", "playtest analysis". Do NOT invoke for QA bug testing (use game-qa-lead) or balance tuning (use game-balance-check). Part of the AlterLab GameForge collection.
Invoke when the user asks about game UI, onboarding, HUD design, controller navigation, player feedback, usability testing, colorblind modes, or game-specific UX patterns. Triggers on: "UI", "UX", "onboarding", "HUD", "controller nav", "usability", "colorblind", "player feedback", "menu design". Do NOT invoke for deep accessibility audits (use game-accessibility-specialist) or art style (use game-art-director). Part of the AlterLab GameForge collection.
Convert text content into polished magazine-style HTML pages, with support for professional typography and multiple visual styles. Trigger scenarios: (1) the user wants to convert text/an article into magazine-style HTML, (2) the user mentions "magazine typography," "magazine design," "article layout," "professional typesetting," "text beautification," or "magazine layout," (3) the user needs an elegantly typeset HTML page, (4) the user needs to export the designed content to PDF. Supports 12 distinct visual styles and uses Tailwind CSS.
Use when the user says 'migrate visual composer to gutenberg', 'convert vc to blocks', or 'move visual composer pages to the block editor'. Parses the Visual Composer data, maps elements to core blocks, and creates draft duplicates for review.
Multi-surface rendering with json-render — one JSON spec produces React web, Next.js, React Native, Ink terminal UIs, PDFs, emails, Remotion videos, OG images, and 3D scenes. Covers renderer target selection, registry mapping, and platform APIs (renderToBuffer, renderToStream, renderToFile). Use when generating output for several platforms or creating PDF reports, email templates, demo videos, or social images from one component spec.
Use when building or modifying UIs that need directional focus (arrow keys, TV remotes, gamepads) with the Norigin Spatial Navigation library. Covers `useFocusable`, `FocusContext`, programmatic focus, and common Smart TV / set-top-box patterns.
(NS) Playwright reverse-prototyping — capture live UI; create/evolve single prototype/ (git history; never v1/v2). Use when prototyping from a URL, reversing a screen into prototype/, evolving a prototype, AS-IS flows/fields, or "prototype this app/page". Do NOT use for appearance MDs only (ns-proto-visual-guide), full SDD (ns-spec-driven), bare code fixes (ns-coder), or /ns-harness prepare.
(NS) Normative visual appearance guides (card/form/shell/overlay). MUST use for descrição normativa, guia visual, aparência, visual QA checklist, "how this looks", *-visual.md / *-painel-visual.md / *-appearance.md, or shell vs content / card vs form / carcaça vs formulário. Do NOT use for business rules, ERDs, layout math, API/auth, e2e, or ns-proto-creator.
When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value. Also use when the user mentions “onboarding flow,” “activation rate,” “user activation,” “first-run experience,” “empty states,” “onboarding checklist,” “aha moment,” “new user experience,” “users aren't activating,” “nobody completes setup,” “low activation rate,” “users sign up but don't use the product,” “time to value,” or “first session experience.” Use this whenever users are signing up but not sticking around. For signup/registration optimization, see signup-flow-cro. For ongoing email sequences, see email-sequence.
Use when the user wants to create or optimize popups, modals, overlays, slide-ins, or banners for conversion purposes. Also use when the user mentions “exit intent,” “popup conversions,” “modal optimization,” “lead capture popup,” “email popup,” “announcement banner,” “overlay,” “collect emails with a popup,” “exit popup,” “scroll trigger,” “sticky bar,” or “notification bar.” Use this for any overlay or interrupt-style conversion element. For forms outside of popups, see form-cro. For general page conversion optimization, see page-cro.
Generate publication-ready scientific figures in Python/matplotlib with a consistent figures4papers house style. Use when creating or refining academic bar/trend/heatmap/scatter/multi-panel figures, enforcing visual consistency, or exporting paper-ready PNG/PDF/SVG outputs.
Smart illustration and PPT infographic generator. Supports three modes: (1) Article illustration mode - analyzes article content and generates illustrations; (2) PPT/Slides mode - generates infographics in batches; (3) Cover mode - generates cover images. All modes generate images by default, while `--prompt-only` outputs only the prompt. Supports the Bento Grid feature showcase style (--style bento). Trigger words: 配图、插图、PPT、slides、封面图、thumbnail、cover、bento grid、功能展示图、feature showcase.
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
Replicate a reference UI pixel-for-pixel and build polished, token-driven site chrome. Use when the task is to match a screenshot or live site exactly, redesign a page to look like a design reference, or build a masonry/gallery/grid layout that must feel like the source. Triggers include "pixel perfect", "exact replica", "not a single change", "match this design", "like this screenshot", "masonry grid", "design gallery", "redesign the overview", "same spacing", "same design fashion", "clone this layout", and any request that pairs a UI target image with "make it exactly like that". Also activate when measuring spacing/typography off a reference before writing CSS.
Reduce the time to first meaningful result to increase conversions and decrease drop-off. Use when the offer feels slow, results feel far away, or users drop off after buying. Maps friction, defines a quick-win asset, redesigns onboarding, and improves perceived speed — outputs TIME_TO_VALUE.md.
Generate blog cover images optimized for 16:9 headers — clean composition with text-friendly layouts, powered by multi-model AI. Use when user wants "blog cover", "featured image", "article image", "cover image", "thumbnail", "文章配图", "封面图", "博客配图", "ブログカバー", "블로그 커버".
Make palette decisions for academic figures — choose between classic and pastel style families, then recommend a colorblind-safe scheme with exact hex values based on venue, domain, figure type, and module count. Use this skill whenever the user asks about colors, palettes, style for a figure, including "用什么配色", "推荐配色", "what palette for NeurIPS", "Nature Blue", "classic vs pastel", "色盲友好配色", or any color-related question about academic diagrams.
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.