Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
When the user wants to plan, map, or restructure their website's page hierarchy, navigation, URL structure, or internal linking. Also use when the user mentions "sitemap," "site map," "visual sitemap," "site structure," "page hierarchy," "information architecture," "IA," "navigation design," "URL structure," "breadcrumbs," "internal linking strategy," "website planning," "what pages do I need," "how should I organize my site," or "site navigation." Use this whenever someone is planning what pages a website should have and how they connect. NOT for XML sitemaps (that's technical SEO — see seo-audit). For SEO audits, see seo-audit. For structured data, see schema.
Agent Skill for writing production-ready SVG markup — icons, logos, favicons, illustrations, flowcharts, charts, progress rings, sprites, CSS masks, and animated UI graphics. Use when the user asks for SVG, vector graphics, inline graphics, icon sets, data viz, or scalable web assets, or mentions this skill. Prefer over image generation when scaling, theming, CSS control, or code integration matters.
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.
Frontend UI/UX design intelligence - activate FIRST when user requests beautiful, stunning, gorgeous, or aesthetic interfaces. The primary skill for design decisions before implementation. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check frontend 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.
Route explicitly authorized uinaf interface, brand-asset, and repository-copy work through the live design.uinaf.dev contract. Use only when explicitly invoked for a uinaf-owned repository or surface; never use for put.io, OpenClaw, or unrelated projects. The skill carries workflow, not design rules.
Refactor cluttered or flat interfaces so users instantly see what matters, using size, weight, contrast, and whitespace — not more color. Use when the user says 'it looks cluttered', 'everything competes for attention', 'it looks amateur/flat', 'users can't find the button', 'make this scannable', 'this screen is overwhelming', or shares a screen where nothing stands out. Audits the actual component: lists every element's current visual weight vs intended priority, then delivers refactored component code (CSS/TSX) with a before/after hierarchy table explaining each change. De-emphasizes secondary elements before amplifying primary ones, and applies Gestalt grouping via spacing.
Extract and analyze architecture diagrams from academic PDFs or existing figure images. Use this skill whenever the user provides a PDF or image containing an architecture diagram and wants to extract, analyze, or redraw it — including "从PDF提取架构图", "架构图分析", "extract figures from pdf", "architecture diagram extraction", "analyze this diagram". Runs a local PDF extraction script and produces structured redraw parameters for downstream prompt skills.
Use when the user needs standalone HTML/CSS/JS artifacts — interactive demos, prototypes, single-file applications, or visual tools that run independently in a browser. Triggers: user says "artifact", "demo", "prototype", "single-file app", "HTML tool", "interactive widget", "standalone page", building something that runs in a browser without a build step.
Provides comprehensive guidance for Axure prototyping tool including wireframing, interactions, dynamic panels, and prototyping. Use when the user asks about Axure, needs to create interactive prototypes, design wireframes, or build complex interactions.
Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 11 color palettes and 7 rendering styles. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article cover", or "make cover"
Use when building or rebuilding a page, header, footer, or template on an Oxygen 6 (Jenga) site, or when a previous attempt produced a blank page, one raw HTML block, or 'Unknown element'. Hands the agent the Oxygen 6 element schemas and the Template Content Area rule. Not for Oxygen Classic.
Extract a design system from any website URL by driving a real browser with the Playwright CLI. Produces design tokens (JSON), brand assets (logo and favicon when available), a homepage screenshot, and a design-guidelines.md document. Use when the user wants to clone, match, or stay consistent with an external brand.
A consumer-oriented dating and matchmaking dashboard: left-side navigation, community-signal ticker, headline KPIs, a 30-day mutual-matches bar chart, and a match-rate trend block. Editorial typography with restrained accents. Use when the brief asks for a “dating site,” “matchmaking,” “community dashboard,” “social network dashboard,” or any consumer product where the data tells the story.
Strip AI-generated slop from a codebase, product, and prose. Code slop — console statements, `any` types, unused imports, commented-out code, redundant comments, needless defensive try-catch on trusted paths, over-nesting. Product slop (with --product) — marketing-filler copy, generic AI phrasing, default-shadcn look, unstyled loading/error states, dead buttons and half-wired flows. UI slop (`ui`) runs a project-derived design-system primitive pass. Prose slop (`prose`) cuts AI tells from writing. Can scope to the current branch's diff or sweep the whole tree. Use when asked to clean up AI-generated code, unslop writing, remove slop, or make an app feel finished before shipping to customers.
Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief", "ilang brief", "structured brief".
Write high-quality GPT-Image-2 prompts with strong structure, layout logic, and production-ready visual direction. Use this skill whenever the user asks for image prompts, wants better GPT-Image-2 prompting, wants to upgrade a weak image prompt, asks for prompt templates, wants series-style prompt systems, needs prompts for posters, UI screens, information graphics, concept art, brand visuals, editorial layouts, or worldbuilding images, or wants funny, absurd, meme-like, fake-news-style, and highly shareable visual prompts. If the current Hermes environment exposes an image generation tool/model, this skill should also offer to generate an image from the finalized prompt after presenting the prompt.
Develop a new reusable image house style through guided reference curation, visual hypothesis testing, canonical anchor generation, range validation, and packaging as an installable skill. Use when the user asks to create, discover, formalize, or package an image aesthetic or repeatable visual system. Do not use merely to generate an image in an existing style.
Generate images via multiple mechanisms. Supports: (1) End-to-end AI generation via Gemini/ZenMux — given a prompt, directly output an image. (2) Code-based rendering — generate HTML/React single-file, render to PNG via Playwright. (3) Prompt engineering — generate optimized prompts for external models (nano-banana-pro, etc.). Trigger words: image, generate image, 生图, render, poster, 海报, banner, card, 卡片
An editorial-style poster—newsprint paper, dateline, oversized serif headline with a struck-through word and italic accent, a 2-column body block, and 6 numbered sections with annotated pull-quote captions. Reads like a Sunday-paper full-page essay or a thoughtful launch poster. Use when the brief asks for "magazine poster", "editorial poster", "newsprint", "essay layout", or "manifesto".
A mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame on the page. Built by copying the seed `assets/template.html` and pasting one screen archetype from `references/layouts.md`. Use when the brief asks for "mobile app", "iOS app", "Android app", "phone screen", or "app UI"
Generate images using Nano Banana Pro (Gemini 3 Pro Preview). Use when creating app icons, logos, UI graphics, marketing banners, social media images, illustrations, diagrams, or any visual assets. Supports reference images for style transfer and character consistency. Triggers include phrases like 'generate an image', 'create a graphic', 'make an icon', 'design a logo', 'create a banner', 'same style as', 'keep the style', or any request needing visual content.
Integrate OnboardJS into React projects for building user onboarding flows. Use when: (1) Setting up OnboardJS in a React/Next.js project (2) Creating multi-step onboarding, wizards, or guided flows (3) Implementing conditional navigation, data persistence, or step validation (4) Working with OnboardingProvider, useOnboarding hook, or step components Triggers: "onboarding", "onboardjs", "wizard flow", "user onboarding", "guided tour", "multi-step form"
Guides validation of ideas before full development using pretotyping (fake doors, concierge MVPs, Wizard of Oz) and prototyping at appropriate fidelity (paper, clickable, coded) to test assumptions about demand, pricing, and feasibility. Use when testing ideas cheaply before building, choosing prototype fidelity, running experiments to validate assumptions, or when user mentions prototype, MVP, fake door test, concierge, Wizard of Oz, landing page test, smoke test, or asks "how can we validate this idea before building?".
WCAG 2.2 compliance testing, screen reader validation, and inclusive design verification. Use when ensuring legal compliance (ADA, Section 508), testing for disabilities, or building accessible applications for 1 billion disabled users globally
Cross-browser, cross-platform, and cross-device compatibility testing ensuring a consistent experience across environments. Use when validating browser support, testing responsive design, or ensuring platform compatibility.
Generate or edit images with Codex's built-in image generation from any agent, through an MCP tool or a plain CLI. For every image request it first proposes at least four divergent style directions (24 distilled templates, 48 presets, 20 Mondo poster artists), lets the user pick, expands the prompt, generates, and checks the result. Scenario craft for 视频封面, 视频海报, 小红书配图, 公众号封面, X 封面, 朋友圈海报, 书籍封面, 专辑封面, 产品海报, 人物写真, 节气海报, 展览海报, PPT 页面, 图生图. Use for 生图, 配图, 海报, 封面, "给我几个风格", "用 Codex 画一张". Excludes: editing photos with local tools, charts or diagrams from data, UI mockups, video generation, or anything that needs an API key-based image service.
Internal accessibility review pass of the agentic-workflow review pack — composed in-turn by review-change and product-audit; not a menu entry. Checks the changed user-facing surface for accessibility: semantics, keyboard, focus, contrast, and ARIA correctness — applies only to user-facing surfaces. Findings only; never edits code.
Internal UI/UX design review pass of the agentic-workflow review pack — composed in-turn by review-change and product-audit; not a menu entry. Checks the changed UI against the project's design doc: consistency, states, responsiveness, and reuse — applies only when the project has a UI and the change touches it. Findings only; never edits code.
A three-card social-media carousel laid out as 1080×1080 squares — three cinematic, on-brand panels with display headlines that connect across the series ("onwards." → "to the next one." → "looking ahead."). Each card has a brand mark, a number / total, a caption, and a "loop" affordance. Use when the brief asks for a "carousel post", "social carousel", "Instagram carousel", "LinkedIn series", "X thread cards", or "三连发".
Convert text posts into visual carousel images or presentations for Threads, Instagram, LinkedIn, TikTok, YouTube. 12 slide types (incl. image/emoji/number), 6 format presets (incl. 1920×1080 wide), 8 background styles (incl. ruled paper), 3-axis style system (font × color × purpose), highlighted keywords with optional italic-box style. Generates PNG or single-file PDF via Next.js preview + browser export. RU/EN toolbar. Triggers: threads carousel, instagram carousel, linkedin carousel, tiktok carousel, карусель, slides, carousel images, presentation deck, presentation pdf.
A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations, scribbled chart placeholders, hatched fills. Reads like a designer's whiteboard before any pixels are committed. Use when the brief asks for "wireframe", "sketch wireframe", "hand-drawn", "lo-fi", "whiteboard", "草稿", or "手绘原型".
Use this skill any time the user wants to create diagrams, flowcharts, or visual structures. This includes: architecture diagrams, mind maps, org charts, user journey maps, system design diagrams, ER diagrams, sequence diagrams, process flows, decision trees, network topologies, class diagrams, Gantt charts, SWOT analysis diagrams, wireframes, and sitemaps. Also trigger when: user says 画个流程图, 做个架构图, 思维导图, 组织架构图, 用户旅程图, 系统设计图, 甘特图. If a diagram or visual structure needs to be drawn, use this skill.
Use this skill any time the user wants to generate, create, or design images, illustrations, or visual assets. This includes: posters, banners, social media graphics, product mockups, logo concepts, thumbnails, marketing creatives, profile pictures, book covers, album art, icon designs, and any request for AI-generated imagery. Also trigger when: user says 生成图片, 做个海报, 画个插图, 设计个banner, 做个封面, 社交媒体配图, 产品效果图. If an image or visual asset needs to be created, use this skill.
Configure rich popup content with text, fields, media, charts, attachments, and related records. Use when customizing feature popups, adding charts or images to popups, templating popup titles and field formatting, or displaying related record data on click.
Generate and customize Vaadin Aura theme CSS configurations. Use when the user wants to create a new theme, adjust visual styles, customize a design system, pick colors, change typography, or configure the look and feel of a Vaadin application using the Aura theme. Triggers on requests like "create a theme", "make it look more modern", "use dark mode with emerald accents", "compact dense layout", or any visual design system configuration for Vaadin/Aura.
Use when authoring or amending a high-fidelity UI design AS CODE — each key screen realized as runnable code (standalone HTML+Tailwind by default, React+shadcn when the build stack is React), derived from upstream wireframes + design-system, rendered headlessly and screenshotted, used as a build SEED. Guides the METHOD, not the outline: deriving one screen per wireframe-named screen/state, consuming design-system tokens through a token-to-code map (never inventing a token or raw hex/px), realizing the visual language + objective polish + named aesthetic heuristics to real pixels, rendering real content + every state, running a bounded generate-render-screenshot-vision-review-refine loop, judging numeric WCAG 2.2 AA on the render, and amending as a scoped versioned delta. Composes with a template tool + agent-browser + shadcn + research. Requires a vision-capable runtime. Not for reviewing hi-fi, the screen structure (wireframes), the token system (design-system), or final code.
Ship a new page for a brand that already exists, as if that brand's own team shipped it. Use when the request names one reference site and asks for a page inside its identity — a pricing page for X, a careers page in Y's system, "as if their design team built it". Not for inventing something new. Needs a shell and a writable working directory alongside the Brand API MCP.
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.