skills

Use when interactive elements that have visual spacing between them (chart bars/columns, list rows, nav items, segmented controls, tabs, calendar cells, icon buttons, legend chips) need hover or click to respond across the whole region with no dead zones. Triggers on "dead space", "deadspace", "gap between bars/items isn't clickable", "hover flickers between items", "have to aim precisely", "hit area too small", "highlight drops out between". Covers separating the hit area from the visual area, why gap/margin/space-between creates dead zones, and the flush-target + inner-spacing fix.

Use when implementing Paper MCP, Paper-to-code, design-to-code, Viewfinder, or Paper-exported JSX in React/Next.js apps. Covers component candidates, choosing the canonical artboard among iterations, data-driven charts/visualizations, globals.css tokens for arbitrary values, shadcn reuse, data-paper-* roots, and avoiding monolithic JSX.

Use when a built app that was derived from a Paper design looks "slightly off" versus the design, or to verify a Paper-to-code implementation against its source. Covers using a local paper-sync project as the canonical oracle, porting the real fonts, extracting exact type/color/spacing values from canonical frames, and screenshot-diffing the running app against the paper-sync `?preview#<frame>` render.

Use when converting Paper canvas or design nodes from absolute positioning to flex or auto-layout. Covers Paper MCP absolute-to-flex restructuring, x-paper-clone preservation, clone z-order, computed spacing, shadow cleanup, SVG/image fidelity, layered cards, and screenshot verification.

Use when consolidating, deduping, or reducing the number of CSS custom properties / Tailwind v4 design tokens in a globals.css file. Triggers on requests like "reduce tokens", "standardize design tokens", "too many tokens", "dedupe globals.css", "shrink @theme inline", "collapse similar colors", or any task whose goal is fewer tokens while keeping the same visual result. Covers @theme inline, --color-* aliases, :root/.dark/.dashboard-page blocks, dead-token analysis, value-similar collapse, single-use inlining, and the Tailwind v4 arbitrary-value escape syntax.