Skills
.Work. You
Rest

f0-component-patterns

Official

Master F0 React component architecture.

Software Engineering#architecture#react#design system#styling#animation#component patterns#f0
Authorfactorialco
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides comprehensive guidance and best practices for building and maintaining robust, scalable, and consistent React components within the F0 design system.

Core Features & Use Cases

  • Component Architecture: Understand patterns for folder structure, export strategies, and private prop management.
  • Styling & Animation: Learn to use CVA, cn(), focusRing(), container queries, and Framer Motion effectively.
  • State Management: Implement controlled/uncontrolled patterns and asynchronous event handling.
  • Use Case: When developing a new complex component like a data table or a modal, consult this Skill for established patterns on structure, state, and styling to ensure consistency and maintainability.

Quick Start

Consult the references/component-architecture.md file for detailed patterns on component structure and exports.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: f0-component-patterns
Download link: https://github.com/factorialco/f0/archive/main.zip#f0-component-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.