设计技能

デザイントークンを使わずに直書きされた色・余白・フォントサイズ・角丸・シャドウを検出する。Figma Variables / Tailwind config / CSS custom properties のルールに違反する実装を指摘する。

中文简介正在准备中。当前显示原文说明。

リポジトリに DESIGN.md やデザイントークン定義が存在する場合に、新規 UI 実装の色・余白・フォントサイズ・角丸・シャドウがその定義済みスケールに準拠しているかを照合する。定義が無ければ実行しない

中文简介正在准备中。当前显示原文说明。

Design a new Claude Code skill from a concrete use case and produce a repo-ready skill package. Use when the user asks to create a new skill, define a skill's responsibility, draft SKILL.md, choose frontmatter, design supporting files, or prepare eval criteria for a new skill. Also trigger on "スキルを作りたい", "スキルを作って", "スキルを追加して", "新しいスキル", "SKILL.md生成".

中文简介正在准备中。当前显示原文说明。

既存デザインシステムコンポーネント（Button / Input / Modal / Card 等）を再実装していないかを検出する。Figma→コード実装時に既存コンポーネントを無視した実装を防ぐ。

中文简介正在准备中。当前显示原文说明。

Coordinate-level browser control for UI that snapshots, refs, and locators cannot target - canvas apps, extension popups, OS-drawn dialogs, custom drag surfaces. Read this when a DOM-targeted action fails twice, when the next decision depends on rendered pixels, or when CUA clicks land on the wrong element.

中文简介正在准备中。当前显示原文说明。

Forces the laziest solution that actually works, simplest, shortest, most minimal. Channels a senior dev who has seen everything: question whether the task needs to exist at all (YAGNI), reach for the standard library before custom code, native platform features before dependencies, one line before fifty. Supports intensity levels: lite, full (default), ultra. Use on ANY coding task: writing, adding, refactoring, fixing, reviewing, or designing code, and choosing libraries or dependencies. Also use whenever the user says "ponytail", "be lazy", "lazy mode", "simplest solution", "minimal solution", "yagni", "do less", or "shortest path", or complains about over-engineering, bloat, boilerplate, or unnecessary dependencies. Do NOT use for non-coding requests (general knowledge, prose, translation, summaries, recipes).

中文简介正在准备中。当前显示原文说明。

Performs architectural code reviews focusing on design patterns, duplication, circular dependencies, and refactoring impact. Is the design consistent with the codebase? Use when reviewing code changes for architectural concerns, code smells, or structural issues.

中文简介正在准备中。当前显示原文说明。

Design and run reproducible benchmarks. Use when measuring performance scaling, comparing branches, or analyzing speedup metrics.

中文简介正在准备中。当前显示原文说明。

Generates the monthly revenue-accountable marketing report that B2B SaaS marketing leaders deliver to CEOs, CFOs, executive teams, and boards. Use when preparing the monthly CEO report, drafting the marketing section of a board deck, defending budget decisions, diagnosing pipeline gaps, or transitioning marketing from MQL/SQO reporting to revenue, CAC payback, and forward pipeline coverage. Designed for B2B SaaS demand generation leaders who own pipeline targets across segments, geos, and motions, and need to explain marketing's revenue contribution in executive language.

中文简介正在准备中。当前显示原文说明。

Control a running TouchDesigner instance via twozero MCP — create operators, set parameters, wire connections, execute Python, build real-time visuals. 36 native tools.

中文简介正在准备中。当前显示原文说明。

Route OpenClaw design work to canonical brand, Carapace product-interface, marketing-page, or design-audit guidance. Use when a task touches OpenClaw visual identity, shared CSS tokens, product UI, public web pages, or Carapace compliance.

中文简介正在准备中。当前显示原文说明。

Build or modify OpenClaw application UI using canonical semantic tokens, themes, shared CSS foundations, consumer adapters, and established local primitives. Use for product interfaces, component styling, theme work, or design-token integration.

中文简介正在准备中。当前显示原文说明。

Compatibility alias for existing OpenClaw installations that now applies Carapace semantic tokens, themes, shared CSS foundations, consumer adapters, and established local primitives.

中文简介正在准备中。当前显示原文说明。

Apply OpenClaw visual identity to logos, typography, imagery, voice, documents, presentations, social graphics, and launch materials. Use when the task changes brand identity rather than ordinary product UI or public-page composition.

中文简介正在准备中。当前显示原文说明。

Simplified Japanese web artifacts builder skill for creating single-file HTML applications with Japanese UI components, i18n settings, and responsive design. Triggers on requests for Webアーティファクト, 単一HTMLファイル, HTMLツール作成, 日本語Webアプリ.

中文简介正在准备中。当前显示原文说明。

Japanese-inspired canvas and graphic design skill for HTML5 Canvas and SVG, covering traditional aesthetics (ma, wabi-sabi, yugen), calligraphy, washi textures, traditional patterns, and seasonal motifs. Triggers on requests for 和風デザイン, Canvas描画, SVGイラスト, 日本画風, Japanese-inspired graphics.

中文简介正在准备中。当前显示原文说明。

Japanese frontend and web design skill covering typography, vertical writing, form handling, accessibility (JIS X 8341-3), and common Japanese UI patterns. Triggers on requests for 日本語Webデザイン, フロントエンド, 和文タイポグラフィ, Japanese web design.

中文简介正在准备中。当前显示原文说明。

Japanese brand design guidelines with traditional color palettes (伝統色), typography (ゴシック体/明朝体), ma (間) spacing, wabi-sabi (侘寂) aesthetics, and logo design for Japanese characters. Triggers on requests for 和風デザイン, ブランドデザイン, 伝統色, 日本語タイポグラフィ, ロゴデザイン, 配色ガイド.

中文简介正在准备中。当前显示原文说明。

Generate Japanese-style (和風) CSS/design themes with CSS custom properties and Tailwind CSS support. 10 preset themes including 桜, 藍染, 紅葉, 雪月花, 茶室, 浮世絵, 禅, 祭, 未来, 和紙. Triggers on requests for 和風テーマ, 和風CSS, Japanese theme, 和風デザイントークン, テーマ生成.

中文简介正在准备中。当前显示原文说明。

Create new Claude Code Agent Skills in Japanese with proper SKILL.md format, trigger design, and evaluation methods. Triggers on requests for スキル作成, 新しいスキルを作る, SKILL.md作成, Agent Skill テンプレート, スキルの書き方.

中文简介正在准备中。当前显示原文说明。

Japanese tech article writer with non-duplicate H2/H3 structure design, content generation, and image TODO placeholders. Triggers on requests for 記事作成, 記事を作って, 記事を書いて, 〇〇の記事, テック記事, 解説記事, ブログ記事作成.

中文简介正在准备中。当前显示原文说明。

Liquid Glass material best practices for SwiftUI, UIKit, and AppKit on iOS 26+/macOS 26+ (Tahoe) through iOS 27/macOS 27. Use when implementing, reviewing, or migrating to glass: glassEffect, Glass variants (.regular/.clear/.identity), tint, interactive(), GlassEffectContainer, glassEffectUnion, toolbar glass, ToolbarSpacer, scrollEdgeEffectStyle, sharedBackgroundVisibility, tabBarMinimizeBehavior, backgroundExtensionEffect, NSGlassEffectView, UIGlassEffect, Tahoe window chrome, glass accessibility (Reduce Transparency/Increase Contrast), pre-26 Material fallbacks, UIDesignRequiresCompatibility. Also fires on symptoms: glass renders dark or muddy, glass looks like a flat tinted rectangle, glass button doesn't register taps, tap passes through glass, "'glassEffect' is only available in iOS 26.0 or newer", "ambiguous use of 'opacity'", "'cornerRadius' was deprecated", glass looks different in simulator vs device, screenshots of glass UI don't match. For glass animation, morphing, glassEffectID, transitions, Metal shaders, or performance profiling use the liquid-glass-motion skill instead.

中文简介正在准备中。当前显示原文说明。

Animation, morphing, and shader best practices for Liquid Glass and SwiftUI motion on iOS 26+/macOS 26+ through iOS 27. Use when animating glass or building UI motion: glassEffectID, @Namespace morphing, GlassEffectContainer spacing, glassEffectUnion, glassEffectTransition (.matchedGeometry/.materialize), withAnimation, springs, UnitCurve, PhaseAnimator, KeyframeAnimator, @Animatable, matchedTransitionSource, navigationTransition zoom, scrollTransition, visualEffect, Metal shaders (colorEffect, distortionEffect, layerEffect, [[stitchable]]), accessibilityReduceMotion gating, Instruments/xctrace profiling of hangs and animation hitches. Also fires on symptoms: glass morph not animating, view pops in instead of morphing, glass fades instead of materializing, morph flickers with Reduce Motion, menu glass morphs as a rectangle, animation runs on insert but not removal, PhaseAnimator loops forever or fires once, shader shows clipped edges (maxSampleOffset), animation hitches or main-thread hangs while scrolling glass chrome. For static glass, availability gating, toolbars, UIKit/AppKit glass, or accessibility of the material itself use the liquid-glass skill first.

中文简介正在准备中。当前显示原文说明。

Use when reviewing a project's architecture for design pattern applicability -- either validating a design document before implementation, or analyzing an existing codebase for pattern improvement opportunities.

中文简介正在准备中。当前显示原文说明。