Menú
Extract a component from fabrk-dev boilerplate into the framework monorepo
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional 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 | extract-component |
| description | Extract a component from fabrk-dev boilerplate into the framework monorepo |
| user-invocable | true |
Extract a component from the fabrk-dev boilerplate into packages/components/.
component: The component name or path to extract (e.g., "button", "charts/funnel-chart")Find the component in ../fabrk-dev/src/components/. Check both flat files and directories.
Copy to the appropriate directory in packages/components/src/:
src/ui/src/charts/src/dashboard/src/admin/src/ai/src/security/src/org/Apply these transformations to every file:
// FROM → TO
import { cn } from '@/lib/utils' → import { cn } from '@fabrk/core'
import { mode } from '@/design-system' → import { mode } from '@fabrk/design-system'
import { X } from '@/components/ui/x' → import { X } from '../ui/x' (relative)
Remove any @/ path aliases. Remove any application-specific business logic.
Add the component to packages/components/src/index.ts:
export * from './[category]/[component-name]'
Check the extracted component follows these rules:
border, border-2) have mode.radiusborder-t, border-b) do NOT have mode.radius"use client" is NOT manually added (tsup banner handles it)cd packages/components && pnpm build && pnpm type-check
Output what was extracted, what imports were transformed, and whether build succeeded.