ui-component-creation
Design-System-UI-Komponenten erstellen
Teams benötigen konsistente UI-Komponenten, die lokale Designregeln befolgen. Diese Skill leitet die Erstellung mit shadcn/ui anhand von Tokens, Zuständen, responsiven Layouts und Barrierefreiheit an.
Mit meinem Agent installieren
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "ui-component-creation" from https://skillstore.io/skills/cleanexpo-ui-component-creation.md and its manifest at https://skillstore.io/api/skills/cleanexpo-ui-component-creation/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Agent-lesbare Ressourcen
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
Testen
„ui-component-creation“ wird verwendet. Create a dashboard summary card for monthly sales data.
Erwartetes Ergebnis:
Ein Plan für eine wiederverwendbare Kartenkomponente mit tokenbasierten Oberflächenfarben, klarer Titelhierarchie, Aktionsbutton-Styling und responsiven Abständen.
„ui-component-creation“ wird verwendet. Refactor a feature panel that uses raw gray and white classes.
Erwartetes Ergebnis:
Ein am Design-System ausgerichtetes Panel, das rohe Farbklassen durch genehmigte Text-, Hintergrund-, Akzent- und Rahmen-Tokens ersetzt.
„ui-component-creation“ wird verwendet. Create a responsive three-column statistics section.
Erwartetes Ergebnis:
Ein responsives Layout, das feste mobile Spalten vermeidet und barrierefreie Labels, Zustände und Breakpoint-Verhalten definiert.
Sicherheitsaudit
SicherThe static findings are false positives caused by Markdown code fences, inline Tailwind class names, and design-token examples. No shell execution, system reconnaissance, network reconnaissance, prompt injection, or data exfiltration intent was found in SKILL.md.
Risikofaktoren
⚙️ Externe Befehle (10)
Diesen Bericht teilen & zitieren
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
Berichtslink kopieren
https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown-Badge
[](https://skillstore.io/skills/cleanexpo-ui-component-creation?utm_source=security_passport_badge)HTML-Badge
<a href="https://skillstore.io/skills/cleanexpo-ui-component-creation?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cleanexpo-ui-component-creation/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Einbettungskarte
<iframe src="https://skillstore.io/embed/skills/cleanexpo-ui-component-creation.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Wissenschaftliche Zitate (APA · BibTeX · CFF)
APA-Zitat
CleanExpo. (2026). ui-component-creation security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8BibTeX-Zitat
@techreport{cleanexpo-cleanexpo-ui-component-creation-2026,
author = {CleanExpo},
title = {ui-component-creation security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8},
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: "ui-component-creation security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "CleanExpo"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8"
identifiers:
- type: other
value: "skillstore:cleanexpo-ui-component-creation:audit:8"
description: "Skillstore immutable audit report identifier"
Skillstore-Score
Warum dieser Score Evidenzvertrauen: HochWas Sie erstellen können
Eine neue Produktkarte erstellen
Erstelle eine wiederverwendbare Karte, die Projekt-Tokens, Zustände und responsives Verhalten befolgt.
Feature-Panels standardisieren
Wandle unterschiedliche Interface-Anfragen in Komponenten um, die dasselbe visuelle System verwenden.
UI-Generierungsanfragen prüfen
Lenke KI-gestützte Komponentenarbeit auf barrierefreie, markenkonforme Ergebnisse aus.
Diese Prompts ausprobieren
Create a shadcn/ui card component for [purpose]. Use our design tokens, responsive spacing, and accessible labels.
Create a [component type] with hover, focus, disabled, and loading states. Use design tokens instead of raw Tailwind colors.
Refactor this component to use shadcn/ui patterns, project color tokens, responsive breakpoints, and accessible controls: [paste component].
Create a coordinated set of [components] for [workflow]. Include variants, empty states, error states, responsive behavior, and accessibility details.
Bewährte Praktiken
- Stelle vor der Anforderung von Komponentenarbeit die relevante Design-System-Datei oder Token-Namen bereit.
- Fordere alle erforderlichen Zustände an, einschließlich Hover-, Focus-, Disabled-, Loading-, Empty- und Error-Zuständen.
- Prüfe generierte Komponenten auf Barrierefreiheit, responsives Verhalten und Token-Konsistenz.
Vermeiden
- Fordere keine rohen Tailwind-Farbklassen an, wenn das Projekt Design-Tokens besitzt.
- Akzeptiere keine festen Desktop-Rasterlayouts ohne Verhalten für Mobilgeräte und Tablets.
- Lasse Interaktionszustände für Buttons, Karten, Formulare oder Navigationselemente nicht weg.