無料GitHub で公開日本語紹介

audit-design-system

既存コードのデザインシステム利用状況を調べ、旧UI部品やlucide-reactのアイコンを@trycompai/design-systemの部品・Carbonアイコンへ置き換えるスキルです。

原文原文の説明を見る

Audit & fix design system usage — migrate @trycompai/ui and lucide-react to @trycompai/design-system

trycompai/compスター 2,058(GitHub 2,058 + cccskills 0)

実行スコア未検証

インストール方法を見る

こんなときに便利

旧UI部品を移行したいとき
アイコンをCarbonに置き換えたいとき
画面のデザインシステム準拠を確認するとき

日本語での紹介

できること

指定されたファイルを確認し、デザインシステムに沿っていない部品やアイコンを見つけて修正します。旧ライブラリの@trycompai/uiは、@trycompai/design-systemに同等の部品があるかを確認して置き換えます。lucide-reactのアイコンは、デザインシステムのCarbonアイコンから対応するものを探します。レイアウトにはPageLayoutやStackなどの指定された部品を使い、Buttonのローディング表示やアイコンも専用プロパティで扱います。最後にアプリの型チェックを実行して移行を確認します。

こんなときに便利

既存画面のUI部品を新しいデザインシステムへ移行するときや、実装が利用ルールに沿っているか確認したいときに使えます。対象ファイルを指定して、部品やアイコンの置き換えを進めたい開発者にも向いています。

使い方の例

「このファイルのUI部品をデザインシステムに合わせて修正してください」
「lucide-reactのアイコンを対応するCarbonアイコンに置き換えてください」

注意点

作業後の確認にはbunx turbo run typecheck --filter=@trycompai/appを使います。

この紹介文は、公開されている SKILL.md をもとに AI（OpenAI Codex）が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル（1）

SKILL.md1.5 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Audit the specified files for design system compliance. Fix every issue found immediately.

Rules

@trycompai/design-system is the primary component library. @trycompai/ui is legacy — only use as last resort when no DS equivalent exists.
Always check DS exports first before reaching for @trycompai/ui. Run node -e "console.log(Object.keys(require('@trycompai/design-system')))" to check.
Icons: Use @trycompai/design-system/icons (Carbon icons), NOT lucide-react. Check with node -e "const i = require('@trycompai/design-system/icons'); console.log(Object.keys(i).filter(k => k.match(/YourSearch/i)))".
DS components that do NOT accept className: Text, Stack, HStack, Badge, Button — wrap in <div> for custom styling.
Button: Use DS Button with loading, iconLeft, iconRight props instead of manually rendering spinners/icons.
Layout: Use PageLayout, PageHeader, Stack, HStack, Section, SettingGroup.
Patterns: Sheet (Sheet > SheetContent > SheetHeader + SheetBody), Drawer, Collapsible.

Process

Read files specified in $ARGUMENTS
Find @trycompai/ui imports — check if DS equivalent exists
Find lucide-react imports — find matching Carbon icons
Migrate components and icons
Run build to verify: bunx turbo run typecheck --filter=@trycompai/app

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

同じリポジトリのスキル