# Scaffold Component

> Créer un composant React/TypeScript/Tailwind. TRIGGERS : créer composant, scaffold-ui, nouveau composant, ajouter composant

- Skill: `majiayu000/scaffold-component-4` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/scaffold-component-4`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/scaffold-component-4/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/scaffold-component-4

---


# Scaffold Component React

## Procédure

### 1. Vérifier l'existant
```bash
# Chercher composants similaires
find src/components -name "*.tsx" -type f | head -20
```

### 2. Créer le composant

Structure standard :

```tsx
import { useState } from 'react';

interface ${ComponentName}Props {
  // Props typées
}

export function ${ComponentName}({ ...props }: ${ComponentName}Props) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // États
  if (loading) {
    return <div data-testid="${component-name}-loading">Chargement...</div>;
  }

  if (error) {
    return (
      <div data-testid="${component-name}-error" className="text-red-500">
        {error}
      </div>
    );
  }

  return (
    <div data-testid="${component-name}">
      {/* Contenu */}
    </div>
  );
}
```

### 3. Checklist

- [ ] Props typées avec interface
- [ ] États : loading, vide, erreur, succès
- [ ] `data-testid` sur éléments critiques
- [ ] Pas de secrets dans le code

### 4. Valider

Utiliser `/validate-ui` pour confirmer 0 erreur console.