André Farias

# shadcn Component Visual Adapter

## 🎯 Objective
Refactor the existing `component_name` component located at `component_file_path` to match the **visual design, structure, and behavior** of the reference component available at:

> bunx --bun shadcn@latest add accordion
reference_url   ← optional; leave blank if no docs page exists

Do NOT replace business logic, existing props interface, or data-fetching patterns. Preserve them.
Adapt only the **visual layer**: markup structure, class names, animations, and accessibility attributes.

---

## 📋 Step 1 — Analyze the Existing Component

Before writing any code:

1. Read the full source of `component_file_path`.
2. Map out:
   - All **props and their types** (TypeScript interfaces or PropTypes).
   - Internal **state variables** (`useState`, `useReducer`, Zustand slices, etc.).
   - **Context providers or custom hooks** consumed.
   - **Child components** rendered and where they live.
   - **Event handlers** and callbacks exposed to the parent.
3. List every **import** — flag any that will conflict with or can be replaced by the shadcn primitive.

Output a brief audit table before touching any code:

| Item | Current value | Action |
|------|--------------|--------|
| Props | ... | keep / rename / remove |
| State | ... | keep / migrate |
| Context/Hooks | ... | keep / replace |
| Sub-components | ... | keep / replace |
| Dependencies | ... | keep / install / remove |

---

## 📦 Step 2 — Dependency Resolution

Run the install command directly:

install_command

After the command completes, the generated files will appear in
components/ui/. Proceed to Step 3 using those files.

---

## 🔬 Step 3 — Review Reference Component

IF reference_url is provided → fetch it and extract the visual spec as before.

IF reference_url is blank → read the files downloaded by the CLI command
in Step 2 and extract the same information from the source code directly:
  - cva variant schema
  - data-state / data-disabled attributes
  - animation/transition classes
  - ARIA roles and props
  - cn() usage patterns

---

## 🛠 Step 4 — Refactor the Component

Apply the visual structure from Step 3 to the existing component from Step 1.

### Rules:
- ✅ Keep all **existing prop names and types** unless a direct shadcn equivalent exists.
- ✅ Keep all **data-fetching, business logic, and callbacks**.
- ✅ Wrap Radix primitives using **`forwardRef`** and spread `...props` to preserve flexibility.
- ✅ Use `cn()` for all className merging — never string concatenation.
- ✅ Export named compound sub-components if the reference component uses them (e.g., `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`).
- ❌ Do NOT import the generated shadcn file and re-export it — build the primitive inline in the refactored file to keep the logic co-located.
- ❌ Do NOT add Tailwind classes not present in the reference component without explicit instruction.

### Responsive behavior (`sm md lg`):
Apply mobile-first responsive classes. Confirm current breakpoints in `tailwind.config.ts` match the project's convention. If the reference uses container queries, install `@tailwindcss/container-queries`.

---

## 🧩 Step 5 — Context Providers and Hooks

If the reference component requires a context provider (e.g., `ToastProvider`, `TooltipProvider`):

1. Check if it is already mounted in `app/layout.tsx` or `app/providers.tsx`.
2. If not, add it to the appropriate layout file. Provide the exact diff.
3. If a custom hook is required (e.g., `useToast`, `useDialog`), place it in `hooks/` and import it from there.

---

## ❓ Step 6 — Clarifying Questions (ask before generating if unknown)

If any of the following are not determinable from the existing code, **ask before writing**:

1. **Data/props**: What shape of data will be passed? (Provide a sample object if helpful.)
2. **State management**: Is component state local, or managed externally (Zustand, Redux, React Query)?
3. **Assets**: Are there required images, logos, or custom icons not covered by lucide-react?
4. **Responsive**: What is the expected layout at `sm md lg` breakpoints?
5. **Placement**: Where in the app routing/layout tree will this component live? (Important for context provider placement.)

---

## 📐 Step 7 — Output Format

Provide the result as:

1. **`component_file_path`** — full refactored component file.
2. **`components/ui/shadcn_component_slug.tsx`** — shadcn primitive (only if needed and not generated by CLI).
3. **`lib/utils.ts`** — only if it needs to be created or updated.
4. **Layout/provider diff** — only if a provider needs to be added.
5. A short **migration notes** section listing:
   - Removed dependencies
   - Renamed props (if any)
   - Any manual steps required (e.g., adding CSS variables to `globals.css`)

---

## 🎨 Tailwind CSS Variables (shadcn design tokens)

Confirm that `globals.css` contains the required CSS custom properties. If the reference component uses tokens like `--radius`, `--background`, `--foreground`, `--primary`, `--ring`, append the missing variables. Use the shadcn default token set for `zinc` unless the project already defines a custom theme.

---

## 🚫 Constraints

- Framework: **Next.js 14+ App Router**
- Styling: **Tailwind CSS 3** only — no inline styles, no CSS modules, no styled-components.
- TypeScript: **strict mode**. All new code must be fully typed.
- Do not upgrade or downgrade any existing dependency version unless there is a direct peer conflict.

You are given a task to integrate an existing React component in the codebase.

The codebase should support:
- shadcn project structure  
- Tailwind CSS
- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

Determine the default path for components and styles. 
If default path for components is not /components/ui, provide instructions on why it's important to create this folder
Copy-paste this component to /components/ui folder:

21st.dev_component

Implementation Guidelines
 1. Analyze the component structure and identify all required dependencies
 2. Review the component's argumens and state
 3. Identify any required context providers or hooks and install them
 4. Questions to Ask
 - What data/props will be passed to this component?
 - Are there any specific state management requirements?
 - Are there any required assets (images, icons, etc.)?
 - What is the expected responsive behavior?
 - What is the best place to use this component in the app?

Steps to integrate
 0. Copy paste all the code above in the correct directories
 1. Install external dependencies
 2. Fill image assets with Unsplash stock images you know exist
 3. Use lucide-react icons for svgs or logos if component requires them

This is a dashboard of a modern government audit app called AuditFlow.

Thoroughly analyze the UI in this screenshot and describe it in as much detail as you can to hand over from a UI designer to a developer. The brief should cover both light and dark mode and contain responsive breakpoints matching Tailwind CSS v4.3 defaults.

Output characteristics as structured JSONC.

For colors, extract a rough palette and only detail accents and complex media. The goal is to use only 2 palettes: primary and secondary similar to Tailwind colors. Alongside these 2, you can define any number of grays and accent colors for more complex UI (gradients, shadows, SVGs, etc.).

End with a prompt explaining how to implement the UI for a developer, but don't mention any tech specs; only a brief of the UI to be implemented and the token rules + usage. Output the prompt as a Markdown code block.

The output should be two code blocks: one for the design brief and one for the JSONC design specification.

you are a wise and effective teacher. your goal is to make sure the human deeply understands the session.

do this incrementally with each step instead of all at once at the end. before moving on to the next stage, you should confirm that she has mastered everything in the current one. this should be high level (e.g. motivation) and low level (e.g. business logic, edge cases).

keep a running md doc with a checklist of things the human should understand. make sure she understands 1) the problem, why the problem existed, the different branches 2) the solution, why it was resolved in that way, the design decisions, the edge cases 3) the broader context of why this matters, what the changes will impact.

make sure she understands why (and drill down into more whys), make sure she understands what and how as well. understanding the problem well is imperative.

to get a sense of where she's at, proactively have her restate her understanding first. then help her fill in the gaps from there—she might ask you questions or ask to eli5, eli14, or elii (explain like she's an intern).

quiz her with open-ended or multiple choice questions with AskUserQuestion (be sure to change up the order of the correct answer, and to not reveal the answer until after the questions are submitted). show her code or have her use the debugger if necessary!

/goal the session should not end until you've verified that the human has demonstrated that she understood everything on your list.

Produce a handoff summary of all decisions made in this session, formatted so I can paste it into a new chat to continue with the next steps pending to execute.

# Task context

You will be acting as role. The context is context. Your goal is goal, to achieve sucess_criteria.

# Tone context

You should maintain a tone tone.

# Background data, documents, and images

First, read these files completely before responding:
<guide>guide_document</guide>

# Detailed task description & rules

Here are some important rules for the task:
- task_rule_1
- task_rule_2
- task_rule_3
- task_rule_4
- task_rule_5

# Examples

Here is an example of how to respond in a standard interaction:

<example>
example
</example>

# Conversation history

Here is the conversation history (between the user and you) prior to the question:
<history>history</history>

# Immediate task description or request

- task_description_1
- task_description_2
- task_description_3
- task_description_4
- task_description_5

# Planning and taking a deep breath

Think wisely about your answer first before you respond and DO NOT start executing the task yet. Instead, ask me clarifying questions (use 'AskUserQuestion' tool if available) so can refine the approach together step by step.Then give me your execution plan (5-10 steps maximum), so we only begin work once we've aligned.


# Output formatting

Put your responde in <response></response> tags.

# Prefilled response (if any)

response_tag