Agent skill
add-components-to-registry
Registers existing React components with Tambo so AI can render them. Use when user wants to make their existing components available to AI, register components for generative UI, convert React components to Tambo components, or mentions /add-components-to-registry. For creating NEW components, see the components skill. For project setup, use add-to-existing-project or start-from-scratch skills.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/add-components-to-registry
SKILL.md
Add Components to Registry
Convert existing React components into Tambo-registered components that AI can render.
Quick Start
# Point to a component file or folder
/add-components-to-registry src/components/ProductCard.tsx
/add-components-to-registry src/components/cards/
Workflow
- Read component(s) - Analyze props, types, and purpose
- Generate Zod schema - Create propsSchema from prop types
- Write description - Help AI know when to use it
- Add to registry - Update lib/tambo.ts
Step 1: Analyze Component
Read the component file and extract:
- Component name
- Props interface/type
- What it renders (for description)
- Optional vs required props
Example Input
// src/components/ProductCard.tsx
interface ProductCardProps {
name: string;
price: number;
imageUrl?: string;
onSale?: boolean;
rating?: number;
}
export function ProductCard({
name,
price,
imageUrl,
onSale,
rating,
}: ProductCardProps) {
return (
<div className="product-card">
{imageUrl && <img src={imageUrl} alt={name} />}
<h3>{name}</h3>
<p>
${price}
{onSale && " (On Sale!)"}
</p>
{rating && <span>★ {rating}/5</span>}
</div>
);
}
Step 2: Generate Zod Schema
Convert TypeScript types to Zod with .describe():
import { z } from "zod";
export const ProductCardSchema = z.object({
name: z.string().describe("Product name"),
price: z.number().describe("Price in dollars"),
imageUrl: z.string().optional().describe("Product image URL"),
onSale: z.boolean().optional().describe("Whether product is on sale"),
rating: z.number().optional().describe("Rating out of 5"),
});
Type Mapping
| TypeScript | Zod |
|---|---|
string |
z.string() |
number |
z.number() |
boolean |
z.boolean() |
string[] |
z.array(z.string()) |
"a" | "b" |
z.enum(["a", "b"]) |
optional |
.optional() |
Date |
z.string().describe("ISO date string") |
Record<K,V> |
z.record(z.string(), z.number()) |
Step 3: Write Description
The description tells AI when to render this component. Be specific:
// Bad: Too vague
description: "Shows a product";
// Good: Tells AI when to use it
description: "Displays a product with name, price, and optional image/rating. Use when user asks to see product details, browse items, or view catalog entries.";
Step 4: Add to Registry
// lib/tambo.ts
import { TamboComponent } from "@tambo-ai/react";
import { ProductCard } from "@/components/ProductCard";
import { ProductCardSchema } from "@/components/ProductCard.schema";
export const components: TamboComponent[] = [
{
name: "ProductCard",
component: ProductCard,
description:
"Displays a product with name, price, and optional image/rating. Use when user asks to see product details, browse items, or view catalog entries.",
propsSchema: ProductCardSchema,
},
// ... other components
];
Batch Registration
When given a folder, process all .tsx files:
src/components/cards/
├── ProductCard.tsx → Register as "ProductCard"
├── UserCard.tsx → Register as "UserCard"
├── StatCard.tsx → Register as "StatCard"
└── index.ts → Skip (barrel file)
Skip files that:
- Are barrel exports (index.ts)
- Don't export React components
- Are test files (_.test.tsx, _.spec.tsx)
- Are story files (*.stories.tsx)
Schema File Location
Place schemas next to components:
src/components/
├── ProductCard.tsx
├── ProductCard.schema.ts # Zod schema
├── UserCard.tsx
└── UserCard.schema.ts
Or in a dedicated schemas folder:
src/
├── components/
│ ├── ProductCard.tsx
│ └── UserCard.tsx
└── schemas/
├── ProductCard.schema.ts
└── UserCard.schema.ts
Handling Complex Props
Nested Objects
// TypeScript
interface Address {
street: string;
city: string;
zip: string;
}
interface Props {
address: Address;
}
// Zod
const AddressSchema = z.object({
street: z.string().describe("Street address"),
city: z.string().describe("City name"),
zip: z.string().describe("ZIP/postal code"),
});
const PropsSchema = z.object({
address: AddressSchema.describe("Shipping address"),
});
Callbacks (Skip)
Don't include callbacks in propsSchema - AI can't provide functions:
// TypeScript
interface Props {
name: string;
onClick: () => void; // Skip this
}
// Zod - only data props
const PropsSchema = z.object({
name: z.string().describe("Display name"),
// onClick omitted - AI provides data, not behavior
});
Children (Skip)
Don't include children - AI renders the component, doesn't compose it:
// Skip children prop in schema
Verification
After registration, verify in the chat:
"Show me a product card for a laptop priced at $999"
AI should render the ProductCard with appropriate props.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?