1---2name: frontend3description: Frontend — Index4---56# Frontend — Index78Persimmon frontend = Next.js 16 Server Components by default, Tailwind v4 tokens, headless Radix primitives or plain Tailwind, `lucide-react` icons, `sonner` toasts. This mother is a map; follow the child for the actual work.910## Trigger1112- "Build / style / lay out this screen"13- "Make this responsive" / "which page template fits?"14- "Add a table / form / toast / confirm dialog / file upload"15- "How should this internal tool (or marketing site) look?"1617## The child skills1819| Skill | When to use | Owns |20|---|---|---|21| `frontend-internal-tool-conventions` | Admin / CRM / ops UIs | Typography (tabular figures), color, density, status badges, anti-AI-look |22| `frontend-public-site-conventions` | Marketing / lead-gen sites | Font pairings, 60-30-10 color, editorial type scale, anti-AI-look, craft layer |23| `premium-web-method` | Resisting AI generic look | Diverge→select→converge pipeline; ai-tell-lint gate; the 5 tests |24| `public-website-creative-direction` | Design direction for a public site | 8-question intake → 5 distinct concept briefs → signature element → translation table |25| `frontend-page-templates` | Starting any page | 8 canonical RSC + Server Action scaffolds (List, Detail, Edit, Create, Dashboard, Wizard, Settings, Empty State); sticky action bar |26| `frontend-css-architecture` | Theme/CSS setup | `globals.css` + `@layer` order, `next/font` loading, dark mode (defers token scale to `stack-tailwind-tokens`) |27| `frontend-responsive` | Layout across breakpoints | Sidebar (internal) vs top nav (public), hamburger, mobile-first, container queries |28| `frontend-data-tables` | Showing tabular data | Scroll wrapper, sticky last column, row-click → detail, kebab actions, pagination |29| `frontend-form-patterns` | Building forms | Required marking, inline errors, error summary, char counter, live search, empty states |30| `frontend-feedback-system` | User feedback | Toast + PRG flash + AlertDialog (destructive) + Dialog (content) + button loading |31| `frontend-file-upload` | Upload UX | Drop-zone, drag-drop, image preview — the React client on top of `infra-s3-uploads` |32| `frontend-interaction-patterns` | Buttons/nav/actions | Back/cancel LEFT, primary RIGHT; modal vs page actions; section nav (tabs/dropdown/sidebar) |33| `frontend-print-pdf` | Print / PDF output | `@media print` + `window.print()`; server-side PDF via `@react-pdf/renderer` or Playwright |3435## How to route36371. **Setting up a project's look?** → `frontend-css-architecture` + (`frontend-internal-tool-conventions` OR `frontend-public-site-conventions`) by `.claude/project-type`.382. **Building a screen?** → `frontend-page-templates` to pick the scaffold, then component children as needed.393. **One component?** → invoke the matching child directly (`frontend-data-tables`, `frontend-form-patterns`, etc.).4041## Persimmon frontend defaults — one-screen summary4243- **Server Components by default**; `"use client"` only for state/effects/browser APIs.44- **Any page reading DB or `auth()` exports `const dynamic = "force-dynamic"`** (or the Railway build prerender crashes).45- **Tailwind v4 tokens** — never hardcode hex/spacing; use the scale from `stack-tailwind-tokens`.46- **Forms = Server Actions + Zod** — see `stack-server-actions`, `stack-zod-boundary`. Never trust raw `FormData`.47- **Icons** `lucide-react`; **toasts** `sonner`; **destructive confirm** Radix `AlertDialog`.48- **Internal tools**: one type family, tabular figures, dense; **public sites**: editorial pairing, generous whitespace.4950## Anti-patterns banned5152- Hardcoded colors/spacing instead of Tailwind tokens53- `"use client"` on a whole page when a leaf component would do54- Reading DB/`auth()` in a page without `force-dynamic`55- Building a form without Zod validation in the action56- The "AI default look" (Inter + violet gradient + glassmorphism + emoji headings)57- Re-implementing presigned-upload mechanics instead of using `infra-s3-uploads`5859## Relationship to other mothers6061| Mother | Connection |62|---|---|63| `stack` | `stack-tailwind-tokens` owns the token scale; `stack-server-actions`/`stack-zod-boundary` own form wiring |64| `infra` | `frontend-file-upload` is the client UX on top of `infra-s3-uploads` |65| `backend` | `backend-admin-panel` composes these children into CRUD admin screens |66| `quality` | `quality-review-performance` audits RSC boundaries and bundle size of this UI |
Persimmon-Automation-Labs