Design AI agent skills

3,804 skills in the archive. Read a skill’s instructions or open its original repository.

• Ui Design

  by @mblode

  Designs and builds React/Next/Tailwind UI and audits visual and interaction defects. Use when asked to "build a landing page", "extract our design system", "add dark mode", "make this responsive", "remove UI slop", or "audit…

• Typography Audit

  by @mblode

  Audits font loading, type scales, measure, spacing, OpenType, and rendered punctuation with 78 scoped rules. Use when asked to "audit typography", "fix the fonts", or "review my type system". For a new visual direction use…

• Ui Animation

  by @mblode

  Builds, reviews, and measures UI motion, including springs, gestures, scroll effects, curve fitting from recordings, and sparse interface sound. Use when asked to "add animation", "match this easing", "reverse engineer this…

• Multi Tenant Architecture

  by @mblode

  Designs tenant isolation, hostname routing, custom-domain lifecycle, and plan limits on Cloudflare or Vercel. Use when asked to "isolate tenant data", "support custom domains", "build a white-label platform", or assess PSL…

• Product Design

  by @mblode

  Specifies interaction choices, action scope, reversibility, recovery, and reachable states. Use when asked to "design the flow", "should delete be undoable", "choose the control", or "review this product decision". For visual…

• R3f Textures

  by @EnzeD

  Configure textures in React Three Fiber, including color spaces, UV channels, sampling, video, and render targets. Use for texture appearance or memory issues; use loader guidance for model-loading workflows.

• R3f Animation

  by @EnzeD

  Animate React Three Fiber objects with useFrame, damping, and GLTF clips. Use for procedural motion, animation transitions, or demand-loop animation; use physics guidance for collision-driven movement.

• R3f Shaders

  by @EnzeD

  Implement custom GLSL or TSL materials in React Three Fiber, including uniforms and vertex deformation. Use for shader code and shader debugging, rather than ordinary PBR settings or composer effects.

• R3f Physics

  by @EnzeD

  Add Rapier rigid bodies, colliders, forces, sensors, and joints to React Three Fiber. Use for collision-driven movement and simulation; use animation guidance for purely visual motion.

• R3f Fundamentals

  by @EnzeD

  Set up React Three Fiber scenes, Canvas, typed JSX, hooks, and resource ownership. Use for scene architecture and render-loop setup, rather than detailed materials or effects.

• R3f Interaction

  by @EnzeD

  Implement React Three Fiber pointer events, picking, dragging, keyboard input, and camera controls. Use for scene interaction and event propagation, rather than animation or physics simulation itself.

• R3f Postprocessing

  by @EnzeD

  Configure React Three Fiber postprocessing, bloom, selection effects, ambient occlusion, and depth of field. Use for composer pipelines and screen-space effects, rather than mesh material shaders.

• R3f Loaders

  by @EnzeD

  Load and reuse 3D assets in React Three Fiber with useGLTF, useLoader, Suspense, and preloading. Use for model loading, decoder setup, caching, cloning, or loading/error UI.

• Style Direction

  by @686f6c61

  Abrir y operar el companion visual de Selina para elegir una direccion de estilo en proyectos con interfaz. Skill manual: levanta un servidor local y escribe artefactos visuales.

• Design Systems

  by @Automattic

  Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual style. Helps avoid generic "AI slop" aesthetics.

• Site Specification

  by @Automattic

  Extract comprehensive site specifications from simple descriptions. Use when analyzing a user's theme request to determine site type, audience, tone, layout requirements, and typography.

• Wordpress Block Theming

  by @Automattic

  WordPress Full Site Editing (FSE) theme architecture. Use when generating theme.json, block templates, template parts, patterns, and functions.php for WordPress block themes.

• Graphql Schema

  by @apollographql

  Guide for designing GraphQL schemas following industry best practices. Use this skill when: (1) designing a new GraphQL schema or API, (2) reviewing existing schema for improvements, (3) deciding on type structures or…

• Neo4j Nvl Skill

  by @neo4j-contrib

  Neo4j Visualization Library (NVL) — framework-agnostic graph rendering for the browser. Covers @neo4j-nvl/base (NVL class, nodes/relationships, Canvas vs WebGL renderer), @neo4j-nvl/interaction-handlers (ZoomInteraction,…

• Prd

  by @hellangleZ

  Generate a Product Requirements Document (PRD) for a new feature. Use when planning a feature, starting a new project, or when asked to create a PRD. Triggers on: create a prd, write prd for, plan this feature, requirements for,…

• Visual Design

  by @Factory-AI

  Image generation and presentations. Use when: - User asks for images: logos, icons, app assets, diagrams, flowcharts, architecture diagrams, patterns, textures, photo edits, restorations - User needs a presentation or slide deck…

• Frontend Design

  by @Factory-AI

  Build good-looking web interfaces. Use when: - User asks you to build a web app, website, landing page, or HTML page - User asks for a one-off tool, utility, or demo app - User is starting a new frontend project - User wants to…

• Showcase

  by @Factory-AI

  Background knowledge for droid-control workflows -- not invoked directly. Visual polish for videos via Remotion-powered window chrome, animations, and branded backgrounds.

• Glowmotion

  by @SylphAI-Inc

  Create premium animated technical diagrams as single self-contained HTML+SVG files — flowcharts whose connectors visibly flow and architecture diagrams where requests travel as glowing comet dots with fading trails, pulsing…

• Clone Anywebsite

  by @SylphAI-Inc

  Clone any website's landing page with pixel-perfect fidelity. Visual-first workflow: screenshot → sniper CSS extraction → deep DOM interrogation → animation detection → rebuild in React + Tailwind + Framer Motion. Uses AdaL…

• Cometchat Angular V5 Core

  by @cometchat

  Add CometChat chat to an Angular app end-to-end — detect the project, get & verify dashboard credentials, init→login→render with standalone components, and the drop-in conversation UI. The core knowledge every other Angular v5…

• Flutter Adaptive Ui

  by @MADTeacher

  Build, fix, review, and validate adaptive or responsive Flutter UIs for mobile, tablet, desktop, web, large screens, foldables, and mixed input devices. Use when creating breakpoint-driven layouts, responsive navigation,…

• Cometchat Android V6 Kotlin Customization

  by @cometchat

  Make the CometChat Android v6 UI match your app in the Kotlin XML Views cohort — theming via CometChatTheme.DayNight attributes, per-component styles, message-bubble styling, ViewHolder view slots, state views, long-press and…

• Cometchat Android V6 Compose Customization

  by @cometchat

  Make the CometChat Android v6 UI match your app in the Jetpack Compose cohort — theming with the CometChatTheme composable and lightColorScheme/darkColorScheme, per-component style data classes, @Composable view slots, state…

• Cometchat Angular V5 Customization

  by @cometchat

  Brand and customize the CometChat Angular UI Kit — CSS variable tokens, light/dark via ThemeService, localization, date/time formats, global config, and swapping component regions with ng-template. Triggers: 'change the chat…

• Cometchat Flutter V6 Customization

  by @cometchat

  Theme and brand the Flutter v6 UI Kit — light/dark mode, the CometChatColorPalette / CometChatTypography / CometChatSpacing theme extensions, per-widget style objects, and view slots. Triggers: 'change chat colors flutter',…

• Cometchat Ios Customization

  by @cometchat

  Brand and restyle the CometChat iOS UI Kit — theme colours, typography, per-component styles, localisation and sounds. Use for any 'make it match our brand' or 'change how it looks' request. Triggers: 'change cometchat colors…

• Cometchat Ios Migration

  by @cometchat

  Upgrade an existing CometChat iOS integration from UI Kit v4 to v5 — composite components removed, theming replaced, properties renamed. Triggers: 'upgrade cometchat ios to v5', 'migrate from v4 uikit ios',…

• Hypnotic Pattern

  by @Hmbown

  Hypnotic Pattern mesmerizes everyone who looks at it. The real-world version is attention design: loading animations, progress indicators, onboarding flows, and visual patterns that keep users oriented and engaged during a…

• Architecture

  by @TheBeardedBearSAS

  Flutter Architecture - Clean Architecture & Best Practices. Use when designing architecture or reviewing code structure.

• Architecture

  by @TheBeardedBearSAS

  Flutter-Architektur - Clean Architecture & Best Practices. Use when designing architecture or reviewing code structure.

• Architecture

  by @TheBeardedBearSAS

  React Native Architecture - Principles and Organization. Use when designing architecture or reviewing code structure.

• Architecture Clean Ddd

  by @TheBeardedBearSAS

  Clean Architecture + DDD + Hexagonal - Atoll Tourisme. Use when designing architecture or reviewing code structure.

• Architecture

  by @TheBeardedBearSAS

  React-Architektur. Use when designing architecture or reviewing code structure.

• Solid Principles

  by @TheBeardedBearSAS

  SOLID principles for clean code design and architecture

• K8s Manifest Generator

  by @HermeticOrmus

  Create production-ready Kubernetes manifests for Deployments, Services, ConfigMaps, and Secrets following best practices and security standards. Use when generating Kubernetes YAML manifests, creating K8s resources, or…

• Helm Chart Scaffolding

  by @HermeticOrmus

  Design, organize, and manage Helm charts for templating and packaging Kubernetes applications with reusable configurations. Use when creating Helm charts, packaging Kubernetes applications, or implementing templated deployments.

• Design Principles

  by @HermeticOrmus

  Core visual design principles that underpin all great design. Master gestalt psychology, visual hierarchy, composition, color theory, and typography fundamentals. Use when making design decisions or evaluating designs against…

• Design Masters

  by @HermeticOrmus

  Deep knowledge of legendary designers and their enduring contributions. Learn from Saul Bass, Massimo Vignelli, Dieter Rams, Paula Scher, and others whose work defines excellence. Use when seeking inspiration, understanding…

• Brand Systems

  by @HermeticOrmus

  Building comprehensive brand identity systems from strategy to implementation. Covers logo design, color palettes, typography pairing, voice guidelines, and system documentation. Use when creating new brands, rebranding, or…

• Design Movements

  by @HermeticOrmus

  Historical design movements and their enduring influence. Understand Bauhaus, Swiss International Style, Art Deco, Memphis, and more. Use when choosing an aesthetic direction, understanding cultural context, or predicting trend…

• Ui Agent Patterns

  by @HermeticOrmus

  Patterns for delegating UI work to specialized agents. Covers synthesis-master vs specialized agents, multi-agent UI generation workflows, and orchestration strategies for complex UI tasks.

• Prompt Engineering Ui

  by @HermeticOrmus

  Prompt patterns for consistent UI generation. Covers precise design intent communication, component specification formats, and iterative refinement patterns for LLM-driven UI development.

• Design System Context

  by @HermeticOrmus

  Managing design tokens and system context for LLM-driven UI development. Covers loading, persisting, and optimizing design decisions within context windows.

• Premium Saas Design

  by @HermeticOrmus

  Professional framework for building premium $5k+ SaaS websites with AI - the Define, Build, Review, Refine loop used by real product teams

• Olore Mantine Latest

  by @olorehq

  Local Mantine documentation reference (latest). Mantine is a React component library with 100+ UI components, hooks, form management, theming, dark mode, charts, date pickers, and extension packages.

• Olore Fumadocs Latest

  by @olorehq

  Local fumadocs documentation reference (latest). Fumadocs documentation framework. Use for building React.js documentation sites, MDX content, UI components, OpenAPI docs, CLI tools, and headless documentation with Next.js.

• Tailwindcss

  by @blencorp

  Tailwind CSS v4 utility-first styling patterns including responsive design, dark mode, and custom configuration. Use when styling with Tailwind, adding utility classes, configuring Tailwind, setting up dark mode, or customizing…

• Svg Precision Skill

  by @dkyazzentwatwa

  Generate deterministic SVGs from structured specs with validation and rendering. Use for icons, diagrams, charts, UI mockups, and technical drawings.

• Image Enhancement Suite

  by @dkyazzentwatwa

  Process images for cleanup, conversion, metadata, comparison, icons, palettes, collages, and sprite sheets. Use for single-image or batch image workflows.

• Qr Code Generator

  by @dkyazzentwatwa

  Generate QR codes with clean URLs, optional UTM parameters, captions, and print-safe exports. Use for single codes or batch campaign generation.

• Frontend Enhancer

  by @travisjneuman

  This skill should be used when enhancing the visual design and aesthetics of web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. REQUIRES ui-research skill…

• Generic Fullstack Ux Designer

  by @travisjneuman

  Professional UI/UX design expertise for full-stack applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design…

• Generic React Ux Designer

  by @travisjneuman

  Professional UI/UX design expertise for React applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design…

• Generic Fullstack Design System

  by @travisjneuman

  Complete design system reference for full-stack applications. Covers colors, typography, spacing, component patterns (shadcn/ui), effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing…

• Generic React Design System

  by @travisjneuman

  Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing…

• Generic Code Reviewer

  by @travisjneuman

  Review code for bugs, security vulnerabilities, performance issues, accessibility gaps, and CLAUDE.md workflow compliance. Supports any tech stack - HTML/CSS/JS, React, TypeScript, Node.js, Python, NestJS, Next.js, and more. Use…

• Generic Design System

  by @travisjneuman

  Complete design system reference for any project - colors, typography, spacing, components, animations. Adapts to project theme and tech stack. Use when implementing UI, choosing colors, creating animations, or ensuring brand…

• Case Interview Practice

  by @travisjneuman

  Interactive consulting case interview practice with structured frameworks, feedback mechanisms, and progressive difficulty. Use when preparing for management consulting interviews, case competitions, or business problem-solving…

• Email Systems

  by @travisjneuman

  Transactional email (Resend, SendGrid, SES), templates (React Email, MJML), deliverability (SPF/DKIM/DMARC), and inboxing best practices. Use when building email infrastructure, designing templates, or troubleshooting…

• Generic Feature Developer

  by @travisjneuman

  Guide feature development with architecture patterns for any tech stack. Covers frontend, backend, full-stack, and automation projects. Use when adding new features, modifying systems, or planning changes.

• Ar Vr Xr

  by @travisjneuman

  AR/VR/XR development with Unity XR, WebXR, ARKit, ARCore, Meta Quest SDK, and spatial computing. Use when building augmented reality, virtual reality, mixed reality applications, or spatial experiences.

• Content Repurposer

  by @travisjneuman

  Adapt content across platforms with tone/format shifting — blog to social, long to short, text to visual outline. Use when repurposing content for different channels, audiences, or formats.

• Android Development

  by @travisjneuman

  Android development with Kotlin, Jetpack Compose, and modern Android architecture. Use when building Android apps, implementing Material Design, or following Android best practices.

• Brand Identity

  by @travisjneuman

  Brand strategy and identity design for businesses and products. Use when creating brand guidelines, developing visual identity systems, or defining brand positioning.

• Game Development

  by @travisjneuman

  Game development with Unity, Unreal Engine, and Godot. Use when building games, implementing game mechanics, physics, AI, or working with game engines.

• Ast Cpo

  by @aAAaqwq

  CPO (Steve Jobs)｜需要产品方向取舍、用户问题定义与需求澄清、体验与可访问性评审、优先级排序或可验证需求拆解时调用。 不适用：技术可行性与架构选型、获客渠道与投放执行、跨部门交付排期，或用户证据已充分只需界面与信息架构设计。

• Hatch Pet

  by @antoniolg

  Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom…

• X Republish

  by @antoniolg

  Republish an already-published X post into one or more destinations managed in PostFlow by extracting the source post text, capturing the quoted post cleanly, adapting the copy when needed, and creating or scheduling the…

• Gen Pdf

  by @antoniolg

  Converts a Markdown file to a styled PDF with DevExpert branding (logo in bottom-right corner). Use when asked to generate a PDF from a Markdown document, or when any DevExpert proposal/document needs to be exported as PDF.

• Image Taste Frontend

  by @antoniolg

  Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it…

• Design Craft

  by @wasintoh

  Constraint + process skill for UI that reads "designed", not "AI-generated". Mandatory two-pass process (token plan grounded in the subject's world + ONE signature element, then self-critique) whose output is the project's root…

• Vibe Orchestrator

  by @wasintoh

  Master workflow controller for Lovable-style development. Creates working UI immediately from ANY prompt - no questions asked, no choices given. Resumes or materializes .toh/plan.md, generates the design identity (root…

• Orchestration Protocol

  by @wasintoh

  The single source of truth for how TFW commands survey their runtime, choose an execution mode (teams / subagents / sequential), route models, and run the TOH LOOP — the autonomous plan-execute-verify protocol driven by…

• Ui First Builder

  by @wasintoh

  Creates production-ready UI immediately from any description. Generates complete pages, components, and realistic mock data in FIRST response. Uses Next.js 16 + Tailwind + shadcn/ui. Never asks questions - infers everything from…

• Preview Mode

  by @wasintoh

  Show-before-commit previews — after completing work, present what changed as a live dev-server URL or a concise plain-language description so the user can confirm or request changes with confidence. Use when delivering visible…

• Premium Experience

  by @wasintoh

  Premium app generation that creates WOW-factor experiences. Multi-page apps with smooth animations, zero TypeScript errors, and production-ready quality. Lovable-style experience: one prompt, complete app, instant delight. MUST…

• Pix

  by @skobak

  Launches an autonomous, pixel-perfect UI implementation loop using Figma MCP and Chrome.

• Oiloil Ui Ux Guide

  by @oil-oil

  梳理项目 UI/UX 设计规范并输出 design-spec.md，评审现有界面并给出按优先级排序的修复建议，或整理指定界面的设计规则。用户要求设计系统、设计规范或完整界面评审时使用；单个颜色、字号或按钮大小的简单问题直接回答。

• Image Analysis

  by @pascalorg

  Extract color palettes from images (screenshots, Figma exports, design mockups) to help implement matching UI. Use when the user shares a screenshot, design image, or asks to "match these colors", "extract colors from this…

• Contrast Check

  by @pascalorg

  Check color contrast ratios against WCAG AA and AAA accessibility standards. Use when the user wants to verify if their color combinations are accessible, check contrast between text and background colors, or audit a palette for…

• Image Compare

  by @pascalorg

  Compare two images pixel-by-pixel and get a visual diff. Use when the user wants to compare their implementation against a design, spot differences between two screenshots, or verify visual regression.

• Svelte Layerchart

  by @spences10

  Svelte LayerChart patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.

• Rspress Custom Theme

  by @rstackjs

  Customize Rspress v2 themes with CSS variables, class overrides, Layout slots, icons, or component ejection.

• Web Design

  by @pascalorg

  Web design reference for building production-grade interfaces. Covers layout, typography, color, spacing, shadows, animation, accessibility, responsive design, components, performance, and UX psychology. Use when building UI,…

• Rslib Modern Package

  by @rstackjs

  Design, modernize, or review JS/TS npm packages using an opinionated Rslib baseline for ESM, exports, types, dependencies, and release readiness.

• Rspress Best Practices

  by @rstackjs

  Configure, review, or troubleshoot Rspress v2 sites, including content conventions, navigation, MDX, assets, search, and deployment.

• Connections Optimizer

  by @mturac

  レビュー優先の整理、フォロー/追加の推薦、ユーザーの実際の声で書かれたチャネル別ウォームアウトリーチのドラフトを通じて、ユーザーのXとLinkedInネットワークを再編成します。フォローリストを整理したい、現在の優先事項に向けて成長したい、または高品質な関係を中心にソーシャルグラフのバランスを取り直したい場合に使用します。

• Crosspost

  by @mturac

  X、LinkedIn、Threads、Bluesky間のマルチプラットフォームコンテンツ配布。content-engineパターンを使用してプラットフォームごとにコンテンツを適応します。同一コンテンツをクロスプラットフォームで投稿することはありません。コンテンツをソーシャルプラットフォーム間で配布したい場合に使用します。

• Content Engine

  by @mturac

  X、LinkedIn、TikTok、YouTube、ニュースレター、マルチプラットフォームキャンペーンのプラットフォームネイティブなコンテンツシステムを作成します。ソーシャル投稿、スレッド、スクリプト、コンテンツカレンダー、または1つのソースアセットを複数プラットフォームにきれいに適応したい場合に使用します。

• Brand Voice

  by @mturac

  実際のポスト、エッセイ、ローンチノート、ドキュメント、またはサイトコピーからソース派生の執筆スタイルプロファイルを構築し、コンテンツ、アウトリーチ、ソーシャルワークフロー全体でそのプロファイルを再利用します。ユーザーが一般的なAI執筆トロープなしで声の一貫性を望む場合に使用します。

• Frontend Tailwind Best Practices

  by @sergiodxa

  Tailwind CSS patterns and conventions for frontend apps. Use when writing component styles, layouts, or working with CSS classes.

• Frontend Accessibility Best Practices

  by @sergiodxa

  Accessibility (a11y) best practices for React components. Use when creating UI components, forms, interactive elements, or reviewing code for accessibility compliance.

• Lemonsqueezy Ui Skills

  by @ihlamury

  Lemonsqueezy's UI design system. Use when building interfaces inspired by Lemonsqueezy's aesthetic - light mode, Inter font, 4px grid.

• Hugging Face Ui Skills

  by @ihlamury

  Hugging Face's UI design system. Use when building interfaces inspired by Hugging Face's aesthetic - dark mode, Inter font, 4px grid.