frontend-css
一貫性のあるフロントエンドCSSを構築する
フロントエンドのスタイリングは、ファイル、コンポーネント、フレームワーク間で一貫性が失われがちです。このスキルは、Claude、Codex、Claude Code が一貫した CSS 手法とデザイントークンに従えるように導きます。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "frontend-css" from https://skillstore.io/skills/eis-its-frontend-css.md and its manifest at https://skillstore.io/api/skills/eis-its-frontend-css/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「frontend-css」を使用しています。 Tailwind を使う設定パネルをスタイリングする。
期待される結果:
レイアウト、余白、フォームコントロール、フォーカス状態、レスポンシブ動作に関するユーティリティ選択を含む、簡潔なスタイリング計画。
「frontend-css」を使用しています。 混在した CSS クラスを一貫した手法にリファクタリングする。
期待される結果:
セレクター、トークン利用、命名変更、見た目の維持に関する注記をグループ化した、構造化されたリファクタリング要約。
「frontend-css」を使用しています。 CSS Modules ファイルの保守性をレビューする。
期待される結果:
命名の問題、重複した値、トークンの不足、フレームワーク上書きのリスクを特定するレビュー。
セキュリティ監査
安全The static path traversal finding is confirmed because the skill directs the agent to read a parent-directory file outside the packaged skill. No prompt injection, credential access, network access, or command execution intent was found in SKILL.md.
機能レビュー項目 (1)
これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。
リスク要因
📁 ファイルシステムへのアクセス (1)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/eis-its-frontend-css/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/eis-its-frontend-css?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/eis-its-frontend-css?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/eis-its-frontend-css/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/eis-its-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形式の引用
EIS-ITS. (2026). frontend-css security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/eis-its-frontend-css/audits/10BibTeX形式の引用
@techreport{eis-its-eis-its-frontend-css-2026,
author = {EIS-ITS},
title = {frontend-css security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/eis-its-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: "EIS-ITS"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/eis-its-frontend-css/audits/10"
identifiers:
- type: other
value: "skillstore:eis-its-frontend-css:audit:10"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 2 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
コンポーネントスタイリングの標準化
React、Vue、または類似のコンポーネントファイル全体に、1つの CSS 方法論を適用します。
デザイントークンの定義
UI システム向けに、一貫した色、余白、タイポグラフィ、シャドウの判断基準を作成します。
CSS フレームワーク利用状況のレビュー
Tailwind、CSS Modules、または CSS-in-JS の変更について、一貫性と保守性を確認します。
これらのプロンプトを試す
frontend-css skill を使って、このコンポーネントをプロジェクトの CSS 手法でスタイリングしてください。余白、タイポグラフィ、色の一貫性を保ってください。
frontend-css skill を使って、これらのスタイルをローカルの方法論に沿うようにリファクタリングしてください。見た目の結果を維持し、主要な変更点を説明してください。
frontend-css skill を使って、このインターフェースの色、余白、タイポグラフィ、シャドウに関するデザイントークンを提案してください。
frontend-css skill を使って、このスタイリング層をフレームワークの競合、未使用スタイル、レスポンシブの問題、本番環境への適性の観点からレビューしてください。
ベストプラクティス
- 変更を依頼する前に、既存の CSS 方法論を提示してください。
- レビュー対象のスタイルとともに、関連するコンポーネントのマークアップを含めてください。
- レスポンシブ、アクセシブル、本番環境対応のスタイリングチェックを依頼してください。
回避
- 明確な境界なしに、BEM、utility-first、CSS Modules を混在させないでください。
- プロジェクトトークンが存在する場合は、色や余白をハードコードしないでください。
- UI のコンテキストや制約を示さずに、見た目の polish を依頼しないでください。