Menü
Create React components using the project's existing design system primitives and tokens
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Use when a conversation is getting long, drifting, juggling multiple tasks, re-pasting the same files, or showing stale/confused context — and at the start of any new task. Triggers: long thread, context bloat, topic switch, repeated file uploads, 'why is it forgetting', degraded answers, finished one task and starting another.
Use when a user wants to deconstruct a complex problem, business challenge, product decision, strategy question, career crossroads, or stuck situation by stripping assumptions, identifying first principles, rebuilding options from foundational truths, and choosing one high-leverage action.
Audit role-based access control and permission drift across product surfaces.
Add a new feature to an existing @fabrk/* package following monorepo conventions
Build or rebuild the ADR index and dependency graph in AgentDB
Query AgentDB with semantic routing, hierarchical recall, causal graphs, and context synthesis
| name | component-create |
| description | Create React components using the project's existing design system primitives and tokens |
| license | MIT |
| compatibility | Claude Code |
| metadata | {"version":"2.0","priority":"high"} |
| allowed-tools | ["Read","Write","Glob","Grep"] |
# List all UI components in the project
ls src/components/ui/
| Situation | Action |
|---|---|
| Component exists | Use it directly |
| Can compose from existing primitives | Compose — don't build custom |
| Doesn't exist anywhere | Only then build custom |
Check before building anything custom.
If the answer is YES, you MUST compose. Do NOT create new primitives.
Common primitives to check:
@/components/ui/button@/components/ui/card@/components/ui/input@/components/ui/select@/components/ui/dialog@/components/ui/sheet@/components/ui/table@/components/ui/tabs@/components/ui/badge@/components/ui/switch@/components/ui/checkbox@/components/ui/tooltip@/components/ui/alert@/components/ui/alert-dialog@/components/ui/form@/components/ui/skeleton'use client'; // Only if hooks/interactivity needed
import * as React from 'react';
import { cn } from '@/lib/utils';
// Import from existing UI components
import { Card, CardHeader, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
// ============================================================================
// TYPES
// ============================================================================
interface ComponentNameProps {
/** Description of prop */
title: string;
/** Optional props use ? */
description?: string;
/** Always include className for composition */
className?: string;
}
// ============================================================================
// COMPONENT
// ============================================================================
export function ComponentName({
title,
description,
className,
}: ComponentNameProps) {
return (
<Card className={cn('border', className)}>
<CardHeader>
<h3>{title}</h3>
</CardHeader>
{description && (
<CardContent>
<p>{description}</p>
</CardContent>
)}
</Card>
);
}
NEVER hardcode values. ALWAYS use the project's design system tokens. If a token doesn't exist, ADD IT TO THE DESIGN SYSTEM FIRST.
Use the project's design token system for all colors. Never use hardcoded Tailwind color classes like bg-gray-100, text-blue-500, border-slate-200, hex values, or rgb()/hsl().
Use the project's typography tokens. Never use raw size classes like text-xs, text-sm, text-lg, font-bold directly — use the token system.
Follow the project's spacing scale. Use CSS variables or tokens rather than arbitrary hardcoded values.
Use the project's radius token for full borders. Partial borders (border-b, border-t) should not have radius.
If you need a style that doesn't have a token, add it to the design system first, then use it.
// Custom button (use <Button> component)
<button className="px-4 py-2 rounded bg-blue-500">
// Custom modal (use <Dialog> component)
<div className="fixed inset-0 z-50 bg-black/50">
// Hardcoded colors/typography
className="text-sm bg-gray-100 text-blue-500"
src/components/ui/src/components/{feature}/src/app/{route}/components/