Fähigkeiten UI Design System

📦

UI Design System

Name: UI Design System
Author: AbdulSamad94

Inhaltsrevision r2 Sicher ⚙️ Externe Befehle

Physical-AI-Designregeln anwenden

Teams benötigen ein konsistentes Interface-Styling für den Physical AI Hub. Diese Skill gibt Claude, Codex und Claude Code klare Designregeln für Farben, Typografie, Komponenten, Animationen und CSS-Dateien.

Unterstützt: Claude Codex Code(CC)

📊 76 Angemessen

Maintain this Skill? Claim it 📊 76 Angemessen

Mit meinem Agent installieren

Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.

Agent-Anfrage

Review the Skillstore skill "UI Design System" from https://skillstore.io/skills/abdulsamad94-ui-design-system.md and its manifest at https://skillstore.io/api/skills/abdulsamad94-ui-design-system/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.

Markdown-Detailseite GET /skills/abdulsamad94-ui-design-system.md Signiertes manifest GET /api/skills/abdulsamad94-ui-design-system/manifest Signiertes lockfile GET /api/skills/abdulsamad94-ui-design-system/lockfile

Testen

„UI Design System“ wird verwendet. Eine Dashboard-Seite wirkt inkonsistent mit dem Physical AI Hub.

Erwartetes Ergebnis:

Eine Überprüfung, die den dunklen Verlaufshintergrund, Poppins-Typografie, türkisfarbene Akzente, Glass-Style-Cards, subtile Rahmen und sanfte Hover-Transitions empfiehlt.

„UI Design System“ wird verwendet. Eine Dokumentationsseite benötigt Theme-Ausrichtung.

Erwartetes Ergebnis:

Ein Styling-Plan, der globales CSS, Docusaurus-Overrides und Komponentenmodule aktualisiert und dabei die hochwertige dunkle Interface-Sprache bewahrt.

„UI Design System“ wird verwendet. Ein Dropdown-Menü benötigt visuellen Feinschliff.

Erwartetes Ergebnis:

Eine Antwort mit Komponentenleitlinien zu schwebender Platzierung, animiertem Slide-in-Verhalten, Schattentiefe, abgerundeten Ecken und gut lesbarer Textbehandlung.

Sicherheitsaudit

Sicher

v10 • 18.7.2026 Versionsbericht öffnen

All 11 static findings are false positives caused by Markdown backticks around CSS values, animation names, and stylesheet paths. The single skill file contains design guidance only, with no commands, scripts, network activity, or prompt-injection text.

Gescannte Dateien

Analysierte Zeilen

Prüfelemente

Falschmeldungen ignoriert

Risikofaktoren

⚙️ Externe Befehle (11)

SKILL.md:18 SKILL.md:19 SKILL.md:20 SKILL.md:21 SKILL.md:25 SKILL.md:26 SKILL.md:30 SKILL.md:31 SKILL.md:34 SKILL.md:35 SKILL.md:36

Das letzte abgeschlossene statische und semantische Audit erkannte keine bestätigten Sicherheitsbefunde. Dies beweist nicht, dass der Skill keine Nebenwirkungen hat.

Geprüft von: claude Audit-Verlauf anzeigen →

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.

Versionsbericht öffnen

Berichtslink kopieren

https://skillstore.io/skills/abdulsamad94-ui-design-system/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown-Badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/abdulsamad94-ui-design-system/security.svg)](https://skillstore.io/skills/abdulsamad94-ui-design-system?utm_source=security_passport_badge)

HTML-Badge

<a href="https://skillstore.io/skills/abdulsamad94-ui-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/abdulsamad94-ui-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Einbettungskarte

<iframe src="https://skillstore.io/embed/skills/abdulsamad94-ui-design-system.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

AbdulSamad94. (2026). UI Design System security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/abdulsamad94-ui-design-system/audits/10

BibTeX-Zitat

@techreport{abdulsamad94-abdulsamad94-ui-design-system-2026,
  author = {AbdulSamad94},
  title = {UI Design System security audit report (audit version 10)},
  institution = {Skillstore},
  year = {2026},
  number = {10},
  url = {https://skillstore.io/skills/abdulsamad94-ui-design-system/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: "UI Design System security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
  - name: "AbdulSamad94"
date-released: "2026-07-18"
url: "https://skillstore.io/skills/abdulsamad94-ui-design-system/audits/10"
identifiers:
  - type: other
    value: "skillstore:abdulsamad94-ui-design-system:audit:10"
    description: "Skillstore immutable audit report identifier"

Varianten vergleichen

3 installierbare Varianten

Jeder Autor bleibt ein eigener installierbarer Skill. Die empfohlene Variante wird nach Skillstore-Nachweisen bewertet.

Warum diese Variante zuerst steht

Höchster Skillstore-Score

Autor / Quelle Skillstore-Score Evidenzvertrauen Skillstore-Nutzung Aktualisiert

AbdulSamad94 Empfohlen Aktuell

abdulsamad94-ui-design-system

Skillstore-Score 76

Evidenzvertrauen Hoch

Skillstore-Nutzung 25

Aktualisiert

2026-10-20

davila7

davila7-ui-design-system

Skillstore-Score 75

Evidenzvertrauen Hoch

Skillstore-Nutzung 22

Aktualisiert

2026-09-09

alirezarezvani

alirezarezvani-ui-design-system

Skillstore-Score 75

Evidenzvertrauen Hoch

Skillstore-Nutzung 20

Aktualisiert

2026-10-23

Skillstore-Score

Warum dieser Score Evidenzvertrauen: Hoch

Architektur

Wartbarkeit

Inhalt

Gemeinschaft

Spezifikationskonformität

Was Sie erstellen können

Einen neuen Feature-Screen ausrichten

Nutze die Theme-Regeln, um einen neuen Produkt-Screen visuell konsistent mit dem Physical AI Hub zu halten.

Interface-Styling überprüfen

Prüfe Farben, Typografie, Cards, Buttons und Animationsentscheidungen anhand des dokumentierten Systems.

Dokumentations-Styling leiten

Wende dieselbe visuelle Sprache auf Docusaurus-Seiten und unterstützende Dokumentations-Styles an.

Diese Prompts ausprobieren

Einen einfachen Screen stylen

Wende die ui-design-system skill auf diesen Screen an. Aktualisiere Farben, Typografie, Buttons, Cards, Eingaben und Abstände, damit sie zum Stil des Physical AI Hub passen.

Eine Komponente überprüfen

Überprüfe diese Komponente anhand der ui-design-system skill. Identifiziere Abweichungen bei Typografie, Akzentfarbe, Rahmenbehandlung, Radius und Transition-Verhalten.

Theme-CSS refaktorisieren

Refaktorisiere das Theme-CSS mit der ui-design-system skill. Halte globale Variablen, Docusaurus-Overrides und Modul-Styles mit dem dokumentierten visuellen System abgestimmt.

Einen Multi-View-Flow gestalten

Gestalte einen mehransichtigen Physical AI Hub Workflow mit der ui-design-system skill. Wende konsistente Komponenten-Zustände, Dark-Mode-Oberflächen, Bewegungsmuster und Dateiorganisation an.

Bewährte Praktiken

Verwende die dokumentierte Palette, bevor du neue Farben hinzufügst.
Halte das Komponenten-Styling über globales CSS, Dokumentations-CSS und Modul-CSS hinweg konsistent.
Kombiniere hochwertige Bewegung mit gut lesbarem Text und klaren Fokuszuständen.

Vermeiden

Nicht zusammengehörige Schriftarten oder Farbsysteme in das Interface des Physical AI Hub mischen.
Schwere Animationen verwenden, die die Reaktionsfähigkeit verringern oder von Kernaufgaben ablenken.
Gemeinsam genutzte CSS-Dateien ändern, ohne die Auswirkungen auf Komponenten und Dokumentation zu prüfen.

Häufig gestellte Fragen

Wobei hilft diese Skill?

Sie hilft dabei, das Designsystem des Physical AI Hub auf Interfaces, Komponenten, Animationen und CSS-Struktur anzuwenden.

Generiert sie vollständige UI-Komponenten?

Nein. Sie bietet Designleitlinien, die ein KI-Assistent beim Erstellen oder Überprüfen von Komponenten anwenden kann.

Welchen visuellen Stil definiert sie?

Sie definiert einen hochwertigen Dark-Mode-Stil mit Poppins-Typografie, türkisfarbenen Akzenten, Glass-Style-Cards und sanfter Bewegung.

Kann sie beim Docusaurus-Styling helfen?

Ja. Sie nennt eine benutzerdefinierte Docusaurus-CSS-Datei als Teil der vorgesehenen CSS-Struktur.

Enthält sie Barrierefreiheitsregeln?

Nein. Füge bei der Verwendung dieser Skill explizite Barrierefreiheitsprüfungen für Kontrast, Tastaturfokus und reduzierte Bewegung hinzu.

Besteht ein Risiko durch Befehlsausführung?

Es wurden keine Hinweise gefunden. Die markierten Backticks sind Markdown-Formatierung für CSS-Werte und Dateipfade.

Entwicklerdetails

Autor

AbdulSamad94

Lizenz

MIT

Skillstore-Revision

Versionshinweis

Der Autor hat keine Version angegeben.

Repository

https://github.com/AbdulSamad94/Hackhaton-SpecsKitPlus/tree/master/.claude/skills/ui-design

Ref.

80999bf530a7874d7bedf8ce202001ecb4c4f5e0

Aktualität der Wartung

23.7.2026

Nutzung

13 Downloads · 252 Aufrufe

Dateistruktur

📄 SKILL.md