Design

Create animated GIFs optimized for Slack with built-in validation and easing functions.

Apply professional themes with curated color palettes and font pairings to any artifact.

Create generative art using p5.js with seeded randomness and interactive parameter exploration.

Create museum-quality visual art in PNG and PDF formats using design philosophy methodology.

Apply brand-consistent colors and typography to any artifact.

Extract a complete Brand Kit from a live website by driving the in-app browser. Use when a brand-extraction project opens with a site in the Browser tab, or when the user asks to "extract a brand"…

Opinionated, evolving constraints to guide agents when building interfaces. Useful for keeping output coherent across many small UI pieces.

SwiftUI 前端设计 skill — anti AI-slop rules, design direction advisor, brand asset protocol, and five-dimension review. Works with Claude Code, Cursor, Codex, and OpenCode.

Generate hand-drawn Excalidraw diagrams from a prompt — animated SVG, hosted edit link, and PNG export. Works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths.

Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch.

Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions…

Senior Designer review: rates each design dimension 0-10, explains what a 10 looks like, and flags AI Slop signals. Useful as a gate before merging UI work.

Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.

Build a complete design system from scratch with creative risks and realistic product mockups. Useful for kickoff workshops and brand-from-zero work.

Vertical poster or Moments-style share image with strong visual impact.

Color science expert skill with 286K words of reference material covering OKLCH/OKLAB, palette generation, accessibility/contrast, color naming, pigment mixing, and historical color theory.

300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps. Useful when shipping a single design across iOS, Android, and the web.

Teaches the agent to produce D3 charts and interactive data visualizations. A comprehensive D3.js skill with examples across chart types and techniques giving the agent expert-level knowledge to…

Mobile login and authentication flow screens

Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.

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

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated.

Apple Human Interface Guidelines as 14 agent skills covering platforms, foundations, components, patterns, inputs, and technologies for iOS, macOS, visionOS, watchOS, and tvOS.

AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from…

Follow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass.

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

Turn vague taste, screenshots, URLs, product notes, or "make it feel like this" references into a grounded DESIGN.md plus an implementation handoff.

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality.

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations.

Motion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade…

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…

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects.

Review UI code for compliance with 100+ web interface best practices.

Generate animation-rich HTML presentations from scratch or by converting PowerPoint files into web slides.

Provide Figma layout information to AI coding agents for accurate design implementation.

Skill from google-labs-code: enhance-prompt

Skill from google-labs-code: react-components

Skill from google-labs-code: remotion

Skill from google-labs-code: stitch-loop

Skill from google-labs-code: design-md

Skill from google-labs-code: stitch-design

Skill from google-labs-code: taste-design

Skill from google-labs-code: shadcn-ui

Figma's official MCP server exposing design structure, auto-layout, and styles to AI coding agents.

Programmatic Excalidraw canvas — let Claude draw, edit, and export hand-sketched diagrams and wireframes in real time.

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI.

Official MCP server exposing ElevenLabs text-to-speech, voice cloning, sound effects, and audio transcription.

AI-native video production toolkit covering programmatic rendering, voiceover, and brand-consistent themes.

Plugin that lets Claude watch and reason about videos via frame extraction and audio transcription.

Official Penpot MCP — read, write, and prototype in the open-source Figma alternative directly from Claude.

Validate token files structurally against DTCG 2025.10 (including resolvers), Style Dictionary 3 to 5 or Tokens Studio: parse errors, $type/$value, name rules, broken or circular aliases.

Skill from murphytrueman: triage

Search and fetch high-quality royalty-free Unsplash photos directly inside Claude with proper attribution.

Specialist assistant for design system tokens, components, patterns, and best practices across major DS libraries.

Write "choosing between" pages (docs/choosing/) that route an intent to the right component via narrowing questions; YAML trees on request.

Holistic health check across tokens, components, docs, adoption, governance, AI readiness, platform maturity, with status labels and an inferred maturity stage.

Turns existing audit or health output, or saved recurring runs, into an HTML dashboard, SVG charts or Mermaid diagrams. Triggers: visualise the findings, dashboard, chart, graph the trends.

Deep audit of a component library: inventory, usage, duplication, complexity, coverage gaps. Triggers: audit my components, unused components, what components do I have, assess my library.

Find hardcoded colour, spacing and type values and wrong-tier token references in consuming code. Trigger: find hardcoded values, any hex in the code, are we using tokens correctly, token compliance.

Onboarding guide for a designer or engineer joining a team that uses the design system, grounded in the repo and Figma library rather than a template.

Investment pitch for a new or continuing design system: cost of current state, ROI with visible assumptions, objections, the ask.

Turn written governance rules into enforcement that runs: ESLint, Stylelint, dependency-cruiser and CODEOWNERS config traced to sources, plus GOVERNANCE.md for rules with no executable form.

Generate machine-readable index files in .ai/index/ (component inventory, uses/usedBy graph, stats) for AI agents. Triggers: index my codebase, build a relationship graph, what depends on what.

Document a multi-component pattern (form validation, empty states, error handling): when to use, composition, states, a11y, anti-patterns. Triggers: document this pattern, write the pattern page.

Adoption report: coverage (what the system provides), reach (teams with access) and adoption (teams shipping with it), design vs engineering, trend and at-risk teams.

Review how a shipped release, migration or deprecation went against its plan: blast radius, comms, migration, timeline, support load, each gap classed.

Skill from murphytrueman: session-memory

Audit one design system component's accessibility against WCAG 2.2 AA: keyboard, screen reader, contrast, focus, ARIA, target size.

Write the AGENTS.md that tells coding agents how to use this design system: where things live, sourced rules, how to check work, what not to do; Claude, Cursor or Copilot pointers on request.

Write usage guidelines for one named component: when to use, when not to, edge cases, anti-patterns, a11y, quick-reference card. Triggers: usage guidelines for X, do's and don'ts for X.

Turns design system status or a recommendation into a one-page brief in business language. Use it whenever someone wants an update, summary or note on the system for a VP, exec or stakeholder…

Write reference docs for existing design tokens: semantic intent, use/do-not-use, references, used-by, theming contract, misuse list.

Plan a deprecation end to end for a component, token, variant or pattern: usage audit, migration path, timeline to a major-version removal, notices.

Write release notes, a migration guide and a team announcement for a design system change that is already decided, scaled to its impact.

Skill from murphytrueman: engineering-onboarding

Skill from murphytrueman: system-benchmark

Generate tested jscodeshift/postcss codemods for design system migrations: token renames, prop renames or removals, import paths, component swaps.

Audit theme parity: tokens missing or unchanged per theme, component tokens bypassing semantics, contrast within each theme, resolver contexts, theme-switch regressions.

Write a narrative decision record (ADR) for a design system choice: context, options, trade-offs, consequences, including declined proposals.

Audit Figma variable collections: tier mapping, naming, alias chains, modes, orphans; can fix in place with Figma Console MCP.

Skill from murphytrueman: designer-onboarding

Generate per-component JSON metadata files (.ai/metadata/) from source: props, behaviour, composition, a11y contract, prohibited prop combinations.

Turn existing audit findings into sprint-ready tickets with T-shirt estimates, acceptance criteria, dependencies and phases.

Skill from murphytrueman: context-engine-builder

Decide the semver bump (major, minor or patch) for a design system release from a diff or change list, with reasoning and a CHANGELOG entry.

Finds where consuming code has drifted from what the design system intended: local re-implementations, token overrides, forked patterns, classified by cause.

Audit component and pattern naming for consistency and clarity, with rename suggestions. Triggers: naming review, are our component names consistent, fix our naming. Token names: token-audit.

Write a six-section prose description (purpose, props, anti-patterns, composition, accessibility, examples) for a Figma component's description field so LLMs read it via MCP.

Design or document how new work enters a design system: contribution types, proposal criteria, review stages, sign-off and release.

Audit how design tokens are defined: tiers, naming, alias chains, raw values, orphans, DTCG readiness. Triggers: audit my tokens, token architecture review, token health check.

Compares a component or screen's design spec with its code and logs each gap as a build error or spec gap.

Generate CI pipeline files and check scripts (GitHub Actions, GitLab, CircleCI, Bitbucket) that automate design system checks: token validation, hardcoded values, a11y scans, visual regression…

Audit prop APIs across a component library: naming consistency, boolean/default patterns, type coverage, exported types, breaking changes between versions.

Audit whether docs keep pace with components: undocumented components, stale docs, orphaned pages, with join confidence. Triggers: docs coverage, which components are undocumented, stale docs check.

Stack-agnostic skills covering brand, design, content, SEO, dev, ops, growth, and research for websites.

Official Recraft MCP for brand-consistent vector art, illustrations, mockups, and on-brand raster images.

Run any image-gen model (Flux, SDXL, Imagen, Recraft) hosted on Replicate from Claude with prompt-based generation and editing.

Skill for YouTube creators covering audits, video SEO, retention scripts, thumbnails, and Shorts strategy.

Agent skill to extract color palettes from images — screenshots, Figma exports, design mockups. Installable via npx skills add pascalorg/image-analysis

Extract text from images using OCR. Use when the user shares a screenshot and you need to read the text content, copy UI labels, or extract copy from a design mockup.

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…

Multi-model agent orchestration using specialized agents for planning, coding, research, math/science, visual analysis, and adversarial review.

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

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…

Extract color palettes from images (screenshots, Figma exports, design mockups) to help implement matching UI.

Rebuild a live web page 1:1 from measurement into Figma, Penpot or code, then verify it. Use when reproducing a page or checking a rebuild against the original.

Lighthouse audits and Core Web Vitals — LCP, CLS, INP. Use when optimising page load, layout shift, input delay, images, fonts or render-blocking resources.

Orchestrator that routes a UI/UX task through brand, tokens, layout, components, polish and accessibility. Use for multi-concern work such as a design review, UI build or interface audit.

rem, px or relative units for each kind of value. Use when defining spacing and sizing tokens, control heights or media queries, or when a layout breaks under enlarged text.

Pipeline from a URL or DESIGN.md to tokens, decisions and a UI spec. Use when building UI for an existing brand, auditing a design system or fixing visual inconsistency.

Sticky headers, bottom toolbars, floating action buttons and pinned table headers. Use when deciding what stays on screen while the user scrolls.

Size, colour, weight and position mark what matters most. Use when designing button groups, CTAs, cards, dashboards or any layout with a primary action.

Ratio-based type scale where every size relates to the others. Use when defining font sizes or type tokens, or when typography feels arbitrary.

Derive a full UI palette from one or two brand colours — state variants, brand-tinted greys, semantic colours. Use when building or expanding a colour system.

Small purposeful animations — toggles, animated icons, success moments. Use when designing interactive feedback, success states or loaders.

View modes, row selection, mass actions, sorting, filters, search and table patterns. Use when designing data tables, listings, file browsers or any collection.

Semantic HTML5, SEO basics, alt text, progressive enhancement and SPA concerns. Use when building web UI, reviewing markup or optimising for search.

Few semantic colours, each meaning one thing, and errors with a way forward. Use when designing status indicators, validation, alerts or error states.

Light, dark or both, and when a theme selector is worth it. Use when defining a base palette or deciding on dark mode support.

Naming, navigation, a UI that mirrors the data model, confirms for irreversible changes. Use when structuring a large application or naming its entities.

Spinners, skeletons and staggered reveals that manage wait times. Use when designing loading states, async data or the feel of a slow interface.

Buttons, inputs, badges and pills share radius, colour logic, shadow, border and spacing. Use when building or reviewing a component library.

Nielsen's 10 usability heuristics. Use when auditing an interface, designing interaction flows, writing error messages or reviewing usability.

Avoid inner scroll containers; when unavoidable, one axis at a time. Use when a layout, table or panel might scroll inside the page.

Shadows and layering that lift elements above the surface. Use when designing cards, dropdowns, modals, tooltips or any floating element.

Shape language across type, radius and icons carries brand personality. Use when starting a design system, picking icons or radius tokens, or reviewing visual consistency.

Cards, drawers, carousels and other patterns borrowed from the physical world. Use when designing layout patterns, gestures or navigation paradigms.

UX and design system skills for AI agents based on 20 years of experience

Disney's animation principles and cinematic technique applied to UI motion. Use when designing transitions, scroll animations or onboarding motion.

Match information density to platform and user type. Use when designing data tables, dashboards or toolbars, or adapting a desktop product for mobile.

Currency, language, region and unit selectors live in a low-profile header or footer spot. Use when designing locale switchers or product-wide preference controls.

Group controls with Gestalt principles so users see what belongs together. Use when laying out components, navigation, toolbars, forms or dashboards.

Mobile, tablet and desktop are different paradigms, not one layout scaled. Use when designing responsive layouts or deciding what each breakpoint shows.

Extract colours, typography, spacing, components and W3C design tokens from a live website with Dembrandt. Use when you need a site's real tokens or want to seed a design system from it.

Rest, hover, active, focus, disabled and loading states, derived from the base colour. Use when designing buttons, links, inputs or any clickable component.

Helper text, placeholders, validation and submit behaviour. Use when designing or reviewing a form, input field or data entry UI.

Show where the user is and what their actions affect — breadcrumbs, regions, scope labels. Use when designing deep navigation or multi-section layouts.

WCAG 2.2 AA compliance as required by the European Accessibility Act. Use when designing, building or reviewing any user-facing interface for accessibility.

Top bar, app launcher, tenant and environment cue, status bar. Use when designing the persistent shell or navigation between apps behind one login.

Toasts, inline errors, banners and recovery paths. Use when designing error states, success confirmations, async feedback or in-place editing.

Guided multi-step paths and wizards. Use when designing onboarding, checkout, setup sequences or any multi-step journey.

Automated design system construction from repository analysis to production-ready implementation. Analyzes codebases, extracts design patterns, builds token hierarchies with OKLCH color management…

Cards, rows, tiles and cells are fixed slot models that stay aligned when content length varies. Use when building or reviewing any repeated component.

Modals, drawers, bottom sheets and popovers, each with its scope and blocking level. Use when designing dialogs, confirmations, side panels or action sheets.

Show a table and its map, diagram, timeline or chart together, with selection synced both ways. Use when data appears in two representations at once.

Dense, linear, status-at-a-glance UI for specialists who use a tool all day. Use when designing dispatch, warehouse, logistics, scheduling or other B2B operations tools.

Tabs swap views under a shared context. Use when designing tabbed layouts, settings pages, detail views or dashboards with several data views.

Product visuals must show the real product with real data. Use when building landing pages, hero sections, screenshots or demo panels.

Settings for experts who are not developers — domain language, sane defaults, grouping by professional concept. Use when designing settings panels, solver configuration or constraint editors.

A marketing site and its product may differ in density and scale but share one token layer. Use when the two drift apart, share components or need a single token owner.

Set a surface apart by one means — border, elevation or fill — and keep opacity for state. Use when designing cards, panels, list rows, toolbars or any container.

Search 200,000+ icons across 150 sets (Lucide, Phosphor, Tabler, Material) and pull SVGs straight into your project.

happyhorse-video-converter is a small Codex skill for converting MP4 videos to WebM.

Create, review, and schedule app videos from your AI assistant.

HappyHorse AI Video Generator

HappyHorse AI Video Generator

LLM music composition skill with a Python DSL, musical diagnostics, and deterministic multi-track MIDI rendering.

An open Agent Skill (SKILL.md format) for creating and rebuilding web content so generative engines (ChatGPT, Gemini, Perplexity, Google AI Overviews) extract, cite, and mention it.