web-design-mastery
✓リファクタリング UI 原則に基づいた運用グレードの Web アプリケーション UI デザイン。ランディング ページ、ダッシュボード、認証画面、ヒーロー セクション、カード デザイン、ボタン デザイン、フォーム入力、ナビゲーション、レイアウト、間隔の決定、タイポグラフィ階層、色の選択、影、深さ、空の状態、背景の装飾に対して常にアクティブ化します。デザイン ワークフロー、視覚的な階層、間隔システム (4 ピクセル グリッド)、タイプ スケール、HSL カラー システム、シャドウ エレベーション、最後の仕上げを提供します。トルコ語: Sayfa tasarımı、UI/UX、フロントエンド tasarım、Web tasarım、güzel arayüz、モダン tasarım、カード tasarımı、buton stili、form tasarımı、renk Palati、tipografi。英語: 美しいインターフェース、洗練されたデザイン、高級感、視覚的な階層、ホワイトスペース、カラーパレット、タイポグラフィスケール。
SKILL.md
Production-grade UI design principles from Refactoring UI by Adam Wathan & Steve Schoger.
| 1 | 4 | Micro gaps | | 2 | 8 | Tight, within components | | 3 | 12 | Related elements | | 4 | 16 | Section padding | | 6 | 24 | Between sections | | 8 | 32 | Major separation | | 12 | 48 | Large gaps | | 16 | 64 | Hero spacing | | 24 | 96 | Maximum separation |
| 12 | Labels, meta, fine print | | 14 | Body text, default | | 16 | Emphasis, subheadings | | 18 | Section headings | | 20 | Card titles | | 24 | Page section titles | | 30 | Page headings | | 36 | Hero subheading | | 48 | Hero heading | | 60-72 | Display text |
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
web-design-mastery とは？
リファクタリング UI 原則に基づいた運用グレードの Web アプリケーション UI デザイン。ランディング ページ、ダッシュボード、認証画面、ヒーロー セクション、カード デザイン、ボタン デザイン、フォーム入力、ナビゲーション、レイアウト、間隔の決定、タイポグラフィ階層、色の選択、影、深さ、空の状態、背景の装飾に対して常にアクティブ化します。デザイン ワークフロー、視覚的な階層、間隔システム (4 ピクセル グリッド)、タイプ スケール、HSL カラー システム、シャドウ エレベーション、最後の仕上げを提供します。トルコ語: Sayfa tasarımı、UI/UX、フロントエンド tasarım、Web tasarım、güzel arayüz、モダン tasarım、カード tasarımı、buton stili、form tasarımı、renk Palati、tipografi。英語: 美しいインターフェース、洗練されたデザイン、高級感、視覚的な階層、ホワイトスペース、カラーパレット、タイポグラフィスケール。 ソース: anilcancakir/my-claude-code。
web-design-mastery のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/anilcancakir/my-claude-code
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-01