Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Write or improve UX microcopy — button labels, error and empty states, tooltips, form labels, notifications, and confirmations — so it's clear, concise, action-oriented, and on-voice. Trigger when asked to write microcopy, improve a button label or error message, write copy for a flow, or make interface copy clearer or friendlier.
Wires the Navigation component from @cognite/dune-industrial-components/navigation into a Dune app. Use when adding a navigation header, top nav bar, sticky header, nav items, active page, nav links, navigation component, theme toggle, or dark mode support to a Dune app.
Step-by-step workflow for creating complete Power BI reports from scratch using pbir CLI. Covers model discovery, report creation, page layout, theme setup, visual placement, field binding, filtering, formatting, validation, and publishing. Automatically invoke when the user asks to "create a new report", "build a report from scratch", "make a dashboard", "set up a report with KPIs", "create an executive dashboard", "add pages and visuals to a new report".
Generate high-density editorial HTML info cards in a modern magazine and Swiss-international style, then capture them as ratio-specific screenshots. Use when the user provides text or core information and wants: (1) a complete responsive HTML info card, (2) the design to follow the stored editorial prompt, (3) output in fixed visual ratios such as 3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, or 5:2, or (4) both HTML and a rendered PNG cover/card from the same content.
Create distinctive, production-quality frontend interfaces with a high level of design. Automatically detects the project's design system and framework to conform to them first, then expresses creativity in composition, layout, and motion. In greenfield mode (no existing system), applies a bold, distinctive aesthetic direction.
Generate Open Graph social preview images (1280x640) for GitHub repositories. Creates branded OG images that display when repos are shared on Twitter, LinkedIn, and Slack. Supports custom templates, dark/light themes, and automated generation.
Audit a UI, flow, or copy for dark (deceptive) patterns — design that manipulates users into unintended actions. Produces a prioritized findings list naming each pattern, its intent, severity, and an honest-design fix. Use when reviewing conversion flows, checkouts, paywalls, sign-ups, or cancellation flows for ethical design issues.
Design or critique a user-onboarding flow — the first-run experience that gets users to value fast. Gates context-dependent choices (onboarding method, progressive profiling, product tours) and applies the always-true core. Trigger when designing welcome screens, first-run experiences, product tours, activation flows, or when onboarding drop-off needs improving.
Pick and apply a complete visual style direction — surface ladder, type scale, accent discipline, and one signature structural motif — for a website, landing page, dashboard, or app shell. Use when asked for a specific look such as dark glass, dark technical, frosted workspace, warm paper, beige minimal, editorial grid, archival book, wireframe diagnostic, cobalt contrast, or "make it feel premium/expensive/engineered", or when a design needs a coherent direction rather than ad-hoc styling.
Brand identity building blocks: positioning, personality, archetypes, logo systems, color palettes, type pairing, voice, and guidelines documentation. Use when creating a brand, rebranding, or turning an existing identity into tokens and rules others can follow.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Turn any codebase into a beautiful, interactive single-page HTML course that teaches how the code works to non-technical people. Use this skill whenever someone wants to create an interactive course, tutorial, or educational walkthrough from a codebase or project. Also trigger when users mention 'turn this into a course,' 'explain this codebase interactively,' 'teach this code,' 'interactive tutorial from code,' 'codebase walkthrough,' 'learn from this codebase,' or 'make a course from this project.' This skill produces a stunning, self-contained HTML file with scroll-based navigation, animated visualizations, and code-with-plain-English side-by-side translations.
Build modern, composable, and accessible React UI components following the components.build specification. Use when creating, reviewing, or refactoring component libraries, design systems, or any reusable UI components. Triggers on tasks involving component APIs, composition patterns, accessibility, styling systems, or TypeScript props.
How a snapcn component is allowed to look. READ THIS BEFORE you write a colour, a border, a shadow, a radius or a font stack into a registry component. snapcn ships a shadcn design system (SnapCnTheme) and a tier of shadcn UI primitives (snap-cn-ui) — components compose them, they do not re-invent them. Explains which tokens exist, how to resolve them, how to reuse a primitive's own surface instead of hand-rolling one, and why var(--token) does not survive a Remotion render. Triggers - color, colour, hex, rgba, box-shadow, drop shadow, border, hairline, radius, surface, background, theme, dark mode, styling a component, "looks wrong on white", "the shadow is bad", shadcn, Input, Button, Card.
Create high-quality animated explainer visuals for essays and blog posts. Use when the user wants to visualize concepts, processes, data, or ideas with interactive web animations. Triggers on requests like "create a visual for", "animate this concept", "make an explainer", "visualize this idea", "diagram this process", "show this data", or when essay content would benefit from visual explanation. Handles abstract concepts (mental models, frameworks), technical processes (algorithms, systems), and data visualization (trends, comparisons). Outputs self-contained HTML/CSS/JS that embeds directly in web content.
Create distinctive, production-grade frontend interfaces with high design quality. Covers design thinking, typography pairing, color theory, motion design, spatial composition, and code quality. Generates real working code — HTML/CSS/JS or React — with intentional aesthetic direction, not generic AI output.
Evaluate a website, landing page, content, or any online asset through the eyes of pre-built synthetic ICP personas. Loads personas from icp-persona-builder output, then runs them against target URLs. Supports three modes: structured scorecard, freeform focus group, and head-to-head competitive comparison. Reusable — run against the same site after changes, or against new content anytime.
Scaffold Lightning Web Components with HTML templates, JS controllers, CSS with SLDS compliance, js-meta.xml config, and Jest tests. Use when asked about Lightning Web Components, LWC, component scaffolding, or Jest tests for LWC. Activate on .js-meta.xml files, mentions of "LWC", "Lightning Web Component", "wire adapter", "lightning component", or "@api/@wire/@track decorators".
Create subtle editorial word-by-word text reveal animations where each word fades and rises into place once it enters the viewport. Use for premium portfolio headlines, hero copy, section intros, and short marketing text that needs a cinematic staggered reveal with IntersectionObserver or in-view detection.
Comprehensive guide for implementing Syncfusion ASP.NET Core button components including Button, ButtonGroup, Checkbox, Chips, DropDownButton, Floating Action Button, ProgressButton, RadioButton, Speed Dial, Split Button, and Switch. Use this when adding styled buttons, toggle behavior, icon support, grouped selections, dropdown action menus, floating primary actions, expandable speed dial menus, interactive form elements, single/multiple selection capabilities, compact tag/filter elements, or drag-and-drop interactions to an ASP.NET Core application.
Complete guide to implementing Syncfusion Inputs components in ASP.NET Core applications. Use this when working with file uploads, numeric input, text fields, OTP verification, range sliders, signature pads, file validation, drag-and-drop, or enterprise-grade input handling for professional web forms.
Implement Syncfusion ASP.NET Core notification components including Toast, Message, and Skeleton. Use this skill when building toast notifications, brief auto-dismissing alerts, snackbar messages, contextual Message components with severity levels, or Skeleton loading placeholders with shimmer animations. This skill covers positioning, action buttons, severity variants, animation effects, and shape options.
Comprehensive guide for implementing Syncfusion ASP.NET Core Popup components including Dialog, Predefined Dialog, and Tooltip. Covers modal dialogs, positioning, animations, templates, accessibility, event handling, and various dialog and tooltip interaction patterns.
UX measurement: HEART framework, SUS, UEQ, SUPR-Q, task success and time-on-task metrics, A/B testing statistics, AI-specific metrics, and design system ROI. Use when defining UX KPIs, building a measurement plan, interpreting a usability score, or proving UX impact.
Design or critique modals, dialogs, alerts, popovers, and bottom sheets — gate WHEN interrupting users is justified, then apply dismissal, title/button, and focus best practices. Trigger when the user asks to design or review a modal, dialog, popup, overlay, confirmation, alert, permission request, lightbox, or bottom sheet — or asks whether something should be a modal at all.
Produce high-fidelity design mockups using HTML as the medium (landing pages, slides, interactive prototypes, animations, design systems, infographics, mobile mockups, etc.). Act as a professional designer rather than a generalist frontend engineer, emphasizing asking before doing, referencing existing design systems, offering multiple variants, and avoiding AI-style clichés. Triggers: /axi-front-design, "做个落地页", "设计一张海报/封面", "做张幻灯片/PPT", "做个交互原型", "做个动画", "design a landing page", "make a deck", "prototype this UI", "design system", "hi-fi mockup". Not applicable: plain text content/logic code, needs real image generation (use an image generation model instead), needs native PPTX/Figma files (HTML preferred).
Brand identity building blocks: positioning, personality, archetypes, logo systems, color palettes, type pairing, voice, and guidelines documentation. Use when creating a brand, rebranding, or turning an existing identity into tokens and rules others can follow.
Use when building interactive terminal dashboards or full-screen terminal applications; when implementing keyboard navigation, live data updates, or multi-panel layouts; when TUI is flickering, slow, or unresponsive; when handling terminal resize events
Use for every user-visible change in a GNOME app, new or existing, whether or not the request uses design vocabulary. Trigger on the repo rather than the wording — if it depends on gtk4/libadwaita (or is a GNOME-targeted Qt/PySide6 app), anything a user can see or interact with goes through this skill, including requests phrased purely as symptoms ("can I right-click to delete", "the window opens too small", "reordering doesn't work"). Covers choosing widgets, icons, dialogs, menus, sidebars, navigation, and empty states; interaction bugs in context menus, drag-and-drop reordering, window sizing, layout, duplicate affordances, and controls missing or inert at launch; and HIG review. Complements developing-gtk-apps, which owns architecture, threading, language syntax, and build/test plumbing.
Figma mastery and design-to-code: Auto Layout, component architecture, variable modes, Dev Mode handoff, Figma MCP server integration, Code Connect, and token pipelines. Use when working in Figma, converting designs to code, or setting up a design-to-code flywheel.
Creates unique, production-grade frontend interfaces with exceptional design quality. Use when user asks to build web components, pages, materials, posters, or applications (e.g., websites, landing pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI). Generates creative, polished code and UI designs that avoid mediocre AI aesthetics.
Call the GPT imagegen skill to generate an "image-format PPT document" — one slide image per page with high information density, complex layout, and a consistent style (default: tech business/high-density infographic; also supports minimalist/cartoon/ink-wash/tech and any other style), and composite them into a .pptx with one full-page image per slide. Generates image-based slide decks (one rendered image per slide) from a topic or content. Use when the user wants to "make a PPT / generate an image-based PPT / create AI-generated slides / turn content into PPT images". This skill **only produces image-based PPTs** (one .png per page + a composited .pptx); if an editable pptx is also needed, then use GordenImage2PPTX.
Router for GSAP animation domain. Use when implementing animations with GreenSock Animation Platform including tweens, timelines, scroll-based animations, or React integration. Routes to 4 specialized skills for fundamentals, sequencing, ScrollTrigger, and React 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.