デザインのスキル

Marpテーマのビルドパイプライン構築。SCSS→CSSコンパイル、サンプル画像生成、Makefile設定、Git hook、GitHub Actions CI設定を支援。「テーマのビルド環境を整備」などのリクエスト時に使用。

Rebuild a degraded AI image to remove crunchy textures and repeated-edit artifacts while preserving identity, style, and composition. Use for clean remakes, not ordinary retouching or upscaling.

日本語の概要は準備中です。原文の説明を表示しています。

選択済みのUI画像案を既存アプリへ実装し、実画面と参照を比較して漏れや表示崩れを修正する。

デザインカンプ・UIモックを、再利用できるレイヤー素材とレスポンシブUIへ落とし込む。必要素材の分解・生成・配信用整備・組み合わせ検証から、依頼範囲に応じて既存アプリへの実装まで扱う。

UI案や既存画面の改善方向を、生成画像のモックアップとして比較・提案する。画像と使用プロンプトをdocs/DESIGNへ保存する。

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".

日本語の概要は準備中です。原文の説明を表示しています。

実装完了後、学んだことをDESIGN.mdに蓄積。スキル/ルールの自己改善を提案。 ストーリー駆動開発の終点。 「フィードバック」「/dev:feedback」で起動。 Trigger: フィードバック, 学習事項蓄積, /dev:feedback, feedback, design update

JavaScript / React / Vue のフロントエンドコードを実装・レビュー・リファクタリングするときに、 現在のコードベースを調査し、適切な設計・パフォーマンス・レンダリングパターンを エージェントが自律的に選んで適用する。ユーザーが hooks-pattern や dynamic-import などの 個別パターンを指定しなくても、必要な reference を選択する。 Trigger: front-end-design-patterns, frontend design patterns, React設計, Vue設計, JavaScript設計, Reactリファクタリング, Vueリファクタリング, フロントエンドパフォーマンス改善, bundle改善, レンダリング戦略, Reactレビュー, Vueレビュー

iOS 26 Liquid Glassデザインシステム — ブラー、反射、インタラクティブモーフィングを備えた動的ガラスマテリアル（SwiftUI、UIKit、WidgetKit対応）。

KMPプロジェクトのためのCompose MultiplatformおよびJetpack Composeパターン — ステート管理、ナビゲーション、テーマ設定、パフォーマンス、プラットフォーム固有UI。

REST APIデザインパターン（リソース命名、ステータスコード、ページネーション、フィルタリング、エラーレスポンス、バージョニング、レート制限を含む本番API向け）

Djangoアーキテクチャパターン、DRFによるREST APIデザイン、ORMベストプラクティス、キャッシュ、シグナル、ミドルウェア、プロダクショングレードのDjangoアプリ。

This skill should be used when the user wants to "investigate a bug", "debug an issue", "figure out why something is happening", "find the root cause", "troubleshoot", "強い推論で調査", "仮説を立てて検証", "原因を特定", "バグの原因調査", "なぜ動かないか調べて", "問題を切り分け", "原因不明", "デバッグ", or mentions systematic hypothesis-driven debugging. NOTE: Use this for investigating UNKNOWN causes, not for validating design proposals (use devils-advocate for that).

One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.

日本語の概要は準備中です。原文の説明を表示しています。

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

日本語の概要は準備中です。原文の説明を表示しています。

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

日本語の概要は準備中です。原文の説明を表示しています。

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

日本語の概要は準備中です。原文の説明を表示しています。

Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.

日本語の概要は準備中です。原文の説明を表示しています。

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

日本語の概要は準備中です。原文の説明を表示しています。

Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.

日本語の概要は準備中です。原文の説明を表示しています。

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, or wants more polished, intentional typography.

日本語の概要は準備中です。原文の説明を表示しています。

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

日本語の概要は準備中です。原文の説明を表示しています。

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

日本語の概要は準備中です。原文の説明を表示しています。

Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows.

日本語の概要は準備中です。原文の説明を表示しています。