UI styling — shadcn/ui + Tailwind + canvas design - **name_fr:** Style UI — shadcn/ui + Tailwind + design canvas - **tl_en:** Build beautiful accessible interfaces with shadcn/ui components, Tailwind utility styling, theming, dark mode, and canvas-grade visual compositions - **tl_fr:** Construire de belles interfaces accessibles avec composants shadcn/ui, style utilitaire Tailwind, thèmes, mode sombre et compositions visuelles haut de gamme - **creator:** @nextlevelbuilder - **type:** Agent skill - **url:** https://github.com/nextlevelbuilder/ui-ux-pro-max-skill - **cat:** Design - **kws:** shadcn, tailwind css, ui design, accessibility, dark mode, react, design system, theming - **license:** MIT **Description EN:** Curated by Skill Harbor — a UI-building skill by @nextlevelbuilder that combines three layers: shadcn/ui (Radix-based, copy-paste accessible components), Tailwind CSS (utility-first styling, mobile-first responsive design), and a canvas-based visual design philosophy (museum-quality compositions, visual communication over text). Includes quick-start setups for both stacks, a component-library guide with usage patterns, theme customization and dark-mode implementation, accessibility patterns (ARIA, keyboard navigation, focus management), the full Tailwind utility/reference set (layout, responsive, customization), and two Python utility scripts (`shadcn_add.py` for component installation with dependency handling, `tailwind_config_gen.py` for config generation — which refuses to overwrite an existing config without review). Honest caveats: documentation is anchored on React-based frameworks (Next.js, Vite, Remix, Astro) plus standalone visual designs; the skill references external docs (shadcn llms.txt, Tailwind docs) that must exist at use time; it teaches craftsmanship conventions, not brand identity. Credit to its creator. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh. **Description FR:** Sélectionné par Skill Harbor — un skill de construction UI par @nextlevelbuilder qui combine trois couches : shadcn/ui (composants accessibles copier-coller basés sur Radix), Tailwind CSS (style utilitaire, design responsive mobile-first) et une philosophie de design visuel canvas (compositions de qualité muséale, communication visuelle plutôt que textuelle). Inclut des démarrages rapides pour les deux stacks, un guide de bibliothèque de composants avec patterns d'usage, personnalisation de thèmes et mode sombre, patterns d'accessibilité (ARIA, navigation clavier, gestion du focus), tout le référentiel utilitaire Tailwind (layout, responsive, customisation) et deux scripts Python utilitaires (`shadcn_add.py` pour installer des composants avec gestion des dépendances, `tailwind_config_gen.py` pour générer la config — qui refuse d'écraser une config existante sans révision). Bémols honnêtes : la documentation est ancrée sur les frameworks React (Next.js, Vite, Remix, Astro) plus des designs visuels autonomes ; le skill référence des docs externes (llms.txt shadcn, docs Tailwind) qui doivent exister au moment de l'usage ; il enseigne des conventions de craftsmanship, pas une identité de marque. Crédit au créateur. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh. **Install prompt EN:** ``` Prerequisites: a React-based project (Next.js, Vite, Remix, Astro) with npm/npx; no accounts or API keys needed. Install "UI styling — shadcn/ui + Tailwind + canvas design" for me. It teaches an agent to build beautiful accessible interfaces with shadcn/ui components (Radix-based, copy-paste), Tailwind utility styling, theming and dark mode, accessibility patterns, plus a canvas-based visual design philosophy — including two Python helper scripts for component installation and config generation. Repository: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/ui-styling/SKILL.md 1. Fetch the SKILL.md file (and any helper files, including the references/ and scripts/ folders) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "ui-styling". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. save my API key in the vault). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet React (Next.js, Vite, Remix, Astro) avec npm/npx ; aucun compte ni clé API requis. Installe-moi « UI styling — shadcn/ui + Tailwind + canvas design ». Il apprend à un agent à construire de belles interfaces accessibles avec les composants shadcn/ui (basés sur Radix, copier-coller), le style utilitaire Tailwind, les thèmes et le mode sombre, les patterns d'accessibilité, plus une philosophie de design visuel canvas — avec deux scripts Python auxiliaires pour l'installation de composants et la génération de config. Dépôt : https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/ui-styling/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers auxiliaires, y compris les dossiers references/ et scripts/) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est le cas ici ; ARRÊTE-TOI sur le moindre drapeau rouge et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers auxiliaires dans le dossier des skills de l'agent, dans un dossier nommé « ui-styling ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. enregistrer ma clé API dans le coffre). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne l'exige jamais sauf si c'est dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` --- ---

Build beautiful accessible interfaces with shadcn/ui components, Tailwind utility styling, theming, dark mode, and canvas-grade visual compositions - **tl_fr:** Construire de belles interfaces accessibles avec composants shadcn/ui, style utilitaire Tailwind, thèmes, mode sombre et compositions visuelles haut de gamme - **creator:** @nextlevelbuilder - **type:** Agent skill - **url:** https://github.com/nextlevelbuilder/ui-ux-pro-max-skill - **cat:** Design - **kws:** shadcn, tailwind css, ui design, accessibility, dark mode, react, design system, theming - **license:** MIT **Description EN:** Curated by Skill Harbor — a UI-building skill by @nextlevelbuilder that combines three layers: shadcn/ui (Radix-based, copy-paste accessible components), Tailwind CSS (utility-first styling, mobile-first responsive design), and a canvas-based visual design philosophy (museum-quality compositions, visual communication over text). Includes quick-start setups for both stacks, a component-library guide with usage patterns, theme customization and dark-mode implementation, accessibility patterns (ARIA, keyboard navigation, focus management), the full Tailwind utility/reference set (layout, responsive, customization), and two Python utility scripts (`shadcn_add.py` for component installation with dependency handling, `tailwind_config_gen.py` for config generation — which refuses to overwrite an existing config without review). Honest caveats: documentation is anchored on React-based frameworks (Next.js, Vite, Remix, Astro) plus standalone visual designs; the skill references external docs (shadcn llms.txt, Tailwind docs) that must exist at use time; it teaches craftsmanship conventions, not brand identity. Credit to its creator. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh. **Description FR:** Sélectionné par Skill Harbor — un skill de construction UI par @nextlevelbuilder qui combine trois couches : shadcn/ui (composants accessibles copier-coller basés sur Radix), Tailwind CSS (style utilitaire, design responsive mobile-first) et une philosophie de design visuel canvas (compositions de qualité muséale, communication visuelle plutôt que textuelle). Inclut des démarrages rapides pour les deux stacks, un guide de bibliothèque de composants avec patterns d'usage, personnalisation de thèmes et mode sombre, patterns d'accessibilité (ARIA, navigation clavier, gestion du focus), tout le référentiel utilitaire Tailwind (layout, responsive, customisation) et deux scripts Python utilitaires (`shadcn_add.py` pour installer des composants avec gestion des dépendances, `tailwind_config_gen.py` pour générer la config — qui refuse d'écraser une config existante sans révision). Bémols honnêtes : la documentation est ancrée sur les frameworks React (Next.js, Vite, Remix, Astro) plus des designs visuels autonomes ; le skill référence des docs externes (llms.txt shadcn, docs Tailwind) qui doivent exister au moment de l'usage ; il enseigne des conventions de craftsmanship, pas une identité de marque. Crédit au créateur. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh. **Install prompt EN:** ``` Prerequisites: a React-based project (Next.js, Vite, Remix, Astro) with npm/npx; no accounts or API keys needed. Install "UI styling — shadcn/ui + Tailwind + canvas design" for me. It teaches an agent to build beautiful accessible interfaces with shadcn/ui components (Radix-based, copy-paste), Tailwind utility styling, theming and dark mode, accessibility patterns, plus a canvas-based visual design philosophy — including two Python helper scripts for component installation and config generation. Repository: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/ui-styling/SKILL.md 1. Fetch the SKILL.md file (and any helper files, including the references/ and scripts/ folders) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "ui-styling". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. save my API key in the vault). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet React (Next.js, Vite, Remix, Astro) avec npm/npx ; aucun compte ni clé API requis. Installe-moi « UI styling — shadcn/ui + Tailwind + canvas design ». Il apprend à un agent à construire de belles interfaces accessibles avec les composants shadcn/ui (basés sur Radix, copier-coller), le style utilitaire Tailwind, les thèmes et le mode sombre, les patterns d'accessibilité, plus une philosophie de design visuel canvas — avec deux scripts Python auxiliaires pour l'installation de composants et la génération de config. Dépôt : https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/ui-styling/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers auxiliaires, y compris les dossiers references/ et scripts/) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est le cas ici ; ARRÊTE-TOI sur le moindre drapeau rouge et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers auxiliaires dans le dossier des skills de l'agent, dans un dossier nommé « ui-styling ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. enregistrer ma clé API dans le coffre). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne l'exige jamais sauf si c'est dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` --- ---

Version: