···11+# Barazo Web -- Default Frontend
22+33+MIT | Part of [github.com/barazo-forum](https://github.com/barazo-forum)
44+55+The default frontend for Barazo forums. Communicates with the AppView backend exclusively via REST API. Forum admins can customize or replace entirely.
66+77+## Tech Stack
88+99+| Component | Technology |
1010+|-----------|-----------|
1111+| Framework | Next.js 16 / React 19 / TypeScript (strict) |
1212+| Styling | TailwindCSS |
1313+| Components | shadcn/ui (Radix primitives) for admin; custom forum components |
1414+| Colors | Radix Colors (12-step system) + Flexoki (accent hues) |
1515+| Icons | Phosphor Icons (6 weights, replaces Lucide) |
1616+| Typography | Source Sans 3 / Source Code Pro (self-hosted, zero external DNS) |
1717+| Syntax highlighting | Shiki + Flexoki theme (SSR, dual light/dark) |
1818+| Testing | Vitest + vitest-axe + @axe-core/playwright |
1919+| Accessibility | WCAG 2.2 AA from first commit |
2020+| SEO | JSON-LD, OpenGraph, sitemaps, SSR |
2121+2222+## What This Repo Does
2323+2424+- Server-side rendered forum UI (topics, replies, categories, profiles, search)
2525+- Admin dashboard (moderation, settings, branding) using shadcn/ui
2626+- Communicates with barazo-api via REST API only (fully decoupled)
2727+- Handles AT Protocol OAuth login flow (redirects to user's PDS)
2828+- Markdown rendering for post content (sanitized)
2929+3030+## Mandatory Standards
3131+3232+Read these before writing any code:
3333+3434+1. **Test-Driven Development** -- write tests BEFORE implementation. Use the `test-driven-development` skill.
3535+2. **Strict TypeScript** -- `strict: true`, no `any`, no `@ts-ignore`.
3636+3. **Accessibility** -- WCAG 2.2 AA from first commit. Pagination by default. eslint-plugin-jsx-a11y strict + vitest-axe + @axe-core/playwright in CI.
3737+4. **SEO** -- JSON-LD structured data (DiscussionForumPosting, BreadcrumbList), OpenGraph + Twitter Cards, sitemaps, canonical URLs, robots.txt.
3838+5. **Output sanitization** -- DOMPurify on all user-generated content. Prevent XSS.
3939+6. **Conventional commits** -- `type(scope): description`.
4040+7. **CI checks must pass** -- lint, typecheck, tests, a11y audit, Lighthouse CI on every PR.
4141+8. **Semantic HTML** -- use correct elements (`<nav>`, `<main>`, `<article>`, `<aside>`). No `div` soup.
4242+9. **Keyboard navigation** -- all interactive elements reachable and operable via keyboard. Visible focus indicators.
4343+10. **Radix primitives** -- use Radix (via shadcn/ui) for complex interactive components. Don't build custom dropdowns, dialogs, etc.
4444+4545+## Git Workflow
4646+4747+- **Small changes** (typos, single-file fixes, config tweaks): commit directly to `main`
4848+- **Substantial work** (new features, multi-file changes, refactors): always create a git worktree
4949+5050+## Workspace Docs
5151+5252+Architectural decisions and detailed standards live in the workspace, not in this repo. Load only what's relevant:
5353+5454+```
5555+~/Documents/CoreNotes/Workspaces/Barazo/
5656+├── decisions/frontend.md SEO patterns, accessibility decisions
5757+├── decisions/features-and-ux.md MVP scope, onboarding, reactions
5858+├── standards/shared.md TypeScript, CI/CD, testing, commits, code review
5959+├── standards/frontend.md Components, SEO implementation, a11y testing tiers
6060+└── research/05-data-models.md Lexicon schemas (for API response types)
6161+```
6262+6363+## Execution Strategy
6464+6565+**Master plan:** `~/Documents/CoreNotes/Workspaces/Barazo/plans/2026-02-09-mvp-implementation.md`
6666+6767+Before starting any milestone, read the master plan's **Execution Strategy** section. It specifies:
6868+- Which skill to invoke (`subagent-driven-development` or `executing-plans`)
6969+- Which model to use per milestone (the plan has a per-milestone model map)
7070+- Review gates (spec compliance + code quality) that must pass before marking tasks complete
7171+7272+**This repo's milestones (Phase 4):** M1-M3 use `opus` (scaffold, design system, auth -- establishes all patterns). M4-M13 use `sonnet` (follows established component and page patterns). Reviewers always use `sonnet`.
7373+7474+## Project Context
7575+7676+- **Project owner (Guido) is NOT a software engineer** -- Claude Code is the sole implementer
7777+- All code must be production-quality from the first commit
7878+- This frontend is the reference implementation; third parties may build alternatives
7979+- Focus on AT Protocol patterns (not traditional forum patterns)
8080+- Keep it simple (MVP mindset)