FRmicrow/component-architecture
.claude/skills/frontend/component-architecture/SKILL.md
Structurer les composants React. Utiliser quand on organise des composants dans frontend/src/components/v3/.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add FRmicrow/dataFootV1 component-architectureInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 2:00 AM4.0s1 file scanned
SKILL.md
- name:
- component-architecture
- description:
- Structurer les composants React. Utiliser quand on organise des composants dans frontend/src/components/v3/.
- risk:
- safe
When to use
Utilisez cette compétence à la création ou à la refonte de l’interface pour poser des bases solides et éviter la dette technique.
Instructions
- Déterminez les pages, sections et composants atomiques en vous basant sur les maquettes et les exigences.
- Séparez les composants fonctionnels (logique, état) des composants de présentation (UI pure) afin de favoriser la réutilisation.
- Organisez votre arborescence en dossiers logiques (ex.
pages/,layouts/,components/v3/modules/,components/v3/pages/). - Passez les données via des propriétés (props) typées, et évitez les dépendances implicites pour faciliter le test et la maintenance.
- Documentez les composants en précisant leurs props, leur comportement et éventuellement des exemples d’utilisation.
Example
Créez une NavBar dans components/v3/pages/NavBar.tsx qui utilise des composants NavItem de components/v3/modules/ et reçoit une liste de liens en prop.
Limitations
Cette compétence se concentre sur la structure. La gestion de l’état global et la stylisation détaillée sont abordées dans d’autres compétences.
Related Skills
FRmicrow/unit-testing-node
development
VerifiedTrustedCommunity
Écrire des tests unitaires Node.js. Utiliser quand on teste une fonction isolée avec Vitest dans backend/test/.
SKILL.mdUpdated Apr 16, 2026
FRmicrow/integration-testing
testing
VerifiedTrustedCommunity
Tester l'intégration entre services. Utiliser quand on vérifie l'interaction contrôleur/service avec Supertest + Vitest.
SKILL.mdUpdated Apr 16, 2026
FRmicrow/frontend-testing-react
development
VerifiedTrustedCommunity
Tester les composants React avec Vitest + Testing Library. Utiliser quand on teste le rendu ou les interactions.
SKILL.mdUpdated Apr 16, 2026
FRmicrow/e2e-testing-playwright
testing
VerifiedTrustedCommunity
Écrire des tests end-to-end Playwright. Utiliser quand on teste l'application complète du point de vue utilisateur.
SKILL.mdUpdated Apr 16, 2026