Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Build a complete visual identity from scratch or refresh one: logo mark and variations (SVG), brand color roles, brand fonts, patterns, favicons/app icons, social avatars, and a brand guidelines page. Use when the user needs the brand itself, not just one ingredient. Trigger phrases: "brand identity", "logo design", "brand guidelines", "visual identity", "brand system", "favicon", "logo variations", "brand pattern", "rebrand". For only a palette use color-palette; only fonts use typography; UI tokens/components use design-system.
When the user asks to draw any of the following and deliver it to Feishu — architecture diagram, flowchart, swimlane diagram, sequence diagram, org chart, state machine, funnel, Gantt chart, milestone, matrix quadrant, link architecture, hand-drawn-style architecture, complex business swimlane diagram, ER diagram, mind map — or provides a Feishu document URL and asks to draw inside it, or says "sync to Feishu / write to the Feishu whiteboard", this skill must be used. Beyond the 17 built-in templates above, this skill also provides a freeform-drawing mode: when the user asks for a painting, hand-drawn illustration, mobile app product prototype, map, game screen, Sankey diagram, or reproduction of an arbitrary reference image — anything the templates cannot cover — or explicitly says "freeform drawing / freestyle / no templates", this skill must likewise be used (the output is still an editable Feishu whiteboard). The generation path strictly follows the eight steps Normalize → Select → Plan → Layout → Render → StaticCheck → VQA → Deliver; hardcoding templates, hardcoding coordinates, and inventing business content the user did not mention are forbidden. All styles are read from assets/style-tokens/ (except for native code diagrams and freeform-drawing mode). Before delivery, the quality gate (executed per route) and dual-reviewer visual review must be passed (any score below 9 or any blocker means failure).
Use when users request diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .excalidraw files and exports to PNG/SVG via the Kroki API or locally using excalidraw-brute-export-cli.
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 figma-export-tokens / figma-manage-variables.
Reverse-engineer an image-format PPT document, slide screenshot, or any image page into an editable .pptx. The four-layer process is mandatory: replicate the background image + cut out the overall skeleton with a green screen + cut out element icons/decorations with a green screen + extract text with GPT vision, then composite (text becomes real text boxes, skeleton and icons become movable images; only split the skeleton into parts when the user explicitly asks for it). Converts slide images back into an editable PPTX via background + skeleton + icons + text layers. Use when the user wants to "convert PPT images/screenshots to editable PPTX, restore image PPTs to editable PPT, cut out icons, replicate backgrounds, extract text, restore layout". Input is an image, output is an editable .pptx.
A UI motion reference library that helps you add suitable animations to your product. No need to understand motion design — describe your product scenario (slow page load, no response after a user clicks, wanting the page to feel more polished) and get a recommended approach plus code. Trigger phrases: 页面没动画、交互没反馈、怎么加动效、让页面动起来、加载太慢怎么办、想让产品高级一点、motion ref.
Use when someone wants to improve, fix, test or critique a mobile app's onboarding — "here's my onboarding", "roast my flow", "why do users drop off before the paywall", a competitor's signup flow, a welcome or activation flow, a quiz, or a flow described in one sentence. Also use whenever YOU are the one designing or generating an onboarding sequence and were given no design reference to follow — no reference screens, no existing flow to copy, no spelled-out sequence — as in "build me an onboarding", "add a quiz before the paywall", "make a flow that converts"; this library is the reference in that case, and it evaluates and corrects the flow you produce. Also use when reviewing an onboarding flow config or a set of `flows config preview` renders produced by the flow-generator skill. Do not wait to be asked for a "teardown" by name.
Document a Penpot design for handoff with a hideable annotation layer BESIDE the design (never on top of it): a context card (goal, business rules, links, status), numbered pins on the UI, matching observation/recommendation notes, optional tooltips. Reuses or proposes an annotation component kit + tokens. NOT for auditing (penpot-audit-*) or renaming layers (penpot-rename-layers). Triggers: 'document this design', 'annotate this screen', 'prepare this for handoff', 'add observation notes', 'create a critique card', 'spec this screen for handoff'.
Use when preparing an academic talk such as a journal club, grand rounds, seminar, conference presentation, or lecture/teaching deck. Analyzes the source, drafts audience-adapted speaker scripts, builds or augments the PPTX with speaker notes and prepares Q&A.
Use when creating or changing a Bagisto admin theme — a theme package, admin layouts, Blade component overrides, or the Vite asset pipeline for the admin panel. Trigger phrases include "admin theme", "admin layout", "admin panel styling", "theme package", "vite", "tailwind", "publish views", "custom layout".
Choose, inspect, install, and compose licensed beUI Pro premium React blocks through authenticated MCP or the shadcn registry. Use when building or improving landing pages with beUI Pro, installing @beui-pro items, selecting premium heroes, features, pricing, social proof, CTAs, navigation, footers, or other page sections, or adapting installed Pro source inside a React or Next.js project.
Use this skill when a person has to enter, review, or approve data as a step in a process—task screens, approval or start forms with validation, conditional fields, or dropdowns—even if forms or user tasks aren't mentioned. Creates Camunda Form JSON (.form) for BPMN user tasks and start events; not for forms in standalone web apps.
Reference library of 74 real-world brand design systems (Claude, Linear, Stripe, Vercel, Figma, Apple, Tesla, Spotify, Notion, Supabase, and more) captured as DESIGN.md files — colors, typography, components, layout, elevation. Use when the user wants UI, a landing page, or a component that matches a specific brand's look; wants to pick a design direction from real design systems; says "like <brand>", "make it feel like Linear / Stripe / Apple"; or needs a concrete design-token starting point before frontend work. Pairs with frontend-design and tailwind-design-system.
Scaffolds Expo / React Native design system components that obey the expo-design-system rules by construction — a variant-driven pressable primitive, a slot-based card surface, a typed text primitive, a labeled form field, a FlashList entity screen, a theme token group, and a Storybook variant catalog. Generated code uses Unistyles v3 variants instead of style props, ref-as-prop, design tokens, built-in accessibility, and web/iOS parity (`_web` hover/focus/cursor on interactive primitives), so it follows expo-design-system without rework. Output is TSX/TS using react-native-unistyles. Trigger whenever the user wants to create, add, generate, or scaffold a new shared UI component, primitive, design token group, or screen for the clinic mobile app — even if they don't mention the design system.
Author FigJam boards with granular control — sticky notes (single + batch), connectors between nodes, shapes-with-text, sections, tables, code blocks, and auto-arrange — plus read back board contents and the connection graph. Use when the user wants to build or edit a FigJam board element-by-element. Triggers: 'add stickies to FigJam', 'create a flowchart/diagram in FigJam', 'connect these nodes', 'make a section/table/code block in FigJam', 'auto-arrange the board', 'read what's on the FigJam board', 'map the connections'. More granular than the native generate_diagram (which produces a whole diagram in one shot). FigJam files only (figma.editorType === 'figjam'). Requires the Figma Desktop app (Plugin API).
Organize a Figma COMPONENT_SET's variants into a clean, labeled grid — rows and columns derived from the variant properties, with row labels on the left, column headers on top, and a titled white container. Use when a variant set is a messy pile and you want a presentable, documentation-ready layout — triggers: 'arrange my variants in a grid', 'organize this component set', 'lay out the variants with labels', 'make a variant matrix', 'clean up my component set layout', 'add row/column headers to my variants'. Picks the last property (usually State) as columns and the rest as rows by default. NOT something the native MCP's read-only tools do — this writes a new organized layout to the canvas.
Organizes, structures, and labels content so users can find and manage information effectively. Guides through content audits, card sorting, taxonomy design, navigation structure, and tree testing validation. Use when organizing content for digital products, designing navigation systems, restructuring information hierarchies, improving findability, creating taxonomies or metadata schemas, or when users mention information architecture, IA, sitemap, navigation design, content structure, card sorting, tree testing, taxonomy, or findability.
Use this skill to drive Compose HotSwan from an AI agent (Claude Code, Cursor, any MCP client) so the agent can edit a Kotlin file, trigger a hot reload, capture a device screenshot, evaluate the result against a design intent, and iterate without a human in the loop. Covers the seven HotSwan MCP tools (hotswan_get_status, hotswan_reload, hotswan_take_screenshot, hotswan_start_snapshot, hotswan_stop_snapshot, hotswan_select_variant, hotswan_build_and_install), the canonical edit-reload-screenshot loop, snapshot-based rollback, and when to fall back to a full install for schema changes. Use when the developer says "get the AI to tune this screen until it matches a mock", asks "can the AI see what changed?" or "can the AI screenshot the device?", sets up a Claude Code or Cursor workflow that needs MCP tool access, or wants AI-driven UI iteration.
Create high-converting, visually distinctive landing pages. Use when building marketing pages, product launches, SaaS homepages, or any single-page conversion-focused website. Guides section-by-section composition with anti-AI-slop principles.
Recreates or builds UI designs in Sketch from a reference URL, screenshot, or source code with side-by-side screenshot fidelity validation using Sketch MCP (`get_document_info`, `get_layer_tree_summary`, `get_screenshot`, `get_design_assets`, `get_symbol_overrides`, targeted `run_code`). Use when the user wants to design, mock up, or reproduce a page or screen in Sketch from the web, an image, or code.
Comprehensive guide for implementing Syncfusion WPF MaskedTextBox (SfMaskedEdit) control for restricted input with mask patterns. Use this skill when implementing masked input, input masks, or input restrictions with predefined patterns in WPF. Covers phone number input, email validation, credit card input, formatted input with prompt characters, RegEx masks, and custom patterns for dates, currency, product keys, and zip codes.
Comprehensive guide for developing Telegram Mini Apps with any web framework (React, Vue, Svelte, vanilla JS, etc.). Covers the Telegram Web App SDK, theming, UI components, navigation, data validation, and platform best practices.
Apply professional visual themes to documents and presentations. Use for styling artifacts with consistent color palettes and font pairings. Use proactively to quickly improve the aesthetic quality of deliverables. Examples: - user: "Apply a modern theme to this deck" -> use Modern Minimalist theme - user: "I want a tech aesthetic for this doc" -> apply Tech Innovation theme - user: "Create a custom theme for my project" -> generate new color/font specification
Initialize shadcn/ui + Tailwind CSS v4 in Vite projects (Vite-specific, not Next.js/Remix). Use proactively for Vite project setup, shadcn component installation, or Tailwind v4 configuration. Examples: - user: "Setup shadcn in my Vite project" → install deps, configure tailwind v4 CSS-first, init shadcn, verify components work - user: "Add shadcn to existing Vite app" → check existing config, install CLI, add components.json, update CSS imports - user: "Use Tailwind v4 with shadcn" → configure @import with @theme, remove v3 config, setup custom tokens - user: "Create Vite + React + shadcn project" → scaffold Vite, install shadcn, configure theme, add sample components
Build Zalo Mini Apps - lightweight web apps running inside Zalo super-app. This skill provides ZaUI components (Button, Input, Modal, Tabs, Avatar, etc.), JavaScript APIs (authorize, getUserInfo, getPhoneNumber, getLocation, Storage, Camera), Checkout SDK for payments, design guidelines, and development tools. Use when building Mini Apps, using ZaUI components, calling Zalo APIs, integrating payments, converting web apps to Mini Apps, or following Zalo design standards.
Chat UI building blocks for React/Next.js from ui.inference.sh. Components: container, messages, input, typing indicators, avatars. Capabilities: chat interfaces, message lists, input handling, streaming. Use for: building custom chat UIs, messaging interfaces, AI assistants. Triggers: chat ui, chat component, message list, chat input, shadcn chat, react chat, chat interface, messaging ui, conversation ui, chat building blocks
A skill for creating executive-meeting-quality slides, built around the slide design rules in slide-rules.md. Retrieve only the sections needed for each stage with scripts/rules.py, assemble from components verified against the rules (20 types listed by new_deck.py --list), and finish with zero mechanical-check FAILs from check_deck.py and check_layout.mjs. Only when given an existing PowerPoint and asked for pages to insert into it as PPTX, build directly on that document’s master (slide-rules §8.7). Trigger examples: “Create consulting-quality slides,” “Make a deck that follows the rules,” “Add pages to this pptx in the same format.”
Guides creation of custom, interactive data visualizations with D3.js — bar/line/scatter charts, network diagrams, geographic maps, hierarchies, and real-time data updates with zoom/pan/brush interactions and animated transitions. Use when chart libraries (Highcharts, Chart.js) lack the customization needed and you require low-level control over data-driven DOM manipulation, scales, shapes, and layouts. Invoke when user mentions D3, d3.js, custom visualization, force-directed graph, or data-driven SVG.
Comprehensive data visualization skill covering visual execution and technical implementation. Includes perceptual foundations, chart selection, layout algorithms, and library guidance. Triggers on: charts, graphs, dashboards, 'visualize', 'plot', data presentation, D3, Recharts, Victory.
Charts, dashboards, and data visualizations using Recharts, Chart.js, and D3.js. Use when building charts, dashboards, or interactive data displays. Use for chart type selection, data storytelling, annotation patterns, responsive design, accessibility, and performance optimization.
Generate a human-readable markdown changelog between two Figma file versions — pages added/removed/renamed plus per-component changes, enriched with author handles and timestamps, ready to paste into release notes, PRs, or Storybook MDX. Use when the user wants prose history — triggers: 'generate a Figma changelog', 'write release notes from Figma', 'what changed between these versions in markdown', 'summarize Figma changes for the PR', 'changelog between version A and B', 'design changelog since last release'. Uses the Figma REST API + a personal access token because version history is NOT reachable via the Plugin API / use_figma / the native Figma MCP. For raw structured diff JSON use figma-version-history; to find which version introduced a specific change use figma-blame-node.
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 when generating Weaverse project export JSON for import into the Weaverse editor. Triggers on requests to create, build, or produce a Weaverse project JSON file from a site migration, design spec, page layout description, or existing export. Also use when converting section plans into importable project and pages data.
Build, update, and apply iOS design specifications using Apple Human Interface Guidelines (HIG) source data. Use when a task asks for iOS UI/UX rules, Apple design standards, component behavior, accessibility constraints, interaction patterns, or feature-level design-spec writing grounded in official HIG pages.
Logo design principles and AI image generation best practices for creating logos. Covers logo types, prompting techniques, scalability rules, and iteration workflows. Use for: brand identity, startup logos, app icons, favicons, logo concepts. Triggers: logo design, create logo, brand logo, logo generation, ai logo, logo maker, icon design, brand mark, logo concept, startup logo, app icon logo
Open Graph and social sharing image design with platform specs, text placement, and branding. Covers OG meta tags, Twitter cards, LinkedIn previews, and dynamic generation. Use for: social sharing images, blog thumbnails, link previews, social cards. Triggers: og image, open graph, social sharing image, twitter card, social card, link preview image, og meta, sharing preview, social thumbnail, meta image, og:image, twitter:image, linkedin preview
Transform any website into a premium, Apple-quality web experience. Use when building new websites, redesigning existing ones, reviewing web design quality, implementing landing pages, or when the user mentions "premium", "luxury", "high-end", "Apple-like", or "professional" website design. Also activate when creating hero sections, improving visual hierarchy, adding animations, or optimizing web aesthetics.
Multi-slide carousel design for Instagram, LinkedIn, and Twitter/X with layout rules and hooks. Covers slide structure, text hierarchy, swipe psychology, and platform-specific specs. Use for: carousel posts, Instagram carousels, LinkedIn carousels, slide posts, educational content. Triggers: carousel, instagram carousel, linkedin carousel, slide post, carousel design, swipe post, multi-image post, carousel template, educational carousel, carousel content, instagram slides, linkedin slides
Use when the user is customizing the Spree admin (the `spree_admin` gem) — adding a new resource page, registering a sidebar item, customizing a column in an admin table, overriding a view, scaffolding a new admin section. Common phrasings include "add admin page", "Rails admin", "spree_admin", "scaffold admin resource", "admin sidebar", "override admin view", "Hotwire admin", "Turbo admin".
Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool status, progress indicators, approval flows, results display. Use for: showing agent tool calls, human-in-the-loop approvals, tool output. Triggers: tool ui, tool calls, tool status, tool approval, tool results, agent tools, mcp tools ui, function calling ui, tool lifecycle, tool pending
UI/UX and frontend design best practices guidelines (formerly frontend-design). This skill should be used when writing, reviewing, or designing frontend code to ensure accessibility, performance, and usability. Triggers on tasks involving HTML structure, CSS styling, responsive layouts, form design, animations, or accessibility improvements.
Design or critique an analytics or data dashboard — which metrics earn a place, how to organize and prioritize them, and which chart fits each one. Trigger when designing a dashboard, building an analytics or reporting screen, choosing chart types, or reviewing a dashboard for clarity and information overload.
Run a structured mobile-responsiveness audit on a design, screen, or component — viewport adaptation and reflow, orientation, touch-target size and spacing, thumb reachability, mobile input ergonomics, gesture safety, and mobile readability/content priority. Produces a severity-rated issue list with concrete fixes. Use when reviewing whether a UI works on phones/tablets, or as a validation step after generating mobile or responsive UI.
Generate professional infographics with 21 layout types and 22 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", "visual summary", "可视化", or "高密度信息大图".
Generate tone-of-voice and brand-system files for use with the PPTX Generator and other brand-aware skills. TRIGGERS - Use this skill when user says: - "help me create a brand system" / "set up my brand" - "generate my tone of voice" / "create my voice guidelines" - "configure my brand for presentations" / "set up brand for slides" - "create brand files" / "initialize my brand" - Any request about defining brand identity, voice, or visual system for content creation. Creates brand.json, config.json, brand-system.md, and tone-of-voice.md files.
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.