Design & UI skills for AI agents (385 skills)

Skills for interface design, UI/UX, graphics, diagrams and images: help your AI agent ship clean, consistent, on-brand front-ends.

Every skill below uses the SKILL.md standard, so it installs on Claude Code, Codex, Hermes Agent and DeepSeek (Deep Code). Open a skill to read it and grab the install command.

• api-and-interface-design – Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when…
• 20-andruia-niche-intelligence – Usar tras definir el sector de un proyecto: prepara un dossier en español con contexto, normas aplicables, patrones UX…
• 2d-games – 2D game development principles. Sprites, atlases, tilemaps, physics, cameras, and genre patterns (platformer…
• 3d-ui – Web and App implementation guide for 3D UI. Trigger when user wants actual 3D objects, perspective effects, and…
• accessibility-compliance – Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology…
• brand-guidelines – Applies OpenAI's brand colors and typography to any artifact that should match the Codex/OpenAI look-and-feel. Use it…
• chatgpt-apps – Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI…
• baoyu-comic – Knowledge comic creator supporting multiple art styles and tones. Creates original educational comics with detailed…
• canvas-design – Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the…
• image-generator – Generate or edit images from text and local files, image URLs, or data URLs through image API. Use when the user asks…
• adversarial-ux-test – Roleplay a hostile user to find and triage UX pain points.
• brand-guidelines – Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having…
• baoyu-compress-image – Compresses images to WebP (default) or PNG with automatic tool selection. Use when user asks to "compress image"…
• ai-presenter-video – Make a verified AI presenter video from script + image.
• canvas-design – Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the…
• baoyu-cover-image – Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 11 color palettes…
• advanced-evaluation – Design LLM-as-judge rubrics, direct scores and pairwise comparisons. Use for judge models, evals, position bias and…
• baoyu-danger-gemini-web – Generates images and text via reverse-engineered Gemini Web API. Supports text generation, image generation from…
• frontend-design – Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with…
• baoyu-diagram – Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams…
• img2threejs – Turn an object or character reference image into a quality-gated, animation-ready procedural Three.js model built in…
• architecture-diagram – Dark-themed SVG architecture/cloud/infra diagrams as HTML.
• hatch-pet – Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character…
• ip-as-logo – Generate extremely simple, cute, personified square character images with rounded heavy forms, two purposeful…
• ascii-art – ASCII art: pyfiglet, cowsay, boxes, image-to-ascii.
• cellprofiler – Runs reproducible CellProfiler microscopy pipelines for nuclear segmentation, cell counts, and per-object fluorescence…
• imagegen – Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations…
• auteur – Design and build cinematic, award-level web pages.
• cirq – Google quantum computing framework. Use when targeting Google Quantum AI hardware, designing noise-aware circuits, or…
• apple-hig-expert – Audits and designs iOS/macOS/watchOS/visionOS interfaces against the Apple Human Interface Guidelines, including the…
• baoyu-image-gen – AI image generation with OpenAI GPT Image 2.5, Azure OpenAI, Google, OpenRouter, DashScope, Z.AI GLM-Image, MiniMax…
• slack-gif-creator – Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and…
• ai-image-generation-studio – Install and use the official AI Image Generator package, pinned by digest, for paid hosted work on the Beatra service.
• ai-image-realism – Install and use the official AI Image Realism package, pinned by digest, for paid hosted work on the Beatra service.
• brand-landingpage – Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then…
• baoyu-infographic – Generate professional infographics with 21 layout types and 22 visual styles. Analyzes content, recommends…
• srt-whiteboard-animation – 将 SRT 字幕做成暖米黄纸张底的白板手绘动画：读字幕→输出配图策略→确认后生成统一风格线稿→按叙事语义标注分区→预览台调整→渲染 MP4。编排沿用分区遮罩揭示（annotation.json / sequence / startMs…
• baoyu-infographic – Infographics: 21 layouts x 21 styles (信息图, 可视化).
• theme-factory – Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc…
• frontend-ui-engineering – Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and…
• ai-logo-maker – Install and use the official AI Logo Maker package, pinned by digest, for paid hosted work on the Beatra service.
• ai-native-ui – Web and App implementation guide for AI Native UI. Trigger when user wants conversational interfaces, adaptive…
• voltagent-awesome-design-md – 73 个真实网站 DESIGN.md 提取集合（Claude / Cursor / Vercel / Stripe / Apple / Tesla / Ferrari ...）。 把 DESIGN.md 复制到项目根目录，AI…
• web-artifacts-builder – Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies…
• ai-product – Design and evaluate LLM product features, retrieval, validated outputs, latency, and cost controls.
• ai-studio-image – Geracao de imagens humanizadas via Google AI Studio (Gemini). Fotos realistas estilo influencer ou educacional com…
• canvas – Fetch Canvas LMS courses and assignments via API token.
• brand-guidelines – When the user wants to apply, document, or enforce brand guidelines for any product or company. Also use when the user…
• slack-gif-creator – Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation…
• android-jetpack-compose-expert – Expert guidance for building modern Android UIs with Jetpack Compose, covering state management, navigation…
• android-ui-journey-testing – XML-specified Android UI journey testing, interactive step execution, assertion verification, and JSON outcome…
• android_ui_verification – Automated end-to-end UI testing and verification on an Android Emulator using ADB.
• theme-factory – Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc…
• claude-design – Design one-off HTML artifacts (landing, deck, prototype).
• performance-optimization – Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements…
• angular-ui-patterns – Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components…
• animejs-animation – Advanced JavaScript animation library skill for creating complex, high-performance web animations.
• anti-slop-design – Autonomous Principal Design Technologist. Cures vibe-coded software from AI frontend slop using curated token…
• anti-ui-slop – Stop coding agents from shipping generic UI. Extend the product's design system, use UIZZE evidence only when useful…
• antigravity-design-expert – Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web…
• experimental-design – Designs experiments and studies BEFORE data is collected — choosing a design, randomizing, blocking, and laying out…
• api-and-interface-design – Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when…
• design-system-patterns – Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use…
• baoyu-xhs-images – Generates infographic image card series with 12 visual styles, 8 layouts, and 3 color palettes. Breaks content into…
• concept-diagrams – Generate flat, minimal educational SVG visuals as HTML.
• apify-brand-reputation-monitoring – Scrape reviews, ratings, and brand mentions from multiple platforms using Apify Actors.
• playwright-interactive – Persistent browser and Electron interaction through `js_repl` for fast iterative UI debugging.
• apify-influencer-discovery – Find and evaluate influencers for brand partnerships, assess public authenticity signals, and track collaboration…
• image – When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics…
• generate-image – Generates or edits images with AI models through the OpenRouter Image API (Gemini, Seedream, Recraft, GPT-Image…
• event-store-design – Design and implement event stores for event-sourced systems. Use when building event sourcing infrastructure, choosing…
• hunt-dom – Hunt client-side DOM vulnerabilities — DOM Clobbering (overwrite JS globals via HTML injection), PostMessage hijacking…
• design-md – Author/validate/export Google's DESIGN.md token spec files.
• application-performance-performance-optimization – Optimize end-to-end application performance with profiling, observability, and backend/frontend tuning. Use when…
• hunt-file-upload – Hunt file upload bugs — RCE via webshell, XSS via SVG/HTML, SSRF via XXE in DOCX, path traversal via filename. Bypass…
• chro-advisor – People leadership for scaling companies. Hiring strategy, compensation design, org structure, culture, and retention…
• hunt-http-smuggling – Hunt HTTP request smuggling (CL.TE, TE.CL, H2.CL, H2.TE). Cause: front-end proxy and back-end server disagree on where…
• churn-prevention – Reduce voluntary and involuntary churn through cancel flow design, save offers, exit surveys, and dunning sequences…
• duckduckgo-search – Free keyless web, news, and image search via ddgs.
• aurora-ui – Web and App implementation guide for Aurora UI. Trigger when user wants gradient glows, color blobs, and atmospheric…
• avalonia-layout-zafiro – Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and…
• avalonia-zafiro-development – Mandatory skills, conventions, and behavioral rules for Avalonia UI development using the Zafiro toolkit.
• offers – When the user wants to design, construct, or improve an offer — the thing they actually sell — including value…
• interaction-design – Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish…
• commercial-policy – Use when designing or revising a company's commercial policy — the rules of engagement governing discounts off list…
• hunt-nextjs – Hunt Next.js specific vulnerabilities — Server Actions arbitrary function execution, Middleware auth bypass via static…
• gitnexus-explorer – Serve an interactive codebase knowledge graph web UI.
• kpi-dashboard-design – Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring…
• confluence-expert – Atlassian Confluence expert for creating and managing spaces, knowledge bases, and documentation. Configures space…
• coo-advisor – Operations leadership for scaling companies. Process design, OKR execution, operational cadence, and scaling…
• prospecting – When the user wants to find, qualify, and build a list of prospects to reach out to, across B2B SaaS, general B2B, or…
• microservices-patterns – Design microservices architectures with service boundaries, event-driven communication, and resilience patterns. Use…
• cpo-advisor – Product leadership for scaling companies. Product vision, portfolio strategy, product-market fit, and product org…
• mobile-android-design – Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android…
• mobile-ios-design – Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS…
• impeccable – Frontend design guidance, upstream-maintained (impeccable).
• nextjs-app-router-patterns – Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when…
• inspecting-hermes-desktop-dom – Read the live Hermes desktop DOM/CSS over CDP.
• ip-as-logo – Design minimal cute IP mascot marks readable at 32px.
• openpiv – Performs Particle Image Velocimetry (PIV) analysis with OpenPIV. Use when extracting velocity fields from PIV image…
• design-system – Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body…
• optimize-for-gpu – GPU-accelerates scientific Python on NVIDIA hardware and verifies that the result is correct and faster. Use for…
• postgresql-table-design – Use this skill when designing or reviewing a PostgreSQL-specific schema. Covers best-practices, data types, indexing…
• baseline-ui – Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs…
• epic-design – Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and…
• beatra-ai-video-studio – Install and use the official Beatra AI Video Studio package, pinned by digest, for paid text-to-video, image-to-video…
• bento-ui – Web and App implementation guide for Bento UI. Trigger when user wants modular grid cards, Apple-like dashboard style…
• brand-guidelines – Write copy following Sentry brand guidelines. Use when writing UI text, error messages, empty states, onboarding…
• brand-guidelines-anthropic – To access Anthropic's official brand identity and style resources, use this skill.
• brand-guidelines-community – To access Anthropic's official brand identity and style resources, use this skill.
• brand-kit-print-collateral – Print collateral spec: item, finished/trim size and artwork size including bleed, bleed, colour mode, stock and GSM…
• brand-perception-psychologist – Audit visual, verbal, and behavioral brand signals and propose alignment changes when market perception differs from…
• hunt-wordpress – Use when an authorized target exposes WordPress core, plugin, theme, REST, or XML-RPC behavior.
• brooks-lint – AI code reviewer grounded in classic software engineering books for catching design smells, coupling issues, and…
• brutalism – Web and App implementation guide for Brutalism. Trigger when user wants a raw appearance, intentionally unfinished…
• build-ui – Step-by-step workflow for UI work: read the project, follow the plan for the job (new screen, dashboard, polish…
• building-native-ui – Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation…
• grill-me – Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of…
• canvas-design – These are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output…
• card-based-design – Web and App implementation guide for Card-Based Design. Trigger when user wants information cards, Pinterest-style…
• primer-design – Designs and audits PCR and RT-qPCR primers with Primer3, explicit thermodynamic conditions, reference-based off-target…
• cc-skill-frontend-patterns – Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
• ckw-design – Frontend design entry point: direction, design system, visual philosophy. Use whenever building or touching the look…
• inbox-triage – Runs a full inbox triage using the knowledge base created by the 'inbox-setup' skill. Light-intake by design (most…
• claymorphism – Web and App implementation guide for Claymorphism. Trigger when user wants soft 3D elements, rounded shapes, and a…
• interview-system-designer – This skill should be used when the user asks to "design interview processes", "create hiring pipelines", "calibrate…
• popular-web-designs – 54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
• codebase-design – Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find…
• codebase-to-wordpress-converter – Expert skill for converting any codebase (React/HTML/Next.js) into a pixel-perfect, SEO-optimized, and dynamic…
• react-native-design – Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when…
• color-blocking – Web and App implementation guide for Color Blocking. Trigger when user wants large color sections, striking layout…
• comfyui-gateway – REST API gateway for ComfyUI servers. Workflow management, job queuing, webhooks, caching, auth, rate limiting, and…
• command-center-ui – Web and App implementation guide for Command Center UI. Trigger when user wants monitoring systems, enterprise…
• recsys-pipeline-architect – Design composable recommendation, ranking, and feed pipelines using the six-stage…
• responsive-design – Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint…
• computer-vision-expert – Computer vision pipeline design and evaluation. Specialized in YOLO26, Segment Anything 3 (SAM 3), Vision Language…
• loop-library – Discover, find, compare, audit, repair, adapt, and design repeatable AI-agent loops with explicit triggers, actions…
• core-components – Core component library and design system patterns. Use when building UI, using design tokens, or working with the…
• crewai – Design role-based agents, tasks, crews, and flows with CrewAI.
• cyber-y2k – Web and App implementation guide for Cyber Y2K. Trigger when user wants modern Y2K, holographic visuals, and glitch…
• cyberpunk-ui – Web and App implementation guide for Cyberpunk UI. Trigger when user wants neon colors, dark backgrounds, high-tech…
• daily-gift – Relationship-aware daily gift engine with five-stage creative pipeline — editorial judgment, synthesis, concept…
• dark-mode – Web and App implementation guide for Dark Mode Design. Trigger when user wants dark surfaces, reduced eye strain, and…
• dashboard-design – Web and App implementation guide for Dashboard Design. Trigger when user wants analytics-focused layouts, data…
• data-dense-design – Web and App implementation guide for Data-Dense Design. Trigger when user wants professional tools, maximum…
• database-design – Database design principles and decision-making. Schema design, indexing strategy, ORM selection, serverless databases.
• segment-anything-model – SAM: zero-shot image segmentation via points, boxes, masks.
• ddd-strategic-design – Design DDD strategic artifacts including subdomains, bounded contexts, and ubiquitous language for complex business…
• visual-recon – Screenshot all live hosts for rapid visual triage and technology fingerprinting.
• observability-designer – Design production-ready observability strategies combining metrics, logs, and traces. Includes SLI/SLO design…
• design-it – Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting…
• design-md – Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
• design-philosophy – Visual philosophy and art-direction for frontend. Use when creating high-concept work, campaigns, or when the user…
• design-spatial – Design — spatial composition
• design-spells – Curated micro-interactions and design details that add "magic" and personality to websites and apps.
• design-system – Mechanical implementation invariants for frontend design: token architecture, typography hierarchy, loading order…
• design-taste-frontend – Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and…
• design-theme-guide – Design-token register: colour, typography, spacing and radius tokens with light and dark values, contrast ratio and…
• design-thinking – Direction and intent for frontend design. Use with design when defining purpose, tone, domain, color world, and review…
• design-token-contrast – Checks WCAG 2.2 contrast between the color tokens of a project (light and dark theme) and suggests the closest passing…
• design-ux – UX / usability audit — heuristic evaluation of INTERACTIVE UIs (not just visual polish). Load with design when a UI…
• deterministic-design – Measure rendered UI layout with reproducible spatial metrics and a separately assessed usability review; distinguish…
• diagram-generator – Generate, refine, validate, and render diagrams from natural language, notes, code, schemas, or existing diagram…
• sketch – Throwaway HTML mockups: 2-3 design variants to compare.
• tailwind-design-system – Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use…
• docs-architect – Creates comprehensive technical documentation from existing codebases. Analyzes architecture, design patterns, and…
• tamarind – Provides access to a collection of open-source molecular design and structural biology tools on the Tamarind Bio…
• domain-driven-design – Plan and route Domain-Driven Design work from strategic modeling to tactical implementation and evented architecture…
• product-skills – Use when coordinating product work across the 12 bundled product sub-skills (RICE, OKRs, UX research, design tokens…
• draw – Vector graphics and diagram creation, format conversion (ODG/SVG/PDF) with LibreOffice Draw.
• duotone-design – Web and App implementation guide for Duotone Design. Trigger when user wants two-color schemes, striking imagery, and…
• ecommerce-listing-image-set – Install and use the official Ecommerce Product Images package, pinned by digest, for paid hosted work on the Beatra…
• editorial-design – Web and App implementation guide for Editorial Design. Trigger when user wants a magazine-inspired layout, large…
• electron-drive-skill – Launch the project's Electron app on a scratch profile and drive it: click, type, screenshot, run renderer or…
• emil-design-eng – Use when designing or reviewing polished product UI with Emil Kowalski-inspired animation, interaction, and component…
• engine-selection – Selects game engines and frameworks by platform, genre, and architecture (full canvas shell vs hybrid DOM shell +…
• quality-manager-qms-iso13485 – ISO 13485 Quality Management System implementation and maintenance for medical device organizations. Provides QMS…
• enhance-prompt – Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects…
• rag-architect – Use when the user asks to design a RAG pipeline, choose a chunking strategy or embedding model, pick a vector…
• event-sourcing-architect – Expert in event sourcing, CQRS, and event-driven architecture patterns. Masters event store design, projection…
• event-store-design – Design and implement event stores for event-sourced systems. Use when building event sourcing infrastructure, choosing…
• vision-sft – Fine-tune vision-language models (VLMs) with supervised learning on image+text data. Use when adapting a VLM to a…
• expo-animation – Curated upstream guidance for Expo Animation; use when the workflow matches the user goal.
• visual-design-foundations – Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use…
• visual-edit-precision – Use when making UI/frontend changes guided by visual context, when the user selects elements visually, draws…
• expo-tailwind-setup – Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
• expo-ui – Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android rendered from React in…
• expo-ui-jetpack-compose – Build Android-native Expo SDK 55 UI with Jetpack Compose views/modifiers, Host sizing and platform-specific integration.
• expo-ui-swift-ui – Build iOS-native Expo SDK 55 UI with SwiftUI views/modifiers, Host/RNHostView embedding and native rebuild…
• web-component-design – Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component…
• fal-image-edit – AI-powered image editing with style transfer and object removal
• fal-upscale – Upscale and enhance image and video resolution using AI
• favicon – Generate favicons from a source image
• saas-scaffolder – Generates complete, production-ready SaaS project boilerplate including authentication, database schemas, billing…
• figma-automation – Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools…
• file-uploads – Expert at handling file uploads and cloud storage. Covers S3, Cloudflare R2, presigned URLs, multipart uploads, and…
• fixing-motion-performance – Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion…
• flat-design – Web and App implementation guide for the Flat Design style. Trigger when the user wants no shadows, simple shapes, and…
• flat-design-2 – Web and App implementation guide for Flat Design 2.0 (Semi-Flat). Trigger when the user wants flat design with subtle…
• floating-ui – Web and App implementation guide for Floating UI. Trigger when user wants detached cards, elevated components, and a…
• free-design-resources – Design resource register: resource and provider, licence type, commercial-use and attribution rules, export format…
• free-tier-strategy – Design free tiers that convert to paid without creating resentment or abuse. Trigger phrases: free tier design…
• frontend-api-integration-patterns – Production-ready patterns for integrating frontend applications with backend APIs, including race condition handling…
• frontend-data-contracts – A portable, framework-agnostic discipline for type safety at the network edge of any React or React Native app.
• frontend-design – Design and implement a distinctive frontend within the product’s existing brand, accessibility, performance and…
• frontend-dev-guidelines – You are a senior frontend engineer operating under strict architectural and performance standards. Use when creating…
• frontend-lighthouse – Add a portable Lighthouse CI gate for production frontend builds with Core Web Vitals budgets, category floors, median…
• frontend-mobile-development-component-scaffold – Scaffold React and React Native components with TypeScript, accessibility, tests, styles, and documentation.
• frontend-observability – A portable, framework-agnostic field-side observability pattern for React or React Native integrations.
• frontend-optimistic-mutations – A portable, framework-agnostic discipline for the write path of any React or React Native app using a query/cache layer.
• frontend-seo – A portable, framework-agnostic SEO system for any React or React Native-for-web frontend.
• frontend-ui-dark-ts – A modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and…
• frontend-ui-engineering – Builds production-quality UIs. Use when building or modifying user-facing interfaces. Use when creating components…
• frutiger-aero – Web and App implementation guide for Frutiger Aero. Trigger when user wants glossy gradients, early 2000s…
• game-art – Game art principles. Visual style selection, asset pipeline, animation workflow.
• game-audio – Game audio principles. Sound design, music integration, adaptive audio systems.
• senior-computer-vision – Computer vision engineering skill for object detection, image segmentation, and visual AI systems. Covers CNN and…
• game-design – Game design principles. GDD structure, balancing, player psychology, progression.
• game-development – Game development orchestrator. Routes by platform, dimension, and engine fit (web 2D/3D, hybrid DOM+canvas, narrative…
• generate-nanobanana – Generate and edit images/video with Google's Gemini media models (Nano Banana 2/Pro, Gemini Omni Flash), with…
• geo-brand-mentions – Brand mention and authority scanner for AI visibility.
• senior-frontend – Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React…
• gh-image – Upload local images to GitHub and get canonical user-attachments embed URLs; use when asked to attach a screenshot to…
• glassmorphism – Web and App implementation guide for Glassmorphism. Trigger when user wants a frosted glass effect, blurred…
• gpt-taste – Use when generating elite GSAP-heavy frontend pages with strict AIDA structure, wide hero typography, and gapless…
• gradient-design – Web and App implementation guide for Gradient Design. Trigger when user wants heavy gradient usage, vibrant…
• graphql-architect – Master modern GraphQL with federation, performance optimization, and enterprise security. Build scalable schemas…
• grill-me – A relentless interview to sharpen a plan or design.
• grill-with-docs – A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
• grilling – Interview the user relentlessly about a plan or design. Use when the user wants to stress-test a plan before building…
• haskell-pro – Design and review Haskell types, pure domain logic, parsing, exception-safe concurrency, Cabal/Stack builds and…
• hig-components-menus – Design Apple-platform menus, buttons, toolbars and disclosure controls using the appropriate platform conventions…
• hig-components-status – Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings.
• hig-foundations – Apple Human Interface Guidelines design foundations.
• hig-inputs – Design Apple-platform input interactions for touch, keyboard, pointer, Pencil, controllers, spatial gestures and…
• hig-patterns – Apple Human Interface Guidelines interaction and UX patterns.
• hig-platforms – Apple Human Interface Guidelines for platform-specific design.
• hig-technologies – Review Apple-platform technology UX against HIG patterns for payments, health data, identity, Siri, AR, cloud sync…
• high-contrast – Web and App implementation guide for High Contrast Design. Trigger when user wants accessibility-focused design…
• high-end-visual-design – Use when designing expensive agency-grade interfaces with premium fonts, spatial rhythm, soft depth, and fluid…
• holographic-ui – Web and App implementation guide for Holographic UI. Trigger when user wants light-based appearance, projected…
• hugging-face-vision-trainer – Train object detection, image classification, and SAM or SAM2 segmentation models locally or on Hugging Face Jobs…
• iconsax-library – Extensive icon library and AI-driven icon generation skill for premium UI/UX design.
• image-alt-tag-generator – Image Alt Tag Generator. Use when working with image or accurate image description and page context.
• image-generator – Generate and edit images using Gemini's Nano Banana Pro model (gemini-3-pro-image-preview). Use this skill when the…
• image-studio – Studio de geracao de imagens inteligente — roteamento automatico entre ai-studio-image (fotos humanizadas/influencer)…
• imagen – AI image generation skill powered by Google Gemini, enabling seamless visual content creation for UI placeholders…
• industrial-brutalist-ui – Use when creating raw industrial or tactical telemetry UIs with rigid grids, stark typography, CRT effects, and…
• isometric-design – Web and App implementation guide for Isometric Design. Trigger when user wants angled 3D appearances without vanishing…
• json-canvas – Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas…
• ui-design-system – UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive…
• ux-researcher-designer – UX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey…
• kpi-dashboard-design – Comprehensive patterns for designing effective Key Performance Indicator (KPI) dashboards that drive business decisions.
• layered-design – Web and App implementation guide for Layered Design. Trigger when user wants multiple depth levels, floating panels…
• liuguang-banlan-ui – Builds two parameterized UI modes—流光溢彩白 (iridescent white) and 五彩斑斓黑 (colorful black)—with OKLCH, WebGL/CSS fallback…
• llm-application-dev-ai-assistant – Design and implement conversational AI assistants with context management, integration boundaries, and validation.
• logo-image-design – Brand asset register: asset type, format, dimensions and aspect ratio, colour mode, background variant, clear space…
• logo-to-stickers – Turn a brand mark or existing IP into consistent, playful paper stickers with small visual stories and separate…
• lookdev-auto – Automated visual tuning: a vision or video model rates rendered variants in a loop. Render several labeled variants…
• loop-library – Find, compare, adapt, and design bounded AI-agent feedback loops with explicit checks, stop rules, guardrails, and…
• magic-animator – AI-powered animation tool for creating motion in logos, UI, icons, and social media assets.
• magic-ui-generator – Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.
• mailtrap-managing-contacts – Manage Mailtrap contacts, lists, segments, custom fields, imports, CRM syncs, and campaign audiences through the UI or…
• makepad-2-0-animation – Makepad 2.0 guidance for animation; use when building or debugging Makepad UI code.
• makepad-animation – CRITICAL: Use for Makepad animation system. Triggers on: makepad animation, makepad animator, makepad hover, makepad…
• makepad-skills – Makepad UI development skills for Rust apps: setup, patterns, shaders, packaging, and troubleshooting.
• markstream-nuxt – Integrate markstream-vue into Nuxt 3 or 4 with SSR-safe client boundaries, renderer modes, explicit CSS, and…
• markstream-svelte – Integrate the beta markstream-svelte renderer into Svelte 5 or SvelteKit with runes, explicit CSS, smooth streaming…
• markstream-vue2 – Integrate markstream-vue2 into Vue 2.6 or 2.7 with correct Composition API decisions, CSS, streaming state, optional…
• markstream-vue2-vite – Integrate markstream-vue2 into Vue 2 plus Vite with bundled worker imports, CSS ordering, Composition API…
• material-design – Web and App implementation guide for Material Design. Trigger when user wants Google's aesthetic, elevation, motion…
• mermaid-expert – Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and…
• meta-tag-generator – Meta Tag Generator. Use when working with page summary, URL and optional brand or social image.
• minimalism – Web and App implementation guide for the Minimalism design style. Trigger when the user wants simple layouts, lots of…
• minimalist-ui – Use when creating clean editorial interfaces with warm monochrome palettes, crisp borders, restrained motion, and flat…
• mobile-design – Design and review iOS, Android, React Native or Flutter interfaces for touch, accessibility, navigation, offline…
• monochromatic-ui – Web and App implementation guide for Monochromatic UI. Trigger when user wants a single-color palette, high elegance…
• monopoly – MONOPOLY is a Senior System Design Engineer skill for architecting, reviewing, and scaling systems. Triggers on…
• multi-tenant-llm-hosting – Design secure, multi-tenant LLM hosting platforms with tenant isolation, quotas, billing attribution, noisy-neighbor…
• n8n-error-handling – Design visible, structured, recoverable n8n failures using error outputs, retries, Error Trigger workflows, and HTTP…
• neo-brutalism – Web and App implementation guide for Neo-Brutalism. Trigger when user wants thick borders, hard shadows, bright…
• nerdzao-elite – Software engineering and product design workflow and Senior Product Designer. Full workflow with planning…
• nerdzao-elite-gemini-high – Modo Elite Coder + UX Pixel-Perfect otimizado especificamente para Gemini 3.1 Pro High. Workflow completo com foco em…
• neumorphism – Web and App implementation guide for Neumorphism (Soft UI). Trigger when user wants soft shadows, extruded appearance…
• nosql-expert – Expert guidance for distributed NoSQL databases (Cassandra, DynamoDB). Focuses on mental models, query-first modeling…
• not-a-vibe-coder – Turns vague prompts into 8 structured planning files for brand new projects. DO NOT use on existing codebases.
• nsfw-ai-spicyapi – Generate adult (18+) images, image-to-video clips and image edits through the SpicyAPI API, with a cost quote before…
• obsess – Perfectionist mode for one target: checked attempts on a UI detail or hot path, keeps the best version, stops on a…
• offers – When the user wants to design, construct, or improve an offer — the thing they actually sell — including value…
• og-tag-generator – OG Tag Generator. Use when working with page URL, title, description and optional public image URL.
• onboarding-psychologist – Design first-use and onboarding experiences that bring an early win, cut setup friction, build ownership and form…
• organization-design – Org structure register: department, type, parent, head, location, approved against actual headcount, annual budget…
• osterwalder-canvas-architect – Iterative consultant agent for building and validating logically consistent 9-block Business Model Canvases.
• pakistan-payments-stack – Design and implement production-grade Pakistani payment integrations (JazzCash, Easypaisa, bank/PSP rails, optional…
• prisma-expert – You are an expert in Prisma ORM with deep knowledge of schema design, migrations, query optimization, relations…
• privacy-by-design – Use when building apps that collect user data. Ensures privacy protections are built in from the start—data…
• pro-motion – Make a motion-graphics launch, brand or promo film audio first: plan the music, then render the film in code (canvas…
• product-design – Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design…
• product-design-harness – Use when a product direction, feature, workflow, experiment, launch, feedback signal, automation, or scale decision…
• product-inventor – Product Inventor e Design Alchemist de nivel maximo — combina Product Thinking, Design Systems, UI Engineering…
• prototype – Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or…
• radix-ui-design-system – Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and…
• rayden-use – Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement
• react-ui-patterns – Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components…
• redesign-existing-projects – Use when upgrading existing websites or apps by auditing generic UI patterns and applying premium design fixes without…
• retro-design – Web and App implementation guide for Retro Design (60s-80s). Trigger when user wants vintage aesthetics, warm muted…
• retro-futurism – Web and App implementation guide for Retro Futurism. Trigger when user wants vintage future concepts, 1950s space age…
• reverse-image-search – Reverse Image Search. Use when working with image or public image URL.
• robius-state-management – CRITICAL: Use for Robius state management patterns. Triggers on: AppState, persistence, theme switch, 状态管理…
• robius-widget-patterns – CRITICAL: Use for Robius widget patterns. Triggers on: apply_over, TextOrImage, modal, 可复用, 模态, collapsible, drag…
• saas-multi-tenant – Design and implement multi-tenant SaaS architectures with row-level security, tenant-scoped queries, shared-schema…
• scarcity-urgency-psychologist – Design honest scarcity and urgency messaging when verified inventory, capacity, or deadlines justify a timely decision.
• schema-markup – Design, validate, and optimize schema.org structured data for eligibility, correctness, and measurable SEO impact.
• sci-fi-interface – Web and App implementation guide for Sci-Fi Interface Design. Trigger when user wants HUDs, spacecraft dashboards, or…
• seek-and-analyze-video – Seek and analyze video content using Memories.ai Large Visual Memory Model for persistent video intelligence
• senior-frontend – Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React…
• shadcn – Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern…
• skeuomorphism – Web and App implementation guide for Skeuomorphism. Trigger when user wants UI to mimic real-world objects, realistic…
• smartui-skill – Generates SmartUI visual regression test configurations for screenshot comparison on TestMu AI cloud…
• soft-pastel – Web and App implementation guide for Soft Pastel Design. Trigger when user wants gentle colors, calming UI…
• spatial-computing-ui – Web and App implementation guide for Spatial Computing UI. Trigger when user wants floating elements, environmental…
• spatial-design – Web and App implementation guide for Spatial Design. Trigger when user wants environment-aware layouts, Apple Vision…
• spec-driven-loop – Freeze PRD, technical design, and acceptance criteria before medium-to-large Codex work; coordinate agents with…
• stability-ai – Geracao de imagens via Stability AI (SD3.5, Ultra, Core). Text-to-image, img2img, inpainting, upscale, remove-bg…
• stitch-design-taste – Use when generating Google Stitch DESIGN.md systems for premium typography, color, layout, motion intent, and…
• stitch-ui-design – Expert guidance for crafting effective prompts in Google Stitch, the AI-powered UI design tool by Google Labs. This…
• styleseed-design-review – Reviews UI/frontend code and tells you exactly why it \"looks AI-generated\" — then how to fix it.
• swiftui-ui-patterns – Apply proven SwiftUI UI patterns for navigation, sheets, async state, and reusable screens.
• swiss-design – Web and App implementation guide for Swiss Design (International Typographic Style). Trigger when user wants strict…
• synthwave – Web and App implementation guide for Synthwave. Trigger when user wants 80s-inspired neon, dark backgrounds, outrun…
• tailwind-design-system – Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive…
• tailwind-patterns – Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
• tastegate – Build or fix a frontend so it looks designed, not AI-generated, then prove it in a real browser: renders at phone and…
• theme-factory – This skill provides a curated collection of professional font and color themes, each with carefully selected color…
• threejs-animation – Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating…
• threejs-shaders – Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying…
• threejs-skills – Create 3D scenes, interactive experiences, and visual effects using Three.js. Use when user requests 3D graphics…
• tile-design – Web and App implementation guide for Tile Design. Trigger when user wants Microsoft Metro style, sharp square…
• tone-of-voice-analyzer – Tone of Voice Analyzer. Use when working with text and optional brand voice sample.
• tool-design – Build tools that agents can use effectively, including architectural reduction patterns. Use when creating new tools…
• typography-first – Web and App implementation guide for Typography First Design. Trigger when user wants text as the absolute main visual…
• ui-a11y – Audit a component or page for accessibility issues and fix them
• ui-component – Generate a new UI component following the StyleSeed design conventions
• ui-from-screenshot – Turn a screenshot or mockup into matching UI with the project's own components, then compare the result side by side…
• ui-lint – Quick automated lint — detects common design system violations in seconds
• ui-motion – Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse ×…
• ui-page – Scaffold a new mobile page/screen using the StyleSeed layout patterns
• ui-pattern – Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
• ui-review – Review UI code for design system compliance, accessibility, and best practices
• ui-score – Score a UI file's design quality 0-100 against StyleSeed's design language — per-category breakdown, the worst…
• ui-setup – Interactive setup wizard — guides you step-by-step to configure the design system for your project
• ui-skills – Opinionated, evolving constraints to guide agents when building interfaces
• ui-skills-root – Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.
• ui-states – Design and build the UI states agents forget: first use, empty, loading, error, offline, no results, long content…
• ui-tokens – View, add, or modify design tokens in the StyleSeed design system
• ui-update – Update StyleSeed engine in your project — analyzes what's outdated and updates safely
• ui-ux-designer – Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern…
• ui-ux-pro-max – Comprehensive design guide for web and mobile applications. Use when designing new UI components or pages, choosing…
• ui-visual-validator – Rigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification.
• uiverify-triage-visual-changes – Triage a UI Verify visual regression build from your coding agent over MCP: sort changed screenshots into regressions…
• unship – Compare AI agent-made UI variants locally in a real app, then keep one and clean up unused temporary code.
• ux-audit – Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
• ux-copy – Generate UX microcopy (button labels, error messages, empty states, toasts) following a casual-but-polite voice and tone
• ux-feedback – Add appropriate user feedback states (loading, success, error, empty) to a component or page
• ux-flow – Design user flows and navigation structure following proven UX patterns
• ux-persuasion-engineer – Audit decision friction and propose clear, accessible UX flows when layout, defaults, or sequencing obstruct informed…
• uxui-principles – Evaluate interfaces against 168 research-backed UX/UI principles, detect antipatterns, and inject UX context into AI…
• vaporwave – Web and App implementation guide for Vaporwave. Trigger when user wants neon colors, retro digital aesthetics, 90s OS…
• vibecode-production-qa-validator – 13-phase production QA for fullstack Next.js apps: build verification, SEO tags, OG images, favicon, route regression…
• vibrant-maximalism – Web and App implementation guide for Vibrant Maximalism. Trigger when user wants rich colors, dense layouts, extreme…
• videodb – Video and audio perception, indexing, and editing. Ingest files/URLs/live streams, build visual/spoken indexes, search…
• visual-emotion-engineer – Create a visual direction brief for color, typography, imagery, and hierarchy when design must support a defined…
• vizcom – AI-powered product design tool for transforming sketches into full-fidelity 3D renders.
• watch-igaming – Reviews a video link or local screen recording from transcript and scene-change frames matched by timecode, then…
• web-artifacts-builder – Create React frontend artifacts and bundle a reviewed project into a shareable HTML file.
• web-design-guidelines – Review files for compliance with Web Interface Guidelines.
• web-design-system – Choose a design direction for a website from real sites and write it down as a DESIGN.md: colors with roles, type…
• web-games – Web browser game development. Framework selection (Phaser, PixiJS, Kaplay, Canvas/WebGL, Three.js, Babylon.js), hybrid…
• web-media-getter – One query across free image / video / GIF APIs (stock + historical/archival + GIF engines), returning normalized…
• web-project-brainstorming – Masterclass framework for brainstorming web development projects and page designs. Outlines structural phases for…
• widget-based-design – Web and App implementation guide for Widget-Based Design. Trigger when user wants modular blocks, iOS Home Screen…
• wordpress – WordPress development workflow covering theme development, plugin creation, WooCommerce integration, performance…
• wordpress-theme-development – WordPress theme development workflow covering theme architecture, template hierarchy, custom post types, block editor…
• write-design-md – Write or update a project's DESIGN.md from the colors, type, spacing and components it really uses, with rules agents…
• y2k-design – Web and App implementation guide for Y2K Design. Trigger when user wants chrome effects, futuristic 2000s look, blob…