add-component
Create a React component with TypeScript and optional tests
Best use case
add-component is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Create a React component with TypeScript and optional tests
Teams using add-component should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/add-component/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How add-component Compares
| Feature / Agent | add-component | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Create a React component with TypeScript and optional tests
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
SKILL.md Source
# Add Component: $ARGUMENTS
Create a new React component with proper TypeScript types.
## Process
### 1. Determine Component Type
Based on the name and description:
- **UI Component**: Presentational, receives props
- **Container**: Manages state, fetches data
- **Layout**: Wraps other components
- **Form**: Handles user input
### 2. Create Component File
Location: `components/[ComponentName].tsx`
```tsx
'use client'; // if using hooks or browser APIs
import { useState } from 'react';
interface ComponentNameProps {
// Define props
title: string;
onAction?: () => void;
}
export default function ComponentName({ title, onAction }: ComponentNameProps) {
return (
<div data-testid="component-name" className="p-4">
<h2>{title}</h2>
{onAction && (
<button onClick={onAction} data-testid="action-button">
Action
</button>
)}
</div>
);
}
```
### 3. Add to Exports (if using barrel exports)
```typescript
// components/index.ts
export { default as ComponentName } from './ComponentName';
```
### 4. Create Test File (optional but recommended)
```typescript
// components/ComponentName.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import ComponentName from './ComponentName';
describe('ComponentName', () => {
test('renders with title', () => {
render(<ComponentName title="Test" />);
expect(screen.getByText('Test')).toBeInTheDocument();
});
test('calls onAction when button clicked', () => {
const handleAction = jest.fn();
render(<ComponentName title="Test" onAction={handleAction} />);
fireEvent.click(screen.getByTestId('action-button'));
expect(handleAction).toHaveBeenCalled();
});
});
```
### 5. Validate
```bash
npm run build
npm run lint
```
## Component Patterns
**Controlled input:**
```tsx
interface InputProps {
value: string;
onChange: (value: string) => void;
}
```
**With children:**
```tsx
interface WrapperProps {
children: React.ReactNode;
}
```
**With ref:**
```tsx
const Component = forwardRef<HTMLDivElement, Props>((props, ref) => {
return <div ref={ref} {...props} />;
});
```
**With default props:**
```tsx
interface Props {
size?: 'sm' | 'md' | 'lg';
}
function Component({ size = 'md' }: Props) { ... }
```Related Skills
add-shadcn-component
Add shadcn/ui components via pnpm dlx, then normalize generated Tailwind color classes to Scaffa theme tokens
add-dialog-component
Create React dialog components with forms for the dealflow-network project using Radix UI, tRPC mutations, and proper state management. Use when adding create/edit dialogs, modals, or form-based UI components.
ontopo
An AI agent skill to search for Israeli restaurants, check table availability, view menus, and retrieve booking links via the Ontopo platform, acting as an unofficial interface to its data.
lets-go-rss
A lightweight, full-platform RSS subscription manager that aggregates content from YouTube, Vimeo, Behance, Twitter/X, and Chinese platforms like Bilibili, Weibo, and Douyin, featuring deduplication and AI smart classification.
thor-skills
An entry point and router for AI agents to manage various THOR-related cybersecurity tasks, including running scans, analyzing logs, troubleshooting, and maintenance.
tech-blog
Generates comprehensive technical blog posts, offering detailed explanations of system internals, architecture, and implementation, either through source code analysis or document-driven research.
vly-money
Generate crypto payment links for supported tokens and networks, manage access to X402 payment-protected content, and provide direct access to the vly.money wallet interface.
astro
This skill provides essential Astro framework patterns, focusing on server-side rendering (SSR), static site generation (SSG), middleware, and TypeScript best practices. It helps AI agents implement secure authentication, manage API routes, and debug rendering behaviors within Astro projects.
chrome-debug
This skill empowers AI agents to debug web applications and inspect browser behavior using the Chrome DevTools Protocol (CDP), offering both collaborative (headful) and automated (headless) modes.
ux
This AI agent skill provides comprehensive guidance for creating professional and insightful User Experience (UX) designs, covering user research, information architecture, interaction design, visual guidance, and usability evaluation. It aims to produce actionable, user-centered solutions that avoid generic AI aesthetics.
modal-deployment
Run Python code in the cloud with serverless containers, GPUs, and autoscaling using Modal. This skill enables agents to generate code for deploying ML models, running batch jobs, serving APIs, and scaling compute-intensive workloads.
whisper-transcribe
Transcribes audio and video files to text using OpenAI's Whisper CLI, enhanced with contextual grounding from local markdown files for improved accuracy.