bioai-platform/frontend/CODE_SAMPLE_TEMPLATE.md

CODE SAMPLE TEMPLATE — how to share code with your AI

Paste one small, representative snippet of your code into this file and share it. That gives the AI a reference for your conventions so every later instruction ("apply the design system", "fix the chart", "add a page") is implemented in your style, not a generic one.

When to use

• You're about to ask for a big refactor / new feature and want the result to match your existing code.
• Something the AI built "almost" looks right but doesn't match how you write components.
• You're starting a fresh session and want to re-establish your conventions.

What to include

1. One component (a card, a panel, a viewer wrapper) — full file.
2. One page / route — the layout skeleton only, if you have one.
3. Your conventions (tick what applies).

---

1 · A representative component

'use client';

// Paste ONE component you consider "typical" of how you build UI.
// Include imports, props pattern, styling approach, and how you handle state.

2 · A representative page / route

// Optional — paste the skeleton of one page (imports + layout structure).

3 · Conventions checklist (tick what applies)

• 'use client' at top of interactive components
• Tailwind utility classes inline (no CSS module files)
• Custom CSS classes live in src/app/globals.css under @layer components
• Colors from the design tokens: text-text-primary, text-text-secondary, text-text-muted, accent-cyan, glass-card, data-card
• Icons from lucide-react with className="w-4 h-4"
• Animations from @/lib/animations (fadeUp, stagger, cardHover, fadeIn)
• Data fetching with fetch("/api/backend/...") (no axios)
• Forms: controlled inputs, useState, no form library
• Default export for components; named export for shared UI primitives
• font stacks: font-display (Space Grotesk), body default (Inter), font-mono (JetBrains Mono)
• Style by trust zone: data → flat/opaque (data-card), chrome/status → glass, discrete controls → clay, 3D viewers → HUD

4 · Notes / anything unusual about your codebase

---

Example (filled in)

'use client';

import { motion } from 'framer-motion';
import { fadeUp } from '@/lib/animations';
import type { BlastHitSummary } from '@/types/pipeline';

export function ScoreBars({ hits }: { hits: BlastHitSummary[] | null }) {
  return (
    <motion.div variants={fadeUp} className="data-card p-6">
      <h2 className="text-lg font-semibold text-text-primary mb-4">Score Distribution</h2>
      ...
    </motion.div>
  );
}

Copy this whole file, delete the instructions you don't need, fill the blocks, and send it back to the AI in your next message.