| name | f0-component-patterns |
| description | Detailed reference for F0 React component architecture, context/state, styling, testing, i18n, and animation patterns with code examples. Load when building or modifying components in the F0 design system. |
F0 Component Patterns
Detailed patterns and code examples for building components in the F0 React library. This skill supplements packages/react/AGENTS.md with in-depth reference material.
When to Use
Load this skill when you need to:
- Build a new F0 component from scratch
- Modify an existing component's architecture
- Implement context/state management patterns
- Add styling with CVA, Tailwind, or Framer Motion
- Add i18n support to a component
Quick Reference
| Pattern | Reference File |
|---|
Component architecture (privateProps, forwardRef, withSkeleton, withDataTestId, index exports, @/ui/ layer) | references/component-architecture.md |
| Context initialization, controlled/uncontrolled, async onClick, event naming | references/context-and-state.md |
| CVA, cn(), focusRing(), container queries, Framer Motion, design tokens | references/styling-and-animation.md |
| Unit tests (zeroRender, vi.hoisted(), fake timers, deferred promises) | Load the f0-unit-testing skill |
| useI18n, defaultTranslations, TranslationsType, plurals, interpolation | references/i18n-patterns.md |
Key Rules
- Always check
packages/react/AGENTS.md first — it has the concise rules. This skill provides the detailed "how".
- Every new component starts in
experimental/ — see the F0 component lifecycle. Use experimentalComponent() wrapper from @/lib/experimental in index.tsx. Only Foundations promotes to stable.
- Never import Radix directly — use
@/ui/ wrappers.
- Never use
any — find the proper type.
- New components must start with
F0 prefix.
- Tests use
zeroRender aliased as render, never @testing-library/react's render.
- All public exported components must expose a
dataTestId prop — either via the withDataTestId HOC (most components) or via the inline DataTestIdWrapper + WithDataTestIdProps pattern (generic components, discriminated union components, portal components). The key check: does the exported component accept dataTestId in its props? See references/component-architecture.md for patterns, composition order, and the decision table.
- Deprecation requires three JSDoc tags:
@deprecated, @removeIn, @migration. See packages/react/AGENTS.md — Deprecation, and the Deprecation & Removal policy.
