技能 css-development-create-component
📦

css-development-create-component

安全

ベストプラクティスに従ったCSSコンポーネントの作成

一貫性があり保守可能なCSSコンポーネントを構築するには、確立されたパターンと規約に従う必要があります。このスキルは、セマンティックな命名、Tailwindの組み合わせ、ダークモード対応、包括的なテストカバレッジを備えたコンポーネントの作成をガイドします。

支持: Claude Codex Code(CC)
📊 70 充足
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“css-development-create-component”。 Create a primary button component

预期结果:

I'm using the css-development:create-component skill to guide creating this new CSS component.

Creating CSS Component:
- Survey existing components (read components.css)
- Check if composition solves it
- Identify component type
- Choose semantic name
- Write component class
- Create markup integration
- Write static CSS test
- Write component rendering test
- Document component

Step 1: Reading components.css to understand existing patterns...

正在使用“css-development-create-component”。 Add a danger variant to the existing button

预期结果:

I've surveyed the existing components and found .button-primary and .button-secondary classes using @apply directives with dark mode variants.

Following the established pattern, I'll create .button-danger with:
- Red color scheme (bg-red-500, hover:bg-red-700)
- Dark mode variants (dark:bg-red-600, dark:hover:bg-red-800)
- Same spacing and transitions as other button variants

Adding to components.css now...

正在使用“css-development-create-component”。 Should I create a new class for a blue card?

预期结果:

Let me check if composition can solve this need.

After reviewing components.css, I see a base .card class exists. For a blue variant, you have two options:

1. Composition (recommended): Use .card with bg-blue-100 dark:bg-blue-900 utility classes
2. New class: Create .card-blue if this combination appears frequently

Given YAGNI principle, I recommend using composition unless this blue card appears in 5+ locations. Would you like to proceed with composition or create a new class?

安全审计

安全
v4 • 1/21/2026

This skill is a pure CSS development guide with no executable code or security risks. All 95 static findings are false positives from pattern matching on documentation content. The skill contains only markdown documentation with code examples showing CSS component creation workflows. No network access, no shell execution, no file operations exist in actual skill code.

2
已扫描文件
1,386
分析行数
0
发现项
4
审计总数
未发现安全问题
审计者: claude 查看审计历史 →

质量评分

38
架构
100
可维护性
87
内容
24
社区
100
安全
91
规范符合性

你能构建什么

再利用可能なボタンコンポーネントの作成

一貫したUIパターンのために、適切なホバー状態、フォーカスリング、ダークモード対応を含む複数のバリアント(primary、secondary、danger)を持つボタンコンポーネントを構築します。

適切な構造を持つカードコンポーネントの設計

アトミックデザイン原則に従い、セマンティックなサブ要素、適切なスペーシング、シャドウ、レスポンシブバリアントを備えたカードコンポーネントを作成します。

一貫性のあるデザインシステムの拡張

確立されたパターン、命名規約、テストカバレッジとの一貫性を保ちながら、既存のデザインシステムに新しいコンポーネントバリアントを追加します。

试试这些提示

基本的なコンポーネントの作成 
Create a new CSS component for a {component_name}. Use semantic naming, Tailwind @apply composition, and include dark mode support.
複数のバリアントを持つコンポーネントの作成 
Create a {component_name} component with {number} variants: {variant_list}. Each variant needs hover states, focus states, and dark mode variants. Include static CSS tests.
既存のコードベースパターンに従う 
Read the existing components.css file to understand current patterns. Then create a {component_name} that follows the same composition approach, naming conventions, and test structure.
完全なコンポーネント開発ワークフロー 
Create a complete {component_type} component following the full workflow: survey existing components, check composition options, identify atomic level, choose semantic name, write component class with dark variants, create markup examples, write static CSS test, write rendering test, and document usage.

最佳实践

  • セマンティックな命名規約に従う:btn-blueのような省略形やユーティリティ名ではなく、button-primaryのような目的ベースの説明的な名前を使用する
  • 適切なCSS詳細度のために、dark:プレフィックスを使用して色と背景に常にダークモードバリアントを含め、ライトバリアントの後に配置する
  • 静的CSSテスト(components.cssにクラスが存在することを検証)とコンポーネントレンダリングテスト(フレームワークコンポーネントでclassNameが正しく適用されることを検証)の両方を記述する

避免

  • 既存のユーティリティを組み合わせることで機能する場合は新しいクラスを作成しない;YAGNI原則に従い、重複が問題になった場合にのみ抽象化を作成する
  • component、item、btn、card-smのような汎用的、省略形、またはユーティリティスタイルのクラス名を使用しない;代わりにセマンティックな目的ベースの名前を使用する
  • 生のCSSプロパティとTailwindの@applyディレクティブを混在させない;プロジェクトごとに1つのアプローチを選択し、コードベース全体で一貫性を保つ

常见问题

CSSクラスにはどのような命名規約を使用すべきですか?
ベースとバリアント、またはコンポーネントとサブ要素のパターンに従ったセマンティックで目的ベースの名前を使用します。例としてbutton-primary、card-title、form-fieldなどがあります。btn-blueのようなユーティリティ名やbtnのような省略形は避けてください。
コンポーネントでダークモードを適切に処理するにはどうすればよいですか?
すべての色と背景プロパティにdark:バリアントを含めます。@applyディレクティブ内でライトバリアントの後にダークバリアントを配置します。例:@apply bg-indigo-500 hover:bg-indigo-700 dark:bg-indigo-600 dark:hover:bg-indigo-800。これにより適切な重ね合わせと予測可能な動作が保証されます。
新しいCSSクラスを作成すべきか、既存のものを組み合わせるべきですか?
まず既存のクラスを組み合わせて構成を試してください。構成が過度なマークアップの重複を生み出す場合、または組み合わせが多くの場所に出現する場合にのみ新しいクラスを作成します。YAGNI原則に従ってください:実際に必要になるまで必要ありません。
CSSコンポーネントにはどのようなテストを書くべきですか?
2種類のテストを記述します。静的CSSテストはcomponents.cssにクラスが存在しダークモードバリアントが含まれていることを検証します。コンポーネントレンダリングテストはフレームワークコンポーネントでclassNameが正しく適用され、カスタムクラスが競合なく追加できることを検証します。
コンポーネントのアトミックデザインレベルをどのように決定すればよいですか?
アトムはbutton、input、badgeのような基本的な構成要素です。モレキュールはcard、form-field、alertのように複数のアトムを組み合わせたものです。オーガニズムはpage-layout、navigation、session-cardのような複雑な組み合わせです。コンポーネントの複雑さと依存関係に合ったレベルを選択してください。
新しいコンポーネントをプロジェクトに統合するにはどうすればよいですか?
Editツールを使用してstyles/components.cssにコンポーネントクラスを追加します。React、Vue、またはバニラHTMLでの使用を示すマークアップ例を作成します。クラスが存在することを検証する静的CSSテストを追加します。classNameの適用を検証するコンポーネントレンダリングテストを追加します。コンポーネントAPIと使用パターンをドキュメント化します。

开发者详情

许可证

MIT

仓库

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

引用

main

文件结构

📄 SKILL.md