Merge pull request #648 from Perdolique/next-iteration

Ship packing workflows and app cleanup

Author: Perdolique

.agents/notes/test-formatting-style.md

@@ -1,45 +1,25 @@
 # Agents instructions
 
-## Always-on context
-
-- Perd is an outdoor equipment companion centered on catalog browsing, personal inventory, and packing workflows.
-- Keep this file lean: use it for non-obvious project guardrails, and load the matching local skill for domain procedures instead of duplicating them here.
-
-## Product guardrails
-
-- Keep equipment properties in the EAV model: `category_properties` defines available fields, and `item_property_values` stores per-item values.
-- Keep groups and categories independent. Do not add a foreign key between them unless the product plan explicitly changes.
-- Keep catalog items flat. Size and similar distinctions belong in category properties, not a variant subsystem.
-- Keep reference-data slugs as canonical lowercase URL tokens using only `a-z`, `0-9`, and single hyphens; `name` values stay English display strings.
-- Keep `equipment_items` brand/category foreign keys non-cascading (`restrict`) so reference-data deletion cannot silently remove catalog or inventory records.
-
 ## Web Baseline 2025
 
 - The project targets **Baseline 2025** across all web technologies, including CSS, HTML, and JS browser APIs.
 - We do not chase legacy browser support. Always choose modern native features over polyfills, fallbacks, or compatibility workarounds when they simplify the code.
 
-## Frontend and UX guardrails
+## Verification
 
-- For UI work, `new-design-assets/` is the source of truth for layout, component appearance, color tokens, typography, spacing, and interaction patterns.
-- Consult the prototype before changing Vue components, page layouts, or visual styles; match the nearest existing prototype pattern when a case is not covered exactly.
-- Keep async action areas structurally stable while loading or mutating. Keep the same interactive control mounted and change its state instead of swapping it for unrelated text.
-- Group navigation and actions by user meaning. Do not tuck inventory actions or similar workflow controls into unrelated content sections such as property lists.
+- Run applicable checks in parallel where practical.
+- You can pass only changed file paths to the test and lint commands during development, but verify that the full suite passes at the end of the change.
 
-## Workflow guardrails
+### Markdown file changes
 
-- Files imported by standalone Node or `tsx` scripts, including `tools/*.ts`, migrations, seeds, and their transitive dependencies, must not rely on Nuxt-only aliases like `~/` or `@@/`. Use package-backed `#server/*` or `#shared/*` aliases only when needed.
-- Implement only requested behavior, reproducible fixes, or currently supported project scenarios. Treat hypothetical compatibility work as follow-up unless the user explicitly scopes it in.
-- After any architecture, route-convention, data-model, or test-strategy change, update the relevant docs in the same change.
+- `pnpm run lint:markdown`.
 
-## Playwright guardrails
+### TypeScript or Vue file changes
 
-- Run new Playwright scenarios against their individual spec file before the full `pnpm run test:e2e:ci` suite.
-- `context.route(...)` matchers must account for query strings whenever the real endpoint is requested with query parameters.
-- Mocked-auth E2E flows should not call `page.goto()` after login unless the test also establishes a real server-side session cookie.
-- Browser tests through `wrangler dev` must keep Wrangler state, logs, and config under a writable temp directory instead of the user's default `~/.config`.
+- `pnpm run test:typecheck`
+- `pnpm run test:unit:agent`
+- `pnpm run lint:oxlint:agent`
 
-## Verification
+### Playwright test changes
 
-- Markdown changes: `pnpm run lint:markdown`.
-- TypeScript or Vue changes: `pnpm run test:typecheck`, `pnpm run test:unit:agent`, `pnpm run lint:oxlint:agent`, `pnpm run build`, and `pnpm run test:e2e:ci`.
-- Run applicable checks in parallel where practical.
+- `pnpm run test:e2e:ci`

.agents/skills/roadmap-planning/SKILL.md

@@ -4,30 +4,16 @@
 
 Perd is an outdoor equipment companion for people who plan trips, hikes, and other outdoor outings and do not want to forget important gear.
 
-The product direction is built around one practical loop:
-
-1. browse a public equipment catalog;
-2. keep a personal list of gear you own;
-3. build packing lists for a specific trip or activity.
-
-Perd is not meant to stop at a read-only catalog. The goal is a useful packing workflow that still works even when the catalog is incomplete.
-
 ## What you can do now
 
 - sign in;
 - open the catalog;
 - browse the current list of equipment;
 - open item detail pages;
-- keep a personal inventory with "I have this" actions.
-
-This is still an early product state. The full user workflow is not shipped yet.
-
-## What is planned next
-
-The next user-facing slices are:
-
-- packing lists for specific trips or activities;
-- custom checklist entries for things that are not in the catalog yet.
+- keep a personal inventory with "I have this" actions;
+- create packing lists for specific trips or activities;
+- add custom and inventory-backed checklist entries;
+- mark checklist entries as packed.
 
 The priority is the user workflow, not internal admin tooling.
 
@@ -50,7 +36,3 @@ The priority is the user workflow, not internal admin tooling.
 - [Cloudflare Workers](https://developers.cloudflare.com/workers/)
 - [Neon](https://neon.tech/)
 - [Drizzle ORM](https://orm.drizzle.team/)
-
-## Details
-
-[Wiki](https://github.com/Perdolique/perd/wiki)

AGENTS.md

@@ -1,41 +1,38 @@
-@layer reset, colors, spacings, sizes, transitions, typography;
+@layer reset, tokens, base;
 
 @import url("./reset.css") layer(reset);
-@import url("./colors.css") layer(colors);
-@import url("./spacings.css") layer(spacings);
-@import url("./sizes.css") layer(sizes);
-@import url("./transitions.css") layer(transitions);
-@import url("./typography.css") layer(typography);
+@import url("./tokens.css");
 
-:root {
-  color-scheme: light dark;
-  font-family: "Inter", sans-serif;
-}
+@layer base {
+  :root {
+    font-family: var(--font-family-sans);
+  }
 
-html,
-body {
-  min-height: 100%;
-}
+  html,
+  body {
+    min-height: 100%;
+  }
 
-body {
-  background-color: var(--color-background-base);
-  color: var(--color-text-primary);
-  line-height: var(--line-height-body);
-  font-size: var(--font-size-16);
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+  body {
+    background-color: var(--color-background-page);
+    color: var(--color-text-primary);
+    line-height: var(--line-height-body);
+    font-size: var(--font-size-16);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-a,
-button,
-input,
-textarea,
-select {
-  font: inherit;
-}
+  a,
+  button,
+  input,
+  textarea,
+  select {
+    font: inherit;
+  }
 
-:focus-visible {
-  outline: 2px solid var(--color-accent-ring);
-  outline-offset: 3px;
+  :focus-visible {
+    outline: none;
+    box-shadow: var(--shadow-focus);
+  }
 }