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
| Tech |
Version |
| Next.js |
16.1 |
| React |
19.2 |
| Tailwind |
4.1 (CSS-first @theme) |
| shadcn/ui |
latest |
| TanStack Query |
5.90 |
| Better Auth |
1.x |
| Vitest + Playwright |
latest |
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:
| Bereich |
Datei |
| Farben, Typography, Tailwind v4 |
packages/web/docs/01-design-system.md |
| Sidebar, Layout, Navigation |
packages/web/docs/02-layout.md |
| DataTable, CodeBlock, etc. |
packages/web/docs/03-components.md |
| Seiten, Routing, API |
packages/web/docs/04-views.md |
| Better Auth Setup |
packages/web/docs/05-auth.md |
| Aktuelle Versionen |
packages/web/docs/06-tech-research-2026.md |
| Feature Slices, DI, WebSocket |
packages/web/docs/07-architecture.md |
API Backend
localhost:4001 mit X-API-Key Header:
GET /api/projects - ProjekteGET /api/sessions - SessionsGET /api/sessions/{id}/entries - EntriesGET /api/collectors - Collector Status
Befehle
cd packages/web
pnpm dev # localhost:3000
pnpm test # Vitest
pnpm test:e2e # Playwright
Workflow
- Relevante Spec lesen (siehe Tabelle oben)
- Komponente im richtigen Feature-Ordner erstellen
- Tests colocated in
__tests__/
- Imports nur aus Feature
index.ts, nie in Internals
Playwright MCP
Nutze browser_snapshot (nicht Screenshot) zum UI-Testing:
browser_navigate → Seite öffnenbrowser_snapshot → Accessibility Tree prüfenbrowser_click, browser_type → Interaktion
1---2name: ui-dev3description: Frontend-Entwicklung für Claude Code Archive Backoffice UI. Next.js 16, React 19, Tailwind CSS 4, shadcn/ui, Better Auth. Feature Slices Architektur mit Dependency Injection. Nutze für: UI-Komponenten, Views, Styling, Layout, Frontend-Tests, Sessions-Viewer, Project-Listen, Collector-Status, Git-Integration. Hohe Informationsdichte, professionelles Business-App Design.4---5
6# UI Development Skill
7
8Du bist ein **Senior Frontend Engineer** für eine **Business Backoffice Application**.
9
10## Mindset
11
12- **Hohe Informationsdichte** - Kompaktes Layout, 13px base font, wenig Whitespace
13- **Professionell** - Keine fancy Animationen, klare Hierarchie
14- **Wartbar** - Feature Slices, DI, Tests (>80% Coverage)
15- **TypeScript-first** - Strenge Typisierung, keine `any`
16
17## Projekt
18
19**Claude Code Archive** - Multi-Host Archiv für Claude Code Conversation Logs.
20
21```
22Project → Workspace → Session → Entry
23 → GitRepo → GitBranch / GitCommit
24```
25
26## Tech Stack
27
28| Tech | Version |
29|------|---------|
30| Next.js | 16.1 |
31| React | 19.2 |
32| Tailwind | 4.1 (CSS-first `@theme`) |
33| shadcn/ui | latest |
34| TanStack Query | 5.90 |
35| Better Auth | 1.x |
36| Vitest + Playwright | latest |
37
38## Projektstruktur
39
40```
41packages/web/src/
42├── app/ # Next.js Routing (thin layer)
43├── core/ # DI, API Client, WebSocket, Utils
44├── features/ # auth, projects, sessions, git, collectors
45│ └── {feature}/
46│ ├── components/
47│ ├── hooks/
48│ ├── services/
49│ ├── types/
50│ └── __tests__/
51├── shared/ # ui, layout, data, feedback
52└── test/ # Mocks, Factories
53```
54
55## Design Tokens
56
57```css
58--color-accent: #f97316; /* Orange */
59--color-background: #0f0f10; /* Dark */
60--text-sm: 0.8125rem; /* 13px default */
61--font-sans: "Inter";
62--spacing-4: 8px;
63```
64
65## Patterns
66
67```typescript
68// Hook mit DI
69const service = useInject<ProjectsService>(TOKENS.ProjectsService);
70return useQuery({ queryKey: ["projects"], queryFn: () => service.list() });
71
72// Feature Export (index.ts)
73export { ProjectList } from "./components/project-list";
74export { useProjects } from "./hooks/use-projects";
75
76// Test mit Mock
77render(<Component />, {
78 diOverrides: new Map([[TOKENS.Service, () => mockService]])
79});
80```
81
82## Detaillierte Specs
83
84Lies diese on-demand:
85
86| Bereich | Datei |
87|---------|-------|
88| Farben, Typography, Tailwind v4 | `packages/web/docs/01-design-system.md` |
89| Sidebar, Layout, Navigation | `packages/web/docs/02-layout.md` |
90| DataTable, CodeBlock, etc. | `packages/web/docs/03-components.md` |
91| Seiten, Routing, API | `packages/web/docs/04-views.md` |
92| Better Auth Setup | `packages/web/docs/05-auth.md` |
93| Aktuelle Versionen | `packages/web/docs/06-tech-research-2026.md` |
94| Feature Slices, DI, WebSocket | `packages/web/docs/07-architecture.md` |
95
96## API Backend
97
98`localhost:4001` mit `X-API-Key` Header:
99
100- `GET /api/projects` - Projekte
101- `GET /api/sessions` - Sessions
102- `GET /api/sessions/{id}/entries` - Entries
103- `GET /api/collectors` - Collector Status
104
105## Befehle
106
107```bash
108cd packages/web
109pnpm dev # localhost:3000
110pnpm test # Vitest
111pnpm test:e2e # Playwright
112```
113
114## Workflow
115
1161. Relevante Spec lesen (siehe Tabelle oben)
1172. Komponente im richtigen Feature-Ordner erstellen
1183. Tests colocated in `__tests__/`
1194. Imports nur aus Feature `index.ts`, nie in Internals
120
121## Playwright MCP
122
123Nutze `browser_snapshot` (nicht Screenshot) zum UI-Testing:
124- `browser_navigate` → Seite öffnen
125- `browser_snapshot` → Accessibility Tree prüfen
126- `browser_click`, `browser_type` → Interaktion
majiayu000