CLAUDE前端开发规范
This file provides guidance to Claude Code (claude.ai/code) when working with frontend code in this repository.
### 第一部分:核心编程原则 (Guiding Principles)
这是我们合作的顶层思想,指导所有具体的行为。
#### 基础设计原则
- **用户体验优先 (User Experience First):** 所有技术决策都应以用户体验为出发点
graph that maps system architecture, code structure, and service relationships.
## Repository Structure
```
ui/ — React/TypeScript frontend (includes graph visualization components)
agent/ — Python agent (loads data into the graph)
proto/ — Protobuf definitions
What this is:** Jest-based test suite for core functionality (Vitest is used in `frontend/` for the web app).
## Critical Test Requirements
**ALWAYS use both flags:**
```bash
npm test -- --coverage
brainstorming` before any new creative task. For aesthetic direction without brand context, invoke `Skill: frontend-design`.
## Agent-autonomy discipline (Phase 0 pre-flight)
**Before asking the user anything**, every workflow
cloned locally at `/Users/luqmannul.hakim/htdocs/9router`.
> For complete codebase mapping, Golang optimization standards, Svelte 5 frontend standards, standard Go unit testing conventions, and upstream sync protocols, **ALWAYS READ `AGENTS.md`**.
## graphify
This project
Backend Developer", "Build REST API with Express. Use hooks for coordination.", "backend-dev")
Task("Frontend Developer", "Create React UI. Coordinate with backend via memory.", "coder")
Task("Database Architect", "Design PostgreSQL
Detects listening dev servers on common ports
- `port-proxy.ts` - HTTP proxy for dev server preview
**Frontend (web/):**
- Vanilla JavaScript with xterm.js (CDN-loaded)
- `app.js` - Main client logic, WebSocket communication, terminal rendering
artifact both --install-deps --json
```
There is no separate lint/format config. Match surrounding style.
## Frontend
The dashboard source lives in `frontend/`. Vite builds into `kyoko/assets/web/`
so the Python package
A file Claude Code reads at the start of every session. It holds the commands, conventions and warnings the agent needs for this project.
Where does it go?
At the repository root. Claude Code also reads CLAUDE.md files in subdirectories when it works there.
What should it contain?
Build and test commands, the project's layout, conventions that aren't obvious from the code, and mistakes to avoid. Short files tend to work better than long ones.
CLAUDE.md or AGENTS.md?
Claude Code reads CLAUDE.md; most other agents read AGENTS.md. Many projects keep one and point the other at it.