Barrierefreie UI mit Tailwind und shadcn erstellen
Teams benötigen konsistente Richtlinien für Benutzeroberflächen, die Komponenten, Styling, Barrierefreiheit und responsives Verhalten abdecken. Diese Skill stellt Referenzen zu shadcn/ui, Tailwind CSS und visuellem Design für Claude-, Codex- und Claude Code-Workflows bereit.
Vor der Installation anhalten und eine Bestätigung anfordern.
Prüfen Sie den Plan und holen Sie vor Änderungen an Dateien die ausdrückliche Zustimmung des Benutzers ein.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "ckm-ui-styling" from https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling.md and its manifest at https://skillstore.io/api/skills/nextlevelbuilder-ckm-ui-styling/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„ckm-ui-styling“ wird verwendet. Eine Einstellungsseite benötigt responsive Karten, Dark Mode und klare Formularaktionen.
Erwartetes Ergebnis:
„ckm-ui-styling“ wird verwendet. Ein vorhandener Dialog besteht die Tastatur- und Screenreader-Prüfung nicht.
Erwartetes Ergebnis:
„ckm-ui-styling“ wird verwendet. Ein Team möchte konsistente Tailwind-Tokens über Produktseiten hinweg.
Erwartetes Ergebnis:
Most static hits are false positives in documentation, license text, tests, and coverage data. Real issues remain around unpinned npx execution in a helper script and numerous bundled binary font assets that need manual verification.
Dies sind echte lokale Fähigkeiten, die für diese Fähigkeit erwartet werden können; daher müssen sie überprüft werden, werden jedoch nicht als bestätigtes bösartiges Verhalten gezählt.
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/nextlevelbuilder-ckm-ui-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/nextlevelbuilder-ckm-ui-styling.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>nextlevelbuilder. (2026). ckm-ui-styling security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4@techreport{nextlevelbuilder-nextlevelbuilder-ckm-ui-styling-2026,
author = {nextlevelbuilder},
title = {ckm-ui-styling security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4},
note = {Author version 1.0.0}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ckm-ui-styling security audit report (audit version 4)"
version: "1.0.0"
type: report
authors:
- name: "nextlevelbuilder"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4"
identifiers:
- type: other
value: "skillstore:nextlevelbuilder-ckm-ui-styling:audit:4"
description: "Skillstore immutable audit report identifier"
Erstelle eine Mobile-First-Seite mit shadcn-Karten, Formularen, Dialogen und Tailwind-Abstandsregeln.
Definiere Tokens, Dark-Mode-Verhalten, Komponentenvarianten und barrierefreie Interaktionszustände für ein gemeinsames UI-System.
Überprüfe Fokusverwaltung, Tastaturverhalten, Formularfehler, Farbkontrast und Screenreader-Ankündigungen.
Verwende ckm-ui-styling, um einen responsiven shadcn-Button und eine Karte für einen einfachen Registrierungsbildschirm zu gestalten.
Erstelle einen barrierefreien Einstellungsdialog mit Tastaturnavigation, Fokuszuständen, Formularmeldungen und Tailwind-Dark-Mode-Stilen.
Definiere ein Tailwind- und shadcn-Theme für ein Finanz-Dashboard, einschließlich Tokens, Varianten und Richtlinien für responsives Layout.
Überprüfe diese React-UI auf Barrierefreiheit, Layout-Konsistenz, Dark Mode und shadcn-Komposition. Stelle präzise Änderungen und Validierungsschritte bereit.
Autor
nextlevelbuilderLizenz
MIT
Autorenversion
v1.0.0
Skillstore-Revision
r1
Repository
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-styling/Ref.
62e2a730c5cd74eab4c7164309d810de660fcea3
Aktualität der Wartung
18.7.2026
Nutzung
8 Downloads · 15 Aufrufe
Build Accessible Tailwind Interfaces
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Build Consistent Design Systems and Slides
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
Create Strategic HTML Presentations
Building persuasive, responsive presentations requires coordinated structure, design, copy, and data visualization. This skill turns a topic and audience brief into a complete HTML deck.
UI- und UX-Design-Workflows verbessern
Interface-Arbeit erfordert oft konsistente Gestaltung, Barrierefreiheit und stack-spezifische Anleitung. Dieser Skill gibt Claude, Codex und Claude Code eine durchsuchbare UI/UX-Referenz für Planung, Erstellung und Review von Designs.
Markenrichtlinien und Asset-Workflows erstellen
Markenarbeit driftet häufig über Sprache, visuelle Gestaltung, Assets und Design Tokens hinweg auseinander. Dieser Skill hilft Claude, Codex und Claude Code dabei, konsistente Markensysteme zu erstellen, zu überprüfen und anzuwenden.
Build consistent brand guidelines and assets
Brand work can become inconsistent across content, assets, and interfaces. This skill provides structured guidance, validation, and token synchronization to keep brand decisions aligned.
Web-Barrierefreiheit auf WCAG-Konformität prüfen
von 89jobrien
Barrierefreiheitslücken können Nutzer ausschließen und Compliance-Risiken schaffen. Diese Skill unterstützt WCAG-Audits, Screenreader-Prüfungen, Tastaturtests und die Planung von Korrekturmaßnahmen.
UX vor dem Bauen planen
von pbakaus
Teams erstellen häufig Interfaces, bevor sie Nutzerziele, Zustände und Einschränkungen geklärt haben. Dieser Skill leitet die Discovery und erstellt ein Design-Briefing für die Implementierung.
UX mit forschungsgestützter Designberatung verbessern
von shubhamsaboo
Teams entwerfen Abläufe oft auf Basis von Annahmen und übersehen Barrierefreiheitsprobleme. Dieser Skill unterstützt Forschung, Struktur, Interaktionsdesign und Reviews anhand von UX-Best-Practices.
Markante UI-Prototypen entwerfen
von tencentcloudbase
Generische KI-Oberflächen haben oft keine klare visuelle Richtung und zu wenig plattformspezifische Detailtiefe. Dieser Skill leitet Claude, Codex und Claude Code dabei an, vor dem Erstellen von Prototypen die Designabsicht zu definieren.
Check designs with deterministic CSS rules
von cubha
Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.
shadcn/ui-Oberflächen in Next.js erstellen
von Asmayaseen
React-Teams benötigen konsistente UI-Muster, die mit modernem Next.js funktionieren. Dieser Skill bietet Anleitungen zur Einrichtung von shadcn/ui, Komponentenbeispiele, Formularvalidierung, Tabellen, Sidebars und Muster für den Dunkelmodus.