Design AI Skills

Applies the StoryBrand SB7 Framework from Building a StoryBrand by Donald Miller. Use when writing website copy, crafting brand messaging, creating marketing materials, building sales funnels, or…

Define and sharpen a brand's market positioning — where it sits relative to competitors, what it owns, and how it differentiates. Use when the user says "brand positioning", "positioning statement",…

Documents the reasoning behind design decisions including alternatives considered, trade-offs evaluated, and principles applied. Use when making significant UX decisions, aligning with stakeholders on…

Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling…

Neta API research and recommendation skill — provide keyword/tag/category suggestions, validate taxonomy paths, and power multi‑mode content feeds, supporting progressive exploration from broad to…

사용자와 단계별로 검토하는 guided design harness. Discovery→Wireframe→Components→Microcopy→Validation을 omd-master가 실행하고 journey/system/validation의 필수 체크포인트에서 멈춘다. '/omd-harness', '체크포인트마다 검토', '나와 단계별로 디자인',…

将文章、讲稿或技术主题制作成王虹学术报告气质的 16:9 Notability 手写风 HTML 幻灯片，逐页导出 PNG，并默认同时生成可逐条播放动画的时间轴版 HTML。触发词：王虹PPT风格、王虹手写PPT、Notability学术手写幻灯片、手写网页PPT、手写PPT、数学家手写报告风、手写PPT时间轴版、手写演示动画。

Guide for drafting issue closure and decline responses as an open-source package maintainer. Use when helping compose a reply that says "no" to a feature request, closes an issue as won't-fix,…

Professional typography rules for UI design, web applications, software interfaces, and all screen-based text. Enforces timeless typographic correctness that LLMs consistently get wrong: proper quote…

Generate images using Google Gemini's image generation capabilities. Use this skill when the user needs to create, generate, or produce images for any purpose including UI mockups, icons,…

Operating system for intake, approvals, QA, and training across brand stakeholders.

Accessibility engineering for product interfaces, from focus states and keyboard support to ARIA, forms, and screen readers. Use when building or reviewing UI components, modals, menus, forms, custom…

Reduction pass — cuts content, structure, visuals, and dead code that doesn't answer a user question or drive an action, respecting CRAFT_LEVEL. Use when the UI feels cluttered, has too many CTAs,…

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. Use as a craft companion after Core's…

Create, edit, and analyze PowerPoint presentations — research talks, conference presentations, lecture slides, and poster summaries. Use when the user asks to generate, modify, or inspect .pptx files,…

Turns an answer into a one-page visual HTML explainer: the model writes a short Markdown draft and the bundled CLI builds one page. Use it proactively and liberally, without being asked, whenever a…

Build complete React features with proper layered architecture including UI components, business logic, API integration, and state management. Use this skill when users request implementing features…

AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists…

Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU. Covers CSS transitions, CSS animations, CSS pseudo-selectors, CSS callbacks, shared value animations,…

Scan documents and slides for off-brand colors, fonts, and logos. Validate against brand guidelines and suggest corrections.

Skill 开发指南。当用户需要创建新 Skill 或更新已有 Skill 时触发，提供标准化模板、目录规范和最佳实践。

Use this skill whenever the user wants visual learning for data structures, algorithms, trees, graphs, sorting, searching, hashing, recursion, complexity analysis, 408 data structure review, algorithm…

OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette…

Use when a team needs a deliberate, human-led plan for participating in comments, communities, or audience conversations around an approved topic. Trigger phrases include "plan community engagement",…

Build multi-shot narrative image, video, and audio workflows with genmedia. Use this for storyboards, shot lists, multi-prompt video, first-frame to last-frame pipelines, social stories, brand films,…

Premium UI/UX design auditor with Jobs/Ive philosophy. Use when reviewing, evaluating, or elevating existing UI — triggers on "audit my design", "review UI", "make it feel premium", "design review",…

为 YidaCodeCanvas 自定义内容接入真实表单、个人流程任务、连接器或同源接口数据；按用户描述判断数据来源，处理 dataBinding、DataBridge、数据桥、数据解析、空值筛选、服务端分页、totalCount 和静默刷新。适用于页面或区块接入真实数据、展示个人任务、轮询刷新列表或 KPI，以及排查页面显示 0 条但数据管理有数据。

Generate database migrations for a Medusa module

Convert short scene descriptions, book/album cover briefs, or 2-paragraph synopses into seamless-loop animated pixel-art covers rendered as self-contained HTML+canvas. Companion skill to…

When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the…

Plan a deprecation end to end for a component, token, variant or pattern: usage audit, migration path, timeline to a major-version removal, notices. Triggers: deprecate, sunset, phase out, retire,…

Build a question-driven, browser-testable frontend prototype with a single index.html and locally downloaded raster assets. Use when turning a product idea, existing app, repository, screenshot, or…

Design analytics-driven browser test matrices and execute cross-browser tests. Covers BrowserStack/Sauce Labs configuration, Playwright browser channels, common cross-browser CSS/JS divergences, a…

Look it up before answering or building — this project's documents of record first, then external prior art. Use when the user says research, look it up, sleuth GitHub, "what do other people do", "is…

UI-design dedicated review framework. Called by DesignReviewer to professionally analyze Designer's UI/interaction design (interaction soundness/accessibility/design-system consistency/edge states),…

Reusable fixed-style PPTX generation skill for the Coral Geyser Notice visual brand — coral-red background (#E95140), warm stone typography (#E7D8D1), bold modern visitor-notice and design-forward…

Remove redundant or unsupported page content.

Export Webflow Designer components to React/Next.js code for external projects. Configure devlink settings in webflow.json, sync design updates with devlink sync, validate generated code, show diffs,…

You MUST use this before any creative work (features, products, content, strategy, systems, or behavior changes). Start by classifying what we’re brainstorming, then run thorough…

This skill should be used when the user asks about "fault tolerance", "resilience", a "circuit breaker", "graceful degradation", "retry storm" or "thundering herd on recovery", "exponential backoff…

Put Instagram's NATIVE text hook (the Edits app's own font, boxes and styling) on many videos without opening each one in Edits. Type each hook once in Edits on a USB-connected iPhone over a…

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual…

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

Generate an image from a text description using Cloudflare Workers AI (the flux-1-schnell model). Use this skill whenever the user wants to create, generate, make, or draw an image / picture / logo /…

Explicitly load a design system from the org-level registry at ~/.claude/design-systems/<name>/ for the current project. Use when user says "use the Acme design system", "apply company-x tokens", or…

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

Generate complete Markdown documentation for a Figma component — anatomy/layer tree, design tokens (colors, spacing, typography), states/variants matrix, accessibility notes, content guidelines, and…

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

Clone a real app's screens as pixel-accurate, self-contained HTML artboards on the prototype canvas. Overlay a grid on the reference and sample colours visually, derive one measured design-token…

Use when designing, implementing, or reviewing shared UI in Compose Multiplatform projects, including state-driven architecture, composable decomposition, layout/modifier discipline, adaptive…

Prioritize game design feature options by comparing expected impact, implementation cost, strategic fit, and roadmap context. Use when choosing between competing feature ideas, deciding what to do now…