Skip to content

CLAUDE.md

Latest commit

 

History

History
27 lines (20 loc) · 1.64 KB

CLAUDE.md

File metadata and controls

27 lines (20 loc) · 1.64 KB

Made-Refine

Visual CSS editor for React apps, rendered inside Shadow DOM for CSS isolation.

Tooling

  • Package manager: bun (use bun run for scripts, not pnpm or npm)
  • Build: bun run build — tsup with custom esbuild plugin for CSS processing
  • Test: bun run test

Architecture

  • CSS: Tailwind CSS v4, injected into Shadow DOM at runtime
  • UI: @base-ui/react components portal into shadow root (not document.body)

Reference

  • Module structure — provider hooks, panel components, toolbar popovers, and key patterns
  • Shadow DOM + Tailwind v4 workaround — why some Tailwind classes fail in Shadow DOM and how we fix it
  • CLI — npx made-refine init, framework detection, and project setup
  • MCP client — browser-to-agent communication protocol for sending edits and comments
  • MCP server — tools agents use to read annotations, annotation lifecycle, project/session scoping
  • Mac app integration — HTTP contract between the overlay and the local Mac app broker
  • Runner workflow — end-to-end: element selection → CSS edit → send → agent applies code
  • Preload — React fiber DevTools hook, why it loads before React, framework wiring
  • Canvas body offset — why guideline math must account for body margin in canvas mode
  • Component classification — how elements are classified as component primitives vs instances, purple overlay, source routing