majiayu000 UX Polish
Overview
Make the Astro frontend coherent and production-grade without architectural rewrites. Focus on tokens, a11y, state handling, and minimal-interaction polish with low JS impact.
Workflow
- Inspect existing global styles/components under
frontend/to avoid style drift. - Define UI tokens using CSS variables or Tailwind theme strategy (typography, spacing, radii, shadows, color roles).
- Apply accessibility guardrails (focus visibility, semantic headings, keyboard nav, contrast).
- Add empty/loading/error states to blog list and post detail.
- Add only hover/focus transitions (no animation libraries).
- Document decisions in
frontend/docs/ux.md.
Scope
- Define tokens: typography scale, spacing scale, radii and shadows, color roles (bg/fg/muted/accent).
- Ensure accessibility: visible focus states, semantic headings, keyboard navigation, reasonable contrast.
- Add empty, loading skeleton, and error fallback states.
- Add micro-interactions via hover/focus transitions only.
Outputs
- Add
frontend/docs/ux.mddescribing tokens, component rules, and an a11y checklist. - Apply minimal changes to global styles and components to match the rules.
Acceptance Checklist
- Focus is visible on all interactive elements.
- Empty/loading/error states exist for blog list and post detail.
- Typography and spacing are consistent across pages.