Навыки css-development:create-component
🎨

css-development:create-component

Безопасно

CSS-Komponenten mit semantischer Benennung erstellen

Das Erstellen konsistenter, wartbarer CSS-Komponenten ist ohne klare Muster eine Herausforderung. Diese Anleitung führt Sie durch den Aufbau wiederverwendbarer Komponenten mit semantischen Klassennamen, Tailwind-Komposition, Dark-Mode-Unterstützung und umfassender Testabdeckung.

Поддерживает: Claude Code(CC)
⚠️ 65 Плохо
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «css-development:create-component». Create a primary button component with hover effects and dark mode

Ожидаемый результат:

  • Created .button-primary component in styles/components.css
  • Added dark mode variants for background and hover states
  • Created static CSS test verifying class exists
  • Added React component rendering test
  • Documented usage with React and HTML examples

Аудит безопасности

Безопасно
v3 • 1/10/2026

Pure prompt-based skill with no executable code. Contains only guidance documentation for creating CSS components. No network, filesystem, or code execution capabilities.

1
Просканировано файлов
362
Проанализировано строк
0
находки
3
Всего аудитов
Проблем безопасности не найдено
Проверено: claude Посмотреть историю аудитов →

Оценка качества

38
Архитектура
100
Сопровождаемость
83
Контент
21
Сообщество
100
Безопасность
61
Соответствие спецификации

Что вы можете построить

Wiederverwendbare UI-Komponenten erstellen

Erstellen Sie konsistente, wartbare CSS-Komponenten nach Teamkonventionen und Mustern.

Neue UI-Elemente gestalten

Fügen Sie gestylte Elemente zu Projekten mit richtiger Dark-Mode-Unterstützung und Testabdeckung hinzu.

Komponentenstandards durchsetzen

Pflegen Sie konsistente Benennungs- und Kompositionsmuster über ein Designsystem hinweg.

Попробуйте эти промпты

Eine Schaltfläche erstellen 
Erstellen Sie eine Primärschaltflächen-Komponente nach den css-development:create-component Skill-Mustern. Die Schaltfläche sollte einen Hover-Lift-Effekt haben und im Dark Mode funktionieren.
Eine Karte erstellen 
Erstellen Sie eine Karten-Komponente mit css-development:create-component. Fügen Sie Titel- und Beschreibungs-Unterelmente mit korrekter semantischer Benennung hinzu.
Formularstile hinzufügen 
Erstellen Sie eine Eingabefeld-Komponente mit Fokus-Zuständen und Fehlervarianten unter Verwendung des css-development:create-component Skills. Stellen Sie die Dark-Mode-Unterstützung sicher.
Komplexe Komponente erstellen 
Erstellen Sie eine Navigations-Komponente mit css-development:create-component mit korrekter atomarer Designorganisation, interaktiven Zuständen und responsivem Verhalten.

Лучшие практики

  • Verwenden Sie semantische Namen, die den Zweck beschreiben, nicht das Aussehen (verwenden Sie .button-primary nicht .btn-blue)
  • Fügen Sie von Anfang an Dark-Mode-Varianten hinzu, anstatt sie später hinzuzufügen
  • Prüfen Sie zuerst vorhandene Komponenten - Komponieren Sie, anstatt neue Klassen zu erstellen

Избегать

  • Verwendung von Utility-Namen, die Styling an das Aussehen koppeln (.text-blue, .card-sm)
  • Erstellen neuer Klassen, wenn vorhandene zusammengesetzt werden können
  • Überspringen von Dark-Mode-Varianten, weil sie später hinzugefügt werden können

Часто задаваемые вопросы

Funktioniert dieser Skill mit reinem CSS oder nur mit Tailwind?
Der Skill ist für Tailwind-Projekte mit @apply konzipiert, aber die semantischen Benennungsmuster gelten für jede CSS-Methodik.
Kann ich diesen Skill mit Frameworks wie Vue oder Svelte verwenden?
Ja. Der Skill bietet React-Beispiele, aber die CSS-Muster und die Markup-Integrationsschritte funktionieren mit jedem Framework.
Was ist, wenn mein Projekt keinen Dark Mode verwendet?
Sie können dem Skill dennoch folgen, aber überspringen Sie die Dark-Mode-Varianten. Der Skill führt Sie entsprechend durch das Auslassen.
Ist die Verwendung dieses Skills mit Produktionscode sicher?
Ja. Der Skill bietet nur Anleitungen - alle Dateiänderungen erfordern Ihre ausdrückliche Zustimmung vor der Ausführung.
Ändert dieser Skill automatisch Dateien?
Nein. Der Skill führt Sie durch die Schritte, wartet aber auf Ihre Zustimmung, bevor er Dateiänderungen an Ihrem Projekt vornimmt.
Wie unterscheidet sich dies vom manuellen CSS-Codieren?
Der Skill sorgt für Konsistenz, indem er automatisch Benennungskonventionen, Dark-Mode-Anforderungen und Testabdeckung durchsetzt.

Сведения для разработчиков

Автор

2389-research

Лицензия

MIT

Репозиторий

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

Ссылка

main

Структура файлов

📄 SKILL.md