スキル tailwind-css

📦

tailwind-css

Name: tailwind-css
Author: Awais68

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

レスポンシブな Tailwind CSS インターフェイスを構築する

Tailwind プロジェクトは、コンポーネント間やブレークポイント間で一貫性を失いやすくなります。このスキルは、レスポンシブなユーティリティクラス、テーマ設定、ダークモード、アクセシビリティチェックをガイドします。

対応: Claude Codex Code(CC)

🥉 78 ブロンズ

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

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

エージェントリクエスト

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

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

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

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

Markdown詳細 GET /skills/awais68-tailwind-css.md 署名済み manifest GET /api/skills/awais68-tailwind-css/manifest 署名済み lockfile GET /api/skills/awais68-tailwind-css/lockfile

テストする

「tailwind-css」を使用しています。この KPI カードをレスポンシブかつダークモード対応にしてください。

期待される結果:

カードはモバイルでは全幅を使用し、タブレットサイズではより大きなパディングを追加し、ライトモードとダークモードで対応するサーフェスカラーを使うべきです。

「tailwind-css」を使用しています。アクセシビリティの観点から Tailwind フォームクラスをレビューしてください。

期待される結果:

レビューでは、不足しているフォーカススタイル、44 ピクセル未満のタッチターゲット、コントラスト検証が必要な色の組み合わせを指摘します。

「tailwind-css」を使用しています。プロダクトダッシュボード向けの Tailwind テーマを計画してください。

期待される結果:

結果として、セマンティックカラーグループ、余白ルール、フォント選択、ダークモード戦略、再利用可能なバリアント向けガイダンスを定義します。

セキュリティ監査

安全

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

All 55 static findings are false positives. The flagged backticks are Markdown fences or inline Tailwind examples, the URLs are reference links, and the system reconnaissance matches are responsive layout text. No evidence found of command execution, data exfiltration, prompt injection, or malicious intent.

スキャンされたファイル

408

解析済み行数

レビュー項目

誤検知を無視

リスク要因

⚙️ 外部コマンド (45)

🌐 ネットワークアクセス (3)

SKILL.md:404 SKILL.md:405 SKILL.md:406

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

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

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

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

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

レポートリンクをコピー

https://skillstore.io/skills/awais68-tailwind-css/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/awais68-tailwind-css/security.svg)](https://skillstore.io/skills/awais68-tailwind-css?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/awais68-tailwind-css?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/awais68-tailwind-css/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/awais68-tailwind-css.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形式の引用

Awais68. (2026). tailwind-css security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/awais68-tailwind-css/audits/8

BibTeX形式の引用

@techreport{awais68-awais68-tailwind-css-2026,
  author = {Awais68},
  title = {tailwind-css security audit report (audit version 8)},
  institution = {Skillstore},
  year = {2026},
  number = {8},
  url = {https://skillstore.io/skills/awais68-tailwind-css/audits/8},
  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-css security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
  - name: "Awais68"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/awais68-tailwind-css/audits/8"
identifiers:
  - type: other
    value: "skillstore:awais68-tailwind-css:audit:8"
    description: "Skillstore immutable audit report identifier"

Skillstore スコア

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

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

レスポンシブなコンポーネントをスタイリングする

基本的な React コンポーネントを、明確なブレークポイントと状態スタイルを備えたモバイルファーストの Tailwind コンポーネントに変換します。

デザインテーマを拡張する

デフォルトテーマを置き換えずに、色、余白、フォント、ダークモード向けの Tailwind テーマトークンを計画します。

インターフェイス品質をレビューする

Tailwind クラスのアクセシビリティ、フォーカス状態、タッチターゲット、ダークモード、本番対応状況をチェックします。

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

シンプルなコンポーネントをスタイリングする

このコンポーネントを Tailwind CSS でスタイリングしてください。モバイル向けスタイルから始め、明確な余白を追加し、フォーカス状態とホバー状態を含めてください。

レイアウトをレスポンシブにする

このレイアウトをモバイルファーストの Tailwind レイアウトに変換してください。デザイン上必要な箇所にのみ、sm、md、lg、xl のブレークポイントを使用してください。

テーマとバリアントを作成する

このインターフェイス向けの Tailwind テーマ拡張を設計してください。セマンティックカラー、ダークモードの動作、余白の選択、再利用可能なコンポーネントバリアントを含めてください。

ダッシュボードインターフェイスを監査する

この Tailwind ダッシュボードについて、レスポンシブ動作、アクセシビリティ、ダークモード、クラスの一貫性、本番環境でのパフォーマンスリスクをレビューしてください。

ベストプラクティス

プレフィックスなしのモバイル向けユーティリティから始め、その後でより大きなブレークポイントのバリアントを追加します。
セマンティックなテーマ名を使用し、デフォルトの Tailwind テーマを拡張します。
ライトモードとダークモードで、フォーカス状態、タッチターゲット、コントラストを確認します。

回避

デスクトップファーストでスタイリングし、上書きでモバイル対応を後付けする。
シンプルなユーティリティクラスを大きなカスタム CSS ブロックに置き換える。
コントラストを確認せずにダークモードの色を追加する。

よくある質問

このスキルはいつ使うべきですか？

プロジェクトが Tailwind CSS をコンポーネントスタイリング、レスポンシブレイアウト、テーマ、またはダークモードに使用している場合に使用します。

このスキルはプレーンな CSS に適用できますか？

いいえ。これは Tailwind CSS とユーティリティファーストのクラスワークフロー向けに書かれています。

レスポンシブデザインに役立ちますか？

はい。一般的なインターフェイスレイアウトに対するモバイルファーストのスタイリングとブレークポイント選択を重視しています。

アクセシビリティのガイダンスは含まれていますか？

はい。コントラスト、フォーカス状態、タッチターゲットサイズ、スキップリンク、ARIA ラベルを扱います。

Tailwind 設定を更新できますか？

色、余白、フォント、ダークモード設定に関するテーマ拡張の選択をガイドできます。

外部ツールを実行しますか？

根拠は見つかりませんでした。レビュー対象のファイルにはガイダンスと例が含まれており、実行可能なコマンドは含まれていません。

開発者情報

作成者

Awais68

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

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

リポジトリ

https://github.com/Awais68/hackathon-2-phase-ii-full-stack-web-app/tree/main/.claude/skills/tailwind-css

参照

c4231f0153ccd2a2ed62274c5a372bf8f2386d3f

メンテナンスの新しさ

2026/7/18

利用状況

8 ダウンロード · 295 閲覧

ファイル構成

Vue Options API コンポーネントを改善する

作成者 vuejs-ai

Vue Options API プロジェクトでは、型安全性や正しい this バインディングが失われることがあります。このスキルは、より安全な Vue コンポーネントのための実践的なパターンを提供します。

コーディング＆開発表示

tailwind-css

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

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

テストする

セキュリティ監査

リスク要因

レポートリンクをコピー

Markdownバッジ

HTMLバッジ

埋め込みカード

APA形式の引用

BibTeX形式の引用

CITATION.cff

Skillstore スコア

作成できるもの

レスポンシブなコンポーネントをスタイリングする

デザインテーマを拡張する

インターフェイス品質をレビューする

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

ベストプラクティス

回避

よくある質問

開発者情報

Awais68 のその他のスキル

react-component

api-client

auth-integration

sqlmodel-crud

data-validation

fastapi-app

関連スキル

styling-with-shadcn

swiftui-expert-skill

vercel-react-view-transitions

react-email

vue-best-practices

vue-options-api-best-practices