Zum Hauptinhalt springen
Dieser Inhalt ist noch nicht in Ihrer Sprache verfügbar und wird auf Englisch angezeigt.

UI Styling Skill

Skill Verifiziert Aktiv

Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization.

Zweck

Style UIs efficiently and accessibly using shadcn/ui components and Tailwind CSS.

Funktionen

  • Style UIs with shadcn/ui components
  • Utilize Tailwind CSS for utility-first styling
  • Implement accessible components
  • Support dark mode and themes
  • Create responsive layouts
  • Build design systems and customize colors

Anwendungsfälle

  • Building UI with React-based frameworks
  • Implementing accessible components
  • Styling with utility-first CSS
  • Creating responsive, mobile-first layouts
  • Implementing dark mode and theme customization
  • Building design systems

Nicht-Ziele

  • Backend development
  • General programming assistance
  • Cloud infrastructure management

Workflow

  1. Initialize project with shadcn/ui and Tailwind CSS
  2. Add desired components using CLI
  3. Integrate components into React application
  4. Apply Tailwind CSS utility classes for styling
  5. Customize themes and implement dark mode
  6. Ensure accessibility and responsive design

Praktiken

  • Component Composition
  • Utility-First Styling
  • Mobile-First Responsive Design
  • Accessibility-First
  • Design Tokens Usage
  • Dark Mode Consistency

Voraussetzungen

  • Node.js 18+
  • npm or pnpm
  • React-based framework (Next.js, Vite, Remix, Astro)

Installation

npx skills add binjuhor/shadcn-lar

Führt das Vercel skills CLI (skills.sh) via npx aus — benötigt Node.js lokal und mindestens einen installierten skills-kompatiblen Agent (Claude Code, Cursor, Codex, …). Setzt voraus, dass das Repo dem agentskills.io-Format folgt.

Qualitätspunktzahl

Verifiziert
95 /100
Analysiert 1 day ago

Vertrauenssignale

Letzter Commit2 days ago
GitHub-Inhaber binjuhor (opens in new tab)
Sterne80
LizenzMIT
Websiteshadcn-admin.binjuhor.com(opens in new tab)
Status
Quellcode ansehen

Ähnliche Erweiterungen

UI UX Pro Max Skill

98

Erstellen Sie schöne, zugängliche Benutzeroberflächen mit shadcn/ui-Komponenten (basierend auf Radix UI + Tailwind), Utility-First-Styling mit Tailwind CSS und canvasbasierten visuellen Designs. Verwenden Sie dies beim Erstellen von Benutzeroberflächen, Implementieren von Designsystemen, Erstellen responsiver Layouts, Hinzufügen zugänglicher Komponenten (Dialoge, Dropdowns, Formulare, Tabellen), Anpassen von Themes und Farben, Implementieren des Dark Mode, Generieren visueller Designs und Poster oder Herstellen konsistenter Styling-Muster über Anwendungen hinweg.

Skill
nextlevelbuilder

Shadcn/ui Component Library

99

shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership

Skill
bobmatnyc

Shadcn Ui

98

Expertenanleitung für die Integration und Erstellung von Anwendungen mit shadcn/ui-Komponenten, einschließlich Komponentenfindung, Installation, Anpassung und Best Practices.

Skill
google-labs-code

Figma Generate Library

100

Erstellen oder aktualisieren Sie ein professionelles Designsystem in Figma aus einer Codebasis. Verwenden Sie dies, wenn der Benutzer Variablen/Tokens erstellen, Komponentenbibliotheken erstellen, Theming (helle/dunkle Modi) einrichten, Foundations dokumentieren oder Lücken zwischen Code und Figma abgleichen möchte. Diese Fähigkeit lehrt WAS gebaut werden soll und in WELCHER REIHENFOLGE — sie ergänzt die `figma-use`-Fähigkeit, die lehrt WIE die Plugin-API aufgerufen wird. Beide Fähigkeiten sollten zusammen geladen werden.

Skill
figma

Component Audit

100

Component consistency audit covering state coverage, hierarchy, patterns

Skill
Aboudjem

Env Manager

99

Environment variable validation, security scanning, and management for Next.js, Vite, React, and Node.js applications

Skill
bobmatnyc