Design AI Skills

Create distinctive, production-grade frontend interfaces with strong hierarchy, thoughtful systems, and polished implementation that avoid generic AI aesthetics. Use when the user wants to build or…

Design and implement the motion layer of a UI — microinteractions, transitions, hover/press feedback, and animation timing/easing — as working CSS/JS plus a written animation spec. Use when the user…

Claude Code plugin and skills for creating developer-focused technical presentations (tech talks, conference content) with Slidev, with evidence-based design guardrails for slide quality. Adds…

Animate any still image on RunComfy — this skill is a smart router that matches the user's intent to the right i2v model in the RunComfy catalog. Picks HappyHorse 1.0 I2V (Arena #1, native audio,…

Build observability into multi-agent systems with distributed traces, trace correlation, breakpoints, and execution replay

Badge, tag, chip, and label component design for status indication and categorization.

Rapid prototyping through constrained randomness. Audits what exists, fixes what is broken, generates fresh design candidates from context, then rolls the dice between valid alternatives. Lock what…

Current visual direction for web projects covering color palettes, font pairings, layout compositions, and imagery (Q1/Q2 2026). Derived from Dribbble trending, Behance top projects, Land-book…

Stratégie de tarification et optimisation de la page tarifs de {{COMPANY_NAME}} — packaging des offres, métrique de valeur, structure de paliers Good-Better-Best, psychologie des prix, hausse de prix,…

Experimental DryUI page skill for image-to-app layouts using a markup-only route, page container queries, and a hard layout CSS audit. Use when testing stage 1 layout extraction, stage 2 DryUI…

Typography system design - type scales, font pairing with Google Fonts, measure/leading/tracking rules, hierarchy, variable fonts, OpenType features, web font loading, and multi-script typesetting…

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum…

The final, binary mechanical gate that prevents broken or fundamentally flawed designs from being delivered.

Use when a Shopware 6 change does not take effect or behaves unexpectedly — Twig overrides that do nothing, JS plugins that fail to initialise, admin assets not rebuilding, cache and performance…

Turn one brief into a whole campaign — one master design exported to every channel size (social, link previews, banners, display ads), plus an optional landing page and email, in every language you…

UI/UX design intelligence. 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build,…

Review product journeys for usability and friction. Use for task clarity, user flow, state coverage, form recovery, empty/loading/error behavior, or interaction issues before implementation or…

Audit a project's dark mode implementation - detects architecture (CSS custom props, Tailwind `dark:` prefix, or JS class toggle), runs architecture-specific contrast / token-override / anti-pattern /…

Open Orbit briefing skill — selected by the Orbit pipeline when GitHub is the user's only connected connector, or when the user explicitly scopes their daily digest to GitHub. Pulls the past 24 hours…

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a…

Writing SDK documentation for tldraw. Use when creating new documentation articles, updating existing docs, or when documentation writing guidance is needed. Applies to docs in apps/docs/content/.

Building a new course inside someone else's deck — import the deck as a library of layouts, then produce each page of the new course by copying the layout that fits it and rewriting that copy's…

Create job stories using the 'When [situation], I want to [motivation], so I can [outcome]' format with detailed acceptance criteria. Use when writing job stories, creating JTBD-style backlog items,…

Produce a human-facing visual report — a chart, dashboard, scorecard, or styled summary — that renders as a live page in the screenpipe viewer instead of plain text. Use when the task asks for a…

Generate, edit, and read PowerPoint presentations. Create from scratch with PptxGenJS (cover, TOC, content, section divider, summary slides), edit existing PPTX via XML workflows, or extract text with…

UI component and styling guidelines using Shadcn UI, Radix UI, and Tailwind

Game art principles. Visual style selection, asset pipeline, animation workflow.

This skill should be used when the user asks for a Seedance 2.0 template, genre recipe, product ad, lifestyle video, drama scene, music video, landscape shot, commercial, animation scene, or reusable…

Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need…

Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.

End-to-end Android APK red-team pipeline — automated APK acquisition (Play Store + apkpure + apkmirror fallback), jadx decompilation, secret/URL/JWT/Firebase grep, pinned-cert extraction,…

Create a dynamic product showcase with explosive ingredient arrangements, followed by a realistic motion animation.

Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.

Adversarial design critique of the current work. Render it, look at it, and argue for rejection. Run after the gates are green, never instead of them.

Framework (OSS). Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, visual effects, gradients, storage, and responsive layout.…

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements',…

Use when building UIs leveraging the WordPress Design System (WPDS) and its components, tokens, patterns, etc.

Plans and runs events that produce pipeline — conferences, trade shows, webinars, field programs, and measuring whether any of it worked. Use this to decide whether to sponsor an event, plan a…

Use for video editing or video creation work that should be editable in OpenChatCut, even when the user does not explicitly mention OpenChatCut. Covers local/attached video editing,…

Audits already-rendered UI — web app, deck/slide, dashboard, design-system, or Electron/native app — via real-browser/native-app journeys and a Playwright sweep. Use after UI implementation to find…

Select, customize, or extend the project's reusable motion-graphics card library and style templates. Use for choosing a visual style, adding a card, building a new style pack, or reusing a template…

Use when routing Kotlin or Jetpack Compose work, or physical Android benchmark evidence that needs a configuration decision, especially when several Kotlin or Compose concerns overlap.

Designing side-by-side comparison tools (plan-compare, product-compare, alternative-compare) that help users decide rather than just listing features. Axis selection, default-comparison logic,…

Browser-based 3D design tool with visual editor, animation, and web export. Use this skill when creating 3D scenes without code, designing interactive web experiences, prototyping 3D UI, exporting to…

One-page brief (docs/BRIEF.md) for a new macOS app, written before any code. Use when the user has an app idea, wants to replace an app they pay for, or the research and clone skills are done.

Embed C2PA provenance in AI-generated images, video or PDF by script. "add content credentials to this asset"

Check out two branches in separate worktrees, start both dev servers on different ports, screenshot the same pages, and produce a visual diff.

Design skills for Apple platform UI — Liquid Glass, animations, game feel (haptics, sound, celebrations), UI prototyping, UX writing, SF Symbols, and typography. Use when implementing design language…

Analyze how competitors present their brand — identity, messaging, positioning, voice, and visual style — to find gaps and opportunities. Use when the user says "competitor brand analysis", "analyze…

End-to-end motion-design / animated-ad creation flow on Higgsfield via the MCP connector. Use when the user wants to create motion design, animate a logo, make a video from an image, build an animated…

Cast genjutsu on a UI - creative coding for motion, micro-interactions, and wow-factor. Scans the stack, proposes an interaction thesis, loads the right sub-skills, implements the illusion. Adapts to…