ARK

Example Modifications

Six concrete customizations, start to finish. Each includes:

  • Which files to share with the AI
  • The prompt you can adapt
  • What you should expect the AI to produce
  • How to verify the change worked

These are real customizations buyers have shipped. Adapt them to your needs.

1. Add a custom field type

Goal: Add a "URL" field type to Track's custom fields, alongside the existing text / number / date / select types, that renders as a clickable link.

Files to share

  • CLAUDE.md
  • src/features/custom-fields/types.ts
  • src/features/custom-fields/FieldRenderer.tsx
  • src/features/custom-fields/FieldForm.tsx
  • src/features/custom-fields/FieldEditor.tsx (the admin UI to define custom fields)

Prompt

I want to add a "URL" field type to Track's custom fields. It should:

  • Appear as an option in the custom-field-type dropdown in FieldEditor
  • Render as a clickable external link (target="_blank", rel="noopener") in FieldRenderer
  • Validate as a URL in FieldForm (accept http/https only, show an inline error otherwise)
  • Store the value as text in the database — no schema change needed because custom_field_values.value is already text

Don't introduce new dependencies. Use the URL constructor for validation. Match the existing code style in the types.ts file.

Expected result

The AI:

  • Adds "url" to the FieldType union in types.ts
  • Adds a URL icon and label to the type-picker in FieldEditor
  • Adds a url case to the switch in FieldRenderer that renders an <a> with the right attributes
  • Adds a validator in FieldForm that does try { new URL(value) } catch { return 'Invalid URL' }

How to verify

  1. npm run dev
  2. Go to Settings → Custom Fields → New Field
  3. Pick "URL" from the type dropdown, save
  4. Add a value to that field on a contact
  5. Confirm it renders as a clickable link
  6. Try foo.bar and confirm validation fails

2. Change the color scheme

Goal: Replace Track's default amber accent with your company's deep teal.

Files to share

  • CLAUDE.md
  • src/theme.css
  • tailwind.config.ts (if the product uses it — some ARK products use Tailwind 4's CSS-only config)

Prompt

Replace Track's default accent color (#f59e0b) with #0f766e throughout the theme. That's our company's deep teal. Also pick a readable contrast color for text that sits on top of the accent (white or off-white depending on what you think looks best on #0f766e).

Only change src/theme.css. Don't touch component files — the tokens flow through via CSS variables.

Expected result

The AI updates these tokens in src/theme.css:

  • --ark-accent: #0f766e
  • --ark-accent-contrast: #ffffff (or #f0fdfa, explained)
  • Any derived tokens (hover, active, subtle background) recomputed from the new accent

How to verify

  1. npm run dev
  2. Check the sidebar, primary buttons, active states
  3. Check the email templates if any ship with an accent color — some live in supabase/functions/*/templates/ and may need a second small edit

3. Add a CSV export button

Goal: Export the filtered contacts list from Track as a CSV.

Files to share

  • CLAUDE.md
  • src/features/contacts/ContactList.tsx
  • src/features/contacts/useContactsQuery.ts (or equivalent — wherever the list query lives)
  • src/lib/export-csv.ts (if it exists — most ARK products include a base CSV helper)

Prompt

Add a "Export CSV" button to the contacts list toolbar in ContactList.tsx. When clicked, it should export the currently filtered contacts (respecting any search or filter state) as a CSV with these columns: name, email, company, phone, created_at, plus any custom fields the workspace has defined.

  • Use the existing exportToCsv helper in src/lib/export-csv.ts if it exists; otherwise write a minimal helper using Blob + URL.createObjectURL (no new dependencies).
  • The filename should be contacts-{yyyy-mm-dd}.csv.
  • Keep the button styled consistently with other toolbar actions.

Expected result

  • A new button in the contacts toolbar
  • Either a use of the existing helper, or a small new helper function
  • The download fires the same list query that's already on screen, re-running without pagination to get the full filtered set

How to verify

  1. npm run dev
  2. Apply a filter (e.g., by tag or owner)
  3. Click Export CSV
  4. Open the file in Spreadsheet / Numbers / Excel
  5. Confirm the row count matches the filtered view and the columns are right

4. Create a new dashboard view

Goal: Add an "Executive Summary" dashboard to Track that shows pipeline value, new contacts this week, and top deals.

Files to share

  • CLAUDE.md
  • src/pages/Dashboard.tsx (the existing dashboard — so the AI can match its style)
  • src/features/reports/ (if the product has a reports module)
  • src/App.tsx (for routing — the AI needs to add the route)
  • src/components/Sidebar.tsx (to add the nav link)

Prompt

Add a new dashboard page at /dashboard/executive called "Executive Summary". It should show:

  1. Pipeline value card — sum of all open deals, styled like the existing dashboard metric cards
  2. New contacts this week — count of contacts with created_at in the last 7 days, with a spark line showing the prior 4 weeks for context
  3. Top 5 deals by value — a simple table with deal name, company, value, stage

Match the styling and layout patterns used in src/pages/Dashboard.tsx. Add a sidebar link under the existing "Dashboard" item. Only admins should see this view — follow the existing admin-gating pattern (check profile.role === 'admin').

Expected result

  • A new file at src/pages/ExecutiveDashboard.tsx
  • A new route in App.tsx
  • A new sidebar entry, visible only to admins
  • Three queries (pipeline sum, new-contacts count, top-deals) using the existing Supabase client
  • Components matching the existing dashboard style

How to verify

  1. Log in as an admin
  2. Click the new Executive Summary link
  3. Confirm the three cards render with real data from your database
  4. Log in as a non-admin user and confirm the link and route are hidden
  5. Try hitting /dashboard/executive directly as the non-admin to confirm the route guard works

5. Add a notification integration (Discord)

Goal: When a new deal is won in Track, post a celebratory message to a Discord channel.

Files to share

  • CLAUDE.md
  • src/features/integrations/ — the whole directory, so the AI can follow existing integration patterns
  • src/lib/notify.ts
  • supabase/functions/track-automation-runner/ — if the notification should be triggered from the automation runner
  • .env.example — to see how secrets are declared

Prompt

Add a Discord integration: when a deal's stage changes to "Won", post a message to a configured Discord webhook URL.

  • Add a workspace setting discord_webhook_url (text, nullable) in the workspace_settings table — write the migration.
  • Add a notifyDiscord(message) helper in src/lib/notify.ts that POSTs to the webhook. If the webhook URL is unset, it's a no-op.
  • Hook it into the deal-stage-change path (wherever that lives — it's probably a trigger or an Edge Function; please find it and tell me where it is before writing code).
  • The message should be: "🎉 Deal won: — $"

Don't call the webhook from client code — it should go through an Edge Function so the webhook URL never touches the browser.

Expected result

  • Migration adding the discord_webhook_url column
  • notifyDiscord helper that runs server-side only
  • An Edge Function (or modification to an existing one) that calls notifyDiscord when a deal is won
  • No client-side reference to the webhook URL

How to verify

  1. Create a Discord webhook in a test server
  2. Set the URL via the settings UI (or SQL editor if no UI yet)
  3. Move a test deal to "Won"
  4. Confirm the Discord message appears within a few seconds

6. Modify the sidebar layout

Goal: Split the Track sidebar into "Work" (boards, tasks) and "People" (contacts, companies) sections with collapsible headers.

Files to share

  • CLAUDE.md
  • src/components/Sidebar.tsx
  • src/App.tsx (for the list of routes)

Prompt

Restructure the Track sidebar into two collapsible sections:

  • Work: Boards, Tasks, Automations
  • People: Contacts, Companies

The section headers should be small, uppercase, muted text with a chevron that toggles the section open/closed. Default: both sections expanded. Persist the open/closed state in localStorage under a key like track.sidebar.sections.

Keep everything else in Sidebar.tsx the same — only restructure the nav links. Match the existing styling (Tailwind classes, no new dependencies).

Expected result

  • A restructured Sidebar.tsx with two <SidebarSection>-style groups
  • A small chevron toggle per section
  • localStorage persistence of the open state

How to verify

  1. npm run dev
  2. Confirm the sidebar now shows two collapsible groups
  3. Toggle each group open/closed and refresh the page
  4. The collapsed state persists across reloads

A few meta-lessons from these examples

Scope each prompt

Every example above changes one thing. If you try "add all six of these in one session," you'll get a diff that's hard to review and impossible to roll back cleanly. One feature, one commit, one test pass.

Always test before deploying

Every "How to verify" section above is mandatory, not optional. AI tools produce plausible-looking code that sometimes doesn't work. Running it locally catches 95% of issues in 30 seconds.

Name the files

Notice every prompt includes explicit file paths ("in ContactList.tsx"). AI tools use these as anchors. A prompt like "add a button somewhere" produces a button in an arbitrary location; "add a button to the toolbar in ContactList.tsx" produces exactly what you want.

Say what not to touch

"Don't introduce new dependencies," "don't change the schema," "don't touch src/lib/license.js." These negatives keep AI tools from well-meaning refactors that aren't in scope.

Where to go next