Communitygithub.com

anubhavsingh-0218/uncodixify-skill

React と Tailwind UI のスタイルを抑制し、一般的な AI ダッシュボードパターンを制限して、クリーンでプロダクト重視のレイアウトを促進します。

uncodixify-skill とは?

このスキルは、React と Tailwind CSS を使用した UI 開発において、過度に複雑な AI ダッシュボードのデザインパターンを抑制し、よりシンプルでプロダクトに焦点を当てたレイアウトを強制するためのものです。主に Claude Code や Cursor などの AI エージェントと連携し、開発者が生成する UI コードに対して一貫したスタイルガイドラインを適用します。スキルは、不要な装飾的な要素やパターン(過剰なグラデーション、不必要なアニメーション、過剰なカード構造など)を排除し、クリーンで読みやすく、保守性の高い UI を目指します。具体的には、特定のユーティリティクラスやコンポーネントの使用を制限したり、推奨される代替案を提示することで、自動的にスタイルを矯正します。これにより、開発者はビジネスロジックやユーザー体験に集中でき、AI が生成するコードの品質が向上します。

対応~Claude Code~Codex CLI~Cursor
npx skills add anubhavsingh-0218/uncodixify-skill

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

uncodixify-skill は何をしますか?

React と Tailwind UI のスタイルを抑制し、一般的な AI ダッシュボードパターンを制限して、クリーンでプロダクト重視のレイアウトを促進します。

このスキルは、開発者が Claude Code、Cursor、Codex などの AI エージェントを使用する際に、過度に複雑な AI ダッシュボードパターンが生成されるのを防ぎます。代わりに、シンプルでプロダクトに焦点を当てた UI を推奨します。

使用方法

  1. このスキルを AI エージェントに適切な方法で追加します(詳細は各エージェントのドキュメントを参照)。
  2. 新しい React コンポーネントを作成するか、既存のコードをリファクタリングするときに、このスキルが自動的にスタイルガイドラインを適用します。
  3. 禁止されているパターンが検出された場合、AI エージェントは代替案を提案します。

制限されるパターン

  • 過剰なグラデーションと背景効果
  • 不必要なアニメーションとトランジション
  • 過剰なカード構造とシャドウ効果
  • 過度に複雑なレイアウトグリッド

推奨される代替案

  • フラットデザインとミニマルなスタイル
  • コンテンツ重視のレイアウト
  • 読みやすいタイポグラフィ
  • 適切なスペーシングと整列

貢献

このスキルの改善に貢献したい場合は、リポジトリをフォークしてプルリクエストを送信してください。

ライセンス

MIT

関連スキル