Skills
.Work. You
Rest

compose-molecule

Community

Build UI molecules from atoms.

Software Engineering#frontend#react#atomic design#component generation#ui development#molecule
AuthorGDSDN
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the creation of reusable UI components (molecules) by composing smaller, independent building blocks (atoms), following the Atomic Design methodology. This streamlines UI development and ensures consistency.

Core Features & Use Cases

  • Automated Component Generation: Generates TypeScript components, CSS Modules, tests, and documentation.
  • Atomic Design Adherence: Ensures molecules are built by composing atoms, not reimplementing them.
  • Use Case: Quickly generate a FormField molecule by composing existing Label, Input, and HelperText atom components, complete with styles and tests.

Quick Start

Use the compose-molecule skill to generate a new molecule component based on the provided atom dependencies and desired structure.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 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: compose-molecule
Download link: https://github.com/GDSDN/kord-aios/archive/main.zip#compose-molecule

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.