skills.rest
factorialco
factorialcoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

f0-component-patterns

Reference F0 React component patterns for state, styling, and testing.

27|5|Updated Mar 20, 2024
Search Tags:#architecture#react#design system#styling#animation#component patterns#f0
One-click install
npx skills add https://github.com/factorialco/f0 --skill f0-component-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: f0-component-patterns
Source: https://github.com/factorialco/f0/tree/main/packages/react/.skills/f0-component-patterns
Command: npx skills add https://github.com/factorialco/f0 --skill f0-component-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about f0-component-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure React components in a design system for scalability?▼

Structure React components by following established patterns for folder organization, export strategies, and private prop management to ensure maintainability and consistency across your design system.

What is the best way to style React components with CVA and Tailwind CSS?▼

Style React components using CVA for variant management, the cn() utility for class merging, focusRing() for accessibility, and container queries to achieve responsive and consistent design system styling.

How do I manage state in complex React components like data tables or modals?▼

Manage component state by implementing controlled and uncontrolled patterns alongside asynchronous event handling to ensure robust state management for complex UI elements like data tables and modals.

How does Framer Motion work with React component architecture for animations?▼

Framer Motion integrates with React component architecture by providing established animation patterns and techniques, allowing you to build interactive and dynamic UI components within a design system.

Can I use container queries for responsive styling in my React components?▼

Yes, container queries are supported as a styling technique within the component architecture patterns, allowing you to build responsive layouts that adapt based on the component's container size rather than the viewport.

Related Skills

Explore More Software Engineering Skills→
fyndxfyndx
1

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 in an Expo project.

Official
Intermediate
GainInsightDevGainInsightDev

af-rtl-component-tests

Write React Testing Library component tests for UI behavior and accessibility.

Official
Intermediate
dylantarredylantarre
38

animation-principles

Map Disney's 12 animation principles to UI motion guidelines.

Community
Basic
try-workstry-works
95

ui-design-system

Develop UI components and design systems with TailwindCSS, Radix UI, and shadcn/ui.

Community
Advanced