Skills
.Work. You
Rest

new-ui-component

Community

Scaffold a reusable UI component fast

Design & Creative#typescript#react#design system#ui components#component scaffolding#class merging#barrel exports
Authorbibektimilsina00
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill removes the guesswork of creating new UI components by guiding you to follow the project’s established patterns, tokens, and export conventions.

Core Features & Use Cases

  • Component scaffolding with project conventions: Ensures consistent structure using cn() for class merging, forwardRef for DOM-wrapping components, and token-based styling with CSS variables.
  • Variant and size support: Prompts for variant/size options so your component exposes flexible styling in a predictable API.
  • Correct integration into the UI library: Adds the component to the ui barrel exports and exposes a typed Props interface for reuse across the app.

Quick Start

Use the new-ui-component skill to create a new reusable component file for your design system, then confirm its variants, props, and any composed existing UI components.

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: new-ui-component
Download link: https://github.com/bibektimilsina00/fuse_monorepo/archive/main.zip#new-ui-component

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.