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

Ready to run

npx skills add https://github.com/halfdomelabs/baseplate --skill add-component-halfdomelabs

💬 Prompt for ChatGPT / Claude Chat▼

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.