·frontend-designer
</>

frontend-designer

Créez des interfaces frontales de qualité production avec React, Tailwind CSS et shadcn/ui modernes. Cinq modes : échafauder des projets, créer des composants, configurer des thèmes et concevoir des jetons, refactoriser les styles et auditer les bases de code. Encode les meilleures pratiques pour les composants serveur React 19 (dépendants du framework), la première configuration CSS TailwindCSS v4, shadcn/ui avec les primitives Radix, le CSS moderne (requêtes de conteneur, :has(), transitions de vue, animations pilotées par défilement), la typographie Monaspace et Vite 6. Remplace la compétence de conception frontale. À utiliser lors de la création, du style, de la création de thèmes ou de l'amélioration de tout projet frontend. PAS pour les API backend, la conception de bases de données, DevOps, les frameworks de test, les bibliothèques de gestion d'état, le routage ou la configuration complète du framework SSR.

23Installations·2Tendance·@wyattowalsh

Installation

$npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer

Comment installer frontend-designer

Installez rapidement le skill IA frontend-designer dans votre environnement de développement via la ligne de commande

  1. Ouvrir le Terminal: Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.)
  2. Exécuter la commande d'installation: Copiez et exécutez cette commande : npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer
  3. Vérifier l'installation: Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw

Source : wyattowalsh/agents.

Build production-grade frontend interfaces with modern React, TailwindCSS v4, and shadcn/ui. Five modes from project scaffolding to codebase audit.

Input: $ARGUMENTS — mode keyword + target, natural language UI description, or file path.

| server component | React component rendered on the server; default in Next.js/Remix App Router | "SSR component" | | client component | React component with "use client" directive; runs in the browser | "CSR component" | | design token | CSS custom property holding a design decision (color, spacing, font) | "CSS variable" (too generic) |

Créez des interfaces frontales de qualité production avec React, Tailwind CSS et shadcn/ui modernes. Cinq modes : échafauder des projets, créer des composants, configurer des thèmes et concevoir des jetons, refactoriser les styles et auditer les bases de code. Encode les meilleures pratiques pour les composants serveur React 19 (dépendants du framework), la première configuration CSS TailwindCSS v4, shadcn/ui avec les primitives Radix, le CSS moderne (requêtes de conteneur, :has(), transitions de vue, animations pilotées par défilement), la typographie Monaspace et Vite 6. Remplace la compétence de conception frontale. À utiliser lors de la création, du style, de la création de thèmes ou de l'amélioration de tout projet frontend. PAS pour les API backend, la conception de bases de données, DevOps, les frameworks de test, les bibliothèques de gestion d'état, le routage ou la configuration complète du framework SSR. Source : wyattowalsh/agents.

Faits (prêts à citer)

Champs et commandes stables pour les citations IA/recherche.

Commande d'installation
npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer
Catégorie
</>Développement
Vérifié
Première apparition
2026-02-25
Mis à jour
2026-03-10

Browse more skills from wyattowalsh/agents

Réponses rapides

Qu'est-ce que frontend-designer ?

Créez des interfaces frontales de qualité production avec React, Tailwind CSS et shadcn/ui modernes. Cinq modes : échafauder des projets, créer des composants, configurer des thèmes et concevoir des jetons, refactoriser les styles et auditer les bases de code. Encode les meilleures pratiques pour les composants serveur React 19 (dépendants du framework), la première configuration CSS TailwindCSS v4, shadcn/ui avec les primitives Radix, le CSS moderne (requêtes de conteneur, :has(), transitions de vue, animations pilotées par défilement), la typographie Monaspace et Vite 6. Remplace la compétence de conception frontale. À utiliser lors de la création, du style, de la création de thèmes ou de l'amélioration de tout projet frontend. PAS pour les API backend, la conception de bases de données, DevOps, les frameworks de test, les bibliothèques de gestion d'état, le routage ou la configuration complète du framework SSR. Source : wyattowalsh/agents.

Comment installer frontend-designer ?

Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw

Où se trouve le dépôt source ?

https://github.com/wyattowalsh/agents