ui-stylingdi nextlevelbuilder

UI Styling Skill.

Uno skill per Claude Code e Codex per il design UI: styling UI accessibile con shadcn/ui, Tailwind CSS e visual basati su canvas.

Web & UI
Codice UI

Scarica OpenDesign Guida all'uso

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-styling/SKILL.mdSKILL.md

--- name: ui-styling description: Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and … --- ## When to Use This Skill ## Core Stack ## Script Paths ## Quick Start ## Component Library Guide ## Theme & Customization

Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 10.626 caratteri in totale

01 Cosa fa

Cosa fa la skill ui-styling in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Questa skill crea interfacce utente React accessibili combinando componenti shadcn/ui (primitive Radix UI con Tailwind CSS), styling utility-first con Tailwind CSS e sistemi di design visivo basati su canvas. È destinata a progetti Next.js, Vite, Remix e Astro. I componenti vengono copiati nel codebase tramite CLI, garantendo pieno controllo e sicurezza dei tipi TypeScript.

La skill copre layout responsive, dark mode, design token, validazione dei form, tabelle di dati e composizioni visive di qualità museale. Include documentazione di riferimento per pattern dei componenti, theming, accessibilità (ARIA, navigazione da tastiera), breakpoint responsive e personalizzazione di Tailwind. Script Python automatizzano l'installazione dei componenti e la generazione della configurazione.

Che cosa produce

tailwind.config.js generato con token del tema personalizzati, colori, font, spaziature ed estensioni dei breakpoint.

Vedi l'esempio di prompt ↗

Come funziona

01
Inizializzare Shadcn/ui con Tailwind
Eseguire npx shadcn@latest init per configurare sia shadcn/ui che Tailwind CSS, con richieste su framework, TypeScript, percorsi e preferenze del tema.
02
Aggiungere Componenti al Codebase
Installare i componenti con npx shadcn@latest add button card dialog form, che li copia nel progetto per pieno controllo e personalizzazione.
03
Comporre con Classi Utility
Combinare i componenti shadcn/ui con le classi utility di Tailwind per layout responsive, spaziature, colori e stati hover direttamente negli attributi className JSX.
04
Applicare Varianti Dark Mode
Utilizzare next-themes per il cambio tema e aggiungere classi utility con prefisso dark: a tutti gli elementi tematizzati per un supporto coerente della dark mode.
05
Sfruttare l'Accessibilità di Radix
Le primitive Radix UI offrono pattern ARIA integrati, navigazione da tastiera e gestione del focus senza configurazione aggiuntiva.

02 Trova la tua applicazione

Quando Usare la Skill ui-styling

Usa la skill ui-styling in Claude Code o Codex quando il compito riguarda il design UI di questo tipo. Ambito e limiti sotto sono presi dal file della skill stessa.

Buona applicazione

Creazione di UI con framework basati su React come Next.js, Vite, Remix o Astro.
Implementazione di componenti accessibili come dialog, form, tabelle e navigazione.
Creazione di layout responsive, mobile-first, con un approccio CSS utility-first.
Costruzione di design system con token coerenti e supporto per la dark mode.
Generazione di design visivi, poster o materiali di brand con workflow basati su canvas.

Conosci i limiti

Richiede shadcn/ui, Tailwind CSSIl SKILL.md indica questa dipendenza; lo skill non funziona senza di essa nel progetto.

Cosa fornire

Nomi dei componenti per l'installazionePassare i nomi dei componenti a shadcn_add.py o npx shadcn@latest add per installarli con gestione delle dipendenze.
Token del tema personalizzatiFornire colori e font personalizzati a tailwind_config_gen.py per generare tailwind.config.js con tema estso.

03 Dentro la skill

Regole che la Skill ui-styling Fornisce a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Responsive Mobile-first
Iniziate con gli stili mobile e stratificate le varianti responsive usando i breakpoint (sm, md, lg, xl, 2xl). Tailwind elabora mobile-first per impostazione predefinita.
Estrazione Utility-first
Usate le classi Tailwind direttamente in JSX. Estraete componenti solo per vera ripetizione, non per pattern usati una sola volta.
Percorsi degli Script Relativi alla Directory dello Skill
I percorsi degli script in questo skill sono relativi alla directory che contiene SKILL.md, non alla root del progetto.
Uso di Componenti Accessibility-first
Sfruttate i primitivi Radix UI per i pattern ARIA, aggiungete stati di focus agli elementi interattivi e usate HTML semantico. Il supporto agli screen reader è integrato nei componenti shadcn/ui.
Design Token per la Coerenza
Usate una scala di spaziatura, palette di colori e sistema tipografico coerenti definiti nella configurazione Tailwind. Applicate le variabili del tema piuttosto che valori arbitrari.
Sicurezza dei Tipi con TypeScript
Tutti i componenti sono TypeScript-first con piena sicurezza dei tipi. Usate props tipizzate e schemi di form per una migliore esperienza di sviluppo.
Evitate Nomi di Classi Dinamici
Il purging automatico del CSS di Tailwind richiede nomi di classe statici. La costruzione dinamica delle classi impedisce l'eliminazione del codice morto.
Standard di Artigianalità Esperta
Ogni dettaglio conta: trattate la UI come un mestiere artigianale. Applicate un'esecuzione da qualità museale alle composizioni visive con pattern sistematici ed estetiche raffinate.

04 Mettila al lavoro

Installa ui-styling in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi ui-styling a Claude Code, Codex o il tuo Agent

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

Forma generica del CLI skills per .claude/skills/ui-styling/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Build a responsive dashboard with a three-column card grid layout that shows analytics metrics. Add a data table component with sorting and filtering for user records. Implement dark mode using next-themes with consistent color variants across all cards and table elements. Include a form dialog with email and password validation using react-hook-form and zod schema. Make sure all interactive elements have proper focus states and keyboard navigation.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Testate i breakpoint responsive a sm, md, lg, xl e 2xl per assicurarvi che il layout mobile-first si adatti correttamente.
Convalidate l'accessibilità testando la navigazione da tastiera, la gestione del focus e gli annunci degli screen reader su dialoghi e form.
Rivedete la validazione dei form con react-hook-form e il resolver zod per assicurarvi che i messaggi di errore vengano mostrati correttamente.

In OpenDesign importate ui-styling dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionatelo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
File della skill: .claude/skills/ui-styling/SKILL.md Checksum del contenuto registrato alla verifica; commit 7f69fed
License: Apache-2.0 Da .claude/skills/ui-styling/LICENSE.txt; SKILL.md dice "MIT". Il LICENSE.txt a livello di file dice Apache-2.0 mentre il front matter dice MIT; elencato in base alla licenza a livello di file.
Stelle del repository: 127.450 Snapshot GitHub scattata il 2026-09-14 per l'intero repository nextlevelbuilder/ui-ux-pro-max-skill, che contiene 7 skill in questo catalogo. Non è una valutazione o un conteggio di utilizzo per ui-styling.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Quando Usare Questo SkillElenca gli scenari: framework React, componenti accessibili, layout responsive, dark mode, design system, design visivi.
Stack PrincipaleDescrive i componenti shadcn/ui, lo styling con le utility Tailwind e i livelli di design visivo su canvas.
Percorsi degli ScriptSpiega che i percorsi degli script sono relativi alla directory dello skill, non alla root del progetto.
Avvio RapidoMostra l'inizializzazione di shadcn/ui, l'installazione dei componenti e la configurazione solo Tailwind per Vite.
Guida alla Libreria di ComponentiRimanda a shadcn-components.md, che copre form, layout, overlay, feedback e componenti di visualizzazione.
Tema e PersonalizzazioneRimanda a shadcn-theming.md per la modalità scura, le variabili CSS, i colori e le varianti dei componenti.
Pattern di AccessibilitàRimanda a shadcn-accessibility.md per ARIA, navigazione da tastiera, gestione del focus e screen reader.
Utility TailwindRimanda a tailwind-utilities.md per layout, spaziatura, tipografia, colori, bordi e ombre.
Design ResponsivoRimanda a tailwind-responsive.md per breakpoint mobile-first e pattern di utility responsive.
Personalizzazione TailwindRimanda a tailwind-customization.md per la struttura della configurazione, utility personalizzate, plugin ed estensioni del tema.
Sistema di Design VisivoRimanda a canvas-design-system.md per la filosofia di design, la comunicazione visiva e composizioni sofisticate.
Script di UtilityDescrive shadcn_add.py per l'installazione dei componenti e tailwind_config_gen.py per la generazione della configurazione.

Descrizione della skill

"Crea interfacce utente belle e accessibili con i componenti shadcn/ui (basati su Radix UI + Tailwind), lo stile utility-first di Tailwind CSS e design visivi basati su canvas. Usa quando costruisci interfacce utente, implementi design system, crei layout responsive, aggiungi componenti accessibili (dialog, dropdown, form, tabelle), personalizzi temi e colori, implementi la dark mode, generi design visivi e poster, o stabilisci pattern di stile coerenti nelle applicazioni."

Descrizione dal front-matter del SKILL.md. Il file completo è di circa 10.626 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla Skill ui-styling

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Quali formati di output produce il sistema di design visivo?

Il livello di design visivo basato su canvas crea composizioni di qualità museale per design visivi, poster e materiali di branding. Segue un approccio guidato dalla filosofia con testo minimo e massimo impatto visivo.

UI Styling

Esegui ui-styling su un task di design UI reale.

Scarica OpenDesign, importa ui-styling dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

Cosa fa la skill ui-styling in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando Usare la Skill ui-styling

Buona applicazione

Conosci i limiti

Cosa fornire

Regole che la Skill ui-styling Fornisce a Claude Code e Codex

Responsive Mobile-first

Estrazione Utility-first

Percorsi degli Script Relativi alla Directory dello Skill

Uso di Componenti Accessibility-first

Design Token per la Coerenza

Sicurezza dei Tipi con TypeScript

Evitate Nomi di Classi Dinamici

Standard di Artigianalità Esperta