Skills
96,770 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
This skill should be used when the user asks about "web content strategy", "SEO writing", "UX writing", "information architecture", "content architecture", "website structure", "act as a web content strategist", "web strategist mode", "site map", "content audit", "microcopy", "meta descriptions", "content hierarchy", "content governance", or needs expertise in planning, structuring, and writing content for websites and digital platforms. Part of the AlterLab FC Skills collection (New Media & Communication department).
This skill should be used when the user asks about "brand identity", "logo design", "visual identity", "brand guidelines", "brand book", "brand system", "logo system", "brand architecture", "identity design", "brand standards", "style guide", "brand manual", "act as a brand identity designer", "brand identity mode", "visual identity system", "logo variations", "brand audit", "rebrand", "brand refresh", "wordmark", "brandmark", "monogram", "color palette for brand", "brand assets", or needs expertise in designing comprehensive visual identity systems, logo families, and brand guideline documents. Part of the AlterLab FC Skills collection (VCD department).
This skill should be used when the user asks about "color theory", "color palette", "color scheme", "color psychology", "WCAG contrast", "contrast ratio", "color accessibility", "color systems", "Munsell", "Itten color wheel", "HSL", "HSB", "color harmony", "complementary colors", "analogous colors", "triadic colors", "color grading", "brand colors", "act as a color theorist", "color theorist mode", "palette generation", "color meaning", "cultural color associations", "color in design", "color tokens", "dark mode colors", "color blindness", "colorblind safe", "vibrant palette", or needs expertise in color palettes, color psychology, accessibility contrast, and color systems. Part of the AlterLab FC Skills collection (VCD department).
This skill should be used when the user asks about "infographic", "data visualization", "information design", "data viz", "chart design", "visual storytelling with data", "information graphics", "statistical graphics", "diagram design", "act as an infographic designer", "infographic mode", "data-ink ratio", "chart selection", "dashboard design", "visual data", "Tufte", "ISOTYPE", "icon array", "pie chart", "bar chart", "flow diagram", "process visualization", "data story", or needs expertise in transforming complex data into clear, compelling visual narratives through information design. Part of the AlterLab FC Skills collection (VCD department).
Add CSS animations to HTML elements, React/JSX components, or WordPress PHP templates using Animate.css (v4.1.1). Use this skill whenever the user wants to animate UI elements, add entrance/exit effects, attention-seeker animations, or any CSS-based motion to their markup. Trigger on phrases like "add animation", "animate this", "make it bounce/fade/slide/zoom", "add transitions", "CSS animations", or any request to bring elements to life visually. Works with raw HTML snippets, full HTML files, React JSX, and WordPress PHP templates. Claude picks the most contextually appropriate animation — no guesswork needed from the user.
Use this skill any time the user wants to create, design, or produce slide presentations — as standalone files or embedded content. This includes: pitch decks, slide decks, keynote presentations, training materials, project proposals, quarterly reviews, weekly report slides, investor pitches, product launches, team kickoffs, business plans, onboarding decks, strategy presentations, sales pitches, conference talks, and any request involving 'slides' or 'PPT'. Also trigger when: user says 做PPT, 做个汇报, 写个演示文稿, 季度汇报, 竞品分析报告（要PPT）, 产品发布会, 培训材料, 周报. If slides, decks, or presentations need to be produced, use this skill.
Audits web typography for punctuation, font selection, sizing, spacing, OpenType features, hierarchy, layout, typeface pairing, brand identity, and display type. Use when writing CSS/HTML for text, selecting or pairing typefaces, reviewing typography in web designs, configuring font-feature-settings, building a type system, or auditing typographic quality. Triggers on tasks involving font-family, font-size, line-height, letter-spacing, @font-face, font pairing, or typographic correctness.
Design and audit brand trust for product websites, landing pages, app listings, onboarding, checkout, pricing, AI features, privacy pages, social proof, support reputation, testimonials, claims, guarantees, and launch narratives. Use when a product needs credibility, reduced skepticism, clearer proof, safer claims, or a more trustworthy customer experience.
Builds and amends runnable designs — a DESIGN.md (tokens, motion, voice, implementation rules, decisions) plus React previews of every UI block and feature screen, with presets, states, flows, spec files, and final copy, reviewed in a board-and-play viewer — so an implementer ports the design instead of interpreting it. Use only when the user names this skill (`/building-design`, `$building-design`, or "building-design"), or references a file under a marked design root (`@design/design.md`, a `.design.ts` file)
Apply a brand's defined visual system to any fixed-format piece that isn't a website — decks and presentations, one-pagers and sales sheets, social posts and graphics, blog/OG thumbnails, business cards, brochures, flyers, posters, banners, billboards, and paid ads. Use when the user mentions 'design a deck,' 'pitch deck,' 'sales deck,' 'presentation,' 'slides,' 'one-pager,' 'sales sheet,' 'leave-behind,' 'social post,' 'social graphic,' 'blog thumbnail,' 'OG image,' 'business card,' 'brochure,' 'flyer,' 'poster,' 'banner,' 'billboard,' 'print,' 'ad creative,' 'display ad,' 'collateral,' or wants a branded document or graphic that isn't a website. Mostly screen-first; print is one destination among many. Ships as a true-size viewer plus real exports.
Calculate, review, and generate web color systems using RGB, HSL, LAB, OKLCH, contrast ratios, luminance, opacity, blend modes, and light/dark mode transformations. Use when auditing accessible colors, converting color models, deriving palettes, checking WCAG contrast, building theme tokens, or debugging opacity and CSS blend math.
Build a component the way a library author would. Decide primitive versus hand-rolled, cover the full state matrix, design the API by composition, style through data attributes, keep it controlled or uncontrolled deliberately, and pick the right library for the job from a short trusted list instead of installing whatever is first on npm. Use when creating or refactoring a button, input, menu, dialog, drawer, toast, tooltip, table, command palette, tabs, or any reusable piece of UI.
Render a Jetpack Compose or Compose Multiplatform @Preview to PNG in one call (MCP render_preview, or the compose-preview CLI) and look at it. Use whenever someone asks to render, show, or see what a composable, @Preview or Compose component looks like (including library components such as Material 3 or Wear M3 EdgeButton, which come from the hosted catalog), after editing Compose UI to verify it, to compare before/after, or to review previews against catalog design guidelines.
Create PowerPoint presentations (PPTX) using Python and python-pptx. Handles timelines, charts, diagrams, slide layouts, custom colors, shapes, connectors, text formatting, and slide transitions. Knows WPS compatibility pitfalls. Use when the user asks to: generate a PPT/PPTX file, create a presentation, make a slide deck, draw a timeline, visualize data as slides, or export something to PowerPoint. Also use when the user says "做成 PPT"、"生成幻灯片"、 "做个演示文稿"、"做个 pptx".
Review and compare UX designs, flows, prototypes, specifications, or implementations against user goals, evidence, interaction behavior, accessibility, design-system fit, content, and engineering intent. Use when a designer asks for critique, comparison, tough feedback, review before approval, or wants to check whether implementation preserved the intended experience.
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
Motion accessibility and WCAG compliance for web animations. CRITICAL: This skill should be co-loaded with elite-gsap or elite-css-animations whenever implementing animations. Covers prefers-reduced-motion (CSS and GSAP patterns), WCAG contrast requirements, APCA, focus management, keyboard navigation, touch interaction patterns, and screen reader considerations. Use when asked about: reduced motion, motion sensitivity, vestibular disorders, accessibility, a11y, WCAG, contrast ratios, focus styles, touch targets, safe areas, gesture accessibility, or making animations accessible. Also covers touch interaction patterns for mobile.
Unified prototype analysis (Modao + Figma): Modao retrieves asset packages through the v2 asynchronous export API; Figma prototypes prefer Figma MCP for structure with the REST API as a fallback, and output developer-ready Markdown organized by page and gameplay module. Triggered when the user provides a Modao prototype link, or explicitly states that a Figma link is a prototype and asks for analysis. If there is only a Figma link without saying it is a prototype, or for a clearly identified Figma design file, UI Meta, or asset export request, it must not trigger — use figma-to-ui-meta instead.
Convert Figma designs to React code using Spirit Web components. Use when working with Figma designs, implementing UI from Figma files, converting Figma autolayouts to code, or when the user mentions Figma, Spirit components, or design-to-code conversion.
Readability and rendering audit for figures and tables in academic manuscripts. Computes effective font/marker sizes at display scale from generation scripts, checks label collisions, color/hatch accessibility, axis-range efficiency, table formatting, and cross-figure consistency. Triggers on: "check figure quality", "audit plots", "readability check", "figure rendering", "are my figures readable", "table formatting check". Companion to figure-rhetoric (visual argument) and manuscript-typography (typesetting).
Helps developers use FineUI DataList: static list items, data binding, custom text-and-image content, single and multiple selection, grouping, list navigation and load more. For mobile lists, card-style lists, selectable data lists, and DataList/DataListItem questions. Covers F.js, FineUI.Pro, FineUI.Core MVC/RazorForms/RazorPages, and FineUI.Java. Trigger phrases: "FineUI DataList", "DataList", "DataListItem", "数据列表", "移动端列表", "列表分组", "列表多选", "SelectedValueArray", "EnableMultiSelect", "KeepCurrentSelection", "DataTextField", "DataValueField", "加载更多", "AppendData", "data-list", "data-list-item".
Helps developers use FineUI container components: Panel (panel with toolbar/collapse/title tool icons/ContentPanel/GroupPanel), TabStrip (tabs with iframe pages, dynamic add/remove), Accordion. Covers F.js (JavaScript), Pro (WebForms), FineUI.Core's MVC (Fluent API)/RazorForms/RazorPages (TagHelper), and FineUI.Java (Spring Boot + Thymeleaf dialect tags, kebab-case). Trigger phrases: "FineUI 面板", "F.Panel", "Panel", "ContentPanel", "工具栏面板", "TabStrip", "选项卡", "标签页", "动态选项卡", "iframe 选项卡", "Accordion", "手风琴", "AccordionPane", "折叠面板", "GroupPanel", "分组面板", "Tools 标题图标", "FineUI.Java", "Spring Boot", "Thymeleaf", "@FineUIPage", "f:panel", "f:tab-strip", "f:accordion", "f:region-panel".
Build or audit Flutter accessibility for semantics, screen readers, focus, keyboard access, text scaling, contrast, target size, and motion preferences. Pair with flutter-responsive-layout when large text causes reflow, clipping, or overflow across constraints.
Implement approved, production-quality Flutter interfaces with adaptive layout, complete states, project-native architecture, accessibility, and proportionate verification. Use when visual direction and behavior are sufficiently defined and the user asks to build, change, polish, or refactor Flutter UI code.
Build and refactor Flutter widgets, forms with stale-safe asynchronous validation and duplicate-submit handling, widget previews, component APIs, and UI state boundaries. Use alone for form behavior over existing services; add networking or concurrency only when their infrastructure changes, and route visual polish, responsive layout, navigation, animation, and performance to their specialists.
Flutter widget UI patterns — preferring StatelessWidget, `const` optimization, observing ViewModels with `ListenableBuilder`, `ListView.builder`/`IndexedStack`, reusing shared components, accessibility (Semantics), and handling dialogs and snack bars. Triggered by phrases such as "create widget", "create UI", "StatelessWidget", "ListView", "ListenableBuilder", "Scaffold", "snack bar", "dialog", "design token", "shared component".
Develops UIs with Flux UI Free components. Activates when creating buttons, forms, modals, inputs, dropdowns, checkboxes, or UI components; replacing HTML form elements with Flux; working with flux: components; or when the user mentions Flux, component library, UI components, form fields, or asks about available Flux components.
Generates data visualization charts (bar, line, area, pie, doughnut, scatter, radar, treemap) as PNG using Apache ECharts v6. 1080×1080px default, 5 style presets, highlight annotations. Trigger when user says "create a chart", "visualize data", "make a bar chart", "line graph", "pie chart", "data visualization", "chart this data", "plot", "graph", or "visualize these numbers".
Writes and reviews semantic, accessible HTML and template markup that stays readable and low-noise. Use when creating or refactoring HTML or Svelte templates, cleaning up div soup, choosing better elements, improving form markup, fixing heading or landmark structure, or replacing custom controls with native HTML.
All-in-one image studio. One Skill handles four high-frequency image types: Xiaohongshu covers (3:4), PPT illustrations (16:9), various charts (flowcharts/architecture diagrams/heatmaps and 12+ other types), and article logic diagrams (16:9). Built-in 12 visual styles + automatic style recommendation, covering Chinese-language scenarios. Flow: enter content → choose type → fill in details → choose style → prompt (automatic / review) → generate image. Calls LabNana's GPT-image-2 model and outputs PNG. Trigger words: "make a cover", "Xiaohongshu cover", "make an illustration", "PPT image", "draw a flowchart / architecture diagram / heatmap / mind map", "article logic diagram", "logic diagram", "add an image", "image-studio".
Use when the user asks to generate or edit images via the OpenAI Image API (for example: generate image, edit/inpaint/mask, background removal or replacement, transparent background, product shots, concept art, covers, or batch variants); run the bundled CLI (`scripts/image_gen.py`) and require `OPENAI_API_KEY` for live calls.
Elite frontend image-direction skill for generating premium, conversion-aware website design reference images via ChatGPT image generation. Fires when the user asks to generate website mockups, landing page concepts, section design references, or UI comp images. Enforces ONE separate horizontal image PER section, composition variety (bans the default left-text/right-image on every section), background-image freedom, varied CTAs, varied hero scales, narrative concept spine, second-read moments, and a single consistent palette across all images. Outputs structured prompt blueprints that produce Awwwards-tier visual references a developer or coding model can accurately recreate. Image generation only - does not write code.
Generate complete, deploy-ready landing pages from any repository. Use when creating a homepage for an open-source project, building a project website, converting a README into a marketing page, or standardizing landing pages across multiple repos.
Brand discovery and logo concept development. Use when brainstorming logo ideas, exploring visual directions, analyzing competitor logos, or developing logo concepts before creation. Triggers on "logo ideas," "logo concept," "brand identity," "logo brainstorm," "competitor logos," "visual identity exploration," or any pre-design logo planning.
Audit academic manuscripts for typographic design conventions: booktabs table style, caption placement, dashes/quotes, units and numbers, cross-reference style, page layout, typographic hierarchy, professional polish. Triggers on: "check typography", "fix formatting", "polish my paper", "check my LaTeX", "typographic review", "make it look professional", "check tables", "fix captions". Companion to manuscript-review (content) and arxiv-preflight (compliance).
Common style patterns, layer configurations, and recipes for typical mapping scenarios including restaurant finders, real estate, data visualization, navigation, and more. Use when implementing specific map use cases or looking for proven style patterns.
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.