WDS-SKILLS — Wanted Design System 用 Claude カスタムスキル集
概要
WDS-SKILLS は Wanted Design System(WDS)向けに作成された Claude Code のカスタムスキル群です。目的はデザインレビューの自動化と、作成中または既存の UI が WDS のコンポーネント/トークン/パターンに沿っているかを検査することにあります。リポジトリ自体はシンプルで、スキル定義が置かれる .claude ディレクトリと導入方法や前提条件を説明する README.md を含みます。主要な前提として WDS MCP パッケージの導入が必須で、Figma を直接レビューするには追加で Figma MCP サーバが必要です。導入後は Claude Code 上で自然言語から一覧表示やレビュー実行ができるようになります。
リポジトリの統計情報
- スター数: 6
- フォーク数: 0
- ウォッチャー数: 6
- コミット数: 10
- ファイル数: 2
- メインの言語: 未指定
主な特徴
- WDS に準拠したデザインレビューを Claude Code 上で自動実行できるスキル群。
- WDS MCP 経由でコンポーネント、トークン、パターン情報を参照して整合性チェックを実施。
- Figma URL を渡すことで Figma ファイルを直接読み取り、WDS 基準でレビュー(Figma MCP が別途必要)。
- シンプルなリポジトリ構成で導入が容易、Claude Code のカスタムスキルとして組み込み可能。
技術的なポイント
このプロジェクトは Claude Code のカスタムスキル仕組み(.claude ディレクトリにスキル定義を置く想定)を利用し、WDS のメタデータを参照するために WDS MCP(Microservice/Package)への依存が明確に示されています。WDS MCP はコンポーネントカタログ、デザイントークン、パターンライブラリなどの情報を API 経由で提供し、スキルはそれらを照合してレビュー結果を生成します。Figma レビュー機能は Figma MCP サーバと組み合わせ、Figma ファイルの構造(ページ・フレーム・レイヤー)を取得して、各要素が WDS トークンやコンポーネントに準拠しているかをチェックします。実装上の注意点としては、MCP の有無が機能可否に直結するため導入手順と検証コマンド(例: Claude Code で “WDS 컴포넌트 목록 보여줘” と入力して一覧が出るか)を README に徹底して記載している点が挙げられます。リポジトリ自体は軽量でコード量は多くないため、拡張は .claude 内のスキル定義を追加・編集する形で行います。現状ドキュメントやサンプル、テスト、ライセンス表記が限定的であり、本格的な運用では CI 統合、バージョン管理、エラーハンドリング、認証周り(MCP と Figma アクセス)を整備する必要があります。開発者視点では、スキルの入出力フォーマットを定義し、WDS のスキーマ変更に追従するためのスキーマ検証やモック MCP を用意すると導入工数が下がります。
プロジェクトの構成
主要なファイルとディレクトリ:
- .claude: dir
- README.md: file
まとめ
WDS に準拠したデザインレビューを Claude Code で自動化する実用的なスキル集。
リポジトリ情報:
- 名前: WDS-SKILLS
- 説明: Wanted Design System용 Claude Code 커스텀 스킬 모음
- スター数: 6
- 言語: null
- URL: https://github.com/tinyradio/WDS-SKILLS
- オーナー: tinyradio
- アバター: https://avatars.githubusercontent.com/u/257928788?v=4
READMEの抜粋:
WDS-SKILLS
Wanted Design System(WDS)용 Claude Code 커스텀 스킬 모음입니다. 디자인 리뷰를 자동화하고, WDS 준수 여부를 검사할 수 있습니다。
WDS MCP 패키지 설치 필수
이 스킬은 WDS MCP 패키지가 설치되어 있어야 정상 동작합니다. WDS MCP 없이는 컴포넌트, 토큰, 패턴 정보를 조회할 수 없어 리뷰가 잘 동작하지 않을 수도 있습니다.
설치 문의: 원티드 디자인 시스템 TF
설치 확인: Claude Code에서
"WDS 컴포넌트 목록 보여줘"입력 → 목록이 나오면 정상Figma 디자인 리뷰도 가능합니다
Figma URL을 전달하면 디자인 파일을 직접 읽어와 WDS 기준으로 리뷰할 수 있습니다. 이 기능을 사용하려면 Figma MCP 서버가 추가로 설치되어 있어야 합니다。 설치 방법: Claude Co…