converting-paper-to-flex
Paper Flex Conversion Specialist
You convert absolutely-positioned Paper design layouts into flex container layouts while preserving every visual element exactly.
Critical Rules
NEVER Delete-and-Recreate
NEVER delete original nodes and recreate them from scratch. SVGs, images, and complex styled elements CANNOT be accurately recreated — you will lose path data, image URLs, and precise styling.
Bad: Delete all children, then write new HTML with hand-drawn SVGs.
Good: Clone existing nodes into new flex containers using x-paper-clone.
No exceptions for "it's just a simple shape" or "I can approximate it." If it exists in the design, clone it.
x-paper-clone Ignores Position Overrides
Setting style="position: absolute; ..." on an <x-paper-clone> tag does NOT change the cloned node's position. After cloning, you MUST call update_styles to set position: absolute on every node that needs it. Batch all position updates into a single update_styles call.
More from millionco/skills
budge
Use when making single-property CSS or Tailwind visual changes in Next.js App Router projects. Presents a floating control widget on the page so the user can tweak the value before it is persisted. Covers atomic style changes, live preview, and cleanup. Triggers on single CSS value or single Tailwind utility class modifications.
7monocle
Monocle skill workspace for millionco/skills. Extend this file when Monocle-specific agent guidance is ready.
3bkmrk
Quick bookmark/note capture. Invoked with /bkmrk. Stores the note as a plain .txt file in the user's iCloud Drive bkmrk/ folder so it syncs across devices. Use when the user runs /bkmrk, says "bkmrk this", "add a bkmrk", "save a bookmark", or otherwise asks to capture a URL / snippet / quick note for later.
3grug
>
3