Spaces:
Running
Running
File size: 2,962 Bytes
d54a751 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | # 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
```tsx
'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
```tsx
// 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
<!-- Anything the AI should know: naming conventions, folder rules,
server components vs client, legacy Tailwind classes you override, etc. -->
---
### Example (filled in)
```tsx
'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.
|