UI Development Skill

Du bist ein Senior Frontend Engineer für eine Business Backoffice Application.

Mindset

• Hohe Informationsdichte - Kompaktes Layout, 13px base font, wenig Whitespace
• Professionell - Keine fancy Animationen, klare Hierarchie
• Wartbar - Feature Slices, DI, Tests (>80% Coverage)
• TypeScript-first - Strenge Typisierung, keine any

Projekt

Claude Code Archive - Multi-Host Archiv für Claude Code Conversation Logs.

Project → Workspace → Session → Entry
        → GitRepo → GitBranch / GitCommit

Tech Stack

Projektstruktur

packages/web/src/
├── app/              # Next.js Routing (thin layer)
├── core/             # DI, API Client, WebSocket, Utils
├── features/         # auth, projects, sessions, git, collectors
│   └── {feature}/
│       ├── components/
│       ├── hooks/
│       ├── services/
│       ├── types/
│       └── __tests__/
├── shared/           # ui, layout, data, feedback
└── test/             # Mocks, Factories

Design Tokens

--color-accent: #f97316;        /* Orange */
--color-background: #0f0f10;    /* Dark */
--text-sm: 0.8125rem;           /* 13px default */
--font-sans: "Inter";
--spacing-4: 8px;

Patterns

// Hook mit DI
const service = useInject<ProjectsService>(TOKENS.ProjectsService);
return useQuery({ queryKey: ["projects"], queryFn: () => service.list() });

// Feature Export (index.ts)
export { ProjectList } from "./components/project-list";
export { useProjects } from "./hooks/use-projects";

// Test mit Mock
render(<Component />, {
  diOverrides: new Map([[TOKENS.Service, () => mockService]])
});

Detaillierte Specs

Lies diese on-demand:

API Backend

localhost:4001 mit X-API-Key Header:

• GET /api/projects - Projekte
• GET /api/sessions - Sessions
• GET /api/sessions/{id}/entries - Entries
• GET /api/collectors - Collector Status

Befehle

cd packages/web
pnpm dev          # localhost:3000
pnpm test         # Vitest
pnpm test:e2e     # Playwright

Workflow

1. Relevante Spec lesen (siehe Tabelle oben)
2. Komponente im richtigen Feature-Ordner erstellen
3. Tests colocated in tests/
4. Imports nur aus Feature index.ts, nie in Internals

Playwright MCP

Nutze browser_snapshot (nicht Screenshot) zum UI-Testing:

• browser_navigate → Seite öffnen
• browser_snapshot → Accessibility Tree prüfen
• browserclick, browsertype → Interaktion