Denozordec
9fa6269174
quality / changes (push) Successful in 7s
quality / commitlint (push) Skipped
quality / openapi (push) Successful in 30s
quality / web (push) Successful in 1m3s
quality / api (push) Successful in 1m15s
quality / linux-agent-smoke (push) Failing after 27s
quality / docker-check (push) Failing after 2m28s
CD / quality (push) Failing after 5m52s
CD / publish (push) Skipped
Implement reliable agent apply, telemetry v2, analytics retention, guarded rollouts, enrollment, labels and webhooks. Improve ReUI frontend data safety and bounded list loading, and add Docker smoke, recovery and resource checks. Document local verification and pending native acceptance.
118 lines
5.8 KiB
Markdown
118 lines
5.8 KiB
Markdown
# Anti-patterns
|
|
|
|
Read this at the Check step, after the self-checks in [quality.md](./quality.md). Each entry: an `Incorrect:` line, then its `Correct:` fix. Detector: the self-check that prints it (C1 to C4), or `visual` when reading finds it. Source: the pilot run that wrote it, or `default` (a training-data habit).
|
|
|
|
## Pairs
|
|
|
|
### 1. Stagger on every row (Detector: C2; source: run-08)
|
|
|
|
Incorrect: `transition={{ delay: i * 0.05 }}` on all 50 rows of a table
|
|
Correct: 1 stagger of at most 6 items, `staggerChildren: 0.05`, never on table rows
|
|
|
|
### 2. Transition everything on a card (Detector: C1; source: runs 10, 15)
|
|
|
|
Incorrect: `className="rounded-xl border transition-all duration-300 hover:shadow-lg"`
|
|
Correct: `transition-colors` for a hover color; a lift is `transform` over a static shadow
|
|
|
|
### 3. Raw palette for a state (Detector: C3; source: runs 08, 15)
|
|
|
|
Incorrect: `<span className="text-green-600">Active</span>`
|
|
Correct: `<Badge variant="success-light">Active</Badge>`
|
|
|
|
### 4. Animated table rows (Detector: C1; source: runs 01, 08, 17)
|
|
|
|
Incorrect: `<motion.tr whileHover={{ backgroundColor: "var(--muted)" }}>`
|
|
Correct: `data-grid` rows, which already hover; never animate rows with motion/react
|
|
|
|
### 5. Hover scale on the default spring (Detector: C1; source: runs 01, 10)
|
|
|
|
Incorrect: `<motion.div whileHover={{ scale: 1.03 }}>` with no `transition`
|
|
Correct: CSS first: `transition-colors` for hover, `transition-transform active:scale-[0.98] motion-reduce:transition-none` for press
|
|
|
|
### 6. Entrance from scale 0 (Detector: C1; source: runs 10, 15)
|
|
|
|
Incorrect: `<motion.div initial={{ scale: 0 }} animate={{ scale: 1 }}>`
|
|
Correct: `initial={{ opacity: 0, scale: 0.95 }}`: start at scale 0.95 or more and move 8px or less
|
|
|
|
### 7. Hand-built modal or toast (Detector: C4; source: run-15)
|
|
|
|
Incorrect: `<div className="fixed inset-0 z-50 bg-black/50">` as a modal
|
|
Correct: `Dialog`, `AlertDialog` for a destructive confirm, `sonner` for toasts; a palette: `<CommandDialog><Command><CommandInput /><CommandList>`, as `CommandDialog` holds no `Command`
|
|
|
|
### 8. Native select (Detector: C4; source: run-15)
|
|
|
|
Incorrect: `<select>` with `<option>` children
|
|
Correct: the shadcn `Select`, or `NativeSelect` when the native control is wanted
|
|
|
|
### 9. Hand-rolled table (Detector: C4; source: run-17)
|
|
|
|
Incorrect: `<table>` with mapped `<tr>` rows
|
|
Correct: `data-grid`: a `useTable({ features: dataGridFeatures })` instance passed as `table={table}`, columns typed `ColumnDef<DataGridFeatures, Order>[]`
|
|
|
|
### 10. Button inside a clickable wrapper (Detector: visual; source: run-02)
|
|
|
|
Incorrect: `<motion.button><Button>Save</Button></motion.button>`
|
|
Correct: the `Button` alone: 1 interactive element, and it already has a press state
|
|
|
|
### 11. Radix asChild on Base UI (Detector: C4; source: run-17, judge)
|
|
|
|
Incorrect: `<DialogTrigger asChild><Button>Open</Button></DialogTrigger>`
|
|
Correct: `<DialogTrigger render={<Button variant="outline" />}>Open</DialogTrigger>` on base-nova; a link: `<Button nativeButton={false} render={<Link href="/x" />}>`
|
|
|
|
### 12. Component defined inside render (Detector: visual; source: Haiku runs, judge)
|
|
|
|
Incorrect: `const Row = () => <div />` inside the page component
|
|
Correct: declare `Row` at module scope and pass it props, so React keeps its state
|
|
|
|
### 13. A panel inside a panel (Detector: visual; source: run-05)
|
|
|
|
Incorrect: `<FramePanel><Card>...</Card></FramePanel>`, or a Card inside a Card
|
|
Correct: FramePanels for both, or Cards for the KPIs and a Frame for the table; never a Card inside a Frame
|
|
|
|
### 14. Small badges (Detector: visual; source: runs 03, 04, 06, 07, 10, 13, 16, 18)
|
|
|
|
Incorrect: `<Badge variant="success-light" size="sm">Paid</Badge>`
|
|
Correct: `<Badge variant="success-light">Paid</Badge>` with `size` left off
|
|
|
|
### 15. A colored circle behind every KPI icon (Detector: visual; source: default)
|
|
|
|
Incorrect: `<div className="rounded-full bg-blue-100 p-2">` around each KPI icon
|
|
Correct: the number leads; at most 1 `text-muted-foreground` icon
|
|
|
|
### 16. Gradient text (Detector: visual; source: default)
|
|
|
|
Incorrect: `bg-linear-to-r from-violet-500 to-pink-500 bg-clip-text text-transparent` on a heading
|
|
Correct: `text-foreground` and `tracking-tight`; color carries meaning, not decoration
|
|
|
|
### 17. A dot or check for the current item (Detector: visual; source: default)
|
|
|
|
Incorrect: a dot or a `Check` icon beside the active nav item
|
|
Correct: `bg-muted` (`dark:bg-muted/50`) plus `aria-current`
|
|
|
|
### 18. framer-motion (Detector: C4; source: default)
|
|
|
|
Incorrect: `import { motion } from "framer-motion"`
|
|
Correct: `import { motion } from "motion/react"`
|
|
|
|
### 19. Clock or randomness in render (Detector: C4; source: default, near run-05)
|
|
|
|
Incorrect: `const [id] = useState(() => Math.random())`
|
|
Correct: `useId()` for ids; read the clock in an effect or an event handler
|
|
|
|
### 20. Placeholder data (Detector: visual; source: default)
|
|
|
|
Incorrect: "John Doe", "Acme Inc" and round figures like `$1,000`
|
|
Correct: specific, plausible data: "Mara Lind", `$1,284.50`, 37 open orders
|
|
|
|
## Your training data is out of date
|
|
|
|
| Old habit | In this stack |
|
|
| ----------------------------- | --------------------------------------------------------------- |
|
|
| `framer-motion` | `motion/react` |
|
|
| `<DataGrid data columns>` | `useTable({ features: dataGridFeatures })` plus `table={table}` |
|
|
| A fixed div modal | `Dialog` or `AlertDialog` |
|
|
| A hand-built toast | `sonner` |
|
|
| `w-5 h-5` | `size-5` |
|
|
| never `space-y-4` in new code | `flex flex-col gap-4` |
|
|
| `asChild` | `render` on base-nova |
|