Skills
96,770 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Generate beautiful, production-ready, animated single-file HTML landing pages. Use this skill whenever the user asks to create a landing page, marketing page, product page, startup homepage, SaaS landing, app launch page, waitlist page, or any promotional single-page site. Also trigger when user says "make a landing for...", "generate landing page", "build me a homepage", "create a product page", "landing page for my startup", or asks to improve/redesign an existing landing page. Covers both "from scratch" generation and "improve/convert" workflows. Outputs one self-contained HTML file with Tailwind CSS, vanilla JS animations, responsive design, dark/light mode, and curated visual style presets. Always use this skill even for simple landing requests — it ensures premium, non-generic output.
Edit images with OpenAI GPT Image 2 (the `/edit` endpoint of ChatGPT Images 2.0) on RunComfy — bundled with the model's documented prompting patterns so the skill gets sharper output than naive prompting against the same model. Documents GPT Image Edit's strengths (preservation language, multilingual in-image text editing, multi-reference up to 10 images, layout / typography precision), the schema, and when to route to Nano Banana Edit / Flux Kontext / GPT Image 2 t2i instead. Calls `runcomfy run openai/gpt-image-2/edit` through the local RunComfy CLI. Triggers on "gpt image edit", "gpt-image-edit", "chatgpt image edit", "edit with gpt image 2", or any explicit ask to edit with this model
Build HTML slide decks from materials (notes, articles, research documents, meeting minutes, URLs, verbal requests), verify diagrams, SVG and draw.io diagrams by measurement on a fixed 1600x900 canvas, and polish readability through a rejection loop with an evaluation sub-agent. Whenever someone says "make slides", "presentation material", "conference material", "proposal deck", "deck", "slides", "presentation", "turn this material into slides", or "summarize for a talk", use this skill first even if no format is specified. Also use it to improve slide quality issues such as text that is too small, too crowded, overflowing or hard to read, and to rework existing HTML decks. This skill also provides a "review mode" where the user points at elements on the generated deck and requests changes. Use it as well when asked to "let me review", "there are things I want to fix", "open the deck", "read the feedback", "fix the feedback I sent", or "fix this", if a deck already exists. Route to the pptx skill only when an editable .pptx file itself is the delivery requirement.
Handle Hotwire form workflows: form submission lifecycle, inline editing, validation errors, typeahead/autocomplete, modal forms, and external form controls. Prefer this skill when the core problem is correctness and UX of form interaction. Use hwc-navigation-content for pagination/tabs/filter navigation, hwc-realtime-streaming for WebSocket/Turbo Stream broadcasting, hwc-media-content for image/video/audio behavior, hwc-ux-feedback for generic loading/transition polish, and hwc-stimulus-fundamentals for framework-level Stimulus APIs not tied to forms.
Build Hotwire navigation and content-discovery flows: Turbo Frame pagination, tabbed navigation, lazy loading, faceted filtering/search, cache lifecycle, scroll restoration, and visit/render control. Prefer this skill when the core problem is request/response navigation state and browser history behavior. Use hwc-forms-validation for form validation and inline edit flows, hwc-realtime-streaming for WebSocket/Turbo Stream push updates, hwc-media-content for image/video/audio features, hwc-ux-feedback for generic loading/progress/transition polish, and hwc-stimulus-fundamentals for Stimulus APIs not centered on navigation.
UI animations necessity judgment, recommendations for motion design, implementation strategies, and performance/accessibility reviews. Targets include hover, active, focus, popover, tooltip, dropdown, dialog, tab, segmented control, card, button, toast, accordion, carousel, scroll-linked animation, View Transitions, and more.
Research and use customer language across Product and Marketing. Use when writing product copy, crafting landing page messaging, or need to understand how customers describe their problems. Sales Safari methodology for finding watering holes, extracting pain language, and creating resonance.
lyt-series skill for summarizing competitor and Top-store main-image samples. Use after the user provides multiple competitor main images, Top-store main images, high-selling product card screenshots, image-folder paths, links, or sample tables. Organize sample boundaries, label main-image expression patterns, summarize recurring patterns, and derive testable main-image formulas and image-revision briefs. Only summarize sample expressions and testing hypotheses; do not directly attribute clicks or conversions to the main image based on sales, rankings, or Top status. Triggers: /lyt-image-patterns, /主图样本归纳, /Top主图分析, /竞品主图分析, “总结这些主图打法”, “提炼主图公式”
lyt-series skill for diagnosing product main images and detail pages. Use after the user uploads their product main images, secondary images, long detail-page images, product page first screens, product card screenshots, competitor pages, before-and-after versions, or related business data. Assess whether the page helps users quickly understand the product, gives them reasons to click and buy, builds trust, and resolves concerns. Provide page attribution, revision priorities, and a single-variable validation plan only when the evidence is sufficient. For TikTok Shop and cross-border e-commerce product pages; not for generating detail pages from scratch, selecting products from scratch, validating product feasibility, summarizing batch patterns in Top/competitor main images, or reviewing a whole store's data. Triggers: /lyt-page-diagnosis, /商品页诊断, /主图诊断, /详情页诊断, “帮我看看这张主图”, “详情页哪里有问题”
Applies Material Design 3 icon guidelines using Material Symbols — Google's variable font icon system. Use this when working with icons, Material Symbols, icon sizing, icon accessibility, or when the user asks to apply Material Design 3 icon guidelines.
Applies Material Design 3 Expressive layout, spacing, and size hierarchy principles including grid systems, responsive design, and elevation. Use this when working on page layouts, spacing, grids, responsive design, or when the user asks to apply Material Design 3 layout guidelines.
Creates interactive educational MicroSims, routing to the best-matched generator - p5.js, Chart.js, Plotly, Mermaid, vis-network, timelines, maps, Venn, causal-loop/feedback-loop diagrams (CLD), concept-classifier sorting quizzes, infographic overlays with callout labels, Docker Python labs (runnable code blocks), and fact-verified statistics posters (every numeric claim checked against a cited source before rendering). Generates complete MicroSim packages with HTML, JavaScript, CSS, documentation, and metadata.
Mobile-first design and engineering doctrine for iOS and Android apps. Covers touch interaction, performance, platform conventions, offline behavior, and mobile-specific decision-making. Teaches principles and constraints, not fixed layouts. Use for React Native, Flutter, or native mobile apps.
Capture current page layout, styles, and structure from a live web page using PinchTab browser automation. Use when you need to understand the existing UI before making changes — captures screenshots, DOM structure, computed styles, and layout properties. Useful as a pre-implementation baseline for frontend or UI-affecting changes.
Create research posters using HTML/CSS that can be exported to PDF or PPTX. Use this skill ONLY when the user explicitly requests PowerPoint/PPTX poster format. For standard research posters, use latex-posters instead. This skill provides modern web-based poster design with responsive layouts and easy visual integration.
Comprehensive React Flow (@xyflow/react) patterns and best practices for building node-based UIs, workflow editors, and interactive diagrams. Use when working with React Flow for (1) building flow editors or node-based interfaces, (2) creating custom nodes and edges, (3) implementing drag-and-drop workflows, (4) optimizing performance for large graphs, (5) managing flow state and interactions, (6) implementing auto-layout or positioning, or (7) TypeScript integration with React Flow.
Use when writing Python code with the Rich library — console output with markup, tables, progress bars, syntax highlighting, pretty printing, logging, or tracebacks. Covers Console, markup syntax, renderables (Panel/Table/Tree), Progress, Live, RichHandler, and the __rich_console__ protocol.
SaaS product design methodology for building user-facing application features. Covers: onboarding, empty states, billing UX, feature gating, dashboard design, notification patterns, settings/admin UX, audit trails, loading states, multi-tenancy. Use when: designing new SaaS features, creating dashboards, planning onboarding flows, or reviewing product-level UX decisions.
Build and debug SceneKit scenes where one 3D object (a product, badge, coin, wheel) performs on a transparent stage inside a SwiftUI app - studio lighting, real shadows, baked keyframe choreography, hand-rolled physics, gestures and haptics, multi-scene sequencing. Use when working with SCNView or SceneView in SwiftUI, UIViewRepresentable 3D scenes, product or hero-object animation, roll or spin entrances, a first-frame hitch when a scene appears, shadows missing or wrong, metal rendering black, choreographed 3D motion that must stay interruptible, a continuous vapor stream (vent air, steam, mist) drawn as a shader-driven sheet, a liquid-metal or jelly blob (noise-deformed surface with mirror reflections and tap ripples), chrome or gold that looks cartoon-flat instead of real, HDRI image-based lighting, free trackball rotation of an actor, deterministic screenshot testing of shader-driven scenes, cutting an actor in two with a finger swipe (runtime mesh slicing with sealed cross-sections and a falling piece), a die-struck relief object (badge, coin, medallion) built from a heightfield with multiple finishes on one mesh, an actor crumbling into debris that falls and rests on the floor, reproducing a real object's motion from photos or video, or keyframed motion that stutters at its own keyframes. Not for RealityKit, ARKit, visionOS, or full game worlds.
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when "scroll animation, parallax, scroll storytelling, interactive story, cinematic website, scroll experience, immersive web, " mentioned.
Generates walkthrough videos from Stitch projects using Remotion. Downloads screenshots from Stitch screens, builds a Remotion composition with transitions and text overlays, and renders to MP4. Use with stitch-mcp-list-screens and stitch-mcp-get-screen for screen discovery.
Meta-skill for creating new stitch-kit skills. Enforces naming conventions, SKILL.md structure, examples format, and the Design-First SOP. Use when adding new framework support, a new domain-specific prompt architect, or any new capability to the stitch-kit plugin.
Tailwind CSS v4 guidance: utility-first patterns, @theme directive for color/spacing/font config, @source for content paths, dark mode, responsive design, oklch colors, custom variants, v4 vs v3 differences. Use when user writes Tailwind utility classes, configures @theme or @source in CSS, asks about v4 syntax, or styles components.
One-stop mobile review — the umbrella for the thumb-first suite. Runs a design-judgment pass AND a platform-technical pass over a mobile app/screen/PWA, then merges them into ONE prioritized report that keeps design forks (opinions) and platform defects (objective, P0–P3) visually distinct. Use when the user wants to review, audit, critique, or design a mobile app, screen, or PWA — 'review my mobile app', 'is this good mobile UX', 'audit this screen', 'check my PWA'. Routes to: full review (default), design-only (thumb-first-design), or platform-only (thumb-first-platform). Platform-agnostic on judgment; web/PWA-deep on technical, with native handoff.
Generate article or newsletter thumbnail candidates using the Gemini API from inside Claude Code. Claude reads article copy, proposes composition concepts, writes image generation prompts incorporating brand specs, calls Gemini to generate the images, evaluates the results via computer vision, and returns ranked candidates with rationale. Use when asked to create thumbnails, generate cover images, or produce visual candidates for an article or newsletter.
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
Comprehensively upgrades and polishes an existing website's UI design — improving layout, typography, spacing, depth, visual hierarchy, and component refinement — while preserving the site's existing color palette. Also adds smooth, staggered blur+slide-up reveal animations using Framer Motion (or CSS if plain HTML) triggered when elements enter the viewport. Use this skill whenever the user wants to improve, modernize, polish, or animate an existing website or React/HTML page. Trigger even when the user only mentions "make it look better", "animate it", "improve the design", "upgrade the UI", "make it more modern", or "add scroll animations" — this skill handles all of those, not just animation.
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples
Add a post-processing effect stack to a React Three Fiber scene — bloom, depth of field, vignette, chromatic aberration, noise/grain, tone mapping, SSAO, and custom effects via @react-three/postprocessing. Use when the user wants the render to look more cinematic, polished, or "premium," or asks for glow/bloom/DOF/film-grain style effects
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
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.
Use this skill when a product engineer wants to audit existing code for Earth Design System (EDS, `@adaptavant/eds-core`) anti-patterns, misuse, deprecated APIs, or HTML accessibility violations. Triggers include 'audit EDS usage', 'check for EDS anti-patterns', 'review this file for EDS violations', 'is this EDS-compliant', 'lint my EDS code', or any request to scan a file or directory for design-system misuse. Detection-only — produces a findings report with suggested fixes and refers remediation to the `co-author` skill. Do NOT use this skill for authoring new EDS code (use `co-author`), reviewing PRs (use `pull-request-reviewer`), or fixing bugs inside `packages/core`.
Methodology for auditing A/B testing of consent banners to ensure compliance with equal ease of acceptance and rejection. Covers CNIL enforcement patterns including the EUR 150M Google fine, dark pattern detection methodology, manipulative design identification, and regulatory-compliant experimentation boundaries.
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.