Design AI Skills

User research, interaction patterns, information architecture, and UX methods. Defines the five-plane model, user flows, UX laws, and validation methods for user-centered digital products.

Experimental DryUI design-to-page skill that compares layout interpretations mentally, implements the best one, and performs screenshot-driven repair. Use when testing robust full-page generation from…

Use for end-to-end website or interface design, redesign, implementation, or major visual polish; orchestrates discovery, references, art direction, systems, build, critique, QA, and release gates.

Design tokens and design-system plumbing - W3C DTCG token JSON, primitive vs semantic vs component tokens, CSS custom properties, Tailwind v4 @theme, dark/brand theming, DESIGN.md files for coding…

Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" →…

Generate professional AI product photography and commercial images. Models: FLUX, Imagen 3, Grok, Seedream for product shots, lifestyle images, mockups. Capabilities: studio lighting, lifestyle…

Designs purposeful interaction and animation systems for web and mobile applications.

Binds shape and text fills to theme color slots instead of hard-coded RGB so a single re-theme updates the whole deck.

Device 3D Showcase (Open Design) — use only when explicitly invoked, not for general design requests

Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off,…

Use when a screen must be checked across mobile, tablet, laptop, or desktop sizes for overflow, wrapping, sticky overlaps, collapsed navigation, unreachable actions, sheets, dialogs, tables, filters,…

Design shotgun: generate multiple AI design variants, open a comparison board, collect structured feedback, and iterate. (gstack)

Open Orbit briefing skill — selected by the Orbit pipeline when the user has two or more connectors connected. Pulls the past 24 hours of activity from every authenticated connector (GitHub, Linear,…

Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load…

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of…

Update the release notes file at `apps/docs/content/releases/next.mdx` in the tldraw/tldraw repo based on PRs since the previous release, or archive `next.mdx` to a versioned file when a new version…

Master Godot 4 GDScript patterns including signals, scenes, state machines, and optimization. Use when building Godot games, implementing game systems, or learning GDScript best practices.

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs,…

Game development orchestrator. Routes to platform-specific skills based on project needs.

Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, button, input, tab, option, task panel, or agent…

Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with…

Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and…

Create standalone SVG/HTML or editable Excalidraw diagrams for concepts, architecture, processes, flows, and whiteboards.

Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, update or optimize an existing skill, run evals to test a…

Expert product strategy covering market analysis, competitive positioning, go-to-market planning, and product-led growth.

Create polished printable documents and PDFs, including forms, checklists, reports, briefs, comparisons, worksheets, task lists, and other operational documents. Use Typst and compile to PDF.

Plan, execute, and measure business events — conferences, webinars, workshops, product launches, networking events, trade shows, and corporate gatherings. Complete event lifecycle from concept to…

Checks every claim in a piece of copy (ads, emails, posts, pages, scripts, briefs) against the claims the brand has approved. Keeps, rewrites or cuts each line, and lists the proof that would bring a…

Install skills from a zip URL or local zip file path. Use this skill whenever the user wants to install a skill from a zip link or a local file, or uses commands like /skill-add with a URL or file…

Design .NET types for performance. Seal classes, use readonly structs, prefer static pure functions, avoid premature enumeration, and choose the right collection types.

Implementing UI/UX features in sidecar including modals (internal/modal library), keyboard shortcuts, mouse support, scrolling, pill/tab rendering, and pane resizing. Use when implementing UI…

Implement UI transitions and rendered presence. Use for lifecycle, cancellation, rapid reopen, or HTML/React parity.

Create data-driven presentation slides using React, Vite, and Recharts with Sentry branding. Use when asked to "create a presentation", "build slides", "make a deck", "create a data presentation",…

Optimizes TextMeshPro rendering, memory, and font setup, including font asset stacks, fallback atlases, SDF quality, and worldspace text. Use when the user asks about TMP fonts, CJK or multilingual…

Simple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide effects without…

Project ad budget pacing by script from live accounts or given numbers: month-end overspend. "are we overspending this month"

Tired of juggling 8 API keys? This skill gives you one-command access to Midjourney, Flux, Ideogram, and more, with zero setup. Use when you want to generate any image without worrying about API keys.

将Markdown排版为公众号HTML；组件、动画及已授权的编辑器注入按需启用。

Build and maintain a reusable backlink-submission candidate pool with global deduplication, fee and brand classification, configurable batch exports, and executor feedback. Use for large-scale…

Use when the user asks about Moodboard, building a moodboard from reference images, curated moodboard presets, Soul Hex color transfer, applying a visual style direction to generations, or named…

Creates interactive educational MicroSims using the best-matched JavaScript library (p5.js, Chart.js, Plotly, Mermaid, vis-network, vis-timeline, Leaflet, Venn.js). Analyzes user requirements to route…

oh-my-design 사용 중 불만·결함·아쉬운 점을 구조화된 GitHub 이슈로 접수하고, 쌓인 이슈를 배치로 처리한다. 사용자 모드('이슈 등록해줘', '이거 불편한데 신고할래', '버그 리포트', 'file an issue', '기능 요청')와 내부 도그푸딩 모드(스킬을 돌리다 미흡한 부분을 발견한 오케스트레이터·서브에이전트가 직접 접수) 둘 다…

当用户要求把文章、Markdown、笔记、链接内容或一个主题做成“xkcd 风格四格漫画”“四格漫画”“金馆长熊猫表情”“金教授熊猫脸”“熊猫梗图”“文章转四格漫画”“用幽默方式解释文章核心观点”“生成黑白熊猫漫画配图”时必须使用。本 skill 会读取内容、提炼核心表达和可幽默化冲突，产出 2x2 黑白手绘四格漫画；人物默认使用金馆长熊猫表情味更浓的熊猫 meme…

Create distinctive, production-grade frontend interfaces with high design quality and accessible markup. Use this skill when the user asks to build or beautify web components, pages, applications,…

House standard for any HTML page written for a person. Use when another skill says to render a page.

Guide a Figma frame or component review against observed app evidence in Revyl Atlas, with findings in chat, a local visual report, or explicitly requested Atlas annotations.

.NET MAUI safe area and edge-to-edge layout guidance for .NET 10+. Covers the new SafeAreaEdges property, SafeAreaRegions enum, per-edge control, keyboard avoidance, Blazor Hybrid CSS safe areas,…

Design specifications for effective dashboards. Use when planning new dashboards, improving existing ones, or documenting dashboard requirements before development starts.

Charts, graphs and dashboards: SVG ARIA, table alternatives, safe palettes.

Tone, diction, and phrasebook system for consistent writing + localization.