📦
prompt-engineering-patterns
86本番環境向けLLMプロンプトを最適化
LLMプロンプトは、指示、例、評価基準が不明確なために失敗することがよくあります。このスキルは、Claude、Codex、Claude Code、および同様のツールでプロンプトを改善するためのテンプレートとワークフローを提供します。
生産性 表示
スキル visual-design-foundations
📦
visual-design-foundations
コンテンツリビジョン r1 安全 ⚡ スクリプトを含む⚙️ 外部コマンド🌐 ネットワークアクセス
ビジュアルデザインの基盤を構築
タイポグラフィ、色、余白、アイコンに一貫性がないと、インターフェースは使いにくく、保守しにくくなります。このスキルは、Claude、Codex、Claude Code が、アクセシブルなトークンと再利用可能なパターンを備えた実用的なビジュアルシステムを定義するのに役立ちます。
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "visual-design-foundations" from https://skillstore.io/skills/wshobson-visual-design-foundations.md and its manifest at https://skillstore.io/api/skills/wshobson-visual-design-foundations/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「visual-design-foundations」を使用しています。 チームが新しい分析ダッシュボードのためのデザイン基盤を必要としている。
期待される結果:
- 見出し、本文、ラベル、データ量の多いテーブル向けの簡潔なタイポグラフィスケール。
- ブランド、成功、警告、エラー、サーフェス、ボーダー、テキストに対応するセマンティックなカラー役割。
- 高密度なダッシュボードレイアウトの読みやすさと一貫性を保つためのスペーシングとアイコンのルール。
「visual-design-foundations」を使用しています。 既存プロダクトにスペーシングの不一致と不明確な階層がある。
期待される結果:
- スペーシングのばらつき、弱いコントラスト、フォントの過剰使用、欠落した状態に関する優先順位付き監査。
- 繰り返し使われるレイアウトパターンに対する推奨トークン名と置換値。
- ユーザーへの影響が最も大きいコンポーネント向けの短い改善計画。
「visual-design-foundations」を使用しています。 デザイナーが既存トークンのダークモード指針を求めている。
期待される結果:
- ブランド、サーフェス、テキスト、ボーダー、状態の色を分離するセマンティックなトークンモデル。
- 両方のテーマで読みやすいテキストとインタラクティブな状態を確認するためのコントラストチェック。
- コンポーネントレベルの判断で直接的な色名を避けるためのガイダンス。
セキュリティ監査
安全v4 • 2026/7/8 バージョン別レポートを開く
The static findings are false positives from Markdown fences, JavaScript template literals, regular expression matching, and resource links. No prompt injection, credential handling, process execution, or malicious network intent was found in the reviewed files.
4
スキャンされたファイル
1,604
解析済み行数
0
レビュー項目
0
誤検知を無視
リスク要因
⚡ スクリプトを含む (1)
⚙️ 外部コマンド (35)
references/color-systems.md:239 references/color-systems.md:51-61 references/color-systems.md:352 references/spacing-iconography.md:81-86 references/spacing-iconography.md:184-190 references/spacing-iconography.md:190-197 references/spacing-iconography.md:239-247 references/spacing-iconography.md:262-304 references/spacing-iconography.md:304-308 references/spacing-iconography.md:308-311 references/spacing-iconography.md:311-313 SKILL.md:27-39 SKILL.md:39-52 SKILL.md:52-65 SKILL.md:65-71 SKILL.md:71-96 SKILL.md:96-100 SKILL.md:100-133 SKILL.md:133-147 SKILL.md:147-159 SKILL.md:159-163 SKILL.md:163-171 SKILL.md:171-186 SKILL.md:186-202 SKILL.md:202-206 SKILL.md:206-225 SKILL.md:225-231 SKILL.md:231-237 SKILL.md:237-241 SKILL.md:241-254 SKILL.md:254-260 SKILL.md:260-268 SKILL.md:268-272 SKILL.md:272-295 SKILL.md:295-299
🌐 ネットワークアクセス (5)
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/wshobson-visual-design-foundations?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/wshobson-visual-design-foundations?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-visual-design-foundations/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/wshobson-visual-design-foundations.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). visual-design-foundations security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4BibTeX形式の引用
@techreport{wshobson-wshobson-visual-design-foundations-2026,
author = {wshobson},
title = {visual-design-foundations security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/wshobson-visual-design-foundations/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: "visual-design-foundations security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4"
identifiers:
- type: other
value: "skillstore:wshobson-visual-design-foundations:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 高 45
アーキテクチャ
85
保守性
87
コンテンツ
70
コミュニティ
83
仕様準拠
作成できるもの
新しいデザイントークンセットを作成
新しいインターフェースを構築する前に、実用的なタイポグラフィ、スペーシング、カラー、アイコンのトークンを定義します。
インターフェースの一貫性を改善
既存画面のビジュアル階層、余白のばらつき、色の誤用、アイコン処理の不一致を監査します。
軽量なスタイルガイドを文書化
デザイン上の選択を、開発者がコンポーネント全体に適用できる明確な利用ルールに変換します。
これらのプロンプトを試す
ビジュアルの基本をレビュー
このインターフェースについて、タイポグラフィ、カラーコントラスト、スペーシング、アイコンの一貫性をレビューしてください。シンプルなデザイントークンの提案とともに、優先度の高い修正を示してください。
スタータートークンを定義
SaaS ダッシュボード向けのスターター用ビジュアルデザインシステムを作成してください。タイポグラフィスケール、カラートークン、スペーシングスケール、アイコンサイズ、利用ルールを含めてください。
トークンを Tailwind に適用
これらのブランドカラーと文字設定を Tailwind 対応のデザイントークンに変換してください。アクセシビリティ上の注意点とダークモードの考慮事項も含めてください。
デザインシステムを監査
このコンポーネントライブラリについて、ビジュアルシステムの不足点を監査してください。トークンのずれ、階層の問題、コントラストのリスク、アイコンの不一致、移行手順を特定してください。
ベストプラクティス
- コンポーネント固有の例外を追加する前に、セマンティックトークンから始めます。
- 実際のコンテンツを使って、コントラスト、タッチターゲット、状態色を早い段階で確認します。
- タイポグラフィ、スペーシング、色、アイコンの利用ルールを、トークン値とあわせて文書化します。
回避
- 既存のスペーシングや文字トークンが合う場面で、任意の一回限りの値を使うこと。
- テーマ間で目的が変わる可能性があるのに、見た目に基づいてトークンに名前を付けること。
- 明確な階層上の必要性がないまま、多数のフォントファミリー、ウェイト、アイコンスタイルを追加すること。
よくある質問
このスキルは何の作成に役立ちますか？
タイポグラフィ、カラー、スペーシング、アイコノグラフィ、デザイントークンのためのビジュアルデザイン基盤を作成するのに役立ちます。
アクセシビリティにも役立ちますか？
はい。コントラスト、読みやすい文字、タッチターゲット、ビジュアル階層に関するガイダンスが含まれています。
Tailwind CSS と一緒に使えますか？
はい。このスキルには Tailwind 向けのトークン例が含まれており、Tailwind プロジェクトに合わせてガイダンスを調整できます。
これはデザイナー専用ですか？
いいえ。デザイナー、フロントエンドエンジニア、デザインシステムチームが、ビジュアル上の判断をそろえるために利用できます。
最終的なブランドカラーを選んでくれますか？
アクセシブルな構造やパレットを提案できますが、最終的なブランド上の判断にはプロジェクトの文脈が必要です。
既存のインターフェースを監査できますか？
はい。スクリーンショット、コンポーネント、またはトークンファイルを提供し、ビジュアルの一貫性レビューを依頼してください。
開発者情報
作成者
wshobsonライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
リポジトリ
https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/visual-design-foundations/参照
64ca8af0f54a325752f08bd54e52151061ea659a
メンテナンスの新しさ
2026/7/24
利用状況
17 ダウンロード · 173 閲覧
ファイル構成
wshobson のその他のスキル
すべて表示📦
context-driven-development
81コンテキスト駆動開発を管理する
AI支援プロジェクトでは、プロダクト目標、スタック選定、ワークフロールールが散在すると一貫性が失われます。このスキルは、Conductor のコンテキスト成果物を通じて Claude、Codex、Claude Code を導きます。
コーディング＆開発 表示
📦
startup-financial-modeling
80スタートアップ向け財務モデルを構築する
スタートアップチームは、採用、資金調達、資金使途を計画する前に、明確な予測を必要とします。このスキルは、収益、コスト、ランウェイ、シナリオを実務的な財務計画アウトプットとして整理します。
データ＆アナリティクス 表示
📦
kpi-dashboard-design
79意思決定を促進するKPIダッシュボードを設計する
チームは多くの数値を表示するだけで、行動につながらないダッシュボードを作りがちです。このスキルは、Claude、Codex、Claude Codeが意味のあるKPIを選定し、ビューを構成し、指標を明確に提示するのに役立ちます。
デザイン＆クリエイティブ 表示
📦
postmortem-writing
79非難しないインシデント事後分析を書く
インシデントレビューは、一貫性がなくなったり、非難に焦点が当たったり、実行に移しにくくなったりしがちです。このスキルは、Claude、Codex、Claude Code が、明確なタイムライン、根本原因、担当者を含む構造化された事後分析を作成するのに役立ちます。
ライティング＆コンテンツ 表示
📦
data-storytelling
79明確なデータストーリーを構築
生の指標だけでは、ステークホルダーを説得したり意思決定を支援したりするには不十分なことがよくあります。このスキルは、Claude、Codex、Claude Code が分析を明確なナラティブ、ビジュアル、推奨事項へと整理するのを支援します。
データ＆アナリティクス 表示
関連スキル
すべて表示📦
design-lint
80Check 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-styling
83Build 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.
デザイン＆クリエイティブ 表示
📦
web-accessibility
82WCAG準拠のためのWebアクセシビリティ監査
作成者 89jobrien
アクセシビリティ上のギャップは、ユーザーの利用を妨げ、コンプライアンスリスクを生む可能性があります。このスキルは、WCAG監査、スクリーンリーダーチェック、キーボードテスト、改善計画を支援します。
デザイン＆クリエイティブ 表示
📦
design-system
82Build 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
80リサーチ主導のデザインガイダンスでUXを改善
作成者 shubhamsaboo
チームは思い込みに基づいてフローを設計し、アクセシビリティの問題を見落としがちです。このスキルは、UXのベストプラクティスを用いて、リサーチ、構造化、インタラクションデザイン、レビューを支援します。
デザイン＆クリエイティブ 表示
📦
brand-guidelines
79Anthropicブランドスタイルを適用
作成者 ZhanlinCui
チームでは、ドキュメントやプレゼンテーション全体で一貫したAnthropic風のビジュアルが必要になることがよくあります。このスキルは、洗練されたブランド付き成果物を作成するための実用的な色、タイポグラフィ、アクセントのガイダンスを提供します。
デザイン＆クリエイティブ 表示