Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Unified UI/UX operating system for planning, designing, implementing, and auditing modern interfaces across web and mobile stacks. Use when requests involve creating, redesigning, reviewing, fixing, or optimizing pages/components (landing pages, dashboards, SaaS apps, admin panels, e-commerce, portfolios, blogs, mobile screens) and require strong visual direction plus accessibility, interaction, performance, and responsive quality.
App Store screenshot research, competitor analysis, building, and upload tool for iOS/macOS apps. Use this skill when working with App Store screenshots for any of these tasks: (1) Finding and analyzing competitor screenshots in your category, (2) Downloading competitor screenshots locally for reference, (3) Analyzing screenshot strategies (styles, captions, features), (4) Researching ASO keywords for screenshot captions, (5) Planning your screenshot sequence and messaging, (6) Building screenshots using an HTML/CSS export tool, (7) Generating a local preview website to view and compare screenshots, (8) Exporting screenshots at correct dimensions via browser or Puppeteer, (9) Localizing screenshots for multiple App Store locales, (10) Uploading screenshots to App Store Connect via API.
Implement right-to-left (RTL) layouts for Arabic web and mobile applications. Use when user asks about RTL layout, Arabic text direction, bidirectional (bidi) text, Arabic CSS, "right to left", or needs to build Arabic UI. Covers CSS logical properties, Tailwind RTL, React/Next.js RTL setup, Arabic typography, and font selection. Do NOT use for Arabic RTL (similar but different typography) unless user explicitly asks for shared RTL patterns.
Zero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 10+ documented errors: SSR/Next.js imports, conditional parents, missing keys, flexbox width, table display, Jest/esbuild config, CSS position conflicts, Vue/Nuxt registration, Angular ESM. Use when: animating lists/accordions/toasts/forms, troubleshooting SSR animation errors, need accessible animations (auto prefers-reduced-motion), or want drop-in transitions without Motion overhead.
Converts Markdown to styled HTML with WeChat-compatible themes. Supports code highlighting, math, Mermaid (rendered to PNG via headless Chrome), PlantUML, footnotes, alerts, infographics, and optional bottom citations for external links. Use when user asks for "markdown to html", "convert md to html", "md 转 html", "微信外链转底部引用", or needs styled HTML output from markdown
Creates complete single-file HTML/CSS/JS web apps with localStorage persistence, ADHD-optimized UI (60px+ buttons), dark mode, and offline functionality. Use when user says "create app", "build tool", "make dashboard", or requests any browser-based interface.
Teaches AI assistants how to develop FlutterFlow apps using MCP tools. Use this skill when working with FlutterFlow projects, editing FF YAML, creating or inspecting pages and components, reading project configuration, or navigating FlutterFlow widget trees. It covers all 25 MCP tools for discovery, reading, editing, and settings. Triggers on: FlutterFlow, FF YAML, FF page, FF component, FF widget, FF theme, FF project.
Turn a CodeSpring plan into a clickable local mockup the client can actually look at — one screen per core feature, real copy, plausible data, a proper token-driven design system with light and dark mode, and a style guide page showing the branding. Then run the review that surfaces what the written plan could not: screen order, hierarchy, position, and choices that turn out to be incomplete. Feeds every correction back into the CodeSpring notes and tasks. Runs AFTER the map and notes exist and BEFORE the PRDs are generated. Triggers, "make a mockup", "mock up the UI", "show me what it looks like", "build a prototype", "design the screens", "what would this app look like", "create a UI mockup for this plan", "I want to show the client something".
Build, repair, tune, and validate interactive cursor-trail mask reveal hero effects in frontend projects. Use when implementing canvas-based base/reveal compositing, soft radial cursor masks, fading cursor trails, reveal debug controls, full-screen hero scenes without site text, or browser smoke checks for cursor reveal, hover reveal, before/after reveal, and mask compositing effects.
Extract, audit, and document design systems from existing product UI, screenshots, Figma-like specs, codebases, component libraries, CSS, design tokens, mobile apps, web apps, dashboards, and marketing pages. Use when turning inconsistent UI into reusable tokens, components, patterns, spacing, typography, color, motion, accessibility, and product craft rules.
Create a structured user discovery interview guide with screener questions, a discussion guide, and a synthesis framework. Use when planning user interviews, customer discovery sessions, Jobs-to-be-Done research, or problem validation. Produces a complete guide covering warm-up, problem exploration, and a per-session synthesis template.
This skill should be used when the user asks to "create a diagram", "make a flowchart", "generate a .drawio file", "draw.io diagram", "diagrams.net", "architecture diagram", "sequence diagram", "ER diagram", "class diagram", "network diagram", "org chart", "workflow diagram", "UML diagram", "ArchiMate diagram", "C4 diagram", "C4 model", "enterprise architecture", or mentions "drawio", "mxGraph", or diagram visualization. Provides comprehensive knowledge for creating production-ready DrawIO XML files.
This skill MUST be used for architecture decisions, module boundaries, turning plans or specs into tickets, or explicit UI/design reviews. SHOULD be used when implementation requires unresolved architectural choices or the user is unsure how to divide the work. MUST NOT expand an already specified implementation into a new planning exercise. Triggers on: 技術方案, 架構設計, 怎麼切模組, 拆任務, 切票, 排開發順序, 技術規劃, design review, UI review, AI slop scan.
Create Excalidraw diagrams as JSON files for flowcharts, user journeys, system architectures, wireframes, and visual documentation. Use when the user asks to create diagrams, flowcharts, visual representations, architecture diagrams, mind maps, or any Excalidraw-compatible visualizations. Outputs .excalidraw.json files that can be opened in excalidraw.com or any Excalidraw-compatible app.
Audit a Figma component library for consistency, coverage gaps, and naming issues. Use when asked to audit components, review a design system, check component consistency, identify missing components, or assess Figma library health. Produces a structured audit report with issues prioritised by impact, naming recommendations, and a fix plan.
Draw an animated figure—boxes, arrows, and moving data—as a self-contained SVG for a GitHub README, PR, issue, or blog post. Use when a change or explanation needs a diagram, such as showing request flow, what a background job does, or what a feature changed; also use when the user asks for a diagram, figure, animation, or to “show it visually.” For pages on the docs site itself, use the interactive player instead (see step 4).
Manage a website built with Frappe Builder on a Frappe site from outside the editor. Use to create or edit Builder pages, build or change Builder components (props, scripts, data), retheme a site, build data-driven or dynamic-route pages from the site's DocTypes, make forms that save, add page scripts, or publish, when the site runs the Builder app.
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
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
Audit a game, feature, level sequence, combat loop, progression curve, onboarding path, event structure, or return-player journey through the lens of Flow theory. Use when evaluating whether challenge and skill stay aligned over time, diagnosing boredom, anxiety, frustration spikes, difficulty cliffs, dead zones, or pacing drift, or identifying where a design stops feeling absorbing and starts feeling exhausting or empty
Software development engine for coding. A production-grade skills system for web apps and mobile architecture, APIs, databases, web, mobile, AI, security, UX, SaaS, and ERP engineering. Encodes reusable engineering judgment through layered baseline and specialist skills to help generate secure, scalable, maintainable, high-performance software systems
Transform a codebase study guide into a polished interactive web experience. This skill should be used when the user has a completed study guide markdown file (from codebase-study-guide or similar) and wants to turn it into an interactive pedagogical app. Triggers on requests like \"make this study guide interactive\", \"turn this into an interactive experience\", \"visualize this study guide\", \"create an interactive version\", or when a user has a study guide .md file and wants a richer presentation. Produces a Vite-served single-page app with scroll-driven storytelling, interactive architecture diagrams, animated code walkthroughs, and progressive disclosure.
Terrain and hillshade in MapLibre GL JS — raster-dem sources, Terrarium vs. Mapbox RGB encoding, hillshade layer configuration (single and multi-pass), 3D terrain, dynamic contour lines, and self-hosting DEM tiles. Use when adding elevation context, hillshade, or 3D terrain to a map.
Converts long-form markdown (specs, RFCs, reports, plans, explainers) into a single-file, lightly-interactive HTML document with sticky TOC, scrollspy, search filter, code-copy buttons, and design-system-driven brand tokens. Triggers when the markdown-html-orchestrator classifies an input as DOCUMENT, or when invoked directly via /cs-md-document. Reads the design-system config via config_loader.py and inlines the user's 12 derived CSS custom properties; refuses to render if onboarding hasn't run. Single-file output — Google Fonts + Prism.js CDN are the only externals; no framework runtime, no build step. Use after orchestrator routing or after design-system onboarding is confirmed.
Generate Mermaid diagrams for chatbot flows that render in Markdown, including choosing diagram types, producing valid Mermaid code blocks, and validating or rendering diagrams locally via the bundled scripts. Use when a user asks for chatbot flowcharts/sequence/state diagrams, wants Mermaid syntax, or needs to verify/render Mermaid without a web service.
Use when working with ANY Netresearch visual output: branded pages, dashboards, HTML reports, TYPO3 manuals on docs.typo3.org, extension icons, README badges, or CSS theming. Select the hosted-manual or standalone-page profile before applying logo, typography, color, and footer requirements.
Turns products, knowledge points, or copy into cinematic web demo animations in a "phone system UI style" — the audience watches what looks like a carefully choreographed screen recording of a real phone: lock screen notifications, chats, settings pages, control center, and app screens revealed shot by shot, with HyperOS/MIUI-level tactile motion effects plus a virtual clock player, recordable full-screen as a finished video. Use this skill whenever the user mentions phone UI demos, phone screen-recording style animations, app demo web pages, turning a product into a demo inside a phone, lock screen notification animations, system UI style demo pages, or asks to revamp and upgrade a batch of phone-style demo pages. Content is fully open with no limits: any product feature, course knowledge, or science narrative can be translated into "what happens inside a phone".
R visual creation and ggplot2 patterns for PBIR reports. Automatically invoke when the user mentions "R visual", "ggplot2", "ggplot in Power BI", or asks to "create an R visual", "add an R chart", "write an R visual script", "inject an R script into Power BI".
Comprehensive internationalization skill for Ruby on Rails applications with proper English and Arabic translations, RTL support, pluralization rules, date/time formatting, and culturally appropriate content adaptation.
Use when building interactive 2D or 3D graph or network visualizations in React with the reagraph library (GraphCanvas, node-link diagrams, force-directed layouts). Covers data shapes (GraphNode, GraphEdge), 16 layout algorithms, selection, lasso, camera controls, sizing strategies, and theming.
Genre pack: Risograph / 70s–80s print revival. Warm paper, pigment inks (one red + one blue maximum), halftone dot textures, misregistered ink offsets, rubber-stamp details, poster typography. Use for zines, events, agencies, food/drink brands, music, and anything wanting a warm analog voice. Stack on the design-taste core skill.
Create publication-quality scientific diagrams, flowcharts, and schematics using Python (graphviz, matplotlib, schemdraw, networkx). Specialized in neural network architectures, system diagrams, and flowcharts. Generates SVG/EPS in figures/ folder with automated quality verification.
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.