simple11337/do-ui

do-ui は何をしますか？

Claude Code のスラッシュコマンド1つで、アニメーション付きのNext.jsサイトを素早く構築します。トークン消費を抑えたコンポーネントカタログと厳格なスタイル禁止ルールを備えています。

概要

/do-ui コマンドは、Next.js プロジェクトにアニメーション付きのUIコンポーネントを追加するためのスキルです。

• 対応プラットフォーム: Claude Code
• 主な機能: スラッシュコマンド一つで、アニメーション付きのNext.jsサイトをスキャフォールディング
• 特徴: トークン消費を最小限に抑え、スタイルの一貫性を保つための厳格なルールを適用

使い方

Claude Code 内で以下のスラッシュコマンドを入力してください：

/do-ui [プロジェクト名]

これにより、以下の処理が自動的に実行されます：

1. Next.js プロジェクトの作成（App Router を使用）
2. shadcn/ui コンポーネントのセットアップ
3. framer-motion によるアニメーションの初期化
4. コンポーネントカタログからの選択と適用
5. スタイル禁止ルールの適用

コンポーネントカタログ

以下のコンポーネントが利用可能です（トークン消費を抑えた設計）：

• Button - アニメーション付きボタン
• Card - フレームアニメーション対応カード
• Modal - モーダルダイアログ
• Navigation - スクロールアニメーション対応ナビゲーション
• Hero - ランディングページ用ヒーローセクション

スタイル禁止ルール

スタイルの一貫性を保つために、以下の使用が禁止されています：

1. インラインスタイル（style={{}} プロパティ）
2. グローバルCSSクラスの直接指定
3. Tailwind CSS 以外のCSSフレームワークの使用
4. カスタムCSSファイルの直接読み込み（*.module.css は許可）

注意事項

• このスキルは Claude Code 環境内でのみ動作します
• プロジェクトは最低でも Node.js 18 以上が必要です
• 生成されるコードは TypeScript ベースです
• すべてのコンポーネントはレスポンシブデザインに対応しています

ライセンス

MIT