uncodixfy は何をしますか？
フロントエンドコード生成時に、ありきたりなAI/Codex UIパターンを排除します。HTML、CSS、React、Vue、Svelteなど、あらゆるフロントエンドUIコードを生成する際にこのスキルを有効にすることで、典型的なAI生成UIではなく、Linear、Raycast、Stripe、GitHubにインスパイアされた洗練された人間デザインの美学を適用します。
概要
このスキルは、AIエージェントがフロントエンドUIを生成する際に、以下のような一般的なAI生成パターンを防止するために設計されています：
- 過度で不自然な角丸（border-radius）
- 不適切なグラデーション
- 一貫性のない間隔（マージン・パディング）
- AI生成UIに特有のカラーパレット（例：くすんだ青緑、不自然なハイライト）
- 過剰なシャドウや装飾
代わりに、Linear、Raycast、Stripe、GitHubといった洗練されたプロダクトのデザイン原則に従った、クリーンで人間中心のUIを生成します。
使い方
このスキルは、AIエージェント（Claude Code、Coder、Cursorなど）と一緒に使用することを想定しています。以下の手順で有効にしてください：
- フロントエンドコードを生成する前に、このスキルをアクティブにします。
- 通常通り、フロントエンドUIの生成を依頼します（例：「ログインフォームを作成して」）。
- スキルが自動的に適用され、人間がデザインしたような美しいUIコードが生成されます。
対応プラットフォーム
- Claude Code
- Cursor
- Codex
- その他、SKILL.md形式のスキルをサポートするAIエージェント
対応フレームワーク
- HTML（プレーン）
- CSS
- React
- Vue
- Svelte
- その他、あらゆるフロントエンド技術
デザイン原則
このスキルが強制するデザイン原則は以下の通りです：
- ミニマリズム：不要な装飾を排除し、コンテンツに集中する。
- 一貫性：スペーシング、タイポグラフィ、カラーを統一する。
- アクセシビリティ：コントラスト比、フォーカス状態、キーボードナビゲーションを考慮する。
- レスポンシブ性：すべての画面サイズで適切に表示されるようにする。
- パフォーマンス：軽量で効率的なCSSとHTMLを使用する。
例：スキルの効果
スキルなしの場合（典型的なAI生成UI）：
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
<h2 style="color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">ようこそ</h2>
<p style="color: rgba(255,255,255,0.9);">これはAIが生成した典型的なUIです。</p>
</div>
スキルありの場合（LinearにインスパイアされたUI）：
<div style="background: #fafafa; border-radius: 8px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);">
<h2 style="color: #1a1a2e; font-weight: 600; font-size: 1.25rem;">ようこそ</h2>
<p style="color: #4a4a6a; line-height: 1.5;">洗練された人間デザインのUIへようこそ。</p>
</div>