# Create Component

> Guided component creation with proper patterns

- Source: https://doutorai.pt/en/components/commands__wshobson-agents__commands-create-component
- Type: Commands
- Category: General
- Downloads: 0
- Site: Doutor AI (https://doutorai.pt/en) - AI tools for small businesses

An open-source community component, curated and adapted by Doutor AI.

## What it does and how to use it

A **/slash command**, ready to use, that runs a general workflow in a single step.

1. Install the command (command above).
2. In Claude Code, type "/" followed by the command name.
3. Follow the instructions the command asks for and let it run.

## Install (Claude Code)

```bash
mkdir -p .claude/commands && curl -fsSL https://doutorai.pt/data/lib/commands__wshobson-agents__commands-create-component.md -o .claude/commands/wshobson-agents__commands-create-component.md
```

Paste this command into the terminal, in your project folder, and the component installs automatically.

## Content

```
---
description: "Guided component creation with proper patterns"
argument-hint: "[component-name]"
---

# Create Component

Guided workflow for creating new UI components following established patterns and best practices.

## Pre-flight Checks

1. Check if `.ui-design/` directory exists:
   - If not: Create `.ui-design/` directory
   - Create `.ui-design/components/` subdirectory for component tracking

2. Detect project configuration:
   - Scan for framework (React, Vue, Svelte, Angular)
   - Scan for styling approach (CSS Modules, Tailwind, styled-components, etc.)
   - Check for existing c

- 🔒 Full content on the Pro plan (€7.99/month) -
```

## Related components

- [act](https://doutorai.pt/en/components/commands__act): Execute GitHub Actions locally using act
- [add-authentication-system](https://doutorai.pt/en/components/commands__add-authentication-system): Implement secure user authentication system with chosen method and security best practices
- [add-changelog](https://doutorai.pt/en/components/commands__add-changelog): Generate and maintain project changelog with Keep a Changelog format
- [add-mutation-testing](https://doutorai.pt/en/components/commands__add-mutation-testing): Setup comprehensive mutation testing with framework selection and CI integration
- [add-package](https://doutorai.pt/en/components/commands__add-package): Add and configure new package to workspace with proper structure and dependencies
- [add-performance-monitoring](https://doutorai.pt/en/components/commands__add-performance-monitoring): Setup comprehensive application performance monitoring with metrics, alerting, and observability

## Save hours every week with AI, no hassle

**Doutor AI** gives you 1,859 ready-to-copy AI prompts, by industry and in plain English - plus a complete technical library for those who want to go further. [See plans →](https://doutorai.pt/en/pricing)

---
Content by Doutor AI (https://doutorai.pt/en). When quoting, please cite the source: https://doutorai.pt/en/components/commands__wshobson-agents__commands-create-component