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.

2026-06-010

first-principles-deconstructor

jpoindexter/theft-kit

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.

2026-05-210

access-control-audit

jpoindexter/theft-kit

Audit role-based access control and permission drift across product surfaces.

2026-05-200

add-package-feature

jpoindexter/theft-kit

Add a new feature to an existing @fabrk/* package following monorepo conventions

2026-05-200

adr-index

jpoindexter/theft-kit

Build or rebuild the ADR index and dependency graph in AgentDB

2026-05-200

agentdb-query

jpoindexter/theft-kit

Query AgentDB with semantic routing, hierarchical recall, causal graphs, and context synthesis

2026-05-200

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"]

Component Creation - STRICT RULES

STOP! Before Creating ANYTHING

Step 1: Check for existing components

# List all UI components in the project
ls src/components/ui/

Step 2: Decision Tree

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.

Step 3: Can You Compose From Existing?

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

Component Template (MANDATORY STRUCTURE)

'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>
  );
}

MANDATORY RULES

NEVER hardcode values. ALWAYS use the project's design system tokens. If a token doesn't exist, ADD IT TO THE DESIGN SYSTEM FIRST.

1. Colors

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().

2. Typography

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.

3. Spacing

Follow the project's spacing scale. Use CSS variables or tokens rather than arbitrary hardcoded values.

4. Border Radius

Use the project's radius token for full borders. Partial borders (border-b, border-t) should not have radius.

5. File Size

Max 150 lines per component file
If over, split into sub-components

6. Missing Token? ADD IT FIRST

If you need a style that doesn't have a token, add it to the design system first, then use it.

BANNED PATTERNS

// 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"

FILE LOCATIONS

UI primitives: src/components/ui/
Feature components: src/components/{feature}/
Page components: src/app/{route}/components/