📦
prompt-engineering-patterns
86本番環境向けLLMプロンプトを最適化
LLMプロンプトは、指示、例、評価基準が不明確なために失敗することがよくあります。このスキルは、Claude、Codex、Claude Code、および同様のツールでプロンプトを改善するためのテンプレートとワークフローを提供します。
生産性 表示
スキル tailwind-design-system
📦
tailwind-design-system
コンテンツリビジョン r1 安全 ⚙️ 外部コマンド🌐 ネットワークアクセス
Tailwind デザインシステムを構築
チームには、プロダクトや画面サイズをまたいで柔軟性を保ちながら一貫した UI パターンが必要です。このスキルは、スケーラブルなデザインシステムのための Tailwind CSS のトークン、コンポーネント、バリアント、ダークモード、アクセシビリティのパターンを提供します。
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "tailwind-design-system" from https://skillstore.io/skills/wshobson-tailwind-design-system.md and its manifest at https://skillstore.io/api/skills/wshobson-tailwind-design-system/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「tailwind-design-system」を使用しています。 Create a button system for a SaaS dashboard.
期待される結果:
- primary、secondary、outline、ghost、destructive ボタン向けのバリアントマップ。
- default、small、large、icon-only ボタン向けのサイズスケール。
- フォーカスリング、無効状態、セマンティックなボタン使用に関するアクセシビリティガイダンス。
「tailwind-design-system」を使用しています。 Add dark mode to an existing Tailwind app.
期待される結果:
- ライトテーマとダークテーマ向けの CSS 変数トークン構造。
- システム設定とユーザー選択を解決するための provider パターン。
- コントラスト、コンポーネント状態、永続化されたテーマ挙動に関するテストメモ。
「tailwind-design-system」を使用しています。 Make product grids responsive and consistent.
期待される結果:
- レスポンシブブレークポイントを備えた再利用可能な Grid および Container パターン。
- デザインシステムと整合する gap と max-width のオプション。
- プロダクトカード、ダッシュボード、コンテンツレイアウト向けの使用ガイダンス。
セキュリティ監査
安全v7 • 2026/7/8 バージョン別レポートを開く
All static findings are false positives caused by Markdown fences, JSX template literals, Tailwind class examples, and passive documentation links. No prompt injection, data exfiltration intent, or executable command behavior was found in SKILL.md.
1
スキャンされたファイル
667
解析済み行数
0
レビュー項目
0
誤検知を無視
リスク要因
⚙️ 外部コマンド (25)
SKILL.md:23-30 SKILL.md:30-34 SKILL.md:34-36 SKILL.md:36-40 SKILL.md:40-87 SKILL.md:87-89 SKILL.md:89-131 SKILL.md:131-137 SKILL.md:137-196 SKILL.md:196-200 SKILL.md:200-285 SKILL.md:285-289 SKILL.md:289-311 SKILL.md:311-316 SKILL.md:316-382 SKILL.md:382-386 SKILL.md:386-460 SKILL.md:460-464 SKILL.md:464-526 SKILL.md:526-530 SKILL.md:530-622 SKILL.md:622-626 SKILL.md:626-643 SKILL.md:643-650 SKILL.md:650
🌐 ネットワークアクセス (4)
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/wshobson-tailwind-design-system/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/wshobson-tailwind-design-system?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/wshobson-tailwind-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-tailwind-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/wshobson-tailwind-design-system.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). tailwind-design-system security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-tailwind-design-system/audits/7BibTeX形式の引用
@techreport{wshobson-wshobson-tailwind-design-system-2026,
author = {wshobson},
title = {tailwind-design-system security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/wshobson-tailwind-design-system/audits/7},
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: "tailwind-design-system security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-tailwind-design-system/audits/7"
identifiers:
- type: other
value: "skillstore:wshobson-tailwind-design-system:audit:7"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 2 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
Skillstore スコアが最高
Skillstore スコア
このスコアの理由 証拠の信頼度: 高 55
アーキテクチャ
85
保守性
87
コンテンツ
71
コミュニティ
78
仕様準拠
作成できるもの
コンポーネントライブラリを作成する
型付きバリアント、一貫したスペーシング、予測可能な状態を備えた再利用可能な Tailwind コンポーネントを構築します。
プロダクト UI を標準化する
コードベース全体で、場当たり的なクラスをセマンティックトークンと共有レイアウトパターンに置き換えます。
テーマサポートを追加する
CSS 変数と Tailwind クラスを使用して、ライトモード、ダークモード、システムテーマの挙動を実装します。
これらのプロンプトを試す
トークンシステムを開始する
Create a Tailwind design token plan for my app. Include semantic colors, spacing guidance, radius values, and dark mode variables.
コアコンポーネントを構築する
Design Button, Card, Input, and Label components using Tailwind CSS and CVA. Include variants, sizes, focus states, and accessibility notes.
既存 UI をリファクタリングする
Review these Tailwind components and propose a design system refactor. Prioritize semantic tokens, shared variants, and reduced class duplication.
高度なテーマ設定を計画する
Create a scalable Tailwind theming architecture for light, dark, and brand themes. Include token hierarchy, component contracts, and migration steps.
ベストプラクティス
- テーマを保守しやすくするために、コンポーネント固有のトークンより先にセマンティックトークンを使用します。
- コンポーネントの状態が一貫するように、バリアントを一箇所で定義します。
- ライトモード、ダークモード、キーボードナビゲーション、レスポンシブレイアウトでコンポーネントをテストします。
回避
- すべてのコンポーネントにブランドカラーを直接ハードコードしないでください。
- 共有トークンが存在すべき場合に、任意の Tailwind 値に依存しないでください。
- 視認可能なフォーカス状態とアクセシブルなフォームフィードバックなしでコンポーネントを出荷しないでください。
よくある質問
このスキルは Tailwind CSS をインストールしてくれますか？
いいえ。デザインシステムのガイダンスと例を提供します。プロジェクトの依存関係は別途インストールして設定する必要があります。
Claude、Codex、Claude Code で使用できますか？
はい。このスキルは、Claude、Codex、Claude Code のワークフローで適用できるガイダンスとして書かれています。
React プロジェクト専用ですか？
ほとんどの例は React を使用していますが、トークンと Tailwind アーキテクチャは他のフロントエンドフレームワークにも役立ちます。
ダークモードに対応していますか？
はい。CSS 変数トークン、クラスベースのダークモード、ThemeProvider の例を含みます。
アクセシビリティガイダンスは含まれていますか？
はい。フォーカスリング、ARIA 属性、フォームエラー、無効状態、キーボードに配慮したコンポーネントパターンを扱います。
完全なデザインシステム監査の代わりになりますか？
いいえ。実装の構造化には役立ちますが、チームには引き続きデザインレビュー、コントラストチェック、プロダクト固有の検証が必要です。
開発者情報
作成者
wshobsonライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
64ca8af0f54a325752f08bd54e52151061ea659a
メンテナンスの新しさ
2026/7/21
利用状況
17 ダウンロード · 288 閲覧
ファイル構成
📄 SKILL.md
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 が分析を明確なナラティブ、ビジュアル、推奨事項へと整理するのを支援します。
データ＆アナリティクス 表示
関連スキル
すべて表示📦
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.
デザイン＆クリエイティブ 表示
📦
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.
デザイン＆クリエイティブ 表示
📦
core-components
79一貫したコアコンポーネントインターフェイスを構築する
作成者 sickn33
UI作業は、ハードコードされた余白、色、生のプラットフォームコンポーネントに偏りがちです。このスキルは、Claude、Codex、Claude Codeをコアコンポーネント、トークン、再利用可能なレイアウトへ導きます。
デザイン＆クリエイティブ 表示
📦
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のベストプラクティスを用いて、リサーチ、構造化、インタラクションデザイン、レビューを支援します。
デザイン＆クリエイティブ 表示