メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Audits AI configuration files (AGENTS.md, copilot-instructions.md, SKILL.md files) for instruction duplication. Load when modifying any AI config file, adding a new skill, or reviewing whether instructions have drifted out of sync.
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.
Use when someone wants to add or change something in F0 (a component, prop, token, icon, or pattern). Covers the filter, the alignment, and the build in experimental/. You (the agent) are the door — you search, filter, and guide. For promotion to stable, use f0-component-promotion.
Use when promoting an F0 component from experimental/ to stable (Phases 4–5 of the lifecycle). Owned by Foundations team. For building a new component, use f0-component-contribution.
Guide for migrating components from experimental to stable locations (components/, sds/, ui/). Trigger when the user wants to migrate, promote, or move an experimental component, or asks about deprecating experimental exports.
Create pull requests for the F0 design system monorepo using gh CLI. Use when opening a PR from the f0 repo — handles title format, PR body mapped to PULL_REQUEST_TEMPLATE.md, conventional commit change list, and interactive clarification for missing context.
| 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. |
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.
Load this skill when you need to:
| 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 |
packages/react/AGENTS.md first — it has the concise rules. This skill provides the detailed "how".experimental/ — see the F0 component lifecycle. Use experimentalComponent() wrapper from @/lib/experimental in index.tsx. Only Foundations promotes to stable.@/ui/ wrappers.any — find the proper type.F0 prefix.zeroRender aliased as render, never @testing-library/react's render.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.@deprecated, @removeIn, @migration. See packages/react/AGENTS.md — Deprecation, and the Deprecation & Removal policy.