Design skills

Develop an independent visual language and turn the human-chosen direction into a production-ready graphic, brand, campaign, publication, web, or product system. Use when originality and differentiation matter enough to escape generic AI and Big Tech aesthetics. Guides a minimum-evidence start, ten isolated typography-led HTML design directions made only from type, color, and space, visual-first human judgement, explicit commitment, and concrete Round 2 production. Do not use for routine UI fixes, small components, or applying an existing design system.

The English summary is being prepared. Showing the original description.

Expert UI/UX design guidance for unique, accessible interfaces. Use for visual decisions, colors, typography, layouts. Always ask before making design decisions. Use this skill when the user asks to build web components, pages, or applications.

The English summary is being prepared. Showing the original description.

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. Based on Anthropic's Frontend Designer Skill

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

Playbook for Aceternity UI, Refero MCP, Mobbin MCP, and Godly when building or polishing web UI — what each source is for and how agents should use it.

The English summary is being prepared. Showing the original description.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

The English summary is being prepared. Showing the original description.

Route technical planning and review between Decisions Mermaid viewer, BuilderIO visual-plan/recap skills, and Open Design when the work needs richer artifacts.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

Use when designing or improving a module interface, choosing a seam, reducing shallow modules, making code easier to test, or reviewing architecture for locality, leverage, adapters, and deep-module design.

The English summary is being prepared. Showing the original description.

Use Open Design for agent-native UI prototypes, decks, motion, and hand-drawn diagrams — complementary to Decisions Mermaid viewer for technical charts.

The English summary is being prepared. Showing the original description.

Run before implementing UI — research real product patterns (Refero/Mobbin MCP), pick a design direction, and output tokens or a short DESIGN.md before writing code.

The English summary is being prepared. Showing the original description.

Use when preparing hardest high-leverage work for a stronger or scarce model, building a ranked execution queue, asking for fable prep, frontier prep, round-collapse, wave queue, or model-upgrade readiness across code, design, copy, marketing, or architecture work.

The English summary is being prepared. Showing the original description.

Pick a design aesthetic from awesome-design-skills — bundled minimal/professional/enterprise/shadcn/bento; full catalog in reference for on-demand load.

The English summary is being prepared. Showing the original description.

Design, implement, and review XState v5 state machines and @xstate/react integrations in TypeScript. Use when modeling finite workflows, async actors, statecharts, guarded transitions, delayed transitions, actor systems, or machine-driven React behavior.

The English summary is being prepared. Showing the original description.

Use when working with Protocol Buffer (.proto) files, buf.yaml, buf.gen.yaml, or buf.lock. Covers proto design, buf CLI, gRPC/Connect services, protovalidate constraints, schema evolution, and troubleshooting lint/breaking errors.

The English summary is being prepared. Showing the original description.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

The English summary is being prepared. Showing the original description.

Use for design thinking, or when a product or service problem needs user understanding before solutions: "what do users really need?", "how might we...", "plan a discovery sprint", "validate this concept". Skip when the spec is frozen or the task is code maintenance.

The English summary is being prepared. Showing the original description.

Use for prioritization, or when there are more tasks than capacity: "what should we do first?", "rank this backlog", "cut scope for the MVP", "RICE score these". Picks a method (RICE, ICE, MoSCoW, impact-effort), scores items and sets a cut line. Skip for choosing between two designs.

The English summary is being prepared. Showing the original description.

Use when building a frontend and the user wants a distinctive / animated / "wow" UI element in React + Tailwind - e.g. a laptop-opening-on-scroll, 3D tilt card, spotlight hero, animated beams/background, marquee, bento grid, interactive globe, meteor/particle background, shimmer button, or scroll/reveal motion. Fetches the showpiece component LIVE at build time from code libraries (Aceternity, Magic UI, Cult UI, ReactBits, 21st.dev) via their shadcn registry command (or WebFetch fallback), then adapts it to brand tokens. Also covers plain components (button, form, modal, table, etc.) as a fallback. Triggers on "make it pop", "something flashy", "animated [X]", "like [cool site]", "build a [showpiece] section". NOT for non-React stacks. Inspiration galleries (Dribbble/godly) are visual reference only - never code.

The English summary is being prepared. Showing the original description.

**導入済みの sparkle-design プロジェクト**で、ユーザーが目指したい「雰囲気」を 自然言語で伝えたら、`sparkle.config.json` の primary / font-pro / font-mono / radius を 書き換えて `sparkle-design-cli generate` まで実行するスキル。選択肢は Theme Settings Figma プラグインが扱える範囲（primary 7 色 / radius 8 段階 / fonts 11 種）に揃えて おり、Figma と CLI の見た目がずれません。**未導入プロジェクトの初期セットアップは `setup-sparkle-design`（internal 環境では `install-sparkle-design`）を使うこと。** 「雰囲気を変えたい」「もっとポップに」「ビジネスライクに」「高級感を出したい」 「primary を変えたい」「角丸をもっと丸く」「フォントを変えたい」「テーマを提案して」 「テナントごとに配色を変えたい」「役割ごとに色を出し分けたい」（後者2つは複数 バリアント要望として範囲外に誘導するために発動） で発動。English: "change the vibe", "make it more playful", "make it more business-like", "adjust the theme", "change primary color".

The English summary is being prepared. Showing the original description.

sparkle-design（公開 npm パッケージ）の新バージョンをリリースするための手順スキル。 package.json の version bump、CHANGELOG.md の更新、リリース PR 作成、PR マージ後の npm への stage、メンテナーによる 2FA 承認（npm stage approve）、承認後の git tag・ GitHub Release 作成までを一連の手順で実行する。 CHANGELOG 更新漏れと GitHub Release 作成漏れを防ぐためのチェックリストを含む。 「sparkle-design をリリース」「sparkle-design の新バージョンを切る」「vX.Y.Z をリリース」 「sparkle-design の CHANGELOG を更新」で発動。 English: "release sparkle-design", "cut a new sparkle-design version", "publish sparkle-design", "bump sparkle-design version".

The English summary is being prepared. Showing the original description.

**未導入プロジェクト向け**の sparkle-design 初期導入・セットアップを支援するスキル。 npm インストール、sparkle-design-cli による初回 CSS 生成、sparkle.config.json の 新規作成、AI ガード（Sparkle Design Guard）の導入、コンポーネント選択ガイドまでをカバー。 **導入済みプロジェクトでテーマ（primary / font / radius）を変えたい場合は `change-sparkle-config` スキルを使うこと** — この setup スキルは初期導入専用。 「Sparkle Design を導入」「sparkle-design をインストール」「デザインシステムをセットアップ」 「コンポーネントライブラリを追加」「どのコンポーネントを使えばいい」で発動。 English: "install sparkle-design", "add sparkle design", "set up sparkle design", "which component should I use"

The English summary is being prepared. Showing the original description.