Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Animate React and Vue components with Animate UI (Motion-based primitives for Radix UI, Base UI, React Aria and reka-ui). For shadcn/ui or shadcn-vue components, runs the `@animate-ui/cli` codemod that swaps their primitives for Animate UI's; for components built directly on those libraries, swaps the import to `@animate-ui/react` or `@animate-ui/vue`; for anything else (custom components, plain markup), applies Animate UI's motion rules, tokens (springs, curves, scales, blur) and recipes with Motion. Also reviews existing motion with the `audit` command, migrates Animate UI v1 projects, and turns any icon (Lucide, Hugeicons, Tabler, a custom SVG…) into an animated icon compatible with `AnimateIcon`. Use when asked to animate a component, make shadcn "animated", add enter/exit, press or swap animations, animate page transitions, set up Animate UI in a React, Vue or Nuxt project, animate an icon, change the animation pace, review whether motion follows Animate UI's rules, or find slow and janky animations.
Turn any public URL into a production-grade 9-section design.md spec (colors, typography, components, layout, depth, motion, responsive, prompt guide) using the agent's own built-in tools — WebFetch, browser/screenshot, and file writes. Use when the user asks to "generate a design system from a URL", "extract brand tokens", "write a design.md", clone a site's style, or reverse-engineer a design system from a live page. Triggers on phrases like "design spec", "style guide from URL", "brand tokens", or any request that pastes a URL and asks for a design document.
A Kuikly custom View development assistant. Guides you through creating custom UI components and exposing native Views for use on the Kuikly side. Covers the full development process: defining components on the Kuikly side, implementing them natively on each platform (Android/iOS/HarmonyOS ArkTS/H5/mini programs), and using them. Use when developing custom extended UI components.
A complete development assistant for combining Compose DSL and Kuikly DSL. Provides guidance on embedding Kuikly DSL components (DeclarativeBaseView / ViewContainer) in Compose DSL pages and calling Kuikly Module from Compose. Use it when users need to reuse Kuikly DSL components in Compose pages, wrap native Views as Composables, or call Kuikly Module from Compose.
Cartographic principles for MapLibre GL JS — label and symbol legibility on imagery vs. vector basemaps, figure-ground for point icons, styling vector roads over aerial imagery, visual hierarchy, layer ordering for data injection, and accessibility. Use when styling a map, choosing text or symbol colors, making markers or roads readable on satellite/aerial imagery, or ordering layers correctly
MUST be used right after changing any CLI color config (delta/bat/themes/lazygit pager) — renders the terminal's colored output to a PNG so Claude can actually SEE contrast, alignment, and highlighting instead of raw ANSI codes. Use for delta git diff colors, bat syntax highlighting, starship prompt, eza/ls colors, or ripgrep matches. Trigger phrases: 看终端效果, 终端截图, 验证配色, terminal screenshot.
Apply Feature-Sliced Design (FSD) v2.1 architectural methodology to frontend projects. Use when organizing code structure, decomposing features, creating new components or features, refactoring existing codebases, or when users mention "FSD", "Feature-Sliced", layers, slices, or frontend architecture patterns.
Web accessibility specialist for WCAG compliance, ARIA implementation, and inclusive design. Use when auditing websites for accessibility issues, implementing WCAG 2.1 AA/AAA standards, testing with screen readers, or ensuring ADA compliance. Expert in semantic HTML, keyboard navigation, and assistive technology compatibility.
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.
Expert blueprint for programmatic animation using Tween for smooth property transitions, UI effects, camera movements, and juice. Covers easing functions, parallel tweens, chaining, and lifecycle management. Use when implementing UI animations OR procedural movement. Keywords Tween, easing, interpolation, EASE_IN_OUT, TRANS_CUBIC, tween_property, tween_callback.
Use when text must appear letter-perfect on generated media: taglines, CTAs, prices, legal supers, lower thirds, end cards, nameplates, or styled rich cards composited over Scenario images and video. Keywords: text overlay, text card, caption card, CTA, legal super, tagline, end card, lower third, price card, HUD text, transparent PNG.
Analyze session replay patterns across experiment variants to understand user behavior differences. Use when the user wants to see how users interact with different experiment variants, identify usability issues, compare behavior patterns between control and test groups, or get qualitative insights to complement quantitative experiment results. Also covers pairing the observed behavior with a linked survey when the user wants qualitative feedback beyond what recordings show
Enables rich interactive UI components in chat responses. When presenting questions that require structured input (multiple choice, true/false, forms), embed interactive blocks that compatible clients render as native UI elements. Use when user asks for quizzes, exercises, surveys, or any structured input scenario.
The Define, Build, Review, Refine loop and seven context artifacts (brief, content, mood boards, section specs, style guide, PRD, tasks) for building a premium SaaS marketing site with AI. Use when planning or building a SaaS landing page and you want the design context written down before any code.
shadcn/ui component integration for Inertia Rails React (NOT Next.js): forms, dialogs, tables, toasts, dark mode, command palette, and more. Use when building UI with shadcn/ui components in an Inertia app or adapting shadcn examples from Next.js. NEVER react-hook-form/zod — wire shadcn inputs to Inertia Form via name attribute. Flash toasts require Rails flash_keys initializer config.
Walk the user through four directional axes (tone register, aesthetic philosophy, audience relationship, sensory ambition) and produce a structured aesthetic brief that downstream content, copy, design, and art-direction skills consume as required input. The aesthetic depth layer, distinct from `creative-brief` (operational kickoff: scope, audience, deliverables, constraints). Use when a project needs aesthetic coherence across many small decisions and the user has only a vague feeling, or when multiple downstream aesthetic-producing skills need a shared brief. Triggers on creative direction, aesthetic direction, set the aesthetic, define the visual direction, what's the vibe, what's the tone, the four axes. Does NOT fire for a general kickoff brief (use `creative-brief`), tactical single-piece work, already-documented direction, purely functional output, or locked production-stage work
Search free commercial-use creative assets across multiple online sources—photos, illustrations, icons, video footage, music, sound effects, and fonts. Use when the user needs to find assets for videos, PPTs, articles, or any content creation. Trigger on phrases like "find me a photo of", "search for icons", "I need background music", "find video footage", "search fonts", "找一张图片", "搜素材", "帮我找图标/视频/音乐/字体". Covers Pexels, Unsplash, Pixabay, Iconify, Freesound, Google Fonts and more—with API-backed search where available
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Build scene-by-scene chapters that advance left to right on one fixed stage while the user scrolls vertically, using native scroll as the only input. One pure function turns scrollY into scene, dwell, and move, so forward and reverse scrolling, scrollbar drags, fast skips, and reloads at depth all land on the right frame. Covers dwell versus transition budgets, a burn-wipe or pan between scenes, chapter index and progress UI, glide-to-scene links that skip intermediate scenes, and keyboard and reduced-motion behavior. Use for horizontal scrollytelling, multi-scene product tours, “scroll down to travel sideways,” chapter carousels driven by the wheel, or any piece where a wheel-jacked slider keeps breaking on touch, keys, refresh, or back.
Motion Prompt (showheyohtaki.github.io/motion-prompt) is a numbered library of names for motion-graphics moves, camera moves and transitions, UI components, landing-page and web effects, and photo looks and lighting, each with a moving sample, a spec of its timings and easing, and dependency-free Canvas 2D code. The main use: open the gallery for the user with the pick command, let them tick what they want, receive their picks, then rebuild exactly those in the project (Canvas, Remotion, CSS/SVG/Lottie, After Effects) or turn them into prompts for video or image models. Use when the user wants to see or choose from the library, e.g. "open the motion-prompt library", "show me the list", "what moves are there?", "I don't know the name, let me pick", "motion-prompt のライブラリ出して", "一覧見せて", "どんな演出がある？", "分からないから選びたい"; when they paste picks copied from the gallery; or when they give element numbers, e.g. "use #012 and #045", "今のタイトルを #005 に差し替えて".
Select semantically appropriate icons for websites using Lucide, Heroicons, or Phosphor. Covers concept-to-icon mapping, React/HTML templates, and tree-shaking patterns. Use when: building feature sections, service grids, contact info, navigation, or any UI needing icons. Prevents emoji usage, ensures consistency.
How to design and build modern, premium-quality frontend interfaces that look like high-end SaaS products, modern AI tools, and award-winning design websites — not generic templates. Use this skill whenever the user asks to build a frontend, create a landing page, design a dashboard, scaffold a web app UI, build a SaaS interface, create a portfolio site, or produce any user-facing web interface. Also use when the user says "make it look modern", "build me a beautiful UI", "create a homepage", "design a pricing page", "add animations", "make it cinematic", "add liquid glass", "add scroll animations", "use 2026 design trends", or mentions frontend design, UI/UX, component architecture, motion design, hero sections, responsive layouts, or CSS animation.
Expert blueprint for mobile platforms (Android/iOS) covering touch controls, virtual joysticks, responsive UI, safe areas (notches), battery optimization, and app store guidelines. Use when targeting mobile releases or implementing touch input. Keywords mobile, Android, iOS, touch, InputEventScreenTouch, virtual joystick, safe area, battery, app store, orientation.
SwiftUI interface implementation patterns aligned with the iOS 26 / Swift 6.2 clinic modular MVVM-C architecture, grounded in Creative Selection and Design Like Apple principles. Use when building new SwiftUI views/screens while respecting Domain/Data boundaries, App-target route-shell navigation, and production-grade accessibility/interaction standards
Improve user onboarding flows to increase activation and retention. Use when asked to design welcome screens, setup wizards, product tours, onboarding checklists, or activation sequences. Trigger phrases: “onboarding flow”, “user activation”, “welcome screen”, “product tour”, “onboarding checklist”, “first-run experience”, “setup wizard”, “aha moment”, “time to value”, “user onboarding”, “activation rate”.
Create beautiful, professional HTML or React slide decks ready for fullscreen presentation. Use this skill when the user wants to: create a PPT/slide/presentation from an idea or outline; build a visually stunning slide deck from existing content; generate an HTML presentation that can be projected fullscreen; convert a document into a presentation. Trigger when you hear: 'create slides', 'make a PPT', 'presentation', 'slide deck', 'pitch deck', 'vibe ppt', 'make a talk', or any request to create a presentation. This skill produces a single self-contained HTML/React artifact — no backend, no installation, no dependencies.
The Define, Build, Review, Refine loop and seven context artifacts (brief, content, mood boards, section specs, style guide, PRD, tasks) for building a premium SaaS marketing site with AI. Use when planning or building a SaaS landing page and you want the design context written down before any code.
Turn a photo of handwriting into a real installable font (TTF/WOFF/WOFF2). Use when the user shares a photo of handwritten letters and wants a font, asks to “make my font”, “handwriting font”, “turn my handwriting into a font”, “font from this photo/image”, asks for a handwriting font template, or wants to refine a font made earlier (smoother, thicker, fix a letter). Not for choosing, recommending, or identifying existing fonts — only for creating a font from the user's own handwriting.
Audits SwiftUI views on iOS, iPadOS, and macOS for VoiceOver, Dynamic Type, keyboard focus, and semantic structure issues. Use when reviewing or fixing SwiftUI accessibility — returns P0/P1/P2 findings with patch-ready fixes and manual verification steps.
Optimize signup and registration conversion funnels. Use when asked to improve signup rates, reduce form abandonment, audit registration flows, or optimize conversion funnels. Trigger phrases: "signup optimization", "registration flow", "form conversion", "signup CRO", "reduce abandonment", "signup funnel", "form optimization", "conversion rate optimization", "registration page".
Elite UX/UI & GSAP Motion Engineer. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
Design in a design tool (Figma or similar) on the repository's design system — write a brief for a new screen using only the contract's tokens, components and archetypes, or audit an existing design against the contract with a ranked remediation plan. Tool access goes through a configured provider. Use for "figma mockup", "audit this figma design".
Authoritative, machine-readable EDS design rules for color tokens, typography, spacing, elevation, icons, and page layout zones. USE FOR: looking up correct EDS CSS custom properties, typography variant names, spacing tokens, shadow/elevation tokens, icon usage rules, and Fusion Portal page layout conventions. This is a lookup reference consumed by other skills and agents — it has no standalone workflow. DO NOT USE FOR: React component props or usage examples (use fusion-research + mcp_fusion_search_eds), general Copilot coding tasks, or Fusion Framework API questions.
Apply 2026's top graphic design trends to any creative brief. Based on Kittl × Savee's 2026 Design Trends Report (10 trends + 2 honorable mentions), backed by Adobe, Figma, and Pinterest data. Use when: **Designing a brand identity** — pick the right aesthetic for your audience; **Creating social media assets** — use trending visual languages that perform; **Briefing a designer or AI image tool** — give precise style direction with vocabulary and references; **Refreshing a visual identity** — know what's rising vs saturating; **Building mood boards** — combine trends intentionally with data-backed rationale.
Create and refactor HTML5/JavaScript web designs from specifications or descriptions. Generates complete, accessible, responsive web designs with modern frameworks. Automatically verifies designs using Playwright MCP for accessibility and functionality testing. Use this skill when users ask to create web designs, mockups, landing pages, web applications, or refactor existing HTML/CSS/JS designs.
Per-page Codex review + targeted python-pptx / Beamer fixes for academic talk slides. Use AFTER /paper-slides (or any externally generated PPTX/Beamer) when the deck looks 'mostly OK' but the user wants a final pass that aligns visual weight with a reference, bumps PPTX fonts to projector-readable size, kills italic style leaks, fixes text-frame overflow, and catches per-slide layout drift. Trigger phrases: "polish slides", "slides 排版不对", "PPTX 字体太小", "和 Beamer 比一下", "per-page review", "和 codex 一页一页过".
Expert in building Telegram Mini Apps (TWA) — web apps that run inside Telegram with a native-like experience. Covers the TON ecosystem, Telegram Web App API, payments, user authentication, and building viral mini apps that monetize. Use when: telegram mini app, TWA, telegram web app, TON app, mini app
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.