Menu
Create React components using the project's existing design system primitives and tokens
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
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/