frontend-css
Tailwind CSS の一貫性を向上
フロントエンドチームには、場当たり的な上書きなしで一貫した CSS が必要です。このスキルは、Claude、Codex、Claude Code が Tailwind ユーティリティとデザイントークンを優先するよう導きます。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "frontend-css" from https://skillstore.io/skills/devanb-frontend-css.md and its manifest at https://skillstore.io/api/skills/devanb-frontend-css/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「frontend-css」を使用しています。 Tailwind の一貫性について React ボタンをレビューしてください。
期待される結果:
レビューでは、重複した余白の選択を指摘し、トークンベースの色を推奨し、小さなカスタムクラスが正当化される場合を説明します。
「frontend-css」を使用しています。 Tailwind テーマ拡張を評価してください。
期待される結果:
回答では、新しい値がデザインシステムのパターンに合っているかを確認し、より明確なトークン名を提案します。
「frontend-css」を使用しています。 リリース前に CSS 更新を監査してください。
期待される結果:
監査では、レスポンシブ対応の不足、不要な上書き、未使用または重複したスタイルによるバンドルサイズの懸念を強調します。
セキュリティ監査
安全The inline `@theme` reference is a false positive because it is markdown documentation, not shell execution. The parent-directory link is confirmed because it directs the agent outside the skill package boundary. No prompt injection or data-exfiltration intent was found in SKILL.md.
機能レビュー項目 (1)
これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。
リスク要因
⚙️ 外部コマンド (1)
📁 ファイルシステムへのアクセス (1)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/devanb-frontend-css/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/devanb-frontend-css?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/devanb-frontend-css?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/devanb-frontend-css/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/devanb-frontend-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形式の引用
DevanB. (2026). frontend-css security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/devanb-frontend-css/audits/10BibTeX形式の引用
@techreport{devanb-devanb-frontend-css-2026,
author = {DevanB},
title = {frontend-css security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/devanb-frontend-css/audits/10},
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: "frontend-css security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
- name: "DevanB"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/devanb-frontend-css/audits/10"
identifiers:
- type: other
value: "skillstore:devanb-frontend-css:audit:10"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 2 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
コンポーネントスタイリングを標準化
React コンポーネントを編集する際に、Tailwind ユーティリティクラスを一貫して適用します。
デザインシステムトークンを保護
色、余白、タイポグラフィを既存のデザインシステムに合わせて維持します。
CSS 変更をレビュー
新しいスタイリング作業について、不要なカスタム CSS や本番環境の CSS に関する懸念を確認します。
これらのプロンプトを試す
frontend-css スキルを使って、このコンポーネントのスタイリングを Tailwind の一貫性、トークン使用、不要なカスタム CSS の観点でレビューしてください。
frontend-css スキルを使って、現在の視覚的な挙動を維持しながら、回避可能なカスタム CSS を Tailwind ユーティリティに置き換えてください。
frontend-css スキルを使って、これらのテーマ拡張がデザインシステムに属するべきか、またどのように命名すべきかを評価してください。
frontend-css スキルを使って、このスタイリング方針をユーティリティファーストの一貫性、レスポンシブパターン、バンドルサイズ、長期的な保守性の観点で監査してください。
ベストプラクティス
- CSS を追加する前に、デザイントークンと既存の Tailwind ユーティリティを優先します。
- カスタム CSS は小さく保ち、明確に命名し、再利用可能なパターンに結び付けます。
- レスポンシブな挙動には Tailwind ブレークポイントを一貫して使用します。
回避
- ユーティリティで既に対応できるスタイルに対して、一回限りの CSS を追加すること。
- 文書化された理由なしに、フレームワークのスタイルをグローバルに上書きすること。
- デザインシステム外の新しい色、余白、タイポグラフィを導入すること。