Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Curated collection of DESIGN.md files from real websites. Each DESIGN.md contains complete design system specifications including color palette, typography, component styles, spacing, and visual guidelines that AI agents can use to generate pixel-perfect UI matching the source website's design. Use when: user wants to create UI that looks like a specific website (e.g., "build a page like Notion", "make it look like Linear's design"), or needs design tokens and component specifications for a particular design style. Also use when the user needs to browse or compare the design library visually before choosing a DESIGN.md.
Applies Anthropic brand colors (dark #141413, orange #d97757, blue #6a9bcc, green #788c5d), Poppins headings, and Lora body text to artifacts such as presentations, documents, or visuals. Use when the user needs Anthropic brand styling, brand color application, corporate typography, or visual formatting following Anthropic design standards.
Create interactive data visualizations using Vega-Lite declarative JSON grammar. Supports 20+ chart types (bar, line, scatter, histogram, boxplot, grouped/stacked variations, etc.) via templates and programmatic builders. Use when users upload data for charting, request specific chart types, or mention visualizations. Produces portable JSON specs with inline data islands that work in Claude artifacts and can be adapted for production.
Build or refine UI color systems, warmth, semantic color, and color-based hierarchy in designs that are too gray, monochromatic, or missing color meaning. Use when the user mentions dull colors, gray UI, missing warmth, weak semantic color, or a need for stronger color hierarchy.
Expert CRO advisor that analyzes landing pages, product funnels, UI/UX friction, and provides data-driven A/B test ideas to maximize conversions, sign-ups, trials, and retention. Use when optimizing conversion rates, analyzing funnels, designing experiments, improving CTAs, reducing drop-offs, or when user mentions conversion rate, CRO, landing page optimization, A/B testing, or funnel analysis.
Use this skill to make `@Preview` functions the primary feedback loop for Jetpack Compose UI work — preview-driven development. Covers hoisting state out of composables so a preview never needs a `ViewModel` or DI graph, `LocalInspectionMode` for conditional preview rendering (e.g. placeholder instead of Coil/Glide), `@PreviewParameter` + `PreviewParameterProvider` for rendering every UI state side by side, multi-configuration previews (`uiMode`, `fontScale`, `device`, `widthDp`, `locale`), `@Preview`-annotated annotation classes for reusable preview sets, and the anti-patterns that make previews rot (screen-level previews, unwrapped theme, zero-width `fillMaxWidth` previews, Lorem-ipsum data). Use when the user mentions "preview won't render", "preview needs a ViewModel", "@PreviewParameter", "LocalInspectionMode", "preview out of date", "preview-driven development", "previews keep breaking", or "how to structure Compose previews".
Build Docyrus React TypeScript web applications end-to-end, combining authentication, API access, @docyrus/app-utils runtime helpers, @docyrus/devtools in-app debugging, generated collections, TanStack Query/Form patterns, and production-grade UI implementation with preferred component libraries. Use when creating or modifying Docyrus-backed apps that use @docyrus/api-client, @docyrus/signin, @docyrus/app-utils, @docyrus/devtools, Docyrus collections, queries, dashboards, forms, tables, layouts, or Docyrus UI components.
Design and build production-grade UI components for Docyrus React applications using preferred component libraries. Use when creating dashboards, forms, data tables, layouts, or any UI elements. Triggers on tasks involving component selection, UI design, dashboard creation, layout design, shadcn, diceui, animate-ui, docyrus-ui, reui components, or requests to build user interfaces.
Use when an Axhub prototype URL needs its PRD, directory, or annotation context read from window.__AXHUB_ANNOTATION_SOURCE__, especially for prototype-as-PRD review, agent context gathering, or annotation extraction with Playwright, Browser, Chrome, or an equivalent page evaluator.
Use when building or improving frontend UI that must feel intentional, product-specific, and visually verified instead of generic, especially when the user names a reference website or asks for a similar visual experience. Covers apps, dashboards, editors, marketing surfaces, mobile or embedded UI, and meaningful motion or 3D. It is not for backend-only work or a tiny CSS fix unless explicitly invoked.
Create stunning, animation-rich HTML presentations from scratch or convert PowerPoint files (.ppt/.pptx) to beautiful web slides. Use when the user wants to build a pitch deck, presentation, slideshow, or slide deck — or convert an existing PPT to a web presentation. Generates zero-dependency single HTML files with keyboard/touch navigation and scroll-triggered animations. Style options include Neon Cyber, Bold Signal, Swiss Modern, Paper & Ink, and 8 more curated presets.
Create single-file HTML slide presentations with vanilla JS/CSS. Themed (terminal.css, catppuccin, nord), keyboard-navigable, with inline SVG diagrams and animations. Use when the user asks for an HTML presentation, slide deck, or single-file slides without a framework.
Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
Write Swift animation code using Apple's latest frameworks — SwiftUI animations, Core Animation, and UIKit. Prefer first-party APIs over third-party libraries. Use when implementing iOS animations, writing animation code, building transitions, creating gesture-driven interactions, or converting animation specs/designs into working Swift code. Covers iOS 18 through iOS 26 APIs including KeyframeAnimator, PhaseAnimator, custom Transition protocol, zoom navigation transitions, matchedGeometryEffect, symbol effects, mesh gradients, and SwiftUI-UIKit animation bridging.
Generate professional slide deck images from content (Markdown, text, URLs). Creates outlines with style instructions, then generates individual slide images. Supports 16 visual styles, CJK/Latin mixed text, branding overlays, and PPTX/PDF export. Use when the user asks to "create slides", "make a presentation", "generate deck", "slide deck", "PPT", "做PPT", "生成幻灯片", "制作演示文稿", or wants to turn content into a visual slide deck.
Expert coding skill for the full MapTiler platform — Cloud REST APIs, MapTiler SDK JS (built on MapLibre GL JS), native mobile SDKs, on-premise infrastructure, and vector tile schemas. USE WHEN the user wants to add a map to a web or mobile app, show locations or routes, display geographic data, build a store locator, create data visualizations on maps, add geocoding or address search, do reverse geocoding, look up elevation, do IP geolocation, fetch weather data, transform coordinates between CRS/EPSG, embed static map images, work with vector tilesets (Planet v4, Buildings, Contours, Outdoor, Ocean, Landcover, Cadastre), write MapLibre style expressions or data-driven styling, render 3D terrain, globe view, or 3D buildings extrusion, use satellite imagery, add markers, popups, heatmaps, or clustering, integrate maps in React, Vue, Svelte, Angular, Next.js, Leaflet, OpenLayers, Cesium, or deck.gl, build native maps on iOS (Swift), Android (Kotlin), Flutter, or React Native, self-host with MapTiler Server or generate tiles with MapTiler Engine CLI, or upload/manage tilesets via the Admin API. Also USE WHEN the user mentions MapLibre GL JS — the SDK extends MapLibre with built-in cloud services, helpers, and session billing.
Turn an app idea or an existing React Native app into a Nav Read - tab structure, route tree, push/modal/sheet decisions, deep links, Android back plan - without building any screens. Use when planning navigation for a new app, restructuring an existing app's navigation, or deciding whether something is a tab, a push, a modal, or a bottom sheet. For building the screens afterward use mobile-taste; for full-app visual redesign use mobile-redesign-app.
Load this skill when adding or reviewing web UI motion such as animations, transitions, entrances and exits, hovers, modals, dropdowns, toasts, page transitions, and micro-interactions. Triggers on "animate", "add a transition", "make it move", "motion", "fade", "slide", "stagger", "open and close". Builds dependency-free, Baseline-first, framework-agnostic CSS, with the Web Animations API and View Transitions API where they help.
Use when asked to make a launch video, product film, motion design piece, UI motion reel, Dribbble-style UI animation or animated brand/logo sting—anything rendered to MP4 from HTML with a cursor, morphing UI, springs, beat-synced music and SFX. Carries Chan's full creative direction (one shape never cut, blur content swaps, springs, real data, logo slams, no creative limits) and the proven build/render pipeline (pure seek(t), closed-form springs, Playwright subframes, ffmpeg tmix, numpy beat grid).
Guide to using the OpenDesign build script tools. Use this skill when you need to use the @opensig/open-scripts CLI to generate icons, clean SVG, build components, compile styles, or generate design tokens. Supports 5 commands: gen:icon (SVG to Vue icon components), clean:svg (SVG cleaning and optimization), build:component (Vue component library build), build:style (SCSS style compilation), gen:token (design token CSS variable generation). Use cases: (1) configuring and running build scripts, (2) writing icon/token configuration files, (3) understanding the build process and command usage
Specialist in generating print-only pages. Triggered by the keywords "인쇄 페이지 만들어줘", "프린트 페이지 생성", "출력 페이지". Generates refined print-only Vue components and route configuration that output content only, without layout. Uses Context7 MCP to reference the latest TailwindCSS v4/Vue docs and Sequential Thinking to analyze print design.
Design and build cohesive web pages with custom visual identity — landing pages and portfolios get rich anatomy + section archetypes; any other page type (blog, about, pricing, contact, coming-soon, dashboard, admin, e-commerce, custom) is supported through generic anatomy + skeleton. Use this skill whenever the user mentions: landing page, portfolio, personal site, hero section, marketing page, product page, sales page, splash page, blog page, about page, pricing page, contact page, coming-soon, waitlist, dashboard, admin panel, e-commerce store, redesign my site, design my portfolio, build a portfolio, work showcase, hire-me page, perfect-ui, perfect landing, or asks to create any web page surface. Two tiers: special (landing | portfolio — rich treatment) and generic (everything else — universal craft toolkit). Self-contained 8-phase pipeline: vibe discovery → visual direction (color/typography/mood) → custom icon set (NO emoji, NO icon library) → AI-generated visuals → optional shader effects layer → inline plan + implement on Next.js + Tailwind + shadcn. Always proposes effect layer as optional. No refusals; outputs distinctive sites, not AI slop.
Format a finalized long-form article as mobile-friendly WeChat Official Account rich text and generate a preview; after Ray explicitly approves, write or update the WeChat draft box and read it back for verification. Use for “format for the public account”, “push to the WeChat draft box”, or “update the WeChat draft”. If the request is ambiguous, only create a preview first; do not publish or send to all followers.
Build slide decks and presentations for research talks. Use this for making PowerPoint slides, conference presentations, seminar talks, research presentations, thesis defense slides, or any scientific talk. Provides slide structure, design templates, timing guidance, and visual validation. Works with PowerPoint and LaTeX Beamer.
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
Build, redesign, or visually refine product interfaces using project evidence, real content, functional states, and deliberate composition. Use for implementation work on websites, apps, dashboards, landing pages, or component systems. Do not use for read-only audits or logic-only changes.
Design or review product experiences through user goals, journeys, information architecture, task flows, interaction models, feedback, recovery, and cross-screen continuity. Use when the primary question is how users understand and complete a goal across steps or surfaces. Do not use for visual styling, implementation-only logic, or unsupported user-research claims
Use when writing, reviewing, or refactoring SwiftUI code for iOS or macOS, including state and `@Observable` data flow, view composition, resizable layouts, safe areas, display scale, performance, lists, environment, localization, animation, Liquid Glass, and API migration. Also use for iPhone Duo, foldable, or large-display layouts (`NavigationSplitView` on large displays, iPhone tab sidebar, two-column reflow, foldable grids, `ArrangementView`, `ReservedRegion`), hinge effects, vertical bars, `@State` initialization or synthesized-property diagnostics, `@ContentBuilder` ambiguity, `reorderable` drag/drop, custom `AsyncImage` `URLSession`, swipe actions outside List, item-bound `alert`/`confirmationDialog`, `ToolbarOverflowMenu`, `AnimatableValues`, Document APIs (`Document`/`DocumentReader`), and Instruments `.trace` capture or analysis.
Implements Syncfusion JavaScript accumulation charts (Pie, Doughnut, Funnel, Pyramid) for proportional and percentage-based visualizations. Use when displaying categorical or proportional data. Covers legend and label configuration, interactivity, accessibility, and customization. Works with TypeScript (modules) and JavaScript (CDN/ES5).
Create and edit visual diagrams with Syncfusion JavaScript Diagram (flowcharts, BPMN, swimlanes, UML, org charts, network topologies). Trigger for diagram rendering, node/connector modeling, layouts, data binding, palettes, interactive tools, exporting, and workflow visualization tasks.
Implements Syncfusion Javascript TreeGrid for hierarchical data with sorting, filtering, editing, exporting, paging, virtual scrolling, and advanced features. Supports configuration, CRUD, aggregates, templates, state persistence, and performance optimization in Javascript applications.
Implement hierarchical tree structures with Syncfusion JavaScript TreeView component for selection, editing, and drag-drop functionality. Use this skill when building tree navigation interfaces, displaying hierarchical data, implementing node selection and checkboxes, performing node manipulation (add/remove/update), and customizing tree templates. Covers data binding with local and remote data sources, DataManager integration, node events, API methods, and properties.
Implement the Syncfusion Vue Chat UI component for Vue chat interfaces, messaging applications, conversational UI, chat widgets, real-time messaging, user-to-user communication, bot integrations, customer support chat, collaborative messaging, instant messaging features, chat rooms, or when user mentions "chat ui", "chat component", "messaging interface", "conversation view", or @syncfusion/ej2-vue-interactive-chat package.
Use this skill when users need to apply themes, customize appearance, switch dark mode, use CSS variables, configure icons, or modify visual styling for Syncfusion Vue components. Covers icon library, size modes, and Theme Studio integration.
Syntax-highlighting guidance for language support, selective loading, Markdown pipelines, themes, and annotations. Use when a project uses TanStack Highlight or when the task needs its setup, implementation, debugging, testing, migration, or integration guidance.
Unified team skill for UI design team. Research -> design tokens -> audit -> implementation. Uses team-worker agent architecture with roles/ for domain logic. Coordinator orchestrates dual-track pipeline with GC loops and sync points. Triggers on "team ui design", "ui design team".
Build, debug, test, or package Python Textual terminal interfaces: screens, widgets, TCSS, reactive state, workers, keyboard workflows, and optional browser delivery. Use when Textual is selected or an existing Textual app is involved; do not turn a noninteractive CLI or simple Rich output into a TUI unnecessarily.
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
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.