Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
A two-spread digital e-guide preview — page 1 is a cover (display title, author, "What's inside" stats, table of contents teaser); page 2 is a spread (lesson body with pull-quote and a step list). Lifestyle / creator brand tone. Use when the brief asks for an "e-guide", "digital guide", "lookbook", "lead magnet", "creator guide", "playbook", "PDF guide", or "电子指南".
Original prompt for the big-picture, small-text explanation method. Use when the user wants to quickly understand an unfamiliar topic, explain it with more visuals and less text, mentions eli5, or says they completely don't understand something. Use it when they want visuals or a page they can open; not when a text explanation is enough. Trigger phrases include big picture, small text, eli5, explain as if I know nothing, illustrated explanation, explain it with little text, I don't understand at all, and generate an explanation page. Produce an HTML explanation page with a large illustration and minimal text.
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
For marketing and gtm work: bind launches, campaigns, events, and brand plans to growth and pipeline outcomes. Built around the core query "annual-marketing-plan", with GTM strategy lead judgment, buyer-ready proof, and this outcome: approve launch plan, campaign budget, or GTM motion.
Use when an SPA or SSR app flashes the wrong UI before client-side data resolves — an app-shell skeleton shown to visitors who get bounced to login, a results skeleton before "no results found", a light-theme flash before dark mode, a generic placeholder that swaps to something jarringly different. Covers resolving state at the edge/server, optimistic hint cookies, redirect-back (returnTo) flows, and how to test the loading window.
Turn a dense PDF (or one chapter or section) into a single-file interactive HTML page that is faster to understand than the original and fun to explore. Start with a 30-second summary, include hands-on scenes and guess-then-reveal interactions, cite every number with a link that opens the original sentence and page, illustrate it in a chosen art style, then self-audit against the source. Use whenever someone wants to make a PDF, paper, textbook chapter, annual report / 10-K, rulebook, manual, contract, novel chapter, or lecture notes easier to read, “come alive,” interactive, explorable, scrollytelling, or into a mini web app, interactive lesson, or courseware—even if they only say “this PDF is unreadable,” “help me get through this,” or mention a Gemini Canvas / Claude Artifacts-style “PDF to web app.” Chinese triggers: 把 PDF 做成网页、可交互网页、互动课件、可视化讲解、读不下去的 PDF、论文/教材/财报/规则书/名著变成能玩的页面、Canvas 那种 PDF 变网页
Must invoke for any request to create, edit, evaluate, understand, or improve a RevenueCat Paywall in the dashboard—including questions about a specific paywall or general paywall design recommendations, and uploading images or fonts to paywall resources / the Media Gallery. Not for presenting a paywall in app code (use revenuecat-paywall).
Designing free-to-paid conversion flows for SaaS products. Trigger moments, paywall design, value demonstration, upsell vs downsell, win-back flows, churn prevention. Honest about paywall-everywhere (gates everything aggressively), free-forever-trap (no upgrade path surfaces), and value-triggered-upgrade (paywall surfaces at moments of demonstrated value) patterns. Triggers on upgrade flow, paywall, free-to-paid, freemium conversion, trial conversion, plan upgrade, subscription upgrade, win-back flow, churn prevention. Also triggers when free-to-paid conversion is low, when paywalls are blocking the wrong moments, or when upgrade flows are being scoped for the first time.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics
Feature-level UX audit for React/Next.js code. Catches what Lighthouse, axe, ESLint, and Storybook miss — state coverage gaps (missing loading/empty/error), form data loss on validation, broken focus management, optimistic UI without rollback, skeleton-induced layout shift, vague microcopy, and 25+ other modern frontend UX bugs. Diff-aware (audits changed files only) and produces a 3-tier ship-readiness verdict (release-blocker / fix-this-sprint / backlog) grouped by surface, with concrete fixes using modern React 19 APIs (useActionState, useFormStatus, useOptimistic, useTransition, Suspense). Use before merging a frontend PR, before shipping a feature, or when asked "is this checkout/onboarding/dashboard ready?", "review this PR for UX bugs", "audit this component", "what would break in production?", "is this ready to ship?"
Creates a new Power Pages site from an SPA or non-SPA template, or scaffolds an SPA from scratch using React, Angular, Vue, or Astro. Guides requirements discovery, template selection, provisioning, design, validation, and deployment. Use when the user wants to create, build, use a template for, or scaffold a new Power Pages website or portal
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Optimize landing pages for higher conversion rates using proven frameworks and design patterns. Use when designing, reviewing, or improving landing pages, hero sections, pricing pages, CTAs, or when the user asks about conversion optimization.
Create or redesign production-grade standalone websites in semantic HTML, CSS, and JavaScript with distinctive art direction and Codex-generated raster imagery. Use for landing pages, marketing sites, portfolios, product pages, editorial sites, and static dashboards that do not require React, Vue, Next.js, or another application framework. Do not use for framework-based applications, deployment-only work, or isolated components that belong in an existing framework project.
Accessibility patterns for WCAG 2.2 compliance, keyboard focus management, React Aria component patterns, cognitive inclusion, native HTML-first philosophy, and user preference honoring. Use when implementing screen reader support, keyboard navigation, ARIA patterns, focus traps, accessible component libraries, reduced motion, or cognitive accessibility.
Generate a Fiori Elements V4 LROP app (list report + object page) driven by @UI.* annotations on a V4 RAP service, using the Fiori MCP server's 3-step (list_functionalities → get_functionality_details → execute_functionality) workflow. Use when asked to "build a Fiori Elements app", "generate LROP from this V4 service", "convert to annotation-driven UI", or "scaffold Fiori Elements V4".
Apply a Classic Easter seasonal overlay: pastel Theme/StyleBox injection, confetti/shimmer VFX, elastic juice, mesh surface_override painting, cursor/audio swaps, and a date-window activation gate with player opt-out. Use when shipping holiday skins, April events, or egg-hunt juice without mutating shared .mesh/.tres assets. Keywords: pastel, seasonal Theme, StyleBox, confetti, Easter egg, surface_override, TRANS_ELASTIC, Disable Seasonal Themes, activation gate.
Use when integrating, generating, refactoring, reviewing, or debugging Make App record-list sorting with @qfei-design/make-app-sort. Triggered by sorting, advanced sorting, multi-field sorting, sort priority, ascending/descending, drag-and-drop sort conditions, table/header/column sorting, openWithField, sortable capabilities, Entity Preset sort save/load/echo, records sort payloads, or sorting tests. Covers one integrated toolbar, CanvasTable header, Entity Preset, and Service sorting flow. When make-app-actions is present, a successfully applied sort must clear its selection and invalidate pending action work; draft edits and failures preserve selection. Does not own page shell/layout, CanvasTable rendering internals, Service route implementation, permission policy, auth, runtime packaging, DSL modeling, Make CLI execution, npm package internals, or grouping
Tailwind CSS performance optimization including v4 improvements. PROACTIVELY activate for: (1) Tailwind v4 Oxide engine performance, (2) Lightning CSS minification, (3) reducing CSS bundle size, (4) content config tuning to avoid scanning unused files, (5) safelist for dynamic classes (without bloating), (6) production builds with @apply minimization, (7) critical CSS extraction, (8) HTTP caching of generated CSS, (9) avoiding @apply overuse (utility-first preferred), (10) PurgeCSS / content-detection edge cases. Provides: performance tuning checklist, Oxide engine notes, content config patterns, safelist guidance, and critical-CSS workflow
Use when building App Store screenshot pages, generating exportable marketing screenshots for iOS apps, or creating programmatic screenshot generators with Next.js. Triggers on app store, screenshots, marketing assets, html-to-image, phone mockup.
Evaluate UI designs against usability heuristics, UX laws, interaction patterns, interaction design principles, information architecture, and content quality. Conduct heuristic evaluations, structured design critiques, pattern-based reviews, posture analysis, excise audits, IA evaluations, and UX writing reviews. Provides specific, actionable feedback grounded in established principles rather than subjective opinion.
Generate a phased delivery orchestration plan for creative-direction-driven work: which skills run when, what locks at which gate, how handoffs occur, and how the cadence is implemented in the team's tools (Jira, Linear, Notion, Figma, GitHub) with AI agents via MCP and CLI. Provides a temporal map of phases, lock points, handoff specs, gate definitions, and QA verification gates. Distinct from `creative-brief` (static project brief) and `creative-direction` (aesthetic direction). Triggers on integration orchestrator, delivery cadence, project orchestration, when does the brief lock, how to phase creative direction, design-development handoff, QA gate, agent-driven QA, and when a creative-direction project is starting, mid-flight with broken cadence, or integrating AI agents into PM workflow. Does NOT fire for project scoping (use `creative-brief`), aesthetic direction (use `creative-direction`), or general project management without a creative-direction throughline.
Implement WCAG 2.2 accessibility patterns in Shopify Liquid themes. Covers e-commerce-specific components including product cards, carousels, cart drawers, price display, forms, filters, and modals. Use when building accessible theme components, fixing accessibility issues, or reviewing ARIA patterns in .liquid files
Produces a design-plan (living document like an exec-plan) that maps an app domain to feature groups using Apple Design DNA patterns. Each feature group becomes a milestone buildable in one ios-taste session. Use when the user describes an app idea, domain, or workflow and needs a structured plan before building. Triggers on "plan this app", "what features does X need", "design plan", "feature breakdown", "what screens do I need", or any pre-build planning question. Also trigger when the user provides workflow notes or user interview results. CRITICAL: This skill produces a DESIGN-PLAN document only. It does NOT generate SwiftUI code, layouts, or visual design.
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.
A multi-frame gamified mobile app prototype with three phone frames on a dark showcase stage. Frame 1: cover/poster; Frame 2: today's quests with XP ribbons and a level bar; Frame 3: quest details. Vivid quest tiles, level ribbon, bottom tab bar. Use when the brief asks for a “gamified app,” “habit tracker,” “RPG-style life app,” “level-up app,” “daily quests,” “XP/streak app,” or “ELI5-style explainer app.”
Create HTML playgrounds with sliders, knobs, toggles, and live previews for tuning algorithm parameters, animation values, design tokens, layout dimensions, or any value that’s painful to express in text. Always include a Submit button (calls `submitToClaude`) so chosen values can be sent back to Claude Code. Use whenever the user wants to experiment with values, fine-tune behaviors, explore a parameter space, or pick from a continuous range—debounce timings, color values, easing curves, threshold values, layout dimensions, anything tunable.
Create animated, explorable editorial diagrams in 45 types (architecture, flowchart, sequence, state, ER, DB schema, UML class, swimlane, timeline, gantt, journey, tree, org chart, nested, venn, quadrant, fishbone, wardley, bar, line, scatter, sankey, treemap, heatmap, 3D isometric objects, floor plans and exploded views) as standalone HTML from a short JSON spec. Use when the user asks to draw, diagram, chart or visualize a system, codebase, flow, process, API call sequence, hierarchy, data or a physical object (a chair); to convert Mermaid, Graphviz/DOT, PlantUML, D2, draw.io, Excalidraw, SQL or CSV into a clean diagram; or to export a diagram as PNG, JPEG, SVG, GIF or MP4. Also for everyday plans: trips, moves, job hunts, approvals, budgets, where money goes.
Always invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex/grid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, pricing sections, forms, inputs, badges), adding dark mode variants, fixing spacing or typography, and Tailwind v3/v4 work. The core use case: writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue). Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML/CSS component, CSS file audits, build tool configuration, and vanilla CSS.
Design engineering skill for AI coding agents: opinionated rules for how interfaces should look, move, and feel, a required discovery phase before coding, domain references, three style variants (minimal, editorial, dense-dashboard), and an anti-slop approach that flags generic patterns such as centered hero sections, Inter-only typography, and three-column card grids. Covers premium UI taste, component patterns, and design-engineering workflows.
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.