Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Expert guidance on iOS accessibility best practices, patterns, and implementation. Use when developers mention: (1) iOS accessibility, VoiceOver, Dynamic Type, or assistive technologies, (2) accessibility labels, traits, hints, or values, (3) automated accessibility testing, auditing, or manual testing, (4) Switch Control, Voice Control, or Full Keyboard Access, (5) inclusive design or accessibility culture, (6) making apps work for users with disabilities.
Runs Inspector UI work on the standalone Threads state lab so the agent can see the overlay. Use when a CopilotKit employee asks an agent to fix, polish, add, or debug Inspector UI, chrome, panes, overlay actions, launcher, Home, Threads, Playground, Memory, or any visual behavior in @copilotkit/web-inspector. Don't use for docs-only Callout updates (load inspector-docs), runtime or core changes with no Inspector UI, showcase cell work, or reading Inspector as a consumer inside an app.
Comprehensive design system guidelines for building consistent, accessible, and scalable component libraries. Use when creating design tokens, building component libraries, implementing design systems, setting up theming architecture, or establishing UI governance processes.
Fact lookup: Apple Human Interface Guidelines corpus (greppable markdown). Query on demand for accessibility and ergonomic minimums (hit-target sizes, Dynamic Type), platform terminology, system component capabilities, and App-Review-relevant conventions. Not design direction.
UI/UX best practices and accessibility audit. Use when reviewing UI code, checking accessibility, running accessibility audits, auditing forms, or ensuring web interface best practices. Triggers on "audit accessibility", "check WCAG", "review UI", "check accessibility", "audit design", "review UX", or "check best practices".
Agents workbench layout — covers the fixed layout structure, grid configuration, part visibility, editor modal, titlebar, sidebar footer, and implementation requirements. Use when implementing features or fixing issues in the Agents workbench layout.
This skill should be used when the user asks to "design mobile UI", "review app design", "check UI guidelines", "improve app UX", "design React Native interface", "create app screens", "follow design standards", or mentions iOS/Android design patterns, accessibility, or mobile user experience. Provides comprehensive mobile app UI/UX design guidance.
Color strategy pass — introduces a single accent at 3-5 intentional placements, or reduces an over-colored UI back to 90% neutral. Use when the UI has no color identity, uses blue by default, or is shouting with too many competing accents. Invoke when the user asks for colorize on their UI, or mentions "colorize" alongside design / UI / frontend work.
UI/UX taste for apps — dashboards, lists, tables, forms, settings, modals, picker pages. By default it works like a designer: brief, 2–3 wireframes, and it only builds once the user picks. Other routes when the request is explicit: inspect the existing UI ("take a look", "review"), compare the new version with the original ("what's better"), rebuild while keeping the brand ("keep the brand") or follow the skill's taste ("drop the old style"), refactor without changing the look, just build it, design system first ("UI kit", "component library"), a simple logo, or fix one component. Flat by default; can also do glass, gradients, elevation, dark backgrounds. Landing pages, online stores and blogs aren't taught yet — it still builds them, but warns first. Use when building, redoing or fixing an app's interface, when looking at an app screenshot or link, or when it says "make the UI pretty", "build a screen", "design", "redo the UX", "looks messy", "build a page", "design this screen", "redesign", "make it look good", "ecommerce", "ui-ux", "evon".
Builds decks with a story spine, house visual system, setting-specific density, and speaker notes. Use when asked to "create a presentation", "write a pitch deck", or "turn this doc into slides". Defaults to Marp; use an available presentation tool for editable PowerPoint.
Produce a scored heuristic critique of the UI using Nielsen's 10 + 6 design laws and optional persona walkthroughs. Outputs a machine-parseable scorecard plus a 0-100 UsabilityScore (the judged companion to the deterministic UICraftScore). Invoke when the user asks for a heuristic review of their UI, or mentions 'heuristic' alongside design / UI / frontend work.
Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings, keyboard navigation, and generates detailed reports with fixes. Runs entirely headlessly against a page ID — no Designer connection required. Excludes image alt text (covered by asset-audit skill).
Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions \"deck,\" \"slides,\" \"presentation,\" or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill.
Wireframe-first pass — outputs an ASCII layout + state list + content inventory + question list before any code. Use when starting a new screen from scratch or when the user's brief is still ambiguous. Invoke when the user asks to shape their UI, or mentions 'shape' alongside design / UI / frontend work.
Multi-path parallel product analysis with cross-model test-time compute scaling. Spawns parallel agents (Claude Code agent teams + Codex CLI) to explore product from multiple perspectives, then synthesizes findings into actionable optimization plans. Can invoke competitors-analysis for competitive benchmarking. Use when "product audit", "self-review", "发布前审查", "产品分析", "analyze our product", "UX audit", or "信息架构审计".
Use this skill to determine whether a Lightning Web Component (LWC) is accessible and meets WCAG accessibility guidelines. TRIGGER when the user asks \"is my component accessible?\", \"does my LWC meet accessibility guidelines?\", \"is this component WCAG compliant?\", \"find accessibility problems in this LWC\", \"is this LWC keyboard accessible?\", \"does this component work with a screen reader?\", \"does this component have sufficient color contrast?\", \"check ARIA usage in this LWC\", or \"WCAG 2.2 accessibility check\". Also TRIGGER when the user wants to fix or improve accessibility (a11y, WCAG, ARIA) in an LWC's HTML, JS, or CSS — semantic markup, focus, keyboard nav, contrast, screen-reader labels, WCAG 2.2 SC. Produces `a11y-review.md` with WCAG-cited findings. DO NOT TRIGGER for general LWC generation (use `experience-lwc-generate`) or SLDS visual/design review not focused on accessibility (use `design-systems-slds-validate`).
Redesign mobile app UI to feel unmistakably Apple-like, iOS-forward, and native. Use this skill when building iOS apps, applying Apple Human Interface Guidelines, or creating native-feeling mobile interfaces with SF Pro typography, translucency, and system-like components.
Designs custom laboratory hardware as parametric build123d models and exports fabrication artifacts as STEP, STL, and DXF files - microfluidic chips and molds, optomechanical mounts and breadboard adapters, cuvette and microplate holders, tube racks, animal-behavior rigs, and 3D-printed instrument fixtures. Use when a research task needs a physical part that must mate with standardized labware, an optical table, a cage system, or a printer, CNC, or laser process.
Pre-ship gate — runs detector, verifies brief and tokens, applies the 10-pass finish bar, ranks findings by feedback hierarchy. Use when the user wants to ship, merge, or finalize a surface and needs a verdict (READY / NOT READY / BLOCKED) before committing. Invoke when the user asks for finalize on their UI, or mentions 'finalize' alongside design / UI / frontend work.
Connects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this component", "link component to code", "create code connect mapping", "add code connect", "connect design to code", or wants to establish mappings between Figma designs and code implementations. Requires Figma MCP server connection.
Generate configurable chat motion overlays from a transcript or screenshot, including plain bubble scenes, app-style chat containers, optional device frames, preset or uploaded avatars, nickname display rules, and transparent-video-ready Remotion bundles. Use when Codex needs to create reusable short-form chat clips for Douyin, demo videos, story reenactments, social-message proof scenes, or embeddable alpha overlays for Hyperframe and Remotion workflows.
Generate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors. Use when users ask for 聚光灯扫字动画, spotlight text reveal, light logo reveal, 发光文字揭示动画, or want a reusable HTML animation instead of a static image.
Professional AI assistant for the full PPT presentation workflow. It simulates the complete workflow of a top-tier presentation design company (requirements research, material gathering, outline planning, storyboard, design draft) and outputs high-quality HTML presentations. Triggered when the user mentions making a PPT, presentation, slides, report material, training courseware, pitch deck, or product intro page. It should trigger even when the user only says "make me an intro to X" or "I need to report Y to my boss," as long as structured multi-page presentation content is implied. It also applies to requests like "turn this document into a PPT" or "make a presentation on this topic." Works in English too: "make a presentation about...", "create slides for...", "build a pitch deck", "I need a keynote for...". Implicit intent should also trigger it: "visualize this data for my boss", "I need something for a pitch", "make this report presentable", "beautify my existing PPT", "redesign these slides". Improving or beautifying an existing PPT is also in scope.
Pick and install beUI (@beui) animated React components through public MCP or the shadcn registry. Use when building motion UI, agent/chat interfaces, toasts, docks, bottom sheets, drawers, popovers, sliders, loaders, 404 pages, or any beui.dev component. Maps user intent to exact @beui install slugs instead of inventing custom widgets.
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.