@johnwayneeee

workflow-node-setup covers React Flow node configuration including handles, edges, resizing, drag behavior, markdown rendering, and verification. addresses multi-channel connections, layout containment, and streaming prep for AI integration.

Convert Figma or Pencil designs into production-ready frontend code using Feature-Sliced Design and Tailwind CSS v4. Use when translating designs into code,...

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 au...

Model product UI actions from user intent questions after a meaningful outcome, completion, created resource, imported data, uploaded file, synced integratio...

Convert Pencil `.pen` design files and named Pencil node IDs into production frontend code. Use when asked to implement, migrate, reproduce, or refine a Penc...

Best practices for writing, reviewing, and refactoring React Flow / @xyflow/react v12 canvases. Use when work touches React Flow components, custom nodes, cu...

Final visual polish for an existing UI without redesigning it. Use after structure is clear, when asked to improve spacing, alignment, text hierarchy, readab...