From claude-code-settings
フロントエンドUIデザインを洗練された独自性のあるスタイルで生成します。ランディングページ、ダッシュボード、Webアプリケーションのデザイン、UIコンポーネント作成時に使用してください。「AIっぽい」汎用デザインを避け、プロフェッショナルで記憶に残るUIを実現します。
npx claudepluginhub joshuarweaver/cascade-code-general-misc-1 --plugin tubone24-claude-code-settingsThis skill uses the workspace's default tool permissions.
このスキルは、AIが生成しがちな「汎用的で無個性なデザイン」を避け、洗練された独自性のあるフロントエンドUIを作成するためのガイドラインです。
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
このスキルは、AIが生成しがちな「汎用的で無個性なデザイン」を避け、洗練された独自性のあるフロントエンドUIを作成するためのガイドラインです。
以下のパターンは「AIスロップ美学」と呼ばれ、避けるべきです：
推奨フォントの組み合わせ例：
| ヘッダー | ボディ | 特徴 |
|---|---|---|
| Playfair Display | Source Sans Pro | クラシック＆モダン |
| Space Grotesk | Inter | テック＆ミニマル |
| Fraunces | Work Sans | エレガント＆読みやすい |
| DM Serif Display | DM Sans | 統一感のある対比 |
| Syne | Outfit | 大胆＆現代的 |
タイポグラフィ原則：
カラーパレット構築原則：
プライマリ：ブランドアイデンティティを表す主色
セカンダリ：プライマリを補完する色（補色または類似色）
アクセント：CTAやハイライトに使用する注目色
ニュートラル：背景やテキストに使用するグレー系
独自性を出すテクニック：
差別化するレイアウトパターン：
効果的なアニメーション原則：
高影響度の瞬間に集中
タイミングの指針
イージング関数
/* 推奨イージング */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
背景デザインのアイデア：
進捗チェックリスト：
詳細なテーマ例については以下を参照：
フォントペアリング即決リスト：
カラー参考：