---
name: Add Component
slug: add-component
category: Frontend
description: Add Component scaffolds a new React component in src/components and creates a matching test. Use it when you need a consistent starting point for a component file pair.
github: "https://github.com/agentforce314/clawcodex/tree/main/tests/fixtures/skills/frontend/add-component"
language: TypeScript
stars: 862
forks: 154
install: "npx degit https://github.com/agentforce314/clawcodex/tree/main/tests/fixtures/skills/frontend/add-component ~/.claude/skills/add-component"
installs_to: ~/.claude/skills/add-component
source_path: tests/fixtures/skills/frontend/add-component/SKILL.md
collection_size: 3
category_size: 567
collection_url: "https://dirskills.com/collections/agentforce314/clawcodex"
added: 2026-08-22T05:21:39.061Z
last_synced: 2026-08-22T05:21:39.061Z
canonical_url: "https://dirskills.com/skills/add-component"
---

# Add Component

Add Component scaffolds a new React component in src/components and creates a matching test. Use it when you need a consistent starting point for a component file pair.

**Install:**

```bash
npx degit https://github.com/agentforce314/clawcodex/tree/main/tests/fixtures/skills/frontend/add-component ~/.claude/skills/add-component
```

## README

# Add Component

Create `src/components/$name.tsx` and a matching test.