Design AI agent skills

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

• React Best Practices

  by @elianiva

  React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks…

• Matt Teach

  by @elianiva

  Teach the user a new skill or concept, within this workspace.

• Batch Grill Me

  by @elianiva

  A relentless interview that asks every frontier question at once, round by round.

• Emil Design Eng

  by @elianiva

  This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

• Crafting Readme Files

  by @Dicklesworthstone

  Craft professional README.md files for GitHub open source projects. Generates hero sections, installation instructions, feature tables, and architecture diagrams. Use when creating or revising a README, documenting a CLI tool,…

• Creating Share Images

  by @Dicklesworthstone

  Create OpenGraph and Twitter share images for Next.js applications using next/og ImageResponse. Generates dynamic social preview cards with gradients, SVG icons, and proper dimensions. Use when building OG images, Twitter cards,…

• Testing Patterns

  by @Dicklesworthstone

  Common testing patterns and practices. This skill is designed to be included in composite skills via the 'includes' feature.

• Portal

  by @meta-quest

  Build and sideload Android apps for Meta Portal devices (Portal, Portal+, Portal Mini, Portal Go, Portal TV) using metavr. Use when targeting Portal hardware — covers ADB enablement, the no-GMS constraint, manifest/launcher…

• Gluestack Components

  by @TheBushidoCollective

  Use when building UI with gluestack-ui components. Covers component composition, variants, sizes, states, accessibility props, and platform-specific considerations for React and React Native.

• Hz Unity Meta Quest Ui

  by @meta-quest

  Configures Unity UI for Meta Quest and Horizon OS VR development — world-space canvases, TextMesh Pro setup, comfortable sizing, viewing distances, and interaction readiness.

• Gluestack Theming

  by @TheBushidoCollective

  Use when customizing gluestack-ui themes and design tokens. Covers theme provider setup, design tokens, dark mode, NativeWind integration, and extending themes.

• Gluestack Mcp Tools

  by @TheBushidoCollective

  Use when discovering, exploring, or retrieving gluestack-ui components via MCP tools. Provides access to component source code, variants, demos, and metadata.

• Review

  by @TheBushidoCollective

  Multi-agent code review with confidence-based filtering

• Shadcn

  by @julianromli

  Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries,…

• Make Interfaces Feel Better

  by @julianromli

  Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit…

• Seo Audit

  by @julianromli

  When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," "SEO health…

• Ui Ux Pro Max

  by @julianromli

  UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React…

• Frontend Skill

  by @julianromli

  Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while…

• Clone Website

  by @julianromli

  Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to…

• Presentation Creation

  by @seb1n

  Create polished, audience-tailored presentations from outlines or documents, with support for Marp, reveal.js, Google Slides, and PPTX output formats. Use when the user requests presentation creation or provides relevant inputs…

• Logo Design

  by @seb1n

  Design professional, scalable logos with complete brand identity deliverables including color palettes, typography, format variations, and usage guidelines. Use when the user requests logo design or provides relevant inputs for…

• Wireframing

  by @seb1n

  Create text-based wireframes at low, mid, and high fidelity with component inventories, interaction annotations, and responsive breakpoint specifications. Use when the user requests wireframing or provides relevant inputs for…

• Accessibility Testing

  by @seb1n

  Audit web interfaces against WCAG 2.1 AA/AAA standards, identify violations, and produce actionable remediation reports with code fixes. Use when the user requests accessibility testing or provides relevant inputs for this…

• Frontend Design

  by @seb1n

  Design and build production-ready frontend interfaces with design systems, responsive layouts, accessible components, and dark mode support. Use when the user requests frontend design or provides relevant inputs for this workflow.

• Ui Ux Pro Max

  by @ZhanlinCui

  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,…

• Intent

  by @ghaida

  The entry point for Intent, a UX and design strategy system. Sets project context, routes to specialized skills, and loads foundational UX knowledge. Activate when starting any UX or product design work, setting project context,…

• Wireframe

  by @ghaida

  Design the structural anatomy of screens at wireframe fidelity — what goes where and why, before anyone argues about how it looks. Part of the Intent design strategy system. Produces lo-fi idea boards for divergent exploration,…

• Philosopher

  by @ghaida

  A cross-cutting cognitive mode for sitting with design problems before rushing to solve them. Part of the Intent design strategy system. Activates expansive brainstorming: hyperassociativity, beginner's mind, cross-domain…

• Fortify

  by @ghaida

  Harden designs for real-world use by systematically identifying and designing for every condition outside the happy path. Part of the Intent design strategy system. Covers state inventories, error recovery, empty states, loading…

• Journey

  by @ghaida

  Design any user-facing experience end-to-end: task flows, multi-step workflows, navigation structures, onboarding, settings, search, content creation, collaboration, signup, checkout, dashboards, notifications, error recovery,…

• Articulate

  by @ghaida

  Design the words in a product — labels, instructions, errors, confirmations, empty states, onboarding copy, tooltips, voice and tone frameworks, and content models. UX writing and content strategy as a deep discipline. Trigger…

• Organize

  by @ghaida

  Structure information so people can find what they need, understand where they are, and navigate confidently. Covers navigation pattern design, taxonomy, labeling systems, search and browse strategy, wayfinding, and IA research…

• Specify

  by @ghaida

  Bridges design and engineering by producing detailed specs, organized handoff packages, asset inventories, and cross-functional documentation. Part of the Intent design strategy system. Trigger when: writing design specs,…

• Web Performance Seo

  by @ZhanlinCui

  Fix PageSpeed Insights/Lighthouse accessibility "!" errors caused by contrast audit failures (CSS filters, OKLCH/OKLAB, low opacity, gradient text, image backgrounds). Use for accessibility-driven SEO/performance debugging and…

• Web Design Engineer

  by @TheSyart

  Build high-quality visual Web artifacts using HTML/CSS/JavaScript/React — web pages, landing pages, dashboards, interactive prototypes, HTML slide decks, animated demos, UI mockups, data visualizations, and more. Use this skill…

• Quasar Skilld

  by @skilld-dev

  Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time. ALWAYS use when writing code importing "quasar". Consult for debugging, best practices, or modifying quasar.

• Vuetify Skilld

  by @skilld-dev

  Vue Material Component Framework. ALWAYS use when writing code importing "vuetify". Consult for debugging, best practices, or modifying vuetify.

• Floating Ui Vue Skilld

  by @skilld-dev

  Floating UI for Vue. ALWAYS use when writing code importing "@floating-ui/vue". Consult for debugging, best practices, or modifying @floating-ui/vue, floating-ui/vue, floating-ui vue, floating ui vue, floating-ui, floating ui.

• Motion V Skilld

  by @skilld-dev

  ALWAYS use when writing code importing "motion-v". Consult for debugging, best practices, or modifying motion-v, motion v, motion-vue, motion vue.

• Vue Data Ui Skilld

  by @skilld-dev

  A user-empowering data visualization Vue 3 components library for eloquent data storytelling. ALWAYS use when writing code importing "vue-data-ui". Consult for debugging, best practices, or modifying vue-data-ui, vue data ui.

• Frappe Syntax Customapp

  by @Impertio-Studio

  Use when building Frappe custom apps from scratch. Covers app structure, pyproject.toml configuration, module creation, patches, and fixtures for v14/v15/v16. Prevents common mistakes with app scaffolding and module…

• Frappe Syntax Print

  by @Impertio-Studio

  Use when creating print formats or generating PDFs in Frappe v14-v16. Covers Jinja print formats, Print Designer [v15+], Letter Head, PDF generation API (get_pdf, download_pdf), Report print formats ({%= %} syntax), page breaks,…

• Frappe Ops Website Deploy

  by @Impertio-Studio

  Deploy HTML/CSS websites to ERPNext/Frappe (v15/v16) as Web Pages via the REST API. Use this skill whenever a user wants to host a website on ERPNext, deploy HTML mockups to Frappe, create Web Pages programmatically, configure…

• Matlab Uihtml Design

  by @matlab

  Generate beautiful, distinctive HTML/CSS/JS control panels for MATLAB uihtml components. 8 built-in styles (Clean, Material, Cosmic Dark, Neumorphic Dark, Dashboard Light, Midnight Gradient, Minimal Mono, Warm Dark) plus custom…

• Prd V04 Screen Flow Definition

  by @mattgierhart

  Connect user journeys to screens, defining the UI structure and navigation paths during PRD v0.4 User Journeys. Triggers on requests to define screens, design screen flows, map UI structure, plan navigation, or when user asks…

• Artifacts Builder

  by @Kilo-Org

  Suite of tools for creating elaborate, multi-component HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui…

• Prd V04 Visual Prototype Gate

  by @mattgierhart

  Generate visual prototype prompts from SCR- entries for Google Stitch (or equivalent UI generation tool). Triggers on: 'make a prototype', 'visualize screens', 'generate Stitch prompt', 'I need a visual demo', 'prototype the…

• Prd V09 Alternatives Pages

  by @mattgierhart

  Generate "X vs Y" and "Alternative to X" SEO/CRO pages targeting competitive search intent during PRD v0.9 Go-to-Market. Triggers on requests to build comparison pages, target competitive search traffic, or when user asks "build…

• Matlab Uihtml App Builder

  by @matlab

  Build interactive web applications using HTML/JavaScript interfaces with MATLAB computational backends via the uihtml component. Use when creating HTML-based MATLAB apps, JavaScript MATLAB interfaces, web UIs with MATLAB,…

• Firecrawl Website Design Clone

  by @firecrawl

  Extract any website's design system into an agent-ready DESIGN.md using Firecrawl scrape evidence. Use when the user wants colors, fonts, spacing, components, layout patterns, or brand/UI guidance from a website so AI agents can…

• Ux Map

  by @smnandre

  Symfony UX Map for interactive maps with Leaflet or Google Maps in Symfony. Covers markers, polygons, polylines, circles, info windows, and LiveComponent integration. Use when displaying maps, placing markers, drawing shapes or…

• Ux Icons

  by @smnandre

  Symfony UX Icons for rendering SVG icons in Twig templates. Supports 200,000+ Iconify icons (Lucide, Heroicons, Tabler, Material Design, etc.), local SVG files, and custom icon sets with aliases. Use when displaying icons,…

• Symfony Ux

  by @smnandre

  Symfony UX frontend stack -- decision tree and orchestrator for choosing between Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons, and UX Map. Use when the user is unsure which tool fits, wants to combine multiple UX…

• Ui Design

  by @JayZeeDesign

  Use this to design a nice UI in single html as inspiration & UI exploration.

• Design Style

  by @NakanoSanku

  Use this skill when the user asks to build, create, design, develop, or improve ANY frontend interface, web page, UI component, or visual element. This includes: - Building landing pages, websites, web apps, dashboards,…

• Design System Analyzer

  by @NakanoSanku

  Analyze any website's UI style using ChromeDevTools to extract precise CSS tokens, animations, and interaction states. Handles complex sites and anti-bot measures by guiding the user. Triggers on "analyze this site", "extract UI…

• Worldbuilding

  by @jwynia

  Diagnose world-level story problems. This skill should be used when settings feel thin, institutions feel designed rather than evolved, economies don't make sense, or non-human species feel like humans in costume. Keywords:…

• Key Moments

  by @jwynia

  Structure stories around essential emotional moments using Rodriguez's approach integrated with elemental genres. Use when plotting feels mechanical, when emotional beats need defining, or when building stories from vivid scenes…

• Economic Systems

  by @jwynia

  Design economic systems for fictional worlds. Use when worldbuilding needs currencies, trade networks, resource economies, or when economic pressures should drive plot and character motivation.

• App Store Optimization

  by @TerminalSkills

  Optimize mobile app listings for discovery and conversion in Apple App Store and Google Play. Use when tasks involve ASO keyword research, title and subtitle optimization, screenshot and preview video design, A/B testing store…

• Accessibility Auditor

  by @TerminalSkills

  Audit web pages and components for WCAG 2.2 accessibility compliance. Use when a user asks to check accessibility, find a11y issues, audit for WCAG compliance, fix screen reader problems, check color contrast, ensure keyboard…

• Aceternity Ui

  by @TerminalSkills

  Add premium animated UI components built with Framer Motion and Tailwind CSS using Aceternity UI. Use when: adding animated effects (3D cards, glowing backgrounds, spotlight effects, moving borders), building visually stunning…

• Ai Workflow Automation

  by @omer-metin

  The systematic orchestration of AI-powered marketing workflows that combine content generation, approval processes, multi-channel distribution, and quality gates into cohesive automation systems. This skill integrates AI…

• Ai Creative Director

  by @omer-metin

  The orchestration layer for AI-native creative production. This skill coordinates multiple AI tools—video, image, audio, digital humans, effects—into cohesive campaigns, productions, and creative systems. As AI tools…

• Animation Systems

  by @omer-metin

  Expert in real-time game animation systems including skeletal animation, blend trees, state machines, inverse kinematics, root motion, procedural animation, and animation retargeting. Specializes in creating fluid, responsive…

• Ambassador Programs

  by @omer-metin

  Expert in designing and running ambassador, champion, and advocacy programs. Covers recruiting community leaders, structuring tiers and rewards, managing at scale, and turning passionate users into official representatives. Use…

• Agent Based Modeling

  by @omer-metin

  Design and implement agent-based models (ABM) for simulating complex systems with emergent behavior from individual agent interactions. Use when "agent-based, multi-agent, emergent behavior, swarm simulation, social simulation,…

• Ai Brand Kit

  by @omer-metin

  Build comprehensive AI-native brand asset systems that maintain consistency across all AI-generated content. Train AI tools on brand guidelines, create reusable prompt libraries, and manage visual/voice assets at scale. Use when…

• Mobile Android Design

  by @hanamizuki

  Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.

• Educational Presentation

  by @guia-matthieu

  Transform Claude into an expert in evidence-based educational presentation design. Use when designing presentations for teaching, training, or learning contexts where retention and comprehension matter. Applies Cognitive Load…

• Taste Stitch

  by @hanamizuki

  Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and…

• Taste Image To Code

  by @hanamizuki

  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…

• Taste Gpt

  by @hanamizuki

  Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP…

• Taste Brutalist

  by @hanamizuki

  Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or…

• Taste Soft

  by @hanamizuki

  Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or…

• Taste Redesign

  by @hanamizuki

  Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

• Asc Cli Usage

  by @hanamizuki

  Guidance for using asc cli in this repo (flags, output formats, pagination, auth, and discovery). Use when asked to run or design asc commands or interact with App Store Connect via the CLI.

• Compose Ui

  by @hanamizuki

  Best practices for building UI with Jetpack Compose, focusing on state hoisting, detailed performance optimizations, and theming. Use this when writing or refactoring Composable functions.

• Viewmodel

  by @hanamizuki

  Best practices for implementing Android ViewModels using Kotlin 2.3+ Explicit Backing Fields, StateFlow for UI state, and SharedFlow for one-off events.

• Taste Minimalist

  by @hanamizuki

  Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

• Design Trends 2026

  by @guia-matthieu

  Apply 2026's top graphic design trends to any creative brief. Based on Kittl × Savee's 2026 Design Trends Report (10 trends + 2 honorable mentions), backed by Adobe, Figma, and Pinterest data. Use when: **Designing a brand…

• Expert Secrets

  by @guia-matthieu

  Apply Russell Brunson's Expert Secrets framework to build a mass movement around expertise — create a charismatic leader persona, design a new-opportunity offer, craft belief-breaking stories, and structure a Perfect Webinar…

• Image To 3d Pipeline

  by @guia-matthieu

  Transformez une image 2D en modèle 3D animé prêt pour le web ou le jeu en moins de 30 minutes, en utilisant le workflow Dilum Sanjaya (Hunyuan3D + Mixamo). Use when: **Créer un personnage 3D pour un site web** - Mascotte,…

• Permission Marketing

  by @guia-matthieu

  Build marketing that people actually want using Seth Godin's Permission Marketing methodology—earn attention instead of demanding it, turning strangers into friends and friends into customers. Use when: **Build an email list**…

• Website Finishing Director

  by @guia-matthieu

  Run a structured 5-pass finishing audit on any website before launch — scoring visual polish, technical foundation, UX completeness, content quality, and cross-device readiness on 100 points. Use when: **Pre-launch** - Final…

• Landing Page Optimizer

  by @guia-matthieu

  Optimize landing pages for maximum conversions using proven frameworks from Unbounce and Oli Gardner—apply the "one goal, one message, one action" principle with data-driven design, copy, and CTA best practices. Use when:…

• Dan Kennedy Copy

  by @guia-matthieu

  Write copy that sells NOW using Dan Kennedy's "No B.S." direct response marketing principles Use when: **Writing sales copy** that must generate immediate, trackable response; **Creating direct mail pieces**, sales letters, or…

• Purple Cow Marketing

  by @guia-matthieu

  Create remarkable products and experiences that spread through word of mouth using Seth Godin's Purple Cow methodology Use when: **Launching a new product** and need it to stand out in a crowded market; **Differentiating your…

• Podcast Production

  by @guia-matthieu

  Master Ira Glass's narrative storytelling methodology from This American Life to create podcasts that captivate listeners through the power of story. Use when: Creating a branded podcast or audio content series; Structuring…

• Podcast Interview

  by @guia-matthieu

  Master the art of podcast interviewing using NPR training methodology and Tim Ferriss's preparation techniques to extract compelling stories and insights from any guest. Use when: Preparing for a podcast interview with a guest;…

• Voice Design

  by @guia-matthieu

  Select and create the perfect AI voice for your content using ElevenLabs, Qwen3-TTS, and other platforms—matching voice characteristics to brand personality and audience. Use when: Choosing an AI voice for video narration;…

• Sound Design Film

  by @guia-matthieu

  Apply Walter Murch's legendary film sound principles to marketing video, creating emotionally resonant audio that audiences feel without consciously noticing. Use when: Designing sound for brand films and documentaries; Creating…

• Audio Logo Design

  by @guia-matthieu

  Create memorable sonic logos using design principles from Intel, Netflix, and McDonald's—crafting 2-5 second audio signatures that achieve instant brand recognition. Use when: Creating a sonic logo for a brand; Evaluating audio…

• Landing Page Copy

  by @guia-matthieu

  Build high-converting landing pages with proven structure, persuasive sections, and best practices. From hero to footer—every element optimized. Use when: Writing landing pages from scratch; Improving existing underperforming…

• Cta Writing

  by @guia-matthieu

  Master the art of calls-to-action that convert. Direct CTAs, transitional CTAs, button copy, and microcopy that turns readers into customers. Use when: Writing button text for landing pages and emails; Creating CTAs for…

• Video Testimonial

  by @guia-matthieu

  Capture authentic customer testimonials through guided self-recording workflows, from outreach and briefing to recording and publishing. Use when: Building social proof for marketing campaigns; Creating customer success stories;…

• Naming 6 Gates

  by @guia-matthieu

  Use when creating brand names, product names, or company names in 2026. Use when naming needs to work across languages, voice assistants, and AI recommendation engines. Use when previous name candidates failed trademark or had…

• Content Style Guide

  by @bitwarden

  Bitwarden's product content style guide for end-user-facing GUI copy — voice, tone, AP-style-with-exceptions grammar, sentence case in UI, and accessibility-first language at a U.S. 7th-grade reading level.

• Applying Bitwarden Branding

  by @bitwarden

  Apply Bitwarden brand standards — logo usage, color palette, typography, iconography, and capitalization rules — grounded in bitwarden.com/brand and the bitwarden/brand repository.

• Evolving Design System Components

  by @bitwarden

  Propose a new UI pattern or modify an existing Design System component per Bitwarden's published governance process — design-team alignment, Core vs. Recipe/Snowflake decision with UI Foundation, Figma branching and property…