Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Use when the user says 'migrate wpbakery to bricks', 'convert visual composer to bricks', or wants to modernize a WPBakery site onto Bricks. Parses WPBakery shortcodes, maps elements to their Bricks equivalents, and creates draft duplicates for review.
Use when the user needs mobile app design and development patterns for React Native, Flutter, or SwiftUI — including platform HIG compliance, gestures, and offline-first architecture. Triggers: user says "mobile", "iOS", "Android", "React Native", "Flutter", "SwiftUI", "app design", "mobile navigation", "touch targets", "offline-first".
Use when the user says 'my site looks bad on mobile', 'check mobile layout', 'responsive audit', or 'site broken on phones'. Diagnoses breakpoint problems, text sizing, column stacking failures, hidden elements, and navigation menu behavior, device by device.
Open Orbit briefing skill — selected by the Orbit pipeline when the user has two or more connectors connected. Pulls the past 24 hours of activity from every authenticated connector (GitHub, Linear, Notion, Slack, 飞书, Calendar, Gmail, Drive, Sentry, Vercel, …) and renders a single adaptive bento-grid dashboard at the top of "我的设计". Each connector module picks its own UI form (list, avatar stack, status ring, heatmap, file grid, alert card, …) based on the data shape it returns, so the layout scales as Orbit's connector ecosystem grows. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against the user's live connector data.
Open Orbit briefing skill — selected by the Orbit pipeline when Gmail is the user's only connected connector, or when the user explicitly scopes their daily digest to Gmail. Pulls the past 24 hours of inbox activity (replies awaited, mentions, cc, auto- categorized bulk) from the user's authenticated Gmail connection and renders the digest as the Orbit Daily Digest email opened inside Gmail's reading view. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live Gmail data.
Build a scroll-driven cinematic landing page from a short video. The user provides a 5–15 second video (often AI-generated); this skill extracts every frame at HD JPEG quality, then produces a single-hero HTML page where the user's scroll gesture scrubs the frames in place (the page itself never scrolls) and 5 dramatic text overlays crossfade in/out — Google Anton headlines, Caveat handwritten accents, locked body, virtual scroll. Use this skill whenever the user wants to "turn this video into a landing page", "make a scroll-scrub landing page", "build a parallax hero from this clip", "add a new landing page to the parasites showcase", "do the same as github/lion/hope for this new video", or any variant that pairs a short clip with dramatic scroll-triggered storytelling. Trigger even if the user only says "use my video for a landing page" — that is this skill.
Professional typography guidance based on Matthew Butterick's Practical Typography. Use when evaluating, critiquing, or improving document formatting, text layout, font choices, punctuation, spacing, or any typography-related decisions for print or web content.
Professional promotion/review document designer following corporate presentation standards. Creates clean, minimal PPT/PDF documents with 16:9 layout, strategic color usage (primary brand orange #fc5a1f, secondary blue #3669cd), and sophisticated white-space design. Use when users ask to "create promotion doc", "design review presentation", "make professional PPT", "晋升文档设计", "述职报告", or need corporate-standard presentations with visual hierarchy and data visualization.
Create polished, professional reveal.js presentations. Use when the user asks to create slides, a presentation, a deck, or a slideshow. Supports themes, multi-column layouts, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step required.
Search Experience Optimization: reads Google SERPs backwards to detect page-type mismatches, derives user stories from search intent signals, and scores pages from multiple persona perspectives. Identifies why well-optimized pages fail to rank by analyzing what Google rewards for each keyword. Use when user says "SXO", "search experience", "page type mismatch", "SERP analysis", "user story", "persona scoring", "why isn't my page ranking", "intent mismatch", or "wireframe".
Guide developers to implement and customize the Syncfusion Windows Forms SfButton control for desktop applications. Use this when creating interactive buttons with text, images, styling, and theming in Windows Forms applications. Covers implementation, customization, and interaction handling.
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
Applies the current webconsulting.at design system: borderless square surfaces, Hanken Grotesk typography, teal/ink color tokens, invoice-led information hierarchy, a header-only brand notice, logo-first project icons, MDX patterns, dark mode, accessibility, and shadcn/ui integration. Use when building or reviewing webconsulting.at pages, internal tools, tracker/GitLab themes, project catalogs, TYPO3 templates, brand assets, or visual consistency.
Build and modernize WPF applications on .NET with correct XAML, data binding, commands, threading, styling, and Windows desktop migration decisions. USE FOR: working on WPF UI, MVVM, binding, commands, or desktop modernization; migrating WPF from .NET Framework to .NET; integrating newer Windows capabilities into a WPF app. DO NOT USE FOR: unrelated stacks; generic tasks that do not need this specific guidance. INVOKES: inspect the repository context, edit targeted files, and run relevant build, test, lint, or validation commands when changes are made.
Create production-quality Android applications following Google's official Android architecture guidance with Kotlin, Jetpack Compose, MVVM architecture, Hilt dependency injection, Room database, and multi-module architecture. Triggers on requests to create Android projects, modules, screens, ViewModels, repositories, or when asked about Android architecture patterns and best practices.
Builds React mobile UIs with Ant Design Mobile (antd-mobile) components including Button, Form, List, Modal, Picker, Tabs, PullToRefresh, InfiniteScroll, and 50+ mobile-optimized components. Use when the user needs to create mobile-first React interfaces, implement mobile navigation, forms, or data display with Ant Design Mobile.
When the user wants to apply, document, or enforce brand guidelines for any product or company. Also use when the user mentions 'brand guidelines,' 'brand colors,' 'typography,' 'logo usage,' 'brand voice,' 'visual identity,' 'tone of voice,' 'brand standards,' 'style guide,' 'brand consistency,' or 'company design standards.' Covers color systems, typography, logo rules, imagery guidelines, and tone matrix for any brand — including Anthropic's official identity.
Generate demo animation HTML pages with a sidebar narrative and a 3D card carousel. Supports multiple interaction modes such as scroll paging, Coverflow 3D and Focus expansion, with built-in effects like mode switching (e.g. transport/tunnel), highlighter markup and watermark icons. Suited to protocol flow demos, product feature showcases and step-by-step walkthroughs.
Use this skill first when the user wants to design or plan a dashboard, especially Vizro dashboards. Enforces a 3-step workflow (requirements, layout, visualization) before implementation. Activate when the user asks to create, design, or plan a dashboard. For implementation, use the dashboard-build skill after completing Steps 1-3.
Build a dense, data-heavy screen - an analytics console or a trading terminal - with real charts drawn from tokens: candlestick, volume, depth, stacked area, waterfall, scatter, correlation matrix, donut, gauge, sparklines, heatmaps and order books. Use when the request is a dashboard, terminal, monitoring view, data console, or any screen whose job is to show many numbers at once. Covers the layout sequence, the SVG geometry, the accessibility contract per chart type, and the contrast traps that only appear in dark mode.
Write minimal, accessible web UI without over-engineering, adapting to whatever stack the project uses — React, Vue, Svelte, Angular, web components, or plain HTML. Use this skill on every project and every task that writes or reviews markup or components, builds forms, adds interactive elements like buttons, dialogs, accordions, or tabs, or audits code for accessibility — even when the user never mentions accessibility, and even inside a framework, CMS, or design system. It's non-negotiable regardless of project type, stack, or deadline. About to reach for ARIA attributes, a dialog library, a focus-trap package, or a headless UI component? Use this skill first.
Master guide for Material Design 3 — covering the full specification from Material You foundations through M3 Expressive. Explains when to use each Material Design 3 skill subset (color, motion, typography, shape, layout, components, icons). Use this when starting a Material Design 3 project, when you need to understand which M3 skill to apply, or when the user asks about Material Design 3 in general.
Visual and video content creation. AI images, technical diagrams, mermaid flowcharts, infographics, comics, and special effects. USE WHEN art, diagrams, mermaid, flowcharts, infographics, video, animation, thumbnails, visualizations, generate image, technical diagrams.
Use when the user explicitly asks to "generate an NSFC technical roadmap / draw a technical roadmap / roadmap / flowchart", or needs to turn grant proposal research content into a printable, A4-readable technical roadmap. By default it outputs an editable source file (`.drawio`) plus render results embeddable in documents (`.svg`/`.png`/`.pdf`); when the user mentions the Nano Banana image model, it can switch to PNG-only mode and supports Gemini and OpenAI `gpt-image-2`. Not applicable: the user only wants to change the format/size of an existing image (use an image processing skill), or only wants to polish the wording of a technical roadmap description (rewrite the text directly).
Open Orbit briefing skill — selected by the Orbit pipeline when Linear is the user's only connected connector, or when the user explicitly scopes their daily digest to Linear. Pulls the past 24 hours of issue movement, status changes, assignments, and cycle progress from the user's authenticated Linear connection and renders the digest in Linear's native Inbox + cycle-progress visual language. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live Linear data.
Open Orbit briefing skill — selected by the Orbit pipeline when Notion is the user's only connected connector, or when the user explicitly scopes their daily digest to Notion. Pulls the past 24 hours of document edits, comments, mentions, and database row changes from the user's authenticated Notion connection and renders the digest as a native Notion page (callout / toggle / database table primitives). This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live Notion data.
Write and edit styles in a project that uses Panda CSS. Use when creating, changing, or reviewing code that calls css(), cva(), sva(), patterns, recipes, tokens, conditions, or JSX style props, when a style renders a class name but no CSS, or when styles do not apply at all. Covers Panda v2 (2.x) and v1 (1.x). Do not use for designing the theme or deciding when something becomes a recipe or slot recipe (use panda-css-theming), or for upgrading v1 to v2 (use panda-css-migrate).
Captures and compares screenshots across viewports, runs axe-core accessibility scans, and detects visual regressions with pixel-diff analysis. Use when detecting UI regressions, validating responsive layouts, testing WCAG compliance, or ensuring visual consistency after CSS or component changes.
Use when the user wants to optimize signup, registration, account creation, or trial activation flows. Also use when the user mentions “signup conversions,” “registration friction,” “signup form optimization,” “free trial signup,” “reduce signup dropoff,” “account creation flow,” “people aren't signing up,” “signup abandonment,” “trial conversion rate,” “nobody completes registration,” “too many steps to sign up,” or “simplify our signup.” Use this whenever the user has a signup or registration flow that isn't performing. For post-signup onboarding, see onboarding-cro. For lead capture forms (not account creation), see form-cro.
Generate 3D-printable STL files with build123d (Python CAD) for woodworking jigs and fixtures, and for replacement parts modeled from a measured original. Use when the user wants a circle-cutting trammel or lampshade-ring jig, an angle wedge, spacing or setup blocks, a drilling guide, a router template, an alignment or assembly fixture, a replacement threaded light globe or shade, or any custom 3D-printed jig or part copied from measurements. Ships ready scripts plus a print-readiness check that refuses STLs that would misprint and flags overhangs that need supports. Default build volume is an Elegoo Neptune 4 Pro (220 x 220 x 260 mm usable), overridable per printer. Metric units.
Storybook (UI component catalog and testing tool) reference. story, CSF (Component Story Format), args, argTypes, decorators, play function, interaction tests, autodocs, main.ts / preview.ts configuration, addons (a11y, controls, viewport, themes).
Traces user task flows with Playwright: click depth, step success, friction: and writes reports to .heyeddi/docs/ux-flows/. Use when measuring ease of use, clicks to complete a task, or onboarding friction. Not for static visual critique (use heyeddi-design critique) or layout screenshots (use visual-auditor).
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components—not for simple single-file HTML/JSX artifacts.
Fix PageSpeed Insights/Lighthouse accessibility "!" errors caused by contrast audit failures (CSS filters, OKLCH/OKLAB, low opacity, gradient text, image backgrounds). Use for accessibility-driven SEO/performance debugging and remediation.
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.