Design

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions "deck," "slides," "presentation," or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill.

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack."

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

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 formatting, or company design standards apply.

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

This skill should be used when the user asks to "build an MCP server", "create an MCP", "make an MCP integration", "wrap an API for Claude", "expose tools to Claude", "make an MCP app", or discusses building something with the Model Context Protocol. It is the entry point for MCP server development — it interrogates the user about their use case, determines the right deployment model (remote HTTP, MCPB, local stdio), picks a tool-design pattern, and hands off to specialized skills.

Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playground, explorer, or interactive tool for a topic.

This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.

Deeply analyzes existing codebase features by tracing execution paths, mapping architecture layers, understanding patterns and abstractions, and documenting dependencies to inform new development

Interactive Product Owner skill for requirements gathering, analysis, and PRD generation. Triggers when users request product requirements, feature specification, PRD creation, or need help understanding and documenting project requirements. Uses quality scoring and iterative dialogue to ensure comprehensive requirements before generating professional PRD documents.

This skill should be used when users need to generate detailed, structured prompts for creating UI/UX prototypes. Trigger when users request help with "create a prototype prompt", "design a mobile app", "generate UI specifications", or need comprehensive design documentation for web/mobile applications. Works with multiple design systems including WeChat Work, iOS Native, Material Design, and Ant Design Mobile.

This skill should be used when the user asks to "generate video prompts", "create Seedance prompts", "write video descriptions", mentions "Seedance", "seedance", "即梦", "即梦平台", "视频提示词", "视频生成", "AI视频", "短剧", "广告视频", "视频延长", or discusses video prompt engineering, AI video generation, or Seedance 2.0 workflows.

Write effective prompts for Jimeng Seedance 2.0 multimodal AI video generation. Use when users want to create video prompts using text, images, videos, and audio inputs with the @ reference system. Covers camera movements, effects replication, video extension, editing, music beat-matching, e-commerce ads, short dramas, and educational content.

为即梦 Seedance 2.0 多模态AI视频生成模型撰写高质量提示词。当用户需要使用文本、图片、视频、音频等多模态输入创作视频提示词时触发。涵盖@引用语法、运镜复刻、特效模仿、视频延长、视频编辑、音乐卡点、电商广告、短剧创作、科普教育等场景。

REQUIRED for all image generation requests. Generate and edit images using Nano Banana (Gemini CLI). Handles blog featured images, YouTube thumbnails, icons, diagrams, patterns, illustrations, photos, visual assets, graphics, artwork, pictures. Use this skill whenever the user asks to create, generate, make, draw, design, or edit any image or visual content.

使用 Seedance 2.0（Higgsfield）将漫画书面板、漫画页面、网络漫画和插画故事板转换为动画视频。在用户想要动画漫画、使插画栩栩如生、将漫画转换为视频、动画化故事板或从静态连环艺术创建运动时使用。触发词：漫画变视频、漫画动画、面板动画、故事板变视频、网络漫画动画、漫画书运动、连环艺术、图形小说动画或任何插画转动画请求。即使用户说"使这个画动起来"或"动画化这一页"也要使用。

为 Seedance 2.0（Higgsfield）生成产品360°转盘、多角度展示和产品揭示视频提示。在用户想要产品旋转视频、转盘展示、产品揭示、360度视图、多角度产品展示、产品美妆镜头、主产品视频或开箱揭示时使用。触发条件：产品360、转盘、产品旋转、多角度、产品揭示、产品展示、主镜头、美妆镜头、产品旋转、开箱，或任何请求从多个角度展示物理产品。即使是"从所有侧面显示我的产品"或"制作产品视频"。

为 Seedance 2.0（Higgsfield）生成音乐视频和节拍同步视觉内容提示。在用户想要创建音乐视频、歌词视频、节拍同步视觉、表演视频、音乐会视觉、专辑艺术动画或音乐驱动的视觉内容时使用。触发条件：音乐视频、歌词视频、节拍同步、音乐可视化、表演视频、音乐会视觉、专辑视觉、歌曲视频、音乐剪辑、节拍下降视觉、节奏同步，或任何音乐驱动的视频请求。即使是"为我的歌曲制作视觉"或"这首曲目的视频"。

为 Seedance 2.0（Higgsfield）生成三维CGI和渲染视频提示词。在用户想要三维渲染、CGI、皮克斯风格、Unreal Engine、逼真3D、计算机生成或数字渲染视频内容时使用。触发词：3D动画、CGI、渲染、Blender、Unreal Engine、octane render、光线追踪、体积、次表面散射、基于物理的渲染或任何3D/CG视频请求。即使用户只说"使其看起来像3D"或描述了渲染美学，也要使用。

为 Seedance 2.0（Higgsfield）生成房地产、建筑和室内设计展示视频提示。在用户想要财产巡览、房地产清单、建筑展示、室内设计视频、家居登台内容、财产营销、虚拟巡览、施工揭示或任何房地产/建筑视频时使用。在以下情况下触发：房地产、财产、房屋、公寓、建筑、室内设计、房屋巡览、清单视频、财产营销、虚拟巡览、建筑、施工、翻新、家居登台或任何房地产/建筑视频请求。即使是"为我的清单制作视频"或"展示这一财产"也适用。

为 Seedance 2.0（Higgsfield）生成食品和饮料视频提示。在用户想要食品视频、食谱内容、餐厅宣传、饮料广告、烹饪视频、食品 ASMR、菜单展示、食品配送广告、咖啡馆内容或任何食品/饮料视频时使用。在以下情况下触发：食品视频、食谱、烹饪、餐厅、饮料、食品广告、食品 ASMR、菜单、咖啡馆、鸡尾酒、食品摄影视频、开胃吸引力、食品造型、美食直播或任何食品/饮料视频请求。即使是"让我的食物看起来美味"或"餐厅宣传视频"也适用。

使用 Seedance 2.0（Higgsfield）为 TikTok、Instagram Reels 和 YouTube Shorts 生成病毒式社交媒体钩子视频提示。在用户想要创建令人停下滚动的钩子、病毒式短视频、引人注目的开场白、TikTok 内容、Reels 内容、Shorts 内容或任何社交媒体优化视频时使用。在以下情况下触发：社交媒体视频、TikTok、Instagram Reels、YouTube Shorts、病毒视频、钩子、滚动停止器、短视频、趋势、参与、浏览量或任何社交媒体视频内容请求。即使是"做一些能获得浏览量的东西"或"病毒式内容"也适用。

为 Seedance 2.0（Higgsfield）生成强烈的动作场景和打斗序列视频提示词。在用户想要打斗场景、格斗、武术、战斗、动作编舞、剑斗、手对手格斗、追逐场景、超级英雄动作或任何高能动作视频时使用。触发词：打斗、格斗、战争、武术、动作场景、编舞、决斗、剑斗、功夫、追逐、斗殴、拳、踢、武器格斗、超级英雄打斗或任何动作/打斗请求。即使用户说"制作一个高强度动作视频"或"史诗战斗"也要使用。

为 Seedance 2.0（Higgsfield）生成电影级胶片风格视频提示词。在用户想要电影级、胶片感、电影质量、好莱坞风格、戏剧性或专业胶片质量的AI视频时使用。触发词：电影级、胶片感、电影场景、戏剧性打光、景深、镜头光晕、变形、信箱式、黑色电影、史诗、稳定摄像机、推车镜头、吊臂镜头或任何电影级视频生成请求。即使用户没有明确说"电影级"但描述了胶片美学，也要使用此技能。

为 Seedance 2.0（Higgsfield）生成卡通和动画风格视频提示词。在用户想要卡通、2D动画、赛璐珞着色、手绘、插画、平面动画或运动图形动画风格视频时使用。触发词：卡通、动画、赛璐珞着色、手绘、插画、平面设计动画、矢量动画、复古卡通、橡皮软管、运动图形或任何卡通/动画风格请求。即使用户含糊地说"使其看起来像动画"或"有趣多彩的风格"也要使用。

为 Seedance 2.0（Higgsfield）生成时尚造型书、模特展示和风格视频提示。在用户想要时尚视频内容、造型书视频、模特走秀、服装展示、风格指南、时尚活动、跑道片段、街头风格内容或任何时尚/服装视频时使用。在以下情况下触发：时尚视频、造型书、模特展示、服装、风格指南、时尚活动、跑道、街头风格、系列发布、时尚广告、服装视频、OOTD、时尚电影或任何时尚/模特视频请求。即使是"展示这件服装"或"为我的品牌提供时尚内容"也适用。

为 Seedance 2.0（Higgsfield）生成动漫风格视频提示。在用户想要动漫、日本动画风格、少年漫画动作、青年漫画戏剧、魔法少女、机甲、异世界、日常生活动漫或任何日本动画美学时使用。触发条件：动漫、日本动画、少年漫画、青年漫画、漫画风格视频、动漫格斗、动漫片头、动漫片尾、樱花、迷你人物、可爱风格、机甲、异世界，或任何动漫风格请求。即使是"让它看起来像动漫"或"日本卡通风格"。

Skill for image generation. Uses Google Nano Banana Pro (Gemini 3 Pro Image) API to generate high-quality images. Supports logos, infographics, illustrations, photorealistic images, and more.

Design and render graphics on HTML5 Canvas — illustrations, diagrams, UI mockups, and interactive visual elements.

Design SVG logos with multiple variants — primary, monochrome, favicon, and animated versions with brand alignment.

Create and enforce brand identity guidelines — logo usage, color palettes, typography, tone-of-voice, and asset libraries.

Write and update release notes in whatsNew.ts with context-aware content generation

Audit SCSS and TSX files for dark mode issues — missing variable usage, hardcoded colors, icon gaps, selector misuse, and inline dark overrides outside the theme folder

SpringBlade 全栈代码生成器。根据用户提供的模块名、实体名和字段列表，自动生成符合 SpringBlade 开源版框架规范的后端代码（Boot 单体/Cloud 微服务）、前端页面（Saber Options API/Composition API）和 MySQL 建表语句。当用户说"帮我生成代码"、"创建一个新模块"、"生成 CRUD"、"新建实体"、"建表语句"、"生成前端页面"、"生成后端接口"、"生成 SpringBlade 代码"、"写一个 xxx 管理功能"、"帮我设计 xxx 表"、"blade-design"等时触发。即使用户只是描述了业务字段或给出了表结构，也应触发此技能来生成对应的 SpringBlade 规范代码。

Avue 组件代码生成与配置指南。当用户需要创建、配置或生成基于 Avue (avue-crud, avue-form, avue-tree 等) 的 Vue 页面代码时使用此 skill。覆盖 CRUD 表格、表单、树组件、数据展示等全部 Avue 组件。支持 Composition API 和 Options API 两种代码风格。当用户提到 avue、crud表格、动态表单、JSON配置表单、低代码表单、avue-crud、avue-form 等关键词时，务必使用此 skill。

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Display current guide and Claude Code versions

Check guide/landing synchronization status

Frontend standards for atopile extension webviews: architecture, contracts, design system, and testing workflow.

Reference for the `.ato` declarative DSL: type system, connection semantics, constraint model, and standard library. Use when authoring or reviewing `.ato` code.

Core runtime behavior for the atopile sidebar agent: identity, persistence model, execution rules, and tool recipes.

Generate short live progress summaries for the atopile agent from recent tool events, preambles, checklist changes, and build state. Use for ephemeral UI activity text only, never for transcript replies or autonomous reasoning.

How Faebryk's TypeGraph works (GraphView + Zig edges), how to traverse/resolve references, and how FabLL types/traits map onto edge types. Use when working with TypeGraph traversal, edge types, or building type-aware queries.

Authoritative ato authoring and review skill: language reference, stdlib, design patterns, and end-to-end board design workflow.

Show specification status and progress

Quick spec generation with interactive or automatic mode

Analyze implementation gap between requirements and existing codebase. Use when planning integration with existing systems.

Generate implementation tasks from requirements and design. Use when creating actionable task lists.

Generate comprehensive technical design translating requirements (WHAT) into architecture (HOW) with discovery process. Use when creating architecture from requirements.

Initialize a new specification with detailed project description

Generate EARS-format requirements based on project description and steering context. Use when generating requirements from project description.

Interactive technical design quality review and validation. Use when reviewing design before implementation.

Create complete specs (requirements, design, tasks) for all features in roadmap.md using parallel subagent dispatch by dependency wave.

Have a focused discussion about a topic and reach a conclusion

Query openspec documents and answer questions based on spec content

分析心理健康数据、识别心理模式、评估心理健康状况、提供个性化心理健康建议。支持与睡眠、运动、营养等其他健康数据的关联分析。

Use when building Cmd+K command palettes in React - covers keyboard navigation with arrow keys, keeping selected items in view with scrollIntoView, filtering with shortcut matching, and preventing infinite re-renders from reference instability

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Use when adding new multi-agent coordination patterns to agent-relay - provides checklist for types, schema, templates, and docs updates

Write high quality, user-facing documentation. Use any time you need to write, improve, or update a significant amount of user-facing documentation (e.g., files in a "docs/" folder or README file).

Write high quality specifications or design docs for a program. Use any time you are asked to write, improve, or update specs / design docs (e.g., files in a `specs/` folder).

SpringBlade 全栈代码生成器。根据用户提供的模块名、实体名和字段列表，自动生成符合 SpringBlade 开源版框架规范的后端代码（Boot 单体/Cloud 微服务）、前端页面（Saber Options API/Composition API）和 MySQL 建表语句。当用户说"帮我生成代码"、"创建一个新模块"、"生成 CRUD"、"新建实体"、"建表语句"、"生成前端页面"、"生成后端接口"、"生成 SpringBlade 代码"、"写一个 xxx 管理功能"、"帮我设计 xxx 表"、"blade-design"等时触发。即使用户只是描述了业务字段或给出了表结构，也应触发此技能来生成对应的 SpringBlade 规范代码。

Avue 组件代码生成与配置指南。当用户需要创建、配置或生成基于 Avue (avue-crud, avue-form, avue-tree 等) 的 Vue 页面代码时使用此 skill。覆盖 CRUD 表格、表单、树组件、数据展示等全部 Avue 组件。支持 Composition API 和 Options API 两种代码风格。当用户提到 avue、crud表格、动态表单、JSON配置表单、低代码表单、avue-crud、avue-form 等关键词时，务必使用此 skill。

UI/UX 设计智能，在设计页面时必须使用

提供 UI/UX 设计、用户研究、视觉设计和品牌一致性能力。当需要设计界面、进行用户研究或创建视觉资产时使用。

经验丰富的UI/UX设计代理，拥有10年以上创建屡获殊荣用户体验的经验。专注于AI协作设计工作流，生成可立即实施的规范，实现从创意愿景到生产代码的无缝转换。精通设计思维和技术实现，弥合美学与工程之间的鸿沟。

Business model design using Osterwalder's Business Model Canvas and Lean Canvas. Creates 9-block canvases with structured analysis for business model innovation and startup validation.

Estimation techniques including analogous, parametric, three-point, and expert judgment methods. Provides effort, cost, duration, and complexity estimates for projects, features, and tasks.

Lean value stream mapping for identifying waste and optimization opportunities. Creates current/future state maps with cycle time analysis and improvement recommendations.