スキル css-development-create-component

📦

css-development-create-component

Name: css-development-create-component
Author: 2389-research

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド📁 ファイルシステムへのアクセス

テスト済みCSSコンポーネントを作成

チームは、一貫した命名、ダークモード、テストがないままCSSコンポーネントを追加しがちです。このスキルは、再利用、Tailwindの構成、ドキュメント化、検証をガイドします。

対応: Claude Codex Code(CC)

🥉 79 ブロンズ

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

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

エージェントリクエスト

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

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

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

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

Markdown詳細 GET /skills/2389-research-css-development-create-component.md 署名済み manifest GET /api/skills/2389-research-css-development-create-component/manifest 署名済み lockfile GET /api/skills/2389-research-css-development-create-component/lockfile

テストする

「css-development-create-component」を使用しています。プライマリボタンコンポーネントスタイルを作成してください。

期待される結果:

アシスタントは既存のコンポーネントを調査し、セマンティックなクラス名を選び、Tailwindで構成したスタイルを追加し、使用方法を文書化し、対象を絞ったテストを追加します。

「css-development-create-component」を使用しています。余白と影を改善したカードスタイルを追加してください。

期待される結果:

アシスタントは既存のカードクラスを確認し、可能な場合は組み合わせを推奨し、再利用だけでは不十分な場合にのみ新しいクラスを追加します。

「css-development-create-component」を使用しています。 activeとinactive状態用のステータスバッジを作成してください。

期待される結果:

アシスタントはバッジをアトムとして分類し、意味のあるバリアントを追加し、ダークモード用の色を含め、クラスの適用を検証します。

セキュリティ監査

安全

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

I found no executable code, prompt injection, network behavior, or data exfiltration intent in SKILL.md. The static findings are Markdown inline code, fenced examples, local test snippets, or ordinary CSS workflow text.

スキャンされたファイル

362

解析済み行数

レビュー項目

誤検知を無視

リスク要因

⚙️ 外部コマンド (48)

📁 ファイルシステムへのアクセス (2)

SKILL.md:230 SKILL.md:234

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

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

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

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

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

レポートリンクをコピー

https://skillstore.io/skills/2389-research-css-development-create-component/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/2389-research-css-development-create-component/security.svg)](https://skillstore.io/skills/2389-research-css-development-create-component?utm_source=security_passport_badge)

HTMLバッジ

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

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/2389-research-css-development-create-component.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形式の引用

2389-research. (2026). css-development-create-component security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/2389-research-css-development-create-component/audits/7

BibTeX形式の引用

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

Skillstore スコア

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

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

再利用可能なボタンを追加

Tailwindユーティリティ、ダークモードバリアント、ドキュメント、重点的なテストを備えたセマンティックなボタンクラスを作成します。

カードスタイルを標準化

既存のカードパターンを確認し、組み合わせだけでは不十分な場合にのみ一貫したクラスを追加します。

UIテストカバレッジを改善

静的CSSチェックとレンダリングテストを追加し、新しいコンポーネントクラスがテスト結果で確認できるようにします。

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

基本コンポーネントを作成

再利用可能なプライマリボタンスタイルを作成してください。まず既存のCSSを確認し、セマンティックな命名を使い、ダークモードを含め、テストを追加してください。

作成前に再利用

ダッシュボード指標用の強調表示されたカードが必要です。新しいCSSを追加する前に、まず既存のクラスを組み合わせられるか判断してください。

フレームワーク統合を追加

フォームフィールドスタイルを作成し、プロジェクトのコンポーネントフレームワークでの使用方法を示してください。CSSとレンダリングテストを含めてください。

デザインシステムを拡張

success、warning、errorバリアントを持つ小さなアラートコンポーネントファミリーを設計してください。既存の命名、ダークモード、テストパターンに従ってください。

ベストプラクティス

命名や新しいクラスの追加を行う前に、まず既存のコンポーネントCSSを読みます。
既存のクラスとユーティリティでデザインを表現できる場合は、組み合わせを優先します。
新しいコンポーネントクラスごとに、ダークモード対応、使用方法コメント、テストを追加します。

回避

Tailwindユーティリティと重複するユーティリティ風のクラス名を作成しないでください。
単純なクラスの組み合わせのほうが明確な場合は、新しいクラスを追加しないでください。
再利用可能なコンポーネントスタイルについて、テストやドキュメントを省略しないでください。

よくある質問

このスキルは何の作成を支援しますか？

セマンティックな名前、Tailwindの構成、ダークモード対応、ドキュメント、テストを備えた再利用可能なCSSコンポーネントクラスの作成を支援します。

常に新しいCSSを追加しますか？

いいえ。まず、既存のクラスを組み合わせてデザイン目標を満たせるかを確認します。

どのCSSアプローチを優先しますか？

Tailwindユーティリティから@applyで構成されたセマンティックなコンポーネントクラスを優先します。

ダークモードのガイダンスは含まれますか？

はい。色や背景が導入される場合は、必ずダークモードバリアントを求めます。

どのようなテストを推奨しますか？

クラスの適用を検証する静的CSSチェックとコンポーネントレンダリングテストを推奨します。

Reactやその他のフレームワークをサポートできますか？

はい。プロジェクトでReact、Vue、または別のコンポーネントフレームワークを使用している場合は、フレームワークでの使用例を求めます。

開発者情報

作成者

2389-research

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

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

リポジトリ

https://github.com/2389-research/claude-plugins/tree/main/css-development/skills/create-component

参照

c1fdca50ff516318f65fed0d7f9e82797c5171dc

メンテナンスの新しさ

2026/7/18

利用状況

18 ダウンロード · 150 閲覧

ファイル構成

pytest TDDでPythonテストを構築

作成者 89jobrien

Pythonチームは、TDDの規律を失わずに、一貫したテスト、カバレッジ、レポートを必要とすることがよくあります。このスキルは、Claude、Codex、Claude Code向けに、pytestに焦点を当てたワークフロー、例、レポート作成ガイダンスを提供します。

コーディング＆開発表示

css-development-create-component

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

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

テストする

セキュリティ監査

リスク要因

レポートリンクをコピー

Markdownバッジ

HTMLバッジ

埋め込みカード

APA形式の引用

BibTeX形式の引用

CITATION.cff

Skillstore スコア

作成できるもの

再利用可能なボタンを追加

カードスタイルを標準化

UIテストカバレッジを改善

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

ベストプラクティス

回避

よくある質問

開発者情報

2389-research のその他のスキル

landing-page-design

fresh-eyes-review

css-development

using-xtool

css-development-refactor

css-development-validate

関連スキル

testing

testing-patterns

systematic-debugging

golang-testing

waterfall-development

tdd-pytest