dekit-cli 0.2.2 → 0.3.0

package/README.md

@@ -1,101 +1,71 @@
 # dekit
 
-A code-first design toolkit — preview, inspect, and debug your HTML/CSS designs in the browser.
+A design canvas for AI code agents.
 
-## Features
+Agents write HTML/CSS designs, preview and screenshot them, iterate until satisfied — then humans review in the browser and give feedback.
 
-- **Live Preview** — see your HTML/CSS designs rendered in a browser with hot reload
-- **Device Simulation** — preview on iPhone, iPad, Android, desktop, or custom dimensions
-- **Element Inspector** — click any element to see its computed styles, box model, and attributes
-- **Layer Tree** — navigate your DOM structure with a visual layer panel
-- **Web Components** — define reusable components with `<template>` + CSS
-- **YAML Configuration** — simple `design.yaml` to define pages, components, and styles
+## What It Does
 
-## Quick Start
-
-Install globally:
-
-```bash
-npm install -g dekit-cli
+```
+Agent creates design  →  dekit renders it  →  Agent screenshots to check  →  iterates  →  Human reviews
 ```
 
-Create a `design.yaml` in your project:
-
-```yaml
-version: 1.0
-global-style: "global.css"
-
-components:
-  my-button:
-    template: "components/my-button/button.html"
-    style: "components/my-button/button.css"
+- Agent scaffolds a design project with built-in templates (landing page, dashboard, mobile app)
+- Agent writes HTML/CSS, takes screenshots to see the result, and self-corrects
+- Human opens the browser preview, inspects elements, and gives feedback using refs
+- Agent resolves the feedback to exact source code locations and iterates
 
-pages:
-  home:
-    template: "pages/home/home.html"
-    style: "pages/home/home.css"
-```
+## Getting Started
 
-Run:
+### 1. Install
 
 ```bash
-dekit
+npm install -g dekit-cli
 ```
 
-The editor opens at `http://localhost:3000`.
-
-## Configuration
+### 2. Set up your agent
 
-### design.yaml
+Create a skill file at `.claude/skills/dekit/SKILL.md`:
 
-| Field | Description |
-|-------|-------------|
-| `version` | Config version (currently `1.0`) |
-| `global-style` | Path to a global CSS file applied to all pages |
-| `components` | Map of Web Component tag names to their template and style files |
-| `pages` | Map of page names to their template and style files |
+```markdown
+---
+name: dekit
+description: Use dekit to create, preview, and iterate on HTML/CSS designs
+---
+Run `dekit usage` to get the full usage guide.
+Follow the guide to complete your design task.
+```
 
-Component tag names must contain a hyphen (`my-button`, not `button`) per the Web Components spec.
+## Examples
 
-## CLI Options
+**Let the agent design from scratch:**
 
 ```
-Usage: dekit [-c <design.yaml>]
-
-Options:
-  -c, --config       Path to design.yaml (default: ./design.yaml or ./design.yml)
-  -p, --port         Editor server port (default: 3000)
-  --design-port      Design server port (default: 3001)
-  -h, --help         Show this help message
+> Use dekit to design a landing page for a task management app
 ```
 
-## Contributing
-
-See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup and guidelines.
+The agent handles everything — project setup, writing HTML/CSS, taking screenshots to verify, and iterating on the design.
 
-## License
+**Review and give feedback:**
 
-[Apache 2.0](LICENSE)
+When the agent starts the preview server, open the browser to review. Right-click any element and **Copy Ref**, then tell the agent what to change:
 
-## For Agents
+```
+> The hero section $${home@.hero} needs more padding, and make the CTA button blue
+```
 
-Install dekit globally:
+**Add a page to an existing design:**
 
-```bash
-npm install -g dekit-cli
+```
+> Add a pricing page to the dekit project with a 3-tier card layout
 ```
 
-Run `dekit usage` to get the full usage guide.
+**Design for mobile:**
 
-### Skill Setup (Optional)
+```
+> Use dekit to design a mobile app for a fitness tracker, use the mobile template
+```
 
-Create a skill file for your agent (e.g. `.claude/skills/dekit.md`):
+## License
 
-```markdown
----
-name: dekit
-description: Use dekit to create, preview, and iterate on HTML/CSS designs
----
-Run `dekit usage` to get the full usage guide.
-Follow the guide to complete your design task.
-```
+[Apache 2.0](LICENSE)

package/bin/dekit.ts

@@ -11,13 +11,14 @@ Commands:
   init [path]          Initialize a new design project
   add <type> <name>    Add a page or component
   ls                   List pages and components
-  serve                Start the preview server (default)
+  serve                Start the preview server (default, port 7980)
   screenshot <ref>     Take a screenshot of a page or element
   resolve <ref>        Resolve a ref to file path and line range
   usage                Print the agent usage guide
 
 Options:
   -c, --config         Path to dekit.yaml
+  -p, --port           Editor server port (default: 7980)
   -h, --help           Show this help message
 
 Run 'dekit <command> --help' for command-specific help.
@@ -102,16 +103,10 @@ async function main() {
     }
     case "serve": {
       const config = await loadConfig(configArg);
-      const port = parseInt(
-        commandArgs.find((_, i, a) => a[i - 1] === "-p") ?? "3000",
-        10
-      );
-      const designPort = parseInt(
-        commandArgs.find((_, i, a) => a[i - 1] === "--design-port") ?? "3001",
-        10
-      );
+      const portArg = commandArgs.find((_, i, a) => a[i - 1] === "-p");
+      const port = portArg ? parseInt(portArg, 10) : undefined;
       const noOpen = commandArgs.includes("--no-open");
-      await startServers({ config, port, designPort, noOpen });
+      await startServers({ config, port, noOpen });
       break;
     }
     case "screenshot": {