Generate and wire diagrams for existing `ai-in-business` slide decks by reading `page.tsx`, selecting diagram-worthy slides, creating `flowcharts.tsx` configs, and rendering them with `FlowRenderer`. Use when a course already has slides and only diagram creation or diagram refactoring is needed. DO NOT use for digital-transformation or other courses.
This skill is for one job only: add or improve diagrams in an existing course page.tsx under src/app/(courses)/courses/ai-in-business/*.
Use this skill when slide content already exists and the task is to convert process-heavy slides into clear visual diagrams.
page.tsx<SlideDeck>flowcharts.tsxflowcharts.tsx in the same course folderpage.tsx imports and diagram render blocksFlowRendererpage.tsx and map all slides.3: explicit steps/stages with clear transitions2: structure is present but needs interpretation1: too vague for a useful diagram3 slides.2 slides only if the deck still lacks visual coverage.1, do not force diagrams. Leave the slide text-based and document why.flowcharts.tsxflowcharts.tsx file, not in page.tsx.marketIntelligenceFlow.aiGeneratedNodesaiGeneratedEdgesidpositiondata: { label, sublabel?, icon, color? }id, source, targetlabeltype: "smoothstep"animatedstylelucide-react icons in node icon fields with size={20} and strokeWidth={2}.markerEnd in diagram configs. FlowRenderer injects arrow markers automatically.These rules are strict and must be followed for every generated diagram.
320px horizontal spacing for sequence rows.160px or 280px vertical spacing for layered rows.250px, 500px, or 550px.<= 960px<= 550px>= 100px>= 70px(courses) palette as the baseline:
#8B0000, #A52A2A)#1A1A1D, #2D2D32)#D4AF37) for premium emphasis onlysourceHandle: "right-source" and targetHandle: "left".sourceHandle: "bottom-source" and targetHandle: "top".sourceHandle: "top-source" and targetHandle: "bottom".type: "smoothstep" and animated: true.type: "smoothstep", animated: false, and dashed stroke (strokeDasharray: "5,5").strokeWidth: 2opacity: 0.55 for main flowopacity: 0.6 for labeled emphasis edgesOmniNode has min-w-[220px], so leave adequate horizontal room between columns.FlowRenderer applies fitView with padding, so keep layouts compact and balanced.page.tsxFlowRenderer from ../../_components/FlowRenderer../flowcharts.<div className="w-full h-[300px] sm:h-[340px] md:h-[380px] overflow-hidden rounded-2xl border border-[var(--crimson)]/15 bg-white/80">
<FlowRenderer {...marketIntelligenceFlow} />
</div>
h-[300px] sm:h-[340px] md:h-[380px] unless the slide has a justified exception.300px, tablet 340px, desktop 380px.page.tsx stays focused on layout while large arrays remain in flowcharts.tsx.markerEnd in flowchart definitions.flowcharts.tsx320px horizontal, 160px or 280px vertical)smoothstep; feedback edges are dashed and not animatedx <= 960, y <= 550)page.tsx updated with clean imports and render blocks<topic>Flow constants or flexible namescourse-diagram-generation on src/app/(courses)/courses/09-product-development/page.tsx and add diagrams to the best slides."course-diagram-generation to move inline node and edge arrays into flowcharts.tsx and keep slide JSX clean."course-diagram-generation and focus only on lifecycle and pipeline slides."src/app/(courses)/_components/FlowRenderer.tsxsrc/app/(courses)/_components/SlideComponents.tsx.github/instructions/courses-styling.instructions.md