Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Applies Apple's Project Purple design philosophy for radical innovation. This skill should be used when the user wants to challenge industry conventions, approach open-ended problems requiring disruptive thinking, or when standard brainstorming needs a breakthrough approach.
Use this skill to run a scored 53-point conversion audit covering customer focus, narrative, copy, design, calls to action, and proof. Trigger it when a landing, sales, product, or ad destination page needs diagnosis, pre-launch review, or prioritized conversion fixes.
Systematically evaluates existing designs against cognitive science principles using repeatable checklists, scoring rubrics, and severity-classified fix recommendations. Use when conducting design reviews or critiques, evaluating designs for cognitive alignment, performing quality assurance before launch, diagnosing usability issues, or choosing between design alternatives with objective criteria.
Implements Flutter screens from designer screenshots and handoff notes using Material 3. Two-pass workflow: mockup-brief with Implementation spec, then AppShell + route screens. Use when approved mockups exist for a HeyEddi Flutter app.
Analyze a set of design samples (HTML mockups + website URLs) and produce a structured style guide that anchors the rest of the stardust redesign pipeline. Use when the user supplies reference designs ("design samples", "mockups", "inspiration sites", "style references") and wants to extract a consistent visual language — type system, color palette, spacing, motion, and reusable component patterns — before redesigning a target site. Triggers on phrases like "distill these samples", "extract a style guide from these examples", "use these as design references", or "analyze these mockups". Outputs a `trait-matrix.json` (structured per-sample + cross-sample design tokens) and a `SAMPLES.md` narrative brief that `stardust:direct` reads under Mode B (anchor-reference precedence) when picking a redesign direction.
Complete shape and graphics overlay system. PROACTIVELY activate for: (1) Drawing rectangles (drawbox), (2) Grid overlays (drawgrid), (3) Circles and ellipses (geq), (4) Image watermarks and logos, (5) Lower third graphics, (6) Progress bars and indicators, (7) Animated overlays, (8) Blend modes and compositing, (9) Safe area guides, (10) Generated patterns (gradients, noise, checkerboards). Provides: Filter syntax reference, position expressions, color format guide, blend mode examples, performance optimization tips. Ensures: Professional graphics overlays and visual effects on video.
Persistent, recoverable GSAP workflow for coding agents. Use when the user wants to animate a new page or section, or improve an existing page/component with GSAP. Route new/greenfield work to gsap-new and existing-code improvement work to gsap-refactor. Always use .gsap artifacts as the source of truth so any fresh agent session can resume without chat history.
Migrates a non-SPA (classic) Power Pages site from Bootstrap 3 to Bootstrap 5. Downloads the site, runs the pac pages bootstrap-migrate engine, reviews the change report, applies AI-assisted fixes for the residual hierarchy/CSS changes the engine only flags, uploads the migrated site (which auto-enables the Bootstrap 5 runtime flag), verifies the flag, and validates. Use when the user wants to upgrade an older Bootstrap-3 portal to Bootstrap 5. NOT for SPA sites (React/Vue/Angular/Astro) — those are never Bootstrap-3.
Open Orbit briefing skill — selected by the Orbit pipeline when GitHub is the user's only connected connector, or when the user explicitly scopes their daily digest to GitHub. Pulls the past 24 hours of PRs, review requests, issues, CI runs, and merges from the user's authenticated GitHub connection and renders them in a layout that mirrors GitHub's native Notifications + PR-diff visual language. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live GitHub data.
Use when the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions “paywall,” “upgrade screen,” “upgrade modal,” “upsell,” “feature gate,” “convert free to paid,” “freemium conversion,” “trial expiration screen,” “limit reached screen,” “plan upgrade prompt,” “in-app pricing,” “free users won't upgrade,” “trial to paid conversion,” or “how do I get users to pay.” Use this for any in-product moment where you're asking users to upgrade. Distinct from public pricing pages (see page-cro)—this focuses on in-product upgrade moments where the user has already experienced value. For pricing decisions, see pricing-strategy.
Create visually rich PowerPoint (.pptx) presentations from academic papers, research notes, or any content the user wants in slide format. Uses PptxGenJS + LaTeX formula rendering. Always use this skill when the user wants PPT/PPTX output instead of Beamer/LaTeX slides. Trigger on: powerpoint, pptx, PPT, make a ppt, 做PPT, 做幻灯片, make slides (non-LaTeX), prepare a presentation (when context implies PPT), 做个报告, presentation slides, help me prepare a talk (when not Beamer), convert paper to slides (when PPT implied). Even if the user just says "make slides" or "做个演示" without specifying format, trigger this skill and ask whether they want PPT or Beamer — don't silently default to Beamer. Do NOT trigger on: beamer, latex slides, .tex files, tikz — those belong to the beamer skill.
RGAA 4.1.2 compliance audit tool for websites and React/HTML components. Use this skill to audit the RGAA compliance of a site or component: when the user asks for an accessibility audit, an RGAA compliance report, when they want to know whether their code/site complies with RGAA, when they mention "audit RGAA", "conformité RGAA", "non-conformités", "déclaration d'accessibilité", or when they share HTML/React code for a posteriori checking.
Recreate websites, application screens, components, dashboards, landing pages, and responsive interfaces from attached screenshots or visual references as accurate, maintainable frontend code. Use when implementing a supplied screenshot, matching an existing UI image, converting mockups into code, rebuilding multiple screens, or correcting a coded page whose rendering differs from a reference. Inspect each image and intelligently infer whether it represents desktop web, tablet, or mobile, then implement and verify the appropriate responsive mode. Supports existing and new projects, any suitable frontend stack, responsive inference, asset matching, accessibility, interaction reconstruction, and visual comparison.
Install CC0 sound effects from the Elements registry. Use when user needs UI sounds (click, pop, notification), transition sounds (whoosh, swoosh), cinematic sounds (boom, riser, glitch), or audio for video production. Triggers on "sound effect", "SFX", "audio", "notification sound", "click sound", "whoosh", "UI sound", "sound for video", "play sound", "useSound".
Use taste as a competitive moat and business advantage. In the AI and vibe-coding era, execution is commoditized. Taste is the defensible edge. Use when advising founders on product differentiation, building product culture, evaluating why some products win despite fewer features, or understanding taste as a strategic asset.
Patterns for delegating UI work to agents: one synthesis agent versus specialized agents, multi-agent pipelines for research, design, implementation, and review, and clean handoffs between them. Use when a UI task is too large for one pass or you are designing an agent workflow for components or design systems.
Use when the user needs to build or maintain design tokens, component libraries, theme systems, or Tailwind CSS v4 configurations with responsive patterns. Triggers: user says "design system", "design tokens", "component library", "theme", "Tailwind config", "dark mode tokens", "color system", building reusable UI components.
Orchestrate an end-to-end UI design workflow using the bundled specialist skills for briefs, information architecture, style references, design tokens, screen composition, interaction states, accessibility, and visual QA. Use when an installer loads this repository as one root skill or when the user wants the complete UI design agent.
Local vision CLIs: glance (describe/ask/OCR an image), ground (locate a target, pixel box), detect (element inventory), trace (image to SVG geometry), crop (cut a pixel box to a file), and scripts/html_shot.py (HTML file to image). Use for any task involving an image — questions, text, splitting and transcribing long screenshots or chat histories, locating elements, comparing, rebuilding as HTML/SVG, digitizing a sketch or diagram, reading values off a chart, operating a GUI from screenshots — and to re-check an image yourself when a description you were given lacks a detail.
ALWAYS use after design/implement for screenshot QA: capture, contrast, fix, document. Mandatory after handoff. Fast widths 375/768/1440; before flagship done use --preset done (375/430/768/1024/1440/1920). Auto-fix — never report-only unless user says audit-only. Edges must read on the plane.
Build GSAP motion without restyling, as single effects or the full treatment: for "we're animaxxing", every element enters from a blank page, rests, and leaves. Text: split, scramble, glitch, typewriter, and speak-in entrances, scattering headlines, letter waves, text on a path, count-ups, odometers. Scroll: reveals, scrubbing, parallax, pinned scenes, stacking cards, zoom-through, horizontal runs, waypoints, smooth scroll, paging. Pointer: magnetic, tilt, spotlights, directional fills, press ripples, shakes, cursor followers, image trails, proximity, label rolls, underlines, weight hovers. Drag: throw tracks, endless loops, card stacks, sortable lists, swipe to dismiss. Also page covers, print effects, Flip morphs, menus, dialogs, tabs, state buttons, media and SVG effects, marquees, CustomEase, sound, confetti, particles, and hover stuck on touch. Also finds a feel: premium, calm, playful. Pair with the matching GSAP framework skill. Not for visual redesign, routing, or GSAP API questions.
Apple Human Interface Guidelines (HIG) reference for designing iOS, iPadOS, macOS, tvOS, visionOS, watchOS apps. Covers UI components, layout, accessibility, typography, navigation, inputs, and platform technologies. Use when designing Apple platform UIs, reviewing SwiftUI/UIKit patterns, or applying HIG design principles to any app.
Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, checking heading hierarchy, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, heading hierarchy, heading levels, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, scaled input text, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.
A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered single column, table fallback). Use when the brief asks for an "email", "newsletter blast", "MJML", "product launch email", or "email template".
Product design partner for @taste-penpot. Use on design, UI, look, polish, or handoff requests AFTER taste-penpot has chosen the look. Records personas, route job, and tokens into .heyeddi/design.md, then hands off to @heyeddi-handoff or @design-handoff-flutter. Does not invent a second palette, type system, or multi-step aesthetic. Screenshot gate still applies before done.
Implements search and filter interfaces for both frontend (React/TypeScript) and backend (Python) with debouncing, query management, and database integration. Use when adding search functionality, building filter UIs, implementing faceted search, or optimizing search performance.
Lint a Figma node tree for WCAG 2.2 accessibility AND design-system quality — contrast, target size, focus indicators, color-only signaling, hardcoded colors, missing text styles, detached components, and more. Use when the user wants a design-side audit BEFORE handoff: triggers 'lint this frame', 'check accessibility', 'WCAG audit', 'is my design accessible', 'find contrast issues', 'check color contrast', 'find hardcoded colors', 'are my components using tokens', 'design QA', 'a11y check on this page', 'audit my design for issues'. Walks the tree from a node (or the whole page) and returns findings with severity (critical/warning/info) and WCAG level (A/AA/AAA/best-practice). The native Figma MCP has NO design-side linting — this is unique to this collection. For the deep per-component a11y scorecard use audit-accessibility-figma; for CODE-side (HTML) checks use scan-code-accessibility-figma.
Create clear, polished before-and-after screenshots from the actual running product for a GitHub pull request. Use when a UI change needs visual proof: capture matching product states, crop to the relevant UI, stitch and caption one comparison image, attach it natively to the PR, and keep the image out of the 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.