f0-code-review

name	f0-code-review
description	Code review checklist for the F0 React component library. Use when reviewing PRs, auditing component code quality, or checking compliance with F0 conventions before merging. Covers component structure, TypeScript strictness, testing standards, styling, accessibility, and Storybook requirements.

F0 Code Review

Review F0 React components against the conventions in packages/react/AGENTS.md. This skill adds review-specific guidance on top of those standards.

Review Workflow

1. Read packages/react/AGENTS.md for full component conventions
2. For components with interactive or animated elements, also load the a11y skill (vendor/skills/a11y/) for detailed WCAG patterns
3. Check each item below — flag violations with severity
4. Classify issues as blocking (must fix) or suggestion (nice to have)

Blocking Issues

Flag these as blocking — they must be fixed before merge:

TypeScript

• any or as any usage anywhere
• import * as React instead of named imports
• Default exports on components
• Circular imports

Component Structure

• Missing displayName on forwardRef components
• Direct Radix/third-party primitive import (must use @/ui/ wrappers)
• New component name missing F0 prefix
• New component placed in components/ instead of experimental/ (every new component must start in experimental/ per the F0 lifecycle — only Foundations promotes to stable; see packages/react/docs/definition-of-done.mdx)
• New component missing experimentalComponent() wrapper from @/lib/experimental.ts (required for the runtime warning consumers see)
• Internal components or internal-types.ts exported publicly
• New component not exported in exports.ts

Testing

• Missing test file for new/changed components
• Test files named .spec.ts instead of .test.tsx
• Using render from @testing-library/react instead of zeroRender from @/testing/test-utils.tsx
• Using jest.fn() instead of vi.fn()
• Snapshot testing (use explicit assertions only)

Storybook

• Missing Snapshot story with withSnapshot({}) for Chromatic

Security

• dangerouslySetInnerHTML without explicit justification

Deprecation

When the PR adds or modifies a @deprecated export, verify:

• All three JSDoc tags are present: @deprecated, @removeIn, @migration
• @removeIn targets a future major version (not the current one)
• @migration URL is reachable and points to a real migration guide
• Story tag updated to "deprecated" (with "!autodocs" if a manual MDX exists)
• See packages/react/docs/development/release-and-versioning.mdx for the full policy

Suggestions (Non-blocking)

Flag these as suggestions:

Code Quality

• Comments describing "what" instead of "why"
• Missing React.memo/useMemo/useCallback where beneficial
• Missing cleanup in useEffect
• className exposed on public component API (should be a private prop)
• Union type props not using const array pattern

Testing

• Using fireEvent where userEvent would be more appropriate
• Coverage appears below 80%
• Missing helper functions for repeated multi-step interactions

Accessibility

• Missing useReducedMotion() check in animated components
• Missing aria-live="polite" on loading/skeleton states
• Missing sr-only label on icon-only buttons
• Focusable element missing focusRing()
• Interactive div missing keyboard handler (onKeyDown for Enter/Space) or tabIndex={0} + role

i18n

• Hardcoded user-facing strings (should use useI18n())
• Missing fallback for translation keys

Styling

• CSS modules or CSS-in-JS usage (should use Tailwind)
• CVA imported from "class-variance-authority" instead of "cva"
• Inline style for values expressible as Tailwind classes

Storybook Review

Verify stories follow these F0-specific patterns:

• Meta uses satisfies Meta<typeof Component> (not as Meta)
• Tags include ["autodocs", "stable"] or ["autodocs", "experimental"]
• ArgTypes for union props reference the component's const array directly
• Union types without const arrays use table.type.summary
• Snapshot story renders all meaningful variants in a flex layout

// Required Snapshot pattern
export const Snapshot: Story = {
  parameters: withSnapshot({}),
  render: () => (
    <div className="flex w-fit flex-col gap-2">
      {/* All meaningful variants */}
    </div>
  ),
}

Props Review Checklist

• Names are functional and clear (only-icon not hide-icon + hide-label)
• Union types use exported const arrays:

  export const colors = ["a", "b", "c"] as const
  export type Color = (typeof colors)[number]
  

• Public interfaces are exported, internal types stay in internal-types.ts
• Default prop values set inline during destructuring (not defaultProps)
• DataAttributes from @/global.types used for data-* prop support where needed