@its-thepoe/design-and-refine 1.0.0

package/SKILL.md

@@ -0,0 +1,63 @@
+---
+name: design-and-refine
+description: >-
+  Runs the 0x Designer "Design & Refine" workflow: multiple real UI variations,
+  side-by-side comparison at /__design_lab, feedback-driven synthesis, then
+  DESIGN_PLAN.md + DESIGN_MEMORY.md. Use when designing or redesigning a
+  component/page, exploring layout/density options, unblocking direction,
+  or when the user says design lab, UI variations, 0x designer, design-and-refine,
+  or kylezantos/0x-designer-plugin. Prefer a quick mock or single-shot tweak
+  when they only need one small change. Requires a running dev server and a
+  supported web stack (see reference.md).
+argument-hint: "[component or page name — optional]"
+---
+
+# Design & Refine (0x Designer workflow)
+
+**Source:** [kylezantos/0x-designer-plugin](https://github.com/kylezantos/0x-designer-plugin) (Claude Code plugin; originates from [0xdesign](https://github.com/0xdesign) “Design and Refine”).
+
+**What you get:** Several **distinct UI implementations** in code (not static mockups), a **comparison route** at `/__design_lab`, **iterative merge** from user feedback, then **persistent** `DESIGN_PLAN.md` and `DESIGN_MEMORY.md`. Temp dirs/routes are removed after finalize.
+
+---
+
+## Choose path
+
+### A) Claude Code — official plugin (full automation)
+
+User must use **Claude Code** with the marketplace plugin (not Cursor-only):
+
+1. `/plugin marketplace add 0xdesign/design-plugin` — if that fails, use the repo they actually track: see [reference.md](reference.md#upstream-repos-and-marketplace).
+2. `/plugin install design-and-refine@design-plugins`
+3. Start: `/design-and-refine:start` or `/design-and-refine:start $ARGUMENTS`
+4. Cleanup if stuck: `/design-and-refine:cleanup`
+
+Point the user here when they have Claude Code; do not pretend Cursor runs those slash commands.
+
+### B) Cursor / other IDEs — manual playbook (this session)
+
+When the user is in **Cursor** (or no plugin), **emulate the workflow**:
+
+1. **Preflight** — Detect framework (Next, Vite, Remix, Astro, CRA, etc.) and styling (Tailwind, CSS modules, MUI, Chakra, Ant Design, styled-components, Emotion) from the repo. Read tokens from `tailwind.config.*`, theme files, CSS variables.
+2. **Brief** — Short interview: new vs redesign, component vs page, pain points, inspiration (e.g. “Linear density”, “Stripe clarity”), primary user tasks.
+3. **Generate** — Create **~5 meaningfully different** variants (hierarchy, layout model, density, interaction pattern, visual weight). Use **their** design system; no random one-off palette unless the project does.
+4. **Design Lab route** — Add a dev route so all variants render **side by side** (same pattern as plugin: `app/__design_lab` or `pages/__design_lab` depending on router). Document the URL (port from their dev server, often `localhost:3000/__design_lab`).
+5. **User review** — User keeps **dev server running**; they compare in browser. Collect feedback: per-variant likes, or element-level notes if they paste structured feedback.
+6. **Synthesize** — Produce one refined direction combining what worked; iterate rounds until they say stop.
+7. **Finalize** — Write **`DESIGN_PLAN.md`** (implementation steps, a11y checks, testing notes) and **`DESIGN_MEMORY.md`** (style decisions for future sessions). Remove **temporary** paths (see [reference.md](reference.md#temp-vs-persistent-files)).
+
+---
+
+## Invariants
+
+- **Never** leave the repo full of orphaned lab routes and `.claude-design` junk after the user says they are **done** — clean temp artifacts as part of finalize (match plugin behavior).
+- **Do not** start the dev server in a blocking way unless the user asks; assume they run it.
+- Variations must be **runnable code** in their stack, not screenshots-only.
+
+---
+
+## Handoffs
+
+- **Tiny change** (one button, copy tweak) → skip full lab; edit inline.
+- **No web UI** (CLI-only, native app) → say this workflow is for **web** frontends; offer a lighter design doc instead.
+
+Full framework list, temp paths, tips, and upstream links: [reference.md](reference.md).

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@its-thepoe/design-and-refine",
+  "version": "1.0.0",
+  "description": "Agent Skill: Design & Refine / 0x Designer workflow (manual playbook + Design Lab guidance).",
+  "license": "MIT",
+  "keywords": ["agent-skills", "design", "ui", "cursor"],
+  "files": ["SKILL.md", "reference.md", "package.json"],
+  "exports": {
+    ".": "./SKILL.md",
+    "./SKILL.md": "./SKILL.md",
+    "./reference.md": "./reference.md"
+  }
+}

package/reference.md

@@ -0,0 +1,62 @@
+# Design & Refine — reference
+
+## One-line memory
+
+**Compare several real UI builds in the browser → say what you like → synthesize → write `DESIGN_PLAN.md` + `DESIGN_MEMORY.md` → delete temp lab files.**
+
+---
+
+## Upstream repos and marketplace
+
+- User-linked repo: [github.com/kylezantos/0x-designer-plugin](https://github.com/kylezantos/0x-designer-plugin)
+- README mentions marketplace: `0xdesign/design-plugin`, plugin install: `design-and-refine@design-plugins`.
+- Attribution: [0xdesign / 0xdesigner](https://github.com/0xdesign).
+
+If marketplace names change, follow the **main README** of the repo the user trusts.
+
+---
+
+## Supported stacks (from upstream README)
+
+**Frameworks:** Next.js (App & Pages), Vite (React, Vue), Remix, Astro, Create React App.
+
+**Styling:** Tailwind CSS, CSS Modules, Material UI, Chakra UI, Ant Design, styled-components, Emotion.
+
+---
+
+## Temp vs persistent files
+
+| Phase | Paths / artifacts |
+|-------|-------------------|
+| During session | `.claude-design/` (variants, previews, brief), `app/__design_lab/` or `pages/__design_lab` (or framework-equivalent comparison route) |
+| After finalize | **Keep:** `DESIGN_PLAN.md`, `DESIGN_MEMORY.md`. **Remove:** temp design folder and `__design_lab` route unless the team wants to keep the route for demos (default: **remove** to match plugin) |
+
+---
+
+## Design Lab URL
+
+Typically `http://localhost:3000/__design_lab` — use the project’s real port and dev command from `package.json` / docs.
+
+---
+
+## Interactive feedback (plugin UI)
+
+The upstream plugin includes a **Figma-style overlay** (Add Feedback → click elements → submit → paste in terminal). When emulating in Cursor, ask the user to either:
+
+- Paste free-form “what I like per variant”, or  
+- Paste structured notes if they use any overlay you add.
+
+---
+
+## Tips (from upstream)
+
+- Be specific in the brief; reference products they admire.
+- Don’t stop after round one — synthesis pass matters.
+- Dev server must already be running.
+- Read `DESIGN_PLAN.md` after finalize for implementation and a11y/test notes.
+
+---
+
+## Install this skill (Cursor, etc.)
+
+Symlink or copy the folder `design-and-refine/` into the IDE’s skills directory (see `write-a-skill` in the same repo for paths).