skills.rest
halfdomelabs
halfdomelabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

add-component

Automate adding UI components to Baseplate's ui-components library.

4|Updated Feb 14, 2020
Search Tags:#workflow automation#ui component#ui-components#baseplate#generator templates
One-click install
npx skills add https://github.com/halfdomelabs/baseplate --skill add-component-halfdomelabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-component
Source: https://github.com/halfdomelabs/baseplate/tree/main/.claude/skills/add-component
Command: npx skills add https://github.com/halfdomelabs/baseplate --skill add-component-halfdomelabs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the process of adding a new UI component to the Baseplate platform, including its integration into the UI component library and optional integration into the generator templates.

Core Features & Use Cases

  • Component Addition: Automates the addition of new UI components to the ui-components library.
  • Storybook Integration: Automatically generates Storybook stories for the new component.
  • Optional Tests: Optionally adds unit tests for the component.
  • Generator Integration: Optionally integrates the component into the generator templates for new projects.
  • Use Case: When you need to add a new UI component to your Baseplate project, this Skill can streamline the process, saving time and reducing manual steps.

Quick Start

Use the add-component skill to add a new UI component 'MyComponent' to your Baseplate project.

Frequently Asked Questions about add-component

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

FAQPage Schema
How do I add a new UI component to my Baseplate project?▼

To add a new UI component to your Baseplate project, this Skill automates the workflow from component source decision through implementation in the ui-components library, handling user review and optional generator template integration.

Can I automatically generate Storybook stories when creating a UI component?▼

Yes, you can automatically generate Storybook stories. When adding a UI component to the Baseplate platform, the Skill automatically creates the corresponding Storybook stories and optionally adds unit tests.

How do I integrate a new UI component into generator templates for new projects?▼

Integrating a UI component into generator templates is handled optionally. After implementing the component in the ui-components library, the Skill can integrate it into the generator templates used for creating new Baseplate projects.

What do I need to use this UI component automation workflow?▼

You need Node.js, TypeScript, and familiarity with Baseplate's project structure to use this UI component automation workflow effectively within your development environment.

What is the process for deciding the component source in Baseplate?▼

The component source decision is the first automated step. The Skill handles deciding where the component source comes from, then implements it in ui-components, prompts for user review, and optionally integrates it into generator templates.

Related Skills

Explore More Software Engineering Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
halfdomelabshalfdomelabs
4

modify-generated-code

Modify generated code in Baseplate projects with template extraction and generator updates.

Official
Advanced
okgoogle13okgoogle13
1

storybook-scaffolder

Generate Storybook .stories.tsx files with M3 design token imports for React components.

Community
Basic
leboncoinleboncoin
92

create-storybook-docs

Generate and update Storybook stories and MDX docs for Spark UI components.

Official
Basic