shadcn/ui component patterns - **name_fr:** Patterns de composants shadcn/ui - **tl_en:** Set up shadcn/ui and build accessible React components — forms with Zod, dialogs, tables, toasts, charts - **tl_fr:** Mettre en place shadcn/ui et construire des composants React accessibles — formulaires avec Zod, dialogues, tableaux, toasts, graphiques - **creator:** @giuseppe-trisciuoglio - **type:** Agent skill - **url:** https://github.com/giuseppe-trisciuoglio/developer-kit - **cat:** Frontend - **kws:** shadcn, react, ui components, radix, tailwind, forms, zod, react hook form, charts, accessibility - **license:** MIT **Description EN:** Curated by Skill Harbor — a complete shadcn/ui pattern library for an agent building React interfaces: project initialization (`npx shadcn@latest init`), a component quick-reference table (button, input, form, card, dialog, sheet, select, toast, table, menubar, chart), copy-paste implementations for forms with React Hook Form + Zod validation, dialogs, toasts and Recharts bar charts, plus best practices (accessibility via Radix primitives, client-component rules, theming with CSS variables, dark mode). By @giuseppe-trisciuoglio, listed here with credit to its creator. Honest caveats: components are copied into your project, not a versioned dependency — you own the code; the skill's own warnings remind you to only install from trusted registries and to verify generated code before production. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — une bibliothèque complète de patterns shadcn/ui pour un agent qui construit des interfaces React : initialisation du projet (`npx shadcn@latest init`), tableau de référence rapide des composants (button, input, form, card, dialog, sheet, select, toast, table, menubar, chart), implémentations copiables pour formulaires avec React Hook Form + validation Zod, dialogues, toasts et graphiques en barres Recharts, plus les bonnes pratiques (accessibilité via les primitives Radix, règles des composants client, thématisation avec variables CSS, mode sombre). Crédit : @giuseppe-trisciuoglio. Bémols honnêtes : les composants sont copiés dans votre projet, pas une dépendance versionnée — le code vous appartient ; le skill lui-même rappelle de n'installer que depuis des registres de confiance et de vérifier le code généré avant la production. Découvert via skills.sh. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. **Install prompt EN:** ``` Prerequisites: a React project (Next.js recommended); Tailwind CSS set up; Node.js and npm/npx Install "shadcn/ui component patterns" for me. Give my agent the complete shadcn/ui pattern library — project init, component quick reference, forms with React Hook Form + Zod, dialogs, toasts, charts, theming and dark mode, with copy-paste implementations and best practices Repository: https://github.com/giuseppe-trisciuoglio/developer-kit/blob/main/plugins/developer-kit-typescript/skills/shadcn-ui/SKILL.md 1. Fetch the SKILL.md file for the giuseppe-trisciuoglio-developer-kit-shadcn-ui skill from the repository into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md 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 into the agent's skills directory, in a folder named "giuseppe-trisciuoglio-developer-kit-shadcn-ui". 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. run npx shadcn@latest init in my project and add the components I need; verify the registry source before installing). 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 recommandé) ; Tailwind CSS configuré ; Node.js et npm/npx Installe-moi « Patterns de composants shadcn/ui ». Donne à mon agent la bibliothèque complète de patterns shadcn/ui — init du projet, référence rapide des composants, formulaires avec React Hook Form + Zod, dialogues, toasts, graphiques, thématisation et mode sombre, avec implémentations copiables et bonnes pratiques Dépôt : https://github.com/giuseppe-trisciuoglio/developer-kit/blob/main/plugins/developer-kit-typescript/skills/shadcn-ui/SKILL.md 1. Récupère le fichier SKILL.md du skill giuseppe-trisciuoglio-developer-kit-shadcn-ui depuis le 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 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 passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie SKILL.md dans le répertoire des skills de l'agent, dans un dossier nommé « giuseppe-trisciuoglio-developer-kit-shadcn-ui ». 4. Vérifie sans aucun appel 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. lancer npx shadcn@latest init dans mon projet et ajouter les composants voulus ; vérifier la source du registre avant d'installer). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger 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. ``` ---

Mettre en place shadcn/ui et construire des composants React accessibles — formulaires avec Zod, dialogues, tableaux, toasts, graphiques - **creator:** @giuseppe-trisciuoglio - **type:** Agent skill - **url:** https://github.com/giuseppe-trisciuoglio/developer-kit - **cat:** Frontend - **kws:** shadcn, react, ui components, radix, tailwind, forms, zod, react hook form, charts, accessibility - **license:** MIT **Description EN:** Curated by Skill Harbor — a complete shadcn/ui pattern library for an agent building React interfaces: project initialization (`npx shadcn@latest init`), a component quick-reference table (button, input, form, card, dialog, sheet, select, toast, table, menubar, chart), copy-paste implementations for forms with React Hook Form + Zod validation, dialogs, toasts and Recharts bar charts, plus best practices (accessibility via Radix primitives, client-component rules, theming with CSS variables, dark mode). By @giuseppe-trisciuoglio, listed here with credit to its creator. Honest caveats: components are copied into your project, not a versioned dependency — you own the code; the skill's own warnings remind you to only install from trusted registries and to verify generated code before production. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — une bibliothèque complète de patterns shadcn/ui pour un agent qui construit des interfaces React : initialisation du projet (`npx shadcn@latest init`), tableau de référence rapide des composants (button, input, form, card, dialog, sheet, select, toast, table, menubar, chart), implémentations copiables pour formulaires avec React Hook Form + validation Zod, dialogues, toasts et graphiques en barres Recharts, plus les bonnes pratiques (accessibilité via les primitives Radix, règles des composants client, thématisation avec variables CSS, mode sombre). Crédit : @giuseppe-trisciuoglio. Bémols honnêtes : les composants sont copiés dans votre projet, pas une dépendance versionnée — le code vous appartient ; le skill lui-même rappelle de n'installer que depuis des registres de confiance et de vérifier le code généré avant la production. Découvert via skills.sh. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. **Install prompt EN:** ``` Prerequisites: a React project (Next.js recommended); Tailwind CSS set up; Node.js and npm/npx Install "shadcn/ui component patterns" for me. Give my agent the complete shadcn/ui pattern library — project init, component quick reference, forms with React Hook Form + Zod, dialogs, toasts, charts, theming and dark mode, with copy-paste implementations and best practices Repository: https://github.com/giuseppe-trisciuoglio/developer-kit/blob/main/plugins/developer-kit-typescript/skills/shadcn-ui/SKILL.md 1. Fetch the SKILL.md file for the giuseppe-trisciuoglio-developer-kit-shadcn-ui skill from the repository into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md 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 into the agent's skills directory, in a folder named "giuseppe-trisciuoglio-developer-kit-shadcn-ui". 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. run npx shadcn@latest init in my project and add the components I need; verify the registry source before installing). 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 recommandé) ; Tailwind CSS configuré ; Node.js et npm/npx Installe-moi « Patterns de composants shadcn/ui ». Donne à mon agent la bibliothèque complète de patterns shadcn/ui — init du projet, référence rapide des composants, formulaires avec React Hook Form + Zod, dialogues, toasts, graphiques, thématisation et mode sombre, avec implémentations copiables et bonnes pratiques Dépôt : https://github.com/giuseppe-trisciuoglio/developer-kit/blob/main/plugins/developer-kit-typescript/skills/shadcn-ui/SKILL.md 1. Récupère le fichier SKILL.md du skill giuseppe-trisciuoglio-developer-kit-shadcn-ui depuis le 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 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 passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie SKILL.md dans le répertoire des skills de l'agent, dans un dossier nommé « giuseppe-trisciuoglio-developer-kit-shadcn-ui ». 4. Vérifie sans aucun appel 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. lancer npx shadcn@latest init dans mon projet et ajouter les composants voulus ; vérifier la source du registre avant d'installer). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger 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 :