AgentSkillsCN

ui-dev

Claude代码档案后台UI的前端开发。 Next.js 16、React 19、Tailwind CSS 4、shadcn/ui、Better Auth。 功能切片架构与依赖注入。 适用于：UI组件、视图、样式、布局、前端测试、会话查看器、项目列表、收集器状态、Git集成。 信息密度高，专业商务应用设计。

SKILL.md
--- frontmatter
name: ui-dev
description: |
  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.

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.

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

Tech Stack

TechVersion
Next.js16.1
React19.2
Tailwind4.1 (CSS-first @theme)
shadcn/uilatest
TanStack Query5.90
Better Auth1.x
Vitest + Playwrightlatest

Projektstruktur

code
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

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

Patterns

typescript
// 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:

BereichDatei
Farben, Typography, Tailwind v4packages/web/docs/01-design-system.md
Sidebar, Layout, Navigationpackages/web/docs/02-layout.md
DataTable, CodeBlock, etc.packages/web/docs/03-components.md
Seiten, Routing, APIpackages/web/docs/04-views.md
Better Auth Setuppackages/web/docs/05-auth.md
Aktuelle Versionenpackages/web/docs/06-tech-research-2026.md
Feature Slices, DI, WebSocketpackages/web/docs/07-architecture.md

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

bash
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
  • •browser_click, browser_type → Interaktion