📦

ui-styling

Name: ui-styling
Author: nextlevelbuilder

v1.0.0 Inhaltsrevision r1 Sicher ⚡ Enthält Skripte🔑 Umgebungsvariablen🌐 Netzwerkzugriff⚙️ Externe Befehle

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.

Unterstützt: Claude Codex Code(CC)

🥇 83 Gold

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-styling" from https://skillstore.io/skills/nextlevelbuilder-ui-styling.md and its manifest at https://skillstore.io/api/skills/nextlevelbuilder-ui-styling/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/nextlevelbuilder-ui-styling.md Signiertes manifest GET /api/skills/nextlevelbuilder-ui-styling/manifest Signiertes lockfile GET /api/skills/nextlevelbuilder-ui-styling/lockfile

Testen

„ui-styling“ wird verwendet. Create an accessible account settings form that works on mobile and desktop.

Erwartetes Ergebnis:

A responsive form structure using labeled shadcn/ui controls.
Inline validation, focus management, disabled states, and clear submission feedback.
A single-column mobile layout that becomes a structured desktop settings view.

„ui-styling“ wird verwendet. Define a dark mode theme for a data-heavy analytics product.

Erwartetes Ergebnis:

Semantic tokens for surfaces, text, borders, status colors, and chart accents.
Dark mode values with readable contrast and restrained elevation.
Guidance for tables, filters, dialogs, focus rings, and selected states.

„ui-styling“ wird verwendet. Improve a card grid that overflows on small screens.

Erwartetes Ergebnis:

A mobile-first grid plan with stable gaps, constrained content, responsive columns, and long-text handling.

Sicherheitsaudit

Sicher

v1 • 28.8.2026 Versionsbericht öffnen

Most alerts are false matches in font licenses, Markdown, examples, tests, and structured coverage data. Two findings are confirmed because shadcn_add.py invokes npx with project-sourced version data and unvalidated component arguments. No prompt injection or data-exfiltration intent was found.

Gescannte Dateien

7,449

Analysierte Zeilen

Prüfelemente

Falschmeldungen ignoriert

Elemente der Fähigkeitsprüfung (2)

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.

Hoch

scripts/shadcn_add.py:126

Python subprocess.run

result = subprocess.run(

The installer invokes npx to execute shadcn and modify the target project. It avoids a shell, but project-sourced version data and unvalidated component arguments create package and option-injection risk.

Hoch

scripts/shadcn_add.py:172

Python subprocess.run

result = subprocess.run(

Risikofaktoren

⚡ Enthält Skripte (4)

references/shadcn-accessibility.md:467 scripts/tailwind_config_gen.py:231 scripts/tailwind_config_gen.py:208 scripts/tailwind_config_gen.py:242

🔑 Umgebungsvariablen (3)

references/shadcn-accessibility.md:466 references/shadcn-accessibility.md:466 scripts/shadcn_add.py:55

🌐 Netzwerkzugriff (9)

references/shadcn-components.md:411 SKILL.md:17 SKILL.md:18 SKILL.md:319 SKILL.md:320 SKILL.md:321 SKILL.md:322 SKILL.md:323 SKILL.md:324

⚙️ Externe Befehle (48)

Geprüft von: codex

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/nextlevelbuilder-ui-styling/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown-Badge

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

HTML-Badge

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

Einbettungskarte

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

Wissenschaftliche Zitate (APA · BibTeX · CFF)

APA-Zitat

nextlevelbuilder. (2026). ui-styling security audit report (audit version 1) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/nextlevelbuilder-ui-styling/audits/1

BibTeX-Zitat

@techreport{nextlevelbuilder-nextlevelbuilder-ui-styling-2026,
  author = {nextlevelbuilder},
  title = {ui-styling security audit report (audit version 1)},
  institution = {Skillstore},
  year = {2026},
  number = {1},
  url = {https://skillstore.io/skills/nextlevelbuilder-ui-styling/audits/1},
  note = {Author version 1.0.0}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ui-styling security audit report (audit version 1)"
version: "1.0.0"
type: report
authors:
  - name: "nextlevelbuilder"
date-released: "2026-08-28"
url: "https://skillstore.io/skills/nextlevelbuilder-ui-styling/audits/1"
identifiers:
  - type: other
    value: "skillstore:nextlevelbuilder-ui-styling:audit:1"
    description: "Skillstore immutable audit report identifier"

Skillstore-Score

Warum dieser Score Evidenzvertrauen: Mittel

Architektur

100

Wartbarkeit

Inhalt

Gemeinschaft

Spezifikationskonformität

Was Sie erstellen können

Build a Product Dashboard

Create responsive dashboard layouts with accessible cards, tables, filters, dialogs, and clear loading states.

Standardize Interface Tokens

Define colors, spacing, typography, breakpoints, component variants, and dark mode across an application.

Translate Designs into Components

Turn interface requirements into reusable shadcn/ui compositions with responsive Tailwind styling and accessibility behavior.

Diese Prompts ausprobieren

Style One Component

Style a [component] with shadcn/ui and Tailwind. Include accessible states, responsive behavior, and a concise explanation of key choices.

Build a Responsive Layout

Create a mobile-first [page type] for [framework]. Use shadcn/ui, define breakpoint behavior, and include loading, empty, error, and success states.

Create a Theme System

Design a Tailwind theme for [brand]. Define semantic color tokens, typography, spacing, dark mode, focus styles, and component variant guidance.

Audit and Refactor an Interface

Review the provided interface for accessibility, responsive layout, theme consistency, and component composition. Prioritize issues, then propose focused shadcn/ui and Tailwind changes.

Bewährte Praktiken

Start with semantic HTML and accessible component behavior before visual refinement.
Use shared tokens and responsive constraints instead of isolated values and viewport-specific fixes.
Test keyboard navigation, focus visibility, contrast, reduced motion, and content overflow at representative sizes.

Vermeiden

Do not remove focus indicators or rely on color alone to communicate state.
Do not build class names dynamically when Tailwind cannot discover them during compilation.
Do not run the component installer without reviewing the resolved command and expected file changes.