Skills
.Work. You
Rest

react-composition

Community

Build composable React UIs with Effect Atom.

Software Engineering#state management#react#type-safety#component patterns#namespaces#compose#effect-atom
Authorfront-depiction
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill enables frontend teams to build scalable React UIs by promoting composition over boolean props and centralizing state with Effect Atom.

Core Features & Use Cases

  • Composition over configuration: assemble complex UIs from small, reusable pieces.
  • Component module pattern: organize components into namespaces for clarity and reuse.
  • State lifting: share state across components using Effect Atom state management.
  • Use Case: build a reusable form library that composes Frame, NameField, and SubmitButton to create consistent UIs.

Quick Start

Use this skill to scaffold a simple composable form by importing a namespace (e.g., UserForm) and composing a Frame, a WelcomeMessage, a NameField, and a SubmitButton to create a cohesive UI.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: react-composition
Download link: https://github.com/front-depiction/claude-setup/archive/main.zip#react-composition

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 471,000+ vetted skills library on demand.