Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Choose and design UI icons that are understood, not just decorative — universal metaphors, one consistent style, text/accessible labels where meaning isn't obvious, legible at small sizes, and adequate touch targets. Replaces ambiguous icon-only buttons and mixed icon styles with a system. Trigger when asked to add or pick icons, design an icon set, decide filled vs outlined, label icons, fix inconsistent/ambiguous iconography, or choose between a system library (SF Symbols/Material) and custom icons.
Visual inspection and code review for compliance with the Web Interface Guidelines. Triggers on "review my UI", "check accessibility", "audit design", "review UX", "fix the layout", "find design problems". Supports static code analysis and visual inspection in the browser with automatic fixes.
Produces branded visual identity elements — logo concepts, icon sets, seamless patterns, brand illustrations, and textures — as generation-ready prompt specs, and generates them via FAL.ai fal-ai/nano-banana-pro when the automation is configured. Use when the user says 'design a logo', 'I need icons', 'brand pattern / texture', 'brand illustrations', 'visual identity elements', or 'make my brand assets'. Produces one prompt-spec block per asset (asset type, style, palette with hex, composition, negative constraints), a variant plan for user selection, file-naming conventions, and a brand-guidelines entry for each approved asset; runs docs/creative_cli.py brand when FAL_API_KEY is set.
How to write and maintain DESIGN.md as the visual specification layer for Cavekit projects. Nine-section format, design tokens, accessibility, integration with kits/plans. Use when defining or revising visual identity, importing a third-party design system, or auditing UI code against design tokens.
Add CodedVisuals visual compositions to a React marketing or landing page. Use when the user wants an animated coded visual (charts, hero, bento, feature block, dashboard, chat, code editor, avatars, integrations, and more) in their project, when picking which visual fits a section, or when installing, importing, and customizing one. This is the entry point; each visual also has a reference file at visuals/{category}/{file}.md.
Production UI component code in React/TypeScript, SwiftUI, and modern CSS with full state matrices, ARIA attributes, keyboard handling, and design token consumption. Use when building or reviewing a button, modal, form, input, table, or any component that needs all of its states covered.
Map customer journeys from awareness to advocacy. Visualize touchpoints, identify drop-off points, analyze channel interactions, and optimize the end-to-end experience. Use when the user asks about customer journey, funnel mapping, touchpoint analysis, or experience optimization.
UI design exploration (development paradigm v1 · only for modules with a UI). Two hard conditions must both hold before triggering: (1) the thing has a user-visible interface, (2) the interface does not exist yet. Through "requirement convergence → technical research → batch-generate 5-8 options in ASCII → HTML design mockups → full-state coverage → requirement summary", it produces 3 deliverables: 需求总结.md + {module}-设计稿.html + {module}-全状态设计参考.html, as input to the PRD stage. Not applicable to: interface-less process/architecture/data structure/API/solution design—the word "design" alone does not mean this skill (use issue-pool to discuss and break down), changing styles of an interface already running in code (use ui-design), replicating an existing design mockup or screenshot (use design-replica), adding wireframes for a single story while writing a PRD (use prd-test-writer, which has built-in ASCII wireframe capability), vague ideas not yet decided on (use issue-pool to put them in the pool first), purely divergent end-state visions without convergence (use vision-exploration).
Designs structured interview guides, survey instruments, and JTBD probes to learn from users while avoiding common research biases (leading questions, confirmation bias, selection bias). Use when validating product assumptions before building, discovering unmet user needs, understanding customer problems and workflows, testing concepts or positioning, researching target markets, identifying jobs-to-be-done and hiring triggers, or uncovering pain points and workarounds.
Write React-ECS scene UI that the Creator Hub's 2D UI editor (UI Designer) can fully read and edit — file layout, the state/props binding surface, useInteraction style layers, actions, platform variants, and the driver pattern for animation. Use when the user wants UI that is editable in the Creator Hub, wants to generate UI for the UI Designer, or wants to adapt an existing coded UI so it opens in the editor. For coded UI with no editor requirement, use build-ui.
Review partner-, affiliate-, broker-, or publisher-submitted creative featuring Point for obvious first-pass brand, copy, product, disclosure, production, and customer-journey issues before human Brand, Content, or Compliance review. Use for ads, tiles, scripts, emails, landing pages, documents, or creative batches; not for final compliance approval or net-new campaign ideation.
Skill for creating new PPTX, PDF, and PNG files with Presenton. Use this skill whenever a user asks for a PowerPoint, presentation, slide deck, pitch deck, report deck, PDF, presentation PDF, PNG slide, slide image, or exported deck, even when Presenton is not mentioned. Use a concrete design brief from the user when provided; otherwise search Presenton designs, upload user-provided images, search Presenton icons, generate 1280x720 HTML with HTTPS asset URLs, export requested formats—or all three formats when none is specified—and return download URLs plus a shareable presentation-preview link.
Apply a new brand across existing videos after a rebrand - audit every scene for old colors, logos, fonts, and dated intros/outros, swap them for the new brand kit, and leave narration and timing untouched. Use when the user says "we rebranded, update our videos", "swap the old logo in this video", "apply our new brand colors to this video", "our video library still has the old branding", or "replace the intro with our new one".
Improve Roblox localization and accessibility readiness. Use for UI text scaling, language-ready copy, icon clarity, color contrast, younger-player comprehension, readable HUDs, input accessibility, and reducing text-heavy onboarding.
**THEMING & APPEARANCE GUIDE** — Assist with Syncfusion ASP.NET Core EJ2 component theming, customization, size modes, and dynamic theme switching. Use when: applying themes (Bootstrap, Material, Tailwind, Fluent, etc.), customizing theme variables, implementing theme switchers, enabling touch mode, or customizing icons and appearance.
Implement the Syncfusion ASP.NET Core TreeView component for hierarchical data visualization. Use this when working with tree structures, node selection, checkboxes, or drag-and-drop operations. This skill covers data binding, node editing, and advanced tree configurations.
Use meitu-cli to edit and modify existing React/TSX/JSX source code, with multi-round iteration. Triggered when the user mentions changing code, modifying pages, adjusting styles, changing colors, adding buttons, deleting components, changing layouts, or editing the code from just now.
[user/auto] Use when requesting visual materials or self-contained HTML explanations that explain the background knowledge and actual structure and behavior of a concept. Do not use for explaining a specific change, multi-chapter learning courses, plain-text questions, editing existing writing, or product comparison prototypes.
Design or critique a product's typography — typeface selection and pairing, type scale, hierarchy, and readability settings (size, line length, line height, spacing, alignment). Trigger when choosing a typeface or font pairing, setting up a type scale, fixing typographic hierarchy, improving text readability, or reviewing a UI layout for typography issues.
WCAG 2.2 compliance, ARIA authoring patterns, screen reader and keyboard navigation, color contrast, and cognitive/neurodiversity accommodations. Use when auditing accessibility, fixing a11y violations, choosing ARIA roles, checking contrast ratios, or designing for ADHD, dyslexia, autism, or motor impairment.
Best practices for Flutter animations using the built-in animation framework, covering implicit animations, explicit `AnimationController` animations, page transitions, and Material 3 motion tokens. Use when creating, modifying, or reviewing animations, transitions, motion, or animated widgets, and also for custom route transitions built with `CustomTransitionPage`, a `buildPage` override on a `GoRouteData` subclass, or a `Hero` transition, since motion between routes is animation work even when the surrounding code is `go_router`.
Migrate an app's charts from Recharts or TanStack Charts to Bklit UI. Detects Recharts usage — direct `recharts` imports or shadcn/ui's `components/ui/chart.tsx` wrapper (ChartContainer, ChartConfig, ChartTooltipContent, ChartLegendContent) — and `@tanstack/charts` definitions (defineChart with lineY / areaY / barY marks), inventories every chart, classifies each as clean / needs workaround / keep, installs the matching `@bklit/*` shadcn registry items, and rewrites each chart with the equivalent bklit components while preserving data, colours, and labels. Tiny axis-less charts (Recharts "Tiny" line/area/bar charts, TanStack KPI sparklines) become LineSparkline / AreaSparkline / BarSparkline. Use when the user asks to replace, migrate, convert, or port Recharts, shadcn charts, or TanStack Charts to bklit, to swap sparklines or tiny charts, to remove the recharts or @tanstack/charts dependency, or asks what it would take to switch chart libraries.
Design a matched pair of branded stingers - a 3-5 second intro (logo moment plus title slot) and a visually matched outro (CTA card) - so every video a team ships opens and closes the same way. Use when the user says "make us a branded intro", "intro and outro for our videos", "logo sting", "opening and closing bumpers", "end card with our CTA", or wants consistent on-brand openers and closers for their video library.
Build full-stack dashboard applications using React/Next.js + shadcn/ui + Tailwind CSS + Recharts + Express with customizable data sources. Use when creating data visualization dashboards, business intelligence interfaces, monitoring systems, KPI displays, analytics platforms, or any project requiring data visualization with modern UI components and dynamic effects.
Coded HTML email templates that render across Outlook, Gmail, Apple Mail, and mobile: table layout, fluid-hybrid responsiveness, bulletproof buttons, email dark mode, and size limits. Use when the user asks to "design an email", "build an email template", "create a newsletter", "HTML email", "email layout", "transactional email", "welcome email", "promotional email", or any email template work. Not for web landing pages (landing-page-design) or web dark themes (dark-mode).
This skill should be used whenever the agent creates, edits, reviews, or debugs any web UI such as pages, components, layouts, sections, forms, navs, cards, tables, or modals. It guarantees the output is mobile-friendly and responsive across the full range of devices (small phones at 320px through large desktops), prevents horizontal overflow, and makes the result look intentional and beautiful rather than merely "not broken". It also enforces visual consistency: new UI must match the spacing, type, breakpoints, and component patterns already in the project, and remain coherent with components added later. Trigger on phrases like "make this responsive", "mobile friendly", "works on phones", "fix the layout on mobile", "it's overflowing", "looks broken on small screens", or any request to build/style web UI where no responsive behavior was specified. Use it proactively whenever generating new web markup.
Manages PageCraft block collections via the public V1 API — list/view/create/rename/delete collections and populate them with blocks (add, remove, reorder). Use when the user says "создай коллекцию", "добавь блок в коллекцию", "убери блок из коллекции", "покажи коллекции", "что в коллекции", "переименуй коллекцию", "поменяй порядок блоков в коллекции", "удали коллекцию". Call it via the `Skill(pagecraft-collections)` tool, not via `Read .../SKILL.md`.
Implement the Syncfusion ASP.NET Core AI AssistView control for interactive AI-powered assistance interfaces. Use this skill when implementing AI assistants, prompt suggestions, custom views, file attachments, markdown responses, customizable templates, regenerable responses, thinking capabilities (chain-of-thoughts), generative UI blocks, Text-to-Speech conversion, Speech-to-Text voice input, or customizing advanced AI conversation UI in ASP.NET Core applications.
Implement the Syncfusion ASP.NET Core Chat-UI control for interactive, real-time messaging components. Use this skill when implementing chat interfaces, message management, file uploads and attachments, appearance customization with templates, message events, typing indicators, or internationalization and RTL layouts in ASP.NET Core applications.
Implement Syncfusion ASP.NET Core Diagram component (EJ2 Tag Helper `ejs-diagram`) for building interactive diagrams in Razor Pages or MVC applications. Use this skill when working with org charts, flowcharts, BPMN process diagrams, UML diagrams, or swimlane charts. This skill covers node and connector configuration, layout options, shape styling, data binding, drawing tools, export/print functionality, and other diagram features.
Implement Syncfusion ASP.NET Core Inline AI Assist control for real-time text processing and AI-powered features. Use this skill when users need intelligent prompt suggestions, AI-assisted content generation, command popups, response actions, or positioning AI assist popups in ASP.NET Core applications.
Implement the Syncfusion ASP.NET Core Ribbon control using Razor Tag Helpers. Use this skill when the user mentions Syncfusion ASP.NET Core Ribbon, `<ejs-ribbon>`, `<e-ribbon-tab>`, `<e-ribbon-group>`, Razor Tag Helpers, ribbon implementation, tabs, groups, items, file menu, backstage, layouts, events, or ASP.NET Core ribbon setup. Covers installation, tag helper registration, component structure, items, events, theming, accessibility, and advanced patterns.
Tailwind CSS v4 usage guide and v3-to-v4 differences. This skill should be used when writing, reviewing, or refactoring any Tailwind CSS code in this repo. Triggers on tasks involving Tailwind classes, @theme blocks, CSS-first configuration, or cleanup of v3-era syntax.
Refine.dev frontend work on a Taruvi app: wiring data/storage/app/user providers, authProvider, accessControlProvider; Refine hooks against Taruvi (CRUD, useCustom, useCan, useDataGrid, useForm); building list pages, dashboards, KPI cards, file managers, network-backed autocompletes; calling Taruvi functions and analytics from the frontend; debugging 401/403, token refresh, redirect loops, or permission failures. Triggers: any Refine/React work in a Taruvi project, "build a list page", "add a dashboard", "wire up auth", "dataProvider", "@taruvi/refine-providers", `VITE_TARUVI_*`. Skip for backend Python, MCP provisioning, schemas, policies, or raw SQL — use `taruvi-app-developer` instead.
Use meitu-cli to generate React/TSX page code from scratch, with asset references and prompt expansion. Trigger only when the user explicitly asks to generate React/TSX/HTML front-end code files; ordinary page design discussions, product plans, and visual design requests do not trigger it.
Integrates uView Pro component library into UniAppX (uni-app-x) projects with TypeScript and Composition API, including easycom configuration, pages.json and manifest.json setup, and platform-specific handling. Use when the user needs to add uView Pro components to a UniAppX project, configure TypeScript .uts integration, or handle cross-platform styling.
Builds Vue 3 mobile UIs in uni-app using the uView Pro component library (100+ components). Covers Button, Form, List, Modal, Tabs, NavBar, plus built-in HTTP, storage, router, and validator utilities. Use when the user needs to create uni-app interfaces with uView Pro, configure themes, or use uView Pro utility tools.
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.
When the user wants to optimize, improve, or increase conversions on any marketing page or form — including homepage, landing pages, pricing pages, feature pages, lead capture forms, or contact forms. Also use when the user says 'CRO,' 'conversion rate optimization,' 'this page isn't converting,' 'improve conversions,' 'why isn't this page working,' 'my landing page sucks,' 'form abandonment,' 'nobody's converting,' 'low conversion rate,' or 'this page needs work.' Use this even if the user just shares a URL and asks for feedback. For post-signup activation, see onboarding.
Transform audit data, performance reports, and structured analyses into polished visual deliverables. Generates presentation decks (PPTX), interactive HTML dashboards, or styled markdown reports with charts. Includes a customizable design system with forest green accent and warm cream backgrounds. Use when the user has analysis data and needs a visual deliverable.
Build, scaffold, maintain, or restyle DatoCMS plugins built with datocms-plugin-sdk and datocms-react-ui. Use when users ask to create a new DatoCMS plugin project, patch an existing plugin, add or adjust plugin hooks, field extensions, config screens, sidebars, pages, modals, asset sources, dropdown actions, lifecycle hooks, browser CMA flows, plugin permissions, package metadata, dark mode upgrades, testing local plugin changes without affecting the live installation, or UI changes that should match the DatoCMS dashboard. Route standalone CMA scripts to datocms-cma and frontend website integrations to datocms-frontend-integrations.
Extract design DNA from app screenshots, live URLs, or screen recordings using Google Stitch — color palettes, typography, spacing tokens, component patterns, and motion specs as design-tokens.json or Tailwind config. Use when the user points to a screenshot, URL, or video and asks to extract or audit the design, analyze animations or scroll behavior, or keep new pages matching an established visual identity.
Evaluates interfaces, components, screens, and flows against universal UX/UI principles (heuristics, UX laws, Gestalt, cognitive psychology, accessibility) and delivers concrete, prioritized improvements. Use whenever the user shares UI code, screenshots, components, or mockups and wants feedback — even if they don't use the words "critique" or "review". Also trigger when the user asks "what's wrong with this UI", "how can I improve this", "review my component", "does this look right", "give me feedback on this design", or shares any interface and asks for thoughts. Trigger for partial slices too (a single button, form, or card) — not only full screens.
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.