القائمة
Extract a component from fabrk-dev boilerplate into the framework monorepo
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
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
استنادا إلى تصنيف SOC المهني
| 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.