Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Invoke when the user asks about accessibility, inclusive design, colorblind mode, remappable controls, screen reader support, EAA compliance, CVAA, difficulty options, motor accommodations, or one-handed mode. Triggers on: "accessibility", "inclusive design", "colorblind", "remappable controls", "screen reader", "EAA", "CVAA", "difficulty options", "motor accommodation", "one-handed". Do NOT invoke for general UX design (use game-ux-designer) or art direction (use game-art-director). Part of the AlterLab GameForge collection.
A multi-frame gamified mobile app prototype with three phone frames on a dark showcase stage. Frame 1: cover/poster; Frame 2: today's quests with XP ribbons and a level bar; Frame 3: quest details. Vivid quest tiles, level ribbon, bottom tab bar. Use when the brief asks for a “gamified app,” “habit tracker,” “RPG-style life app,” “level-up app,” “daily quests,” “XP/streak app,” or “ELI5-style explainer app.”
Generate Android and iOS app icon sets from one source image with a bundled Pillow script. Use when Codex needs to create mobile app launcher icons, iOS AppIcon.appiconset assets, Android mipmap icons, adaptive icon foreground/background/XML files, extra square sizes, or rounded-corner icon exports from a logo or artwork file.
Single-image generation skill for posters, key art, and editorial illustrations. Defaults to gpt-image-2 but is provider-agnostic — the same workflow drives Flux, Imagen, or Midjourney via the active upstream tooling. Output is one or more PNG/JPEG files saved to the project folder.
Generate "e-magazine × e-ink" style horizontal-swipe web PPTs (single HTML file), with templates for WebGL fluid backgrounds, serif headings + sans-serif body text, section title cards, big-number data slides, and image grids. Use when the user wants to make a share / talk / launch-style web PPT, or mentions "magazine-style PPT", "horizontal swipe deck", "editorial magazine", "e-ink presentation".
Author MARP markdown slide decks exportable to PDF, PPTX, and HTML via marp-cli. Covers Marpit directives, custom CSS themes, SVG chart recipes, and dashboard components. Triggers on: "marp", "marp deck", "markdown slides", "slides from markdown", "marp-cli", "pdf from markdown", "pptx from markdown".
A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.
Convert Markdown documents into SVG pages that can be imported into PPT. Supports content breakdown, style design (5 presets + custom + AI recommendations), and batch generation. The generated SVG is compatible with PPT's "Convert to Shape" feature and can be edited further. Suitable for presentations, proposal reports, knowledge sharing, and similar scenarios.
Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency. Use when detecting UI regressions, validating designs, or ensuring visual consistency
Deeply research a topic and automatically generate a knowledge relationship graph PDF. After receiving a research topic, it automatically performs web research, information gathering, and knowledge organization, and finally produces a professional visualized relationship graph. Suitable for scenarios such as "research ... and make a diagram", "deeply analyze ... and visualize", and "generate a knowledge graph".
Review responsive and flexible layout for accessibility across devices, zoom levels, and orientations. Chains: responsive-accessibility, flexible-typography, information-density. Use when testing an existing interface across screen sizes and zoom levels for accessibility.
Conversation design skill for Salesforce Agentforce. Generates persona documents, topic architectures, instruction sets, utterance libraries, escalation matrices, and guardrail configurations. Validates existing agents against conversation design best practices with 120-point scoring.
Single-file horizontal-swipe HTML deck. Built by copying the seed `assets/template.html` (which carries the proven 5-rule iframe nav script) and pasting slide layouts from `references/layouts.md`. Pitch decks, product overviews, study material — when you don't need the magazine aesthetic of `magazine-web-ppt`.
Implement ContextMenuStripEx enhanced context menus in Windows Forms applications. Use this when working with context menus, right-click functionality, or popup menus with custom items. Covers menu configuration, multi-level menus, keyboard shortcuts, and appearance customization in WinForms.
Design, build, redesign, review, and debug terminal user interfaces (TUIs). Use when the user wants to build or improve a TUI, convert a CLI to an interactive terminal app, choose a TUI framework (Bubble Tea, Textual, Ratatui, Ink), design layouts and keybindings, handle Unicode/wide characters/RTL text, ensure terminal compatibility, write TUI tests, or troubleshoot terminal rendering issues.
Use when the user needs user research methodologies, persona development, journey mapping, usability testing plans, or information architecture analysis. Triggers: user says "user research", "persona", "journey map", "usability test", "card sort", "heuristic evaluation", "information architecture", "user interview", understanding user behavior.
Create visual analogies by mapping relational structure from familiar domains onto unfamiliar concepts using spatial relationships to make abstract patterns concrete. Covers static diagrams AND animated video storytelling (camera choreography, race comparisons, pacing). Use when explaining complex concepts, creating analogies, designing diagrams, creating explainer animations, or revealing system structure.
Create beautiful, self-contained HTML visualizations from any content or idea. Use for: slide decks, presentations, infographics, dashboards, flowcharts, diagrams, timelines, comparison tables, data visualizations, landing pages, one-pagers, org charts, mind maps, process flows, kanban boards, report summaries, or any visual that helps humans digest information faster. Trigger on requests like "visualize this," "make a deck," "create a slide," "build an infographic," "show me a dashboard," "make this visual," or any request to present information in a visual HTML format.
General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `references/layouts.md`. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.
This skill provides production-ready AI chat UI components built on shadcn/ui for conversational AI interfaces. Use when building ChatGPT-style chat interfaces with streaming responses, tool/function call displays, reasoning visualization, or source citations. Provides 30+ components including Message, Conversation, Response, CodeBlock, Reasoning, Tool, Actions, Sources optimized for Vercel AI SDK v5. Prevents common setup errors with Next.js App Router, Tailwind v4, shadcn/ui integration, AI SDK v5 migration, component composition patterns, voice input browser compatibility, responsive design issues, and streaming optimization. Keywords: ai-elements, vercel-ai-sdk, shadcn, chatbot, conversational-ai, streaming-ui, chat-interface, ai-chat, message-components, conversation-ui, tool-calling, reasoning-display, source-citations, markdown-streaming, function-calling, ai-responses, prompt-input, code-highlighting, web-preview, branch-navigation, thinking-display, perplexity-style, claude-artifacts
Layout structure for web interfaces, from grouping and alignment to reading order, progressive disclosure, and adaptive breakpoints. Use when structuring a page or component, spacing or aligning controls, deciding what collapses at small sizes, handling RTL layout direction, or reviewing frontend code for layout. Triggers on layout, spacing, alignment, grouping, negative space, whitespace, visual hierarchy, reading order, progressive disclosure, breakpoints, responsive layout, container queries, safe area, full-bleed, edge-to-edge, layout margins, RTL layout, logical properties.
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, choosing or reviewing icons, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, theme switch transitions, border radius, optical alignment, image outlines, box shadows, icons, icon stroke weight, icon states, motion restraint.
Create comprehensive brand identity documentation for any brand. Guides you through documenting strategy, visual identity (logo, color, typography, imagery), voice and tone, application guidelines, governance, and asset inventory. Produces markdown specs, compiled brand books, and brand-compliant images via reference-image-aware generation. Use when you need to capture a brand's identity in structured, durable form — for vault storage, agency handoff, or press kit distribution. Do not use this skill for unrelated requests; route to the nearest named specialist.
Guide to building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation
Translate all text in a Canva design to another language, creating a translated copy. Faster than manually copying and editing each text box in Canva's editor. Use when users say "translate my design to [language]", "make a Spanish/French/etc version", or "localize my Canva design".
Generate article cover images with 5 dimensions (type, palette, rendering, text, mood). Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to 'generate cover image', 'create article cover', or 'make cover'.
Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks for a "design review", "design critique", "5 维度评审", "design audit", or "what's wrong with my design".
CSS authoring guidance emphasizing web standards, accessibility, and performance. Use when writing, reviewing, or refactoring CSS. Provides patterns, snippets, and conventions that prioritize native CSS over frameworks, semantic structure, and maintainable code. Refer to references/patterns.md for specific patterns and snippets.
Use when creating beautiful visual art in .png and .pdf documents using design philosophy. Triggers include requests to create posters, pieces of art, designs, or other static visual pieces. Always create original visual designs — never copy existing artists' work to avoid copyright violations.
A two-spread digital e-guide preview — page 1 is a cover (display title, author, "What's inside" stats, table of contents teaser); page 2 is a spread (lesson body with pull-quote and a step list). Lifestyle / creator brand tone. Use when the brief asks for an "e-guide", "digital guide", "lookbook", "lead magnet", "creator guide", "playbook", "PDF guide", or "电子指南".
Design error prevention, error messages, and recovery flows for cognitive accessibility. Use when designing forms, checkout flows, account creation, settings, data entry, or any flow where users can make mistakes. Triggers on: error handling, error messages, form errors, validation, users make mistakes, users abandon, error recovery, undo, forgiving design.
Export Figma variables to design token files in DTCG, CSS custom properties, Tailwind v4/v3, SCSS, TypeScript, JSON, Style Dictionary, or Tokens Studio. Use when the user wants to pull design tokens OUT of Figma into code — triggers: 'export tokens', 'export Figma variables', 'generate CSS variables from Figma', 'turn my Figma variables into a tokens.json / Tailwind config / SCSS', 'sync design tokens to code'. Works on ANY Figma plan (reads via the Plugin API, not the Enterprise-only Variables REST API). For the reverse direction (code → Figma) use import-tokens-figma.
Apply when deciding, designing, or implementing FastStore component overrides in src/components/overrides/. Covers getOverriddenSection API, component replacement, props overriding, and custom section creation. Use for any FastStore storefront customization beyond theming that requires changing component behavior or structure.
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
This skill MUST be used when creating or improving conversion-oriented landing pages, LPs, hero sections, animated marketing pages, or 活動頁、 產品落地頁、轉換頁面. It SHOULD also be used when a page needs clearer value propositions and a primary action without naming a landing page. Visual direction follows design-studio; this skill handles conversion structure, animation, implementation, and delivery.
Meeting notes page: title bar with attendees, agenda checklist, decisions block, action-items table with owners and dates, and a “next meeting” footer. Use when the brief mentions “meeting notes,” “minutes,” “1:1 notes,” “all-hands recap,” or “会议纪要.”
Use when the user asks to build Android screens, Jetpack Compose layouts, Material components, or any Android app UI. Also use when styling, redesigning, or beautifying any Android interface. Covers Material 3 Expressive for Android 16, spring motion, shape variety, and platform-native 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.