paper-designlisted

This skill should be used when designing UI in Paper Design (app.paper.design), reading or writing Paper documents via MCP, converting Paper designs to React/Tailwind code, importing HTML/CSS into Paper, syncing design tokens, or choosing between Paper and Pencil for a design task. Triggers on Paper, paper.design, DOM-based design, design-to-code, HTML-to-design, Paper MCP, Paper artboard, prototype, mockup, layout, export design, convert design. Pairs with minoan-frontend-design for creative direction and shadcn for component library.
tdimino/claude-code-minoan · ★ 32 · Web & Frontend · score 85

Install: claude install-skill tdimino/claude-code-minoan

Read and write designs in Paper via MCP. Paper is a DOM-based design tool — designs are HTML/CSS structures that Claude reads and writes natively. ## Prerequisites Paper Desktop must be running before starting Claude Code. The app auto-starts an MCP server at `http://127.0.0.1:29979/mcp`. Run `python3 ~/.claude/skills/paper-design/scripts/health-check.py` to verify connection. If the MCP server is not registered, run `bash ~/.claude/skills/paper-design/scripts/setup.sh`. ## Paper vs Pencil Use Paper for design-to-code, code-to-design, and rapid prototyping (native DOM). Use Pencil for reusable design systems, existing `.pen` files, and presentations. Full comparison: `references/paper-vs-pencil.md` ## Workflow Every Paper interaction follows four phases: Orient, Create, Verify, Export. ### 1. Orient Read document state before making changes. Call `get_basic_info` for file name, page name, artboard list. Call `get_tree_summary` with an optional depth limit for structure overview. Call `get_selection` when the user says "this element" or "the selected thing." ### 2. Create Two paths depending on direction: **Design from scratch:** 1. `find_placement` — find empty canvas space for new artboard 2. `create_artboard` — common sizes: Desktop (1440x900), Tablet (768x1024), Mobile (375x812) 3. `start_working_on_nodes` — lock the artboard (shows progress indicator to user) 4. `write_html` — write semantic HTML with inline styles or Tailwind classes 5. `finish_working_on_node