diff --git a/AGENTS.md b/AGENTS.md index a2bd02d5..7207416e 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -5,6 +5,8 @@ This document collects implementation rules and workflow conventions for code ch ## Naming Convention - Use kebab-case for files (e.g. `user-profile.svelte`, `org.svelte.ts`). +- **Variables must read clearly at the call site.** Avoid opaque single-letter or ultra-short names (`d`, `x`, `tmp`) unless they match a universal convention (e.g. `i` in a trivial index loop). Prefer names that state intent (`deadlineDate`, `parsedUrl`, `nextSection`). +- **After an early `return` (or other guard exit), leave a blank line** before the next statement so the “happy path” block is visually separated from guards. ## Creating a New Route @@ -177,6 +179,54 @@ You can bind form controls directly to a writable store’s properties. Svelte c ``` +### Form Structure + +For large dashboard forms, group fields by section instead of rendering one long flat list of controls. + +- Use a top-level `Field.Group` as the form container. +- Split each logical section into its own `Field.Set`. +- Use `Field.Legend` for the section title. +- Separate sibling sections with `Field.Separator`. +- Inside each section, wrap related controls in an inner `Field.Group`. +- Put every control inside `Field.Field`, and use `orientation="horizontal"` for toggle or checkbox rows. +- Use `Field.Description` for helper copy that applies to a whole section. + +Pattern: + +```svelte + + + {$t('settings.section.heading')} + + + + {$t('settings.section.toggle')} + + + + + {$t('settings.section.title')} + + + + + {$t('settings.section.description')} +