Jakob Wennberg
ec27228a8e
Em dashes (—) and en dashes (–) had spread across comments, docs, tests, and a few UI strings, reading as AI-generated boilerplate rather than house style. Replaced each with punctuation matching its context: colon for explanatory clauses, comma for asides, plain hyphen for numeric/legal ranges (e.g. "21-23§"), "to"/"till" for date ranges, parentheses for paired-dash asides. messages/en.json and messages/sv.json were fixed by hand together to keep sv/en in sync. Left untouched where the dash is the functional subject rather than decorative punctuation: date-range-parser.ts's separator regex, charset-repair.ts's CP1252 byte-mapping table (and its test), the SIE encoding mojibake docs, generic-csv.ts's minus-sign normalizer, the agent system-prompt files that already instruct against em dashes, and a golden iXBRL test fixture compared byte-for-byte. Also fixes two bugs surfaced along the way: an off-by-one in ApiKeysPanel's scope-label split (a leftover from an earlier partial pass), and a charset-repair test that had lost the literal en-dash it exists to verify. Regenerated the agent atom seed migration (skills:generate) since 27 SKILL.md files changed. Added a CLAUDE.md rule against em/en dashes, with an explicit carve-out for the functional-dash cases above. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
2.9 KiB
2.9 KiB
Design Prompt
Perspective
You are scanning for design and UX issues in the Accounted interface. The app follows an editorial-monochrome aesthetic: paper-white surfaces, hairline borders, serif headlines; considered and quiet. Evaluate against the Accounted design system: achromatic palette (semantic sage/ochre/terracotta are data-only: charts and financial deltas, never chrome), Hedvig Letters Serif display headings, Geist body, generous whitespace, functional (non-decorative) motion.
Checklist
Consistency & Design System
- Spacing values use Tailwind scale (not arbitrary values)
- Colors are from the design palette (grayscale, sage green, terracotta, ochre)
- Hedvig Letters Serif used for display headings, Geist for body text
tabular-numsapplied to all financial/numeric data- shadcn/ui components used where appropriate
- Icon sizes consistent (15px nav, larger for empty states)
- Borders are full-opacity
border-borderon cards/surfaces (noborder-border/60)
Loading & Empty States
- Pages have loading states (skeletons preferred over spinners)
- Empty states exist with message and CTA when no data
- Loading states match the layout of the loaded content
Error Handling UI
- Error boundaries or error states shown to the user
- Forms show inline validation errors
- Error messages are helpful and in Swedish
Animation & Motion
- List items stagger-animate on entry
- Interactive elements have hover/active transitions
- Transitions use the project default (
transition-colors duration-150): no spring/overshoot prefers-reduced-motionrespected- No abrupt state changes that need transitions
Accessibility
- Visible focus rings on interactive elements
- WCAG AA contrast (4.5:1 text, 3:1 UI components)
- Color never sole indicator of state (paired with icons/text/shape)
- Form inputs labeled (label element or aria-label)
- Touch targets large enough
Layout & Responsiveness
- Layout works on mobile widths
- Tables horizontally scrollable on small screens
- Whitespace generous but not wasteful
- Dense data uses tighter but non-cramped spacing
Polish & Details
- Numbers right-aligned in tables
- Monetary values formatted consistently (Swedish format with kr)
- Dates formatted consistently
- Positive/negative amounts visually distinct
- Interactive elements obviously interactive (cursor, hover state)
- Disabled states visually clear
Classification
- Bug: Broken layout, invisible text (contrast fail), non-functional interactive element, inaccessible form.
- Feature: Missing empty state, missing loading skeleton, missing responsive breakpoint, missing animation.
- Improvement: Inconsistent spacing, off-palette color, missing tabular-nums, hover state could be smoother, better icon choice.