FRmicrow/frontend-design
.claude/skills/frontend-design/SKILL.md
Create premium React components and pages for statFootV3 using the Design System V3. Use when building UI components, pages, dashboards, or styling/beautifying any view in the frontend. Generates distinctive code using ds-* classes, CSS tokens, and the Visual Manifesto aesthetic — never generic AI aesthetics.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add FRmicrow/dataFootV1 frontend-designInstall 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.0s2 files scanned
SKILL.md
- name:
- frontend-design
- description:
- Create premium React components and pages for statFootV3 using the Design System V3. Use when building UI components, pages, dashboards, or styling/beautifying any view in the frontend. Generates distinctive code using ds-* classes, CSS tokens, and the Visual Manifesto aesthetic — never generic AI aesthetics.
This skill guides creation of premium, production-grade frontend interfaces for statFootV3 that respect the existing Design System V3 and Visual Manifesto. It enforces intentional design philosophy before any code is written.
Phase 0 — Design Philosophy (MANDATORY FIRST STEP)
Before writing any code, commit to a clear aesthetic direction by answering:
- Purpose — What problem does this UI solve? Who uses it and in what context?
- Tone — Pick an intentional direction: analytical/data-dense, immersive/cinematic, brutalist/raw, refined/minimal, editorial/magazine. Not generic. Not purple-gradient-on-white.
- Differentiation — What is the ONE thing a user will remember about this screen?
- Design System Audit — Which existing
ds-*components cover this feature? List them before creating anything new.
Document this in docs/features/Vxx-[Name]/DESIGN_PHILOSOPHY.md before proceeding. Get user validation.
Implementation Rules
Design System First (ABSOLUTE RULE)
Check frontend/src/design-system/ before writing any style. Use existing components:
ds-card, ds-badge, ds-button, ds-input, ds-select, ds-table,
ds-tabs, ds-progress, ds-skeleton, ds-metric-card, ds-profile-header,
ds-fixture-row, ds-league-card, ds-player-card, ds-navbar
Use CSS variables from tokens.css — NEVER hardcode values:
/* CORRECT */
color: var(--color-primary-500);
padding: var(--spacing-md);
border-radius: var(--radius-md);
/* FORBIDDEN */
color: #8b5cf6;
padding: 24px;
border-radius: 12px;
See references/design-tokens.md for the full token reference.
Typography
Avoid Inter for display text. Use the --font-family token for body, but override headings with a distinctive font (e.g. 'DM Sans', 'Sora', 'Outfit'). Pair a display font with the body font — see Visual Manifesto rule.
Motion & Micro-interactions
- Page/section entry: staggered reveal with
animation-delay, not instant pop - Interactive elements:
transition: var(--transition-base)on all hover/active states - Focus: minimum
box-shadow: var(--focus-ring)on all interactive elements - One high-impact orchestrated animation per page > many scattered micro-interactions
Loading States
Every component that fetches data must render a <Skeleton> from the design system while loading. No spinners, no blank spaces.
import Skeleton from '../../../design-system/components/Skeleton';
if (isLoading) return <Skeleton variant="card" />;
Performance
- Wrap expensive computations in
useMemo - Wrap callbacks passed to children in
useCallback - Never run heavy transforms (sort, filter, aggregate) inside render
NEVER LIST
style={{...}}with more than 2 properties — use className + CSS variables- Hardcoded hex values,
rgb(),rgba()in JSX — use tokens - Components without a loading state
- Components without an error state
- Raw
<div>grids whends-gridor layout tokens exist - Inter/Arial as display/heading font
- Pure
#FF0000,#0000FFprimary colors
Example Flow
User: "Build a player comparison module."
Agent:
- Read
frontend/src/design-system/components/— findMetricCard,Table,Tabs - Create
DESIGN_PHILOSOPHY.md: tone = "analytical/data-dense, dark observatory" - Wait for user validation
- Implement using
ds-tabsfor navigation,ds-metric-cardfor stats,ds-skeletonfor loading - Apply staggered entry animation on metric cards
- Pass to
qa-automation-v2skill for testing
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