coss UI component skill — Base UI primitives with a shadcn-like DX
Utiliser correctement les primitives UI coss (imports, composition, accessibilité, style Tailwind) — 54 primitives, exemples de particules, guides de migration shadcn/Radix
- Quoi
- Utiliser correctement les primitives UI coss (imports, composition, accessibilité, style Tailwind) — 54 primitives, exemples de particules, guides de migration shadcn/Radix
- Coût
- Gratuit
- Prérequis
- un projet React utilisant Tailwind CSS v4 et @base-ui/react ; tooling Node.js ; vérifiez vous-même les conditions de licence — le frontmatter du SKILL.md dit MIT mais la racine du repo est AGPL-3.0 (licence niveau repo retenue ici)
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill de @cosscom pour bien utiliser les composants UI coss : une bibliothèque de composants construite sur Base UI avec une expérience développeur façon shadcn plus un large catalogue de particules. Le skill enseigne à choisir la bonne primitive pour une tâche UI, à écrire du code d'usage correct (imports, composition, props), à éviter les erreurs classiques de migration depuis shadcn/Radix, et à se référer aux exemples de particules pour des patterns pratiques proches de la production. Les 54 primitives ont chacune un guide de référence dédié (dialog, menu, context-menu, select, form, input-group, toast et plus) avec un index de registre de composants ; les fichiers de règles couvrent le style (tokens Tailwind, conventions d'icônes, sélecteurs data-slot), les formulaires, la composition (hiérarchies trigger/popup, contrôles groupés), la migration, les choix de segmented-control et les portal props. Règles d'usage critiques : ne jamais inventer d'API coss — vérifier d'abord contre la doc ; préserver les hiérarchies trigger/contenu pour Dialog/Menu/Select/Popover/Tooltip ; garder les labels d'accessibilité et la sémantique d'erreur ; préférer les exports stylés et n'utiliser les exports `*Primitive` que quand la composition custom l'exige ; consulter les guides des primitives à haut risque avant les plus délicates. Installation via `npx shadcn@latest add @coss/<component>` ou manuellement (dépendances + copie des fichiers de composants + correction des imports), avec sources de vérité dans la doc du repo, le registre de particules, `coss.com/ui/particles` et le `llms.txt` de la doc pour les agents. Bémols honnêtes : **nécessite Tailwind CSS v4 et @base-ui/react** — pas plug-and-play pour d'autres setups ; **conflit de licence à noter : le frontmatter du SKILL.md dit MIT mais la licence racine du repo est AGPL-3.0 — AGPL-3.0 retenue ici (niveau repo), vérifiez les conditions avant réutilisation** ; le skill est un guide de code, pas le code des composants lui-même. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet React utilisant Tailwind CSS v4 et @base-ui/react ; tooling Node.js ; vérifiez vous-même les conditions de licence — le frontmatter du SKILL.md dit MIT mais la racine du repo est AGPL-3.0 (licence niveau repo retenue ici) Installe-moi « Skill de composants UI coss — primitives Base UI avec DX façon shadcn ». Il donne à mon agent le guide de @cosscom pour bien utiliser les composants UI coss : 54 primitives avec guides de référence par primitive et index de registre, exemples de particules pour des patterns proches de la production, règles d'usage critiques (vérifier les API contre la doc, préserver les hiérarchies trigger/contenu, garder les labels d'accessibilité), fichiers de règles pour style/formulaires/composition/migration, et installation via npx shadcn@latest add @coss/<component> ou manuellement — avec la doc, le registre de particules et llms.txt comme sources de vérité. Dépôt : https://github.com/cosscom/coss/blob/main/apps/ui/skills/coss/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, 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 bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « coss ». 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. installer les dépendances coss (Tailwind CSS v4, @base-ui/react) et ajouter les composants avec la CLI shadcn ; puis pointer l'agent vers la tâche UI). 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 s'il figure 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.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.