スキル design-system-patterns

📦

design-system-patterns

Name: design-system-patterns
Author: wshobson

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド🌐 ネットワークアクセス

スケーラブルなデザインシステムを構築する

デザインシステムは、トークン、テーマ、コンポーネントが別々に成長すると不整合になりがちです。このスキルは、トークン階層、テーマ切り替え、コンポーネント API、ガバナンスのパターンを提供します。

対応: Claude Codex Code(CC)

📊 75 十分

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト

Review the Skillstore skill "design-system-patterns" from https://skillstore.io/skills/wshobson-design-system-patterns.md and its manifest at https://skillstore.io/api/skills/wshobson-design-system-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/wshobson-design-system-patterns.md 署名済み manifest GET /api/skills/wshobson-design-system-patterns/manifest 署名済み lockfile GET /api/skills/wshobson-design-system-patterns/lockfile

テストする

「design-system-patterns」を使用しています。 SaaS ダッシュボードのデザイントークンを計画する。

期待される結果:

プリミティブ、セマンティック、コンポーネントトークンによる階層化されたトークンモデル。
テキスト、サーフェス、ボーダー、スペーシング、インタラクショントークンの命名規則。
トークン変更のバージョニングと使用方法の文書化に関するガイダンス。

「design-system-patterns」を使用しています。ダークモード実装をレビューする。

期待される結果:

CSS custom properties に基づくテーマ契約。
システム設定の検出と保存されたユーザー設定に関する推奨事項。
コントラスト、視差軽減、強制カラーモード対応のチェック。

「design-system-patterns」を使用しています。再利用可能なコンポーネントライブラリのアプローチを設計する。

期待される結果:

バリアント、サイズ、スロット、コンポジションに関するコンポーネント API の推奨事項。
キーボード操作と ARIA 属性に関するアクセシビリティ要件。
利用者向けドキュメントとマイグレーション計画のトピック。

セキュリティ監査

安全

v4 • 2026/7/7 バージョン別レポートを開く

All static findings are false positives. The content is documentation examples and public links. No prompt injection, command execution, exfiltration, or malicious intent was found.

スキャンされたファイル

1,899

解析済み行数

レビュー項目

誤検知を無視

最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。

監査者: codex 監査履歴を表示 →

このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く

レポートリンクをコピー

https://skillstore.io/skills/wshobson-design-system-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/wshobson-design-system-patterns/security.svg)](https://skillstore.io/skills/wshobson-design-system-patterns?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/wshobson-design-system-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-design-system-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/wshobson-design-system-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学術引用 (APA · BibTeX · CFF)

APA形式の引用

wshobson. (2026). design-system-patterns security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-design-system-patterns/audits/4

BibTeX形式の引用

@techreport{wshobson-wshobson-design-system-patterns-2026,
  author = {wshobson},
  title = {design-system-patterns security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/wshobson-design-system-patterns/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "design-system-patterns security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "wshobson"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/wshobson-design-system-patterns/audits/4"
identifiers:
  - type: other
    value: "skillstore:wshobson-design-system-patterns:audit:4"
    description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由証拠の信頼度: 高

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

トークン基盤を作成する

共有 UI ライブラリを構築する前に、トークンカテゴリ、命名規則、プラットフォーム出力を定義します。

テーマ切り替えを計画する

安定した CSS custom property 契約を使って、ライト、ダーク、ハイコントラスト、システムテーマを実装します。

コンポーネント API を標準化する

複合コンポーネント、バリアントシステム、アクセシビリティパターンを使用して、再利用可能なコンポーネントを予測しやすくします。

これらのプロンプトを試す

初心者向けトークン計画

このスキルを使用して、新しい Web アプリの色、タイポグラフィ、スペーシング、角丸の基本的なトークン階層を設計してください。

テーマアーキテクチャレビュー

このスキルを使用して、現在の CSS 変数をレビューし、セマンティックトークンを使ったライトテーマとダークテーマのアーキテクチャを提案してください。

コンポーネントライブラリ API 設計

このスキルを使用して、ボタン、アコーディオン、バッジ、フォームコントロール向けに、バリアントとアクセシビリティ状態を備えたコンポーネント API パターンを設計してください。

高度なマルチプラットフォームシステム

このスキルを使用して、Style Dictionary 出力、ガバナンスルール、マイグレーションガイダンスを含むマルチブランドのトークンパイプラインを定義してください。

ベストプラクティス

意図を表すにはセマンティックトークン名を使用し、生の値はプリミティブトークンに保持します。
すべてのテーマを、実際のコンポーネント、アクセシビリティ状態、プラットフォーム出力に対してテストします。
トークンとコンポーネントの変更は、マイグレーションノートを伴うバージョン管理された API 変更として扱います。

回避

判断をトークンで表現すべき場合に、コンポーネント内で色やスペーシングをハードコードしないでください。
CSS 変数でテーマ契約を担える場合に、テーマ固有のコンポーネント分岐を作成しないでください。
使用方法、アクセシビリティ動作、デザイン上の責任範囲を文書化せずにバリアントを追加しないでください。

よくある質問

このスキルは完全なデザインシステムを生成しますか？

いいえ。プロダクトと技術スタックに合わせて適用するためのパターン、例、計画ガイダンスを提供します。

ダークモードに役立ちますか？

はい。CSS custom properties、React テーマプロバイダー、システム設定の検出、永続的なテーマ選択を扱います。

モバイル向けデザイントークンに対応していますか？

はい。CSS、iOS、Android 向けのマルチプラットフォームトークン出力の概念を説明します。

Figma 連携は自動ですか？

いいえ。Figma からコードへのワークフローとトークンパイプライン構造について説明しますが、Figma には接続しません。

誰がこのスキルを使うべきですか？

デザインシステムエンジニア、フロントエンド開発者、UI プラットフォームチームが、共有 UI 基盤を構造化するために使用できます。

セキュリティ上機密性の高い動作が含まれていますか？

確認された機密性の高い動作は見つかりませんでした。レビューされたリスク指標は、ドキュメント例と公開リソースリンクでした。

開発者情報

作成者

wshobson

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/design-system-patterns/

参照

36e07d5e13068e5be64447e8f20b427cf2cbd21a

メンテナンスの新しさ

2026/7/18

利用状況

9 ダウンロード · 290 閲覧

ファイル構成

📁 references/

📄 component-architecture.md

📄 design-tokens.md

📄 theming-architecture.md

📄 SKILL.md

wshobson のその他のスキル

すべて表示

📦

prompt-engineering-patterns

本番環境向けLLMプロンプトを最適化

LLMプロンプトは、指示、例、評価基準が不明確なために失敗することがよくあります。このスキルは、Claude、Codex、Claude Code、および同様のツールでプロンプトを改善するためのテンプレートとワークフローを提供します。

生産性表示

📦

context-driven-development

コンテキスト駆動開発を管理する

AI支援プロジェクトでは、プロダクト目標、スタック選定、ワークフロールールが散在すると一貫性が失われます。このスキルは、Conductor のコンテキスト成果物を通じて Claude、Codex、Claude Code を導きます。

コーディング＆開発表示

📦

startup-financial-modeling

スタートアップ向け財務モデルを構築する

スタートアップチームは、採用、資金調達、資金使途を計画する前に、明確な予測を必要とします。このスキルは、収益、コスト、ランウェイ、シナリオを実務的な財務計画アウトプットとして整理します。

データ＆アナリティクス表示

📦

kpi-dashboard-design

意思決定を促進するKPIダッシュボードを設計する

チームは多くの数値を表示するだけで、行動につながらないダッシュボードを作りがちです。このスキルは、Claude、Codex、Claude Codeが意味のあるKPIを選定し、ビューを構成し、指標を明確に提示するのに役立ちます。

デザイン＆クリエイティブ表示

📦

postmortem-writing

非難しないインシデント事後分析を書く

インシデントレビューは、一貫性がなくなったり、非難に焦点が当たったり、実行に移しにくくなったりしがちです。このスキルは、Claude、Codex、Claude Code が、明確なタイムライン、根本原因、担当者を含む構造化された事後分析を作成するのに役立ちます。

ライティング＆コンテンツ表示

📦

data-storytelling

明確なデータストーリーを構築

生の指標だけでは、ステークホルダーを説得したり意思決定を支援したりするには不十分なことがよくあります。このスキルは、Claude、Codex、Claude Code が分析を明確なナラティブ、ビジュアル、推奨事項へと整理するのを支援します。

データ＆アナリティクス表示

すべて表示

📦

design-system

Build Consistent Design Systems and Slides

作成者 nextlevelbuilder

Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.

デザイン＆クリエイティブ表示

📦

ux-designer

リサーチ主導のデザインガイダンスでUXを改善

作成者 shubhamsaboo

チームは思い込みに基づいてフローを設計し、アクセシビリティの問題を見落としがちです。このスキルは、UXのベストプラクティスを用いて、リサーチ、構造化、インタラクションデザイン、レビューを支援します。

デザイン＆クリエイティブ表示

📦

design-lint

Check designs with deterministic CSS rules

作成者 cubha

Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.

デザイン＆クリエイティブ表示

📦

ui-ux-designer

アクセシブルなプロダクトインターフェイスを設計する

作成者 sickn33

チームは、ユーザーニーズを一貫性がありアクセシブルなインターフェイスへ落とし込むことに苦労しがちです。このスキルは、リサーチ、フロー、デザインシステム、トークン、ハンドオフをガイドします。

デザイン＆クリエイティブ表示

📦

extract

再利用可能なデザインシステムパターンを抽出する

作成者 pbakaus

チームはアプリケーション全体で UI コンポーネント、トークン、レイアウトパターンを重複して作成しがちです。このスキルは、Claude、Codex、または Claude Code が再利用可能なパターンを見つけ、それらを保守されたデザインシステムへ統合するのに役立ちます。

デザイン＆クリエイティブ表示

📦

ui-styling

Build Accessible Tailwind Interfaces

作成者 nextlevelbuilder

Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.

デザイン＆クリエイティブ表示

design-system-patterns

自分のエージェントでインストール

エージェントが読めるリソース

テストする

セキュリティ監査

リスク要因

レポートリンクをコピー

Markdownバッジ

HTMLバッジ

埋め込みカード

APA形式の引用

BibTeX形式の引用

CITATION.cff

Skillstore スコア

作成できるもの

トークン基盤を作成する

テーマ切り替えを計画する

コンポーネント API を標準化する

これらのプロンプトを試す

ベストプラクティス

回避

よくある質問

開発者情報

wshobson のその他のスキル

prompt-engineering-patterns

context-driven-development

startup-financial-modeling

kpi-dashboard-design

postmortem-writing

data-storytelling

関連スキル

design-system

ux-designer

design-lint

ui-ux-designer

extract

ui-styling