FRmicrow/web-dev
.agents/skills/web-dev/SKILL.md
Helps with React, Next.js, TypeScript, and CSS development. Use when building components, pages, or handling frontend/backend logic integration.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add FRmicrow/dataFootV1 web-devInstall 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.5s1 file scanned
SKILL.md
- name:
- web-dev
- description:
- Helps with React, Next.js, TypeScript, and CSS development. Use when building components, pages, or handling frontend/backend logic integration.
Web Development Skill
This skill provides comprehensive guidance for building and maintaining the statFootV3 web application.
When to use this skill
- Use this when creating or modifying React components in
frontend/src/. - This is helpful for implementing Next.js-style routing or state management.
- Use when working with TypeScript types and interfaces.
- Use when integrating frontend services with the backend API.
How to use it
Frontend Standards
- Framework: React with Vite.
- Styling: Vanilla CSS with CSS Modules. Use tokens from
frontend/src/design-system/tokens.css. - API: Centralized axios client in
frontend/src/services/api.js. - Types: Ensure all props and data structures are typed in
.tsor.tsxfiles.
Component Structure
- Logic: Use hooks for side effects and data fetching.
- View: Keep JSX clean and semantic.
- Styles: Use the defined design system classes (e.g.,
ds-card).
Best Practices
- Use
useMemoanduseCallbackfor performance optimization. - Ensure every data-fetching component has a loading state (Skeleton) and an error state.
- Follow the one-way data flow principle.
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