← ClaudeAtlas

standardslisted

The conventions this project holds code to — UI state completeness, design tokens, type-safety boundaries, query-key shape, and the anti-patterns to flag on sight.
djnsty23/claude-auto-dev · ★ 3 · Web & Frontend · score 65
Install: claude install-skill djnsty23/claude-auto-dev
# Code Standards This skill is auto-loaded on every code file, so it stays short on purpose. It holds only the **decisions this project made** — not general React or accessibility advice, which you already have. > **`.claude/project-rules.md` outranks this file.** If it exists, read it and > follow it wherever the two disagree — it was measured from this codebase, > while everything below is a shipped default. Run `/autodev-init` to generate > it. Where a convention appears under "Undecided" there, do not flag either > form in review. Three bars, in order: **correct** (types pass, it works), **clear** (matches surrounding patterns), **complete** (handles reality, not just the happy path). ## All UI states Every component that fetches handles all four: ```tsx if (isLoading) return <Skeleton />; if (error) return <ErrorState message={error.message} />; if (!data?.length) return <EmptyState />; return <Content data={data} />; ``` A component that renders only the success path is incomplete here even when it compiles. This is the single most common review finding in this codebase. ## Type-safety boundaries - No `any`. No `as unknown as Type` on data from a database, an API, or a user — validate the shape with Zod at the boundary instead. - `fetch()` always checks `res.ok` and sits inside try/catch. A fire-and-forget fetch is a bug, not a style choice. ## Query keys Centralised and `as const`, never inline string arrays: ```typescript export const queryKeys = {