Generate and deploy a complete brand asset pack for a Next.js App Router project. Scans the project, prints what to generate with exact specs, then imports and wires everything correctly.
Convert Figma or Pencil designs into production-ready frontend code using Feature-Sliced Design and Tailwind CSS v4. Use when translating designs into code, extracting tokens, mapping UI to FSD layers (shared / entities / features / widgets / pages / app-shell / app), enforcing Server vs Client boundaries when applicable, or validating design-to-code fidelity.
Convert Pencil `.pen` design files and named Pencil node IDs into production frontend code. Use when asked to implement, migrate, reproduce, or refine a Pencil/Figma-like visual design in code, especially for responsive artboards, glassmorphism, typography matching, background image layers, design tokens, or visual fidelity debugging against Pencil node IDs.
Configure, adjust, debug, and verify React Flow workflow nodes. Use when working on custom node components, especially for node handles, multi-channel connections, edge ids/styles, NodeResizer behavior, drag handles, nodrag/nowheel areas, and markdown scroll containers.
Run a pre-deploy browser audit of a live, preview, or local web page for accessibility, SEO, Lighthouse quality, and critical UX issues. Use when asked to audit a page/site before deployment, check WCAG 2.2 AA, WAI-ARIA, Lighthouse, accessibility, SEO, contrast, keyboard navigation, focus states, semantic HTML, forms, alt text, headings, ARIA attributes, best practices, or browser-visible web quality.
Model product UI actions from user intent questions after a meaningful outcome, completion, created resource, imported data, uploaded file, synced integration, report, deployment, automation, review state, handoff, or workflow milestone. Use when deciding which actions to show, hide, group, name, prioritize, defer, or place across outcome, item, selection, continuation, navigation, recovery, and assistance scopes.
Best practices for writing, reviewing, and refactoring React Flow / @xyflow/react v12 canvases. Use when work touches React Flow components, custom nodes, custom edges, handles, node data typing, viewport controls, MiniMap/Background/Panel usage, NodeToolbar, NodeResizer, or workflow-builder review tasks.
Final visual polish for an existing UI without redesigning it. Use after structure is clear, when asked to improve spacing, alignment, text hierarchy, readability, shadows, highlights, effects, action placement, or overall production feel. For screen structure, layer naming, code handoff, preview scenes, or animation planning, use pencil-ui-structure first.