Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Guides porting existing Android 2D apps to Meta VR and Horizon OS, including input adaptation, panel layout, and design requirements. Use when adapting a mobile Android app for Meta VR. For UI design decisions, use hz-panel-designer if available. Build path: Standard Android; use hz-quest-verify-first if the build path is unclear.
Builds sophisticated admin interfaces and frontend components using Magento's UI Component framework. Use when creating admin grids, forms, modals, or data-driven interfaces. Masters XML configuration, KnockoutJS templates, data providers, and complex form/grid implementations.
Use when implementing navigation patterns, choosing between NavigationStack and NavigationSplitView, handling deep links, adopting coordinator patterns, or requesting code review of navigation implementation—prevents navigation state corruption, deep link failures, and state restoration bugs for iOS 18+
Use when work must be verified in local Canvas Workbench, or when the user asks to run, open, check, or author component mocks or page previews in Workbench. Verifies that Canvas Workbench is available through the project's package runner, starts the local Workbench dev server, and keeps Workbench verification as part of the implementation workflow
CSS animation adapter patterns for FrameVideo. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that FrameVideo must seek deterministically during preview and rendering.
Expert in the W3C DTCG token specification — token structure, color spaces (sRGB, Display P3, OKLCH), references/aliasing, theme resolvers, and tools (jq, JSONata, Terrazzo, Figma exports). The authoritative skill for design token architecture.
Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.
Use when writing, debugging, or updating code that imports primevue (PrimeVue v5, UI component library for Vue 3). Provides setup with the required PrimeUI license key, deprecated API replacements, compound component usage, and design token theming.
Generate academic presentation-style HTML slide decks and browser reports from PDFs, structured text, Markdown, paper summaries, outlines, or research notes. Use whenever the user wants to convert a scientific paper PDF directly into an interactive HTML report, clickable web presentation, shareable browser deck, or PPT-like HTML output with figures, structured insights, section pages, and offline deck-directory output. In the Aut_Sci_Write suite, choose this skill when the user wants HTML/web output; choose sci-ppt when they explicitly need a .pptx file.
Validate Tailwind CSS v4 configuration and detect/prevent Tailwind v3 patterns. Use this skill when setting up Tailwind, auditing CSS configuration, or when you suspect outdated Tailwind patterns are being used. Ensures CSS-first configuration with @theme blocks.
Clone a website — two modes. SNAPSHOT = a faithful, self-contained offline copy of a page (HTML+CSS+JS+images in one file, exact bytes, SingleFile-style). RECONSTRUCT = AI reverse-engineer the page into a clean editable Next.js/Tailwind codebase (design tokens → component specs → parallel builders → visual-diff QA, the ai-website-cloner-template method). Use when the user wants to "clone this site", copy a page's design/UI + interactions, mirror a layout, save offline, or rebuild a site as editable code. Built-now-adapt-later: snapshot builtin works now; faithful live capture + the reconstruct pipeline are one-config engine adapters.
Work with the Webflow Designer API — either by building Designer Extensions (iframes inside the Webflow Designer) or by generating code snippets for the Designer API Playground. Covers element manipulation, styles, components, pages, variables, assets, error handling, CLI usage, and UI design patterns. Use when creating, debugging, or modifying Designer Extensions, OR when the user wants to run Designer API code in the Playground app.
Minimal 8-slide arrow-key keynote — each slide has its own solid-color background (indigo / cream / crimson / emerald / gray / purple / white / charcoal), coordinated colors, a 160px display title separated by a 4px short, thick accent line, a Mono list with arrow → prefixes, ← → kbd hints at bottom left and the slide number at bottom right, with generous breathing room. Ideal for keynotes, launches, and public talks where “there’s something to say but not much to show”.
Presenter-mode-only deck — tokyo-night default theme, switch among 5 themes with the T key, and each slide includes a 150–300-character verbatim script example (<aside class="notes">). Press S to open a popup (four magnetic cards: CURRENT / NEXT / SCRIPT / TIMER). For tech talks, public speaking, and lectures, especially when you’re afraid of forgetting your lines or need a teleprompter.
Red-amber warning deck — top/bottom 45° red-and-black hazard stripes, red strikethrough negative titles, L1/L2/L3 green/amber/red tier cards, dot-status alert boxes, policy-yaml code blocks (red left border + bad keyword highlights), red-and-green checklists, Q1 incident stacked bar chart. Suitable for safety / risk / incident reviews / red teaming / pre-launch AI reviews / policy-as-code.
White-background editorial-style deck — pure white background + 10-color rainbow bar at the top, 80–110px display titles, purple→blue→green→orange→pink gradient text, macaron soft-card group (pink/purple/blue/green/orange), black .focus pill with white text, oversized quote block. Also suitable for both Xiaohongshu posts and widescreen PPTs.
Detect UX antipatterns (smells) in interface descriptions using the uxuiprinciples smell taxonomy. Returns structured findings with matched symptoms, severity, and step-by-step remediation recipes. API key optional — full remediation recipes require uxuiprinciples.com API Access.
Autonomous pixel-perfect UI implementation loop for Next.js/React using Figma MCP and Playwright. Converts Figma designs to production-ready components with iterative visual validation. Auto-triggers on any request to implement Figma designs, including: “implement this Figma”, “build this page/component from Figma”, “create from Figma design”, “implement design”, “build this block”, and “create component from design”. Use for: (1) Building pages/components from Figma, (2) Pixel-perfect accuracy, (3) Responsive layouts, (4) Design token conversion.
This skill should be used when the user asks to audit, fix, check, review, or improve accessibility, a11y, ARIA, WCAG compliance, landmarks, labeling, heading levels, focus handling, keyboard navigation, keyboard shortcuts, screen reader support, invisible messaging, reading order, or touch / target size in UI5 application files (views, fragments, controllers). Also use when the user creates a new UI5 view, fragment, or controller and wants it to be accessible, or asks whether a specific control (Dialog, Table, Panel, etc.) meets accessibility requirements. Keywords: accessibility, a11y, ARIA, WCAG, screen reader, NVDA, JAWS, VoiceOver, landmark, landmarkInfo, accessibleRole, ariaLabelledBy, ariaDescribedBy, labelFor, tooltip, alt text, decorative, heading level, initialFocus, F6, fast nav, fastnavgroup, tabindex, CommandExecution, keyboard shortcut, InvisibleMessage, announce, reading order, reactiveAreaMode, target size.
Author, review, or explain Vanilla Lynx source that directly uses Element PAPI, delivered as a build-free `.lynxml` artifact or an Rspeedy project, including related build and serving workflows. Excludes ReactLynx, Canvas/WebGL, standalone API/CSS lookups, device-side runtime debugging, and bundle analysis
Turn a fuzzy subject — a problem description, an incident, a decision, a long-form idea — into a polished deliverable in the user's chosen format (md, html page, Artifact, image, or plain prose). Runs the writing production line (mine → structure → tighten) with stop-slop discipline, then hands rendering to using-design-skills. Invoke when the user wants something EXPLAINED WELL as a document/page, not when they just want code changed.
Build and edit Google Slides through the google-slides MCP tools - slides, grids of cards and columns, text boxes, shapes, images, tables, styling, layout inspection, and per-slide PNG rendering. Use when creating a deck, laying out slide elements, matching a template, or verifying how a slide looks.
Construir protótipos descartáveis para responder uma pergunta técnica, de interação ou visual específica, com a fidelidade mínima suficiente e sem herdar dívida técnica para produção. Use para spikes, provas de conceito e exploração de alternativas antes de uma decisão cara; não promover código de protótipo a produção sem reimplementação e validação completa; não use quando a pergunta já tem resposta documentada, use `$specsfy-specialist-technical-research` para isso.
Implements Syncfusion WPF DataGrid (SfDataGrid) component for displaying and manipulating tabular data in Windows Presentation Foundation applications. Use this when working with data grids, table views, or data binding scenarios. Supports sorting, filtering, grouping, editing, Excel/PDF export, drag and drop, master-detail views, summaries, and extensive styling options
Turns vibecoded, AI-looking UI into a designed interface with its own character. Finds a direction from the product itself, then fixes spacing, color, icons, copy, type, layout, details, visuals and motion in that order, and can generate a real hero visual with an image tool when one is available. Use when the user asks to unslop, polish, clean up or redesign a screen so it stops looking AI-generated, or when a UI shows the usual tells like purple gradients, glows, gradient text, emoji labels, "New ✨" badges, glossy blobs, uppercase tracked labels, pulsing elements or uneven spacing. Works on React, Tailwind, HTML and CSS, for dashboards, apps and landing pages.
Start here for any Canvas page-spec task. Use for create, modify, refactor, review, migrate, or validate work on page JSON files that sync with Canvas and render in Workbench. Establishes the canonical Canvas page-spec contract, including placement, structure, format constraints, and validation.
Motion and interaction design expert with two modes: build interactive components with purposeful motion, or audit existing animations for AI-slop patterns. Audit emits a branded HTML report with looping CSS demos per finding. Based on Emil Kowalski (restraint), Jakub Krehel (production polish), and Jhey Tompkins (creative experimentation), with lenses weighted to project context. Works with React, Framer Motion, CSS, and HTML.
Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention “native feel,” “desktop app design,” “Apple design patterns,” “sidebar layout,” “traffic lights,” or want to build tools/utilities that feel like they belong on macOS. This skill covers layout, composition, interaction patterns, animations, light/dark mode, and all the subtle details that make an app feel like Apple built it
Standalone multi-agent image generation skill for Hermes. Includes an internal design compiler, GPT-Image-2 generation via apimart.ai, case library reuse, interactive reference selection, batch workflows, and style-consistent series generation.
Implement and debug Motion for React in Next.js: local interaction, presence, layout, shared elements, scroll, reduced motion, and router integration. Use for explicit Motion/Framer Motion work or interactions that need it; prefer CSS for simple effects and framework-native view transitions for supported route cases.
Integrate, customize, and contribute to react-bits (github.com/DavidHDev/react-bits) — the largest and most creative library of animated React components. It covers Vite, Tailwind CSS v4, Three.js/Fiber, GSAP, and Framer Motion integrations. Use when the user asks about react-bits, animated React components, jsrepo registry, or contributing new animated components to the react-bits repository.
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.