mcpField
S
super-saiyan

super-saiyan

github.com/nickcrewデザイン・UI6268 回インストール17 週間前に更新
リポジトリ

super-saiyan について

Web、ターミナル、CLI、ドキュメントの画面設計を支援するスキルです。アクセシビリティ、応答性能、状態の明確さ、目的に沿ったインタラクションを重視します。

主な機能

  1. 01アクセシビリティとコントラストの指針
  2. 02アニメーション時間とトランジション
  3. 03読み込み・エラー・成功状態
  4. 04キーボード操作
  5. 05Web、TUI、CLI、ドキュメントのパターン

活用シーン

  1. 01画面のアクセシビリティ確認
  2. 02UIの遷移とフィードバック設計
  3. 03ターミナル画面の読みやすさ改善
  4. 04読み込み・エラー状態の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nickcrew/claude-cortex --skill super-saiyan

インストール後、Claude Code で/super-saiyanを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
cli.md
docs.md
tui.md
web.md

詳細

スーパーサイヤ人 🔥

あらゆる UI プラットフォーム向けのビジュアル品質向上スキルです。

基本原則

  1. アクセシビリティを最優先 - 美しさとインクルーシブさを両立します（最低でも WCAG 2.1 AA）
  2. 常にパフォーマンスを重視 - アニメーションは 60fps、応答は瞬時にします
  3. ユーザーを喜ばせる - 目的のあるマイクロインタラクションを取り入れます

すべての UI 要素に適用

  • 滑らかな状態遷移（200～300ms、ease-out）
  • 明確な視覚的階層と余白
  • 読み込み／エラー／成功の各状態
  • キーボード操作
  • アクセシブルなコントラスト（テキストは 4.5:1、UI は 3:1）

アニメーションのタイミング

  • 瞬時：<100ms（マイクロインタラクション）
  • 高速：100～200ms（ホバー）
  • 標準：200～300ms（トランジション）
  • 低速：300～500ms（強調）

プラットフォームのパターン

Web（React/Vue）
  • アニメーションには Framer Motion を使用します
  • シンプルな状態には CSS トランジションを使用します
  • 非同期コンテンツにはスケルトンローダーを使用します
TUI（Textual/Ratatui）
  • ちらつきのない滑らかな再描画
  • スピナーとプログレスバー
  • カラーテーマ
CLI（Rich/Click）
  • ステータスを色で表示します
  • 時間のかかる処理にはプログレスバーを使用します
  • 成功をチェックマークで示します
ドキュメント
  • 高速な読み込み
  • すっきりとしたタイポグラフィ
  • レスポンシブなレイアウト

品質チェックリスト

  • 視覚的な階層が明確
  • コントラストがアクセシブル（テキストは 4.5:1、UI は 3:1）
  • アニメーションが滑らか（60fps）
  • キーボード操作が可能
  • 各状態に対応（読み込み／エラー／成功）

対象外

  • ❌ むやみなアニメーション
  • ❌ パフォーマンスを犠牲にすること
  • ❌ アクセシビリティを無視すること

プラットフォーム固有のリファレンス

必要に応じて詳細なパターンを読み込んでください：

  • skills/super-saiyan/references/web.md
  • skills/super-saiyan/references/tui.md
  • skills/super-saiyan/references/cli.md
  • skills/super-saiyan/references/docs.md

コメント

Markdown 対応