Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Implement Syncfusion WPF PropertyGrid for browsing and editing object properties with custom editors and category editors. Use this when building property inspectors, property panels similar to Visual Studio's Properties window, or dynamically inspecting and editing object properties in WPF. Covers custom value editors, category editors, collection editing, and design-time property editor customization.
Comprehensive guide for implementing Syncfusion WPF Sparkline (SfSparkline) controls in Windows Presentation Foundation applications. Use this when working with sparklines, mini charts, or trend visualization. This skill covers sparkline types (line, column, area, WinLoss), markers, track ball, range bands, axis controls, and segment customization for compact data visualization in WPF applications.
Implement Syncfusion WPF SfStepProgressBar for multi-step process visualization. Use this when building wizard steps, order tracking, stepper indicators, checkout flows, registration wizards, or onboarding step sequences in WPF. Covers StepViewItem, SelectedIndex, SelectedItemStatus, step marker customization, connector lines, data binding, and template selectors based on step status.
Load this skill whenever the project contains tooltip components, hover-triggered informational popups, title attribute tooltips, or any content revealed on hover or focus. Under no circumstances create tooltips that are only triggered by hover without keyboard equivalent access. Absolutely always ensure tooltips are dismissible, persistent enough to read, and not the sole source of essential information.
Use this skill any time the user wants to build a website or landing page. This includes: product pages, portfolio sites, event pages, coming soon pages, pricing pages, company intro sites, personal blogs, signup pages, app download pages, and campaign pages. Also trigger when: user says 做个网站, 建个落地页, 做个产品页, 做个活动页, 做个个人主页. If a website or web page needs to be created, use this skill.
Ark UI headless / unstyled component library. Based on Zag.js, with Chakra UI v3 as its foundation. Supports React / Solid / Vue / Svelte. asChild, RootProvider, createListCollection, createTreeCollection, Presence hideMode, useHotkey / useHotkeys, data-* selectors. Component APIs for Navigation Menu, TOC, Tour, Signature Pad, Image Cropper, Floating Panel, Angle Slider, and more.
Convert raster drawing references—including screenshots, scans, photos, sketches, exported PNG/JPG files, and photographed plans—into structured, editable AutoCAD DWG/DXF drawings with explicit evidence tracking, input preflight, specification validation, output inspection, and visual comparison. Use for dimension-driven redraws, hybrid reconstruction, visual tracing, or geometry-only redraws when the source is an image rather than a trustworthy source DWG.
Build or repair a color system: full brand and neutral ramps, semantic color tokens, contrast-verified pairings, dark mode, and status colors — delivered as a tokens file (CSS variables / Tailwind theme) with every text pairing's contrast ratio computed. Use when the user says 'the colors look off', 'colors clash', 'add dark mode', 'is this accessible', 'pick a palette', 'too many blues in the codebase', 'make it match our brand', or when contrast failures are found. Extracts the de facto palette from the code first, consolidates drift into ramps, chooses harmony deliberately, and verifies WCAG AA on every shipped pair in both modes.
Create polished HTML technical reports and multi-page documents for consulting deliverables. Features a professional design system with dark cover pages, warm cream content pages, Switzer + Cartograph CF typography, and a curated component library (KPI cards, data tables, callout boxes, recommendation cards, priority banners). Outputs standalone HTML that prints cleanly to PDF.
Salesforce Lightning Web Components and platform features (Winter '26 / 2025). Proactively activate for: (1) authoring Lightning Web Components (LWC), (2) Wire service and @wire decorator, (3) Apex from LWC (imperative, @wire), (4) Lightning Data Service and recordEditForm/recordViewForm, (5) Lightning Design System (SLDS) styling, (6) Salesforce Mobile App development, (7) LWC events (composed, bubbles, custom events), (8) LWC testing with Jest and sfdx-lwc-jest, (9) Winter '26 platform features (new APIs, deprecations), (10) LWC + Experience Cloud customization. Provides LWC component templates, @wire patterns, SLDS class reference, Jest test recipes, and the Winter '26 changelog.
Develops CSS and LESS for Magento 2 with responsive design and performance optimization. Use when styling themes, working with LESS, implementing responsive design, or optimizing CSS performance. Masters modern CSS techniques, LESS preprocessing, and cross-browser compatibility
Comprehensive guidelines for creating HTML that renders perfectly as PDF documents. Use when generating HTML for PDF conversion, handling page breaks, formatting tables for PDF, optimizing images for print, controlling content density, setting up colors and backgrounds for print, adding headers/footers/page numbers, or creating specific document types like invoices, reports, certificates, and letters. Also use when the user mentions 'HTML to PDF,' 'PDF generation,' 'print CSS,' 'page breaks,' 'PDF layout,' 'PDF tables,' 'PDF images,' 'content density,' 'print styles,' or 'pdfnoodle.'
Design Roblox worlds, levels, hubs, zones, biomes, obbies, arenas, and exploration spaces. Use for spatial layout, landmarks, player flow, spawn design, objective placement, onboarding paths, traversal, sightlines, social spaces, performance-aware world layout, and guiding players without text.
Builds scalable design systems with tokens, theming, and component architecture. Use when creating design token hierarchies, theming systems, component variant patterns, or accessibility foundations. Use for design tokens, CVA variants, dark mode, multi-brand theming, Radix headless UI, Storybook documentation, and governance
Professional UI/UX design expertise for full-stack applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design reviews.
Load this skill whenever the project contains HTML data tables (<table> elements). Under no circumstances use tables for layout purposes. Absolutely always include <th> elements with appropriate scope attributes, a <caption> or aria-labelledby, and ensure complex tables have headers associated with data cells. Apply these rules to every data table without exception.
Audit designs, color palettes, and UI components for WCAG 2.1 accessibility compliance, providing specific fixes for contrast, touch targets, focus indicators, and screen reader support. NOT for color harmony aesthetics or design system creation.
Create or edit Feishu whiteboards, Slides, dynamic HTMLBox components in documents, and Miaoda HTML apps; choose charts and colors. Use for architecture diagrams, SVG/Mermaid, presentations, ECharts, maps, or interactive dashboards when a Feishu deliverable is explicitly needed. Not for requests limited to local SVG, PPTX, or HTML. For message cards, use feishu-cli-messaging; for importing Markdown charts, use feishu-cli-docs.
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 and improve iOS/SwiftUI app aesthetics — typography, color, spatial composition, motion, and atmospheric depth. Use when reviewing UI design, critiquing screenshots, or improving SwiftUI view code beyond functional correctness.
Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention “native feel,” “desktop app design,” “Apple design patterns,” “sidebar layout,” “traffic lights,” or want to build tools/utilities that feel like they belong on macOS. This skill covers layout, composition, interaction patterns, animations, light/dark mode, and all the subtle details that make an app feel like Apple built it
Provider-independent motion graphics direction for AI agents producing title sequences, lower thirds, explainer graphics, product UI overlays, social ads, kinetic typography, diagrams, data callouts, brand films, and video post. Use when planning, prompting, storyboarding, specifying, implementing, reviewing, or QAing motion graphics across live footage, generated video, UI capture, data visualization, brand systems, typography, accessibility, claim integrity, runtime handoff, and iteration.
Generate a multi-page Draw.io-format PPT from a paper or presentation content, with modes for thesis defenses and general presentations, and automatically export it as .pptx. Use when the user mentions thesis defense PPTs, defense slides, general PPTs, presentation PPTs, generating a PPT from a template, or drawio2pptx.
Generates code from Sketch designs with 1:1 visual fidelity using Sketch MCP (`get_document_info`, `get_layer_tree_summary`, `get_screenshot`, `get_symbol_overrides`, `get_design_assets`, targeted `run_code`). Inspects existing project code and conventions first, maps symbols and overrides to reusable components, exports assets, and validates implementations against Sketch screenshots (web: running app vs `get_screenshot`). Use when implementing or updating UI in React, Tailwind, SwiftUI, Kotlin, or other technologies from an Sketch document, page, frame, or layer.
Generates a designed portfolio-resume image from resume content provided in conversation text. Extracts optional style instructions, converts the resume into a fixed portfolio-resume layout prompt, and generates the final image through sn-image-base. Use when user asks to create "resume image", "portfolio resume", "简历图", "简历海报", or "个人简历视觉设计".
Build WCAG 2.2 AA compliant interfaces with semantic HTML, ARIA, keyboard navigation, focus management, color contrast, and screen reader support. Covers forms, dialogs, tabs, live regions, skip links, alt text, and data tables. Use when implementing accessible UIs, auditing WCAG compliance, fixing screen reader issues, keyboard navigation, focus traps, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast", "missing alt text", "heading hierarchy"
Design system architecture: W3C design tokens, Style Dictionary pipelines, component library structure, theming, multi-brand token tiers, governance, versioning, and maturity models. Use when starting or scaling a design system, generating tokens, or setting up design-to-code distribution.
Entry point for Drupal Canvas Code Components (React/JSX). Points to the officially maintained drupal-canvas/skills suite (component definition, metadata, push, styling, data fetching, regions, page definition, content templates) and to this repo's complements for Twig SDCs and upstream contribution. Use when creating, modifying, or pushing Canvas Code Components, or when deciding which Canvas skill applies.
Build a self-contained, responsive HTML page that explains a concept, system, change, or decision with accurate writing and diagrams. Use when asked to visualize, diagram, or explain a repository, architecture, specification, pull request, process, or technical idea as an HTML page
Professional UI/UX design expertise for static HTML/CSS/JS sites. Covers design thinking, user psychology, visual hierarchy, minimalist interaction patterns, accessibility, and performance-driven design. Use when designing features, improving UX, or conducting design reviews.
Design interfaces following Google's Material Design system, the unified visual language bridging digital and physical worlds. Emphasizes bold graphic design, intentional motion, adaptive layouts, and the material metaphor. Use when building modern, accessible, delightful user interfaces across platforms.
Create design system documents from any website URL. Use this skill for: DESIGN.md, preview.html, design tokens, CSS variables, style references, brand analysis, or format conversion between DESIGN.md/tokens.json/variables.css/theme.css. Trigger on: "create a DESIGN.md", "extract design tokens", "analyze [brand]'s design system", "reverse-engineer [url]'s visual style", "rico DESIGN.md", "rico tokens", "rico 全部输出". Covers: DESIGN.md, preview.html, tokens.json (DTCG), variables.css, theme.css (Tailwind v4).
Use when the user wants to turn text content into a set of polished, shareable visual CARD IMAGES or narrated card VIDEOS — knowledge cards, quote cards, 小红书图文, carousel cards, poster cards — rendered as HTML/CSS and exported via Playwright at ratios like 1:1 / 3:4 / 9:16; optionally produces a narrated MP4 video from those cards via `voxflow card render` (per-card TTS + FFmpeg static-image clips with optional subtitle bar / intro+outro cards / BGM mix). Triggers: card / 卡片 / 知识卡 / 文字卡片 / 金句卡 / 图文卡片 / 卡片生成 / make cards / card video / 卡片视频. For article → Slice-themed card VIDEO use voxflow:slice; for short videos / AI clips use voxflow:video; for podcasts use voxflow:podcast.
Apply Apple/iOS-style 60% corner smoothing to UI shapes without broken border-radius hacks. Use when implementing squircle-like rounded rectangles, Figma corner smoothing, iOS-style cards/buttons/icons, SVG path rounded rectangles, clip paths, canvas shapes, or when a user asks for radius plus smoothing percent values such as radius 52 and smoothing 60.
Foundational skill for AI-powered image generation using Gemini 3.1 Flash Image Preview. Handles text-to-image, image editing, multi-turn refinement, and batch generation. Use directly for one-off images; for posters, ads, thumbnails, social posts, etc. prefer the matching graphic design skill, which layers format-specific rules on top of this pipeline. Trigger phrases: "generate an image", "create an image", "AI image", "Gemini image", "generate with Gemini", "image generation", "product image to graphic".
Web animations with Motion (formerly Framer Motion) for React -- gestures, scroll effects, spring physics, layout animations, SVG, micro-interactions, loading states. Use when: drag-and-drop, scroll animations, modals, carousels, parallax, page transitions, hover effects, staggered lists, loading spinners, number counters. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client", layout in scaled containers.
Build and maintain Penpot components with COMPLETE variant matrices — sizes, hierarchies, and all interactive states (default/hover/pressed/focus/disabled) — fully tokenized and correctly named. Use to create a new component with variants, fill in missing states, or normalize an existing component. Triggers: 'create a Button component with variants', 'build component variants', 'add hover/pressed/disabled states', 'make a variant matrix', 'turn this into a component with sizes', 'normalize this component'.
Package one video/script/transcript into a complete publish kit: cover titles, platform titles, per-platform tags, description, and creative cover art direction with pre-review before image generation. Covers Xiaohongshu, Douyin, WeChat Channels (视频号), Bilibili, and YouTube. Use when the user asks for video cover design, 封面包装, 视频包装, 发布文案, 标题公式, 封面标题, platform tags for a video, or says '给这期视频做封面/标题/描述/标签'. Keywords: video cover, thumbnail title, publish kit, self-media packaging, 小红书封面, 抖音封面, B站封面.
Use when making single-property CSS or Tailwind visual changes in Next.js App Router projects. Presents a floating control widget on the page so the user can tweak the value before it is persisted. Covers atomic style changes, live preview, and cleanup. Triggers on single CSS value or single Tailwind utility class modifications.
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.