What problem does it solve? Moving an existing project's real design system into a visual editor is slow and error-prone: tokens get retyped, Tailwind configs get rewritten, and components get replaced with lookalike markup. This Skill imports the source project's actual design tokens, CSS entry chain, Tailwind configuration, assets, and components into Bingo while progressively drawing a live design-system reference page that proves the import compiles. ## Core Features & Use Cases - Foundation-first import: Copies the package manifest, CSS entry and import chain, and Tailwind v3 or v4 configuration exactly as authored, then renders token swatches using the source's own utility classes rather than inline values. - Batched component ingestion: Reads, adapts, and writes source components in batches of 6-10, preserving names, exports, props, path aliases, and variants, with a ledger tracking import, adapt, or skip decisions. - Live verification page: Builds a Design System canvas page section by section, takes screenshots to verify rendering, and recreates one representative source page for fidelity comparison. - Use Case: Point the assistant at your local React codebase and ask it to import the design system; it lands the Tailwind foundation, draws color and typography scales, imports components in batches, and finishes with a verified reference page and coverage summary. ## Quick Start Ask the assistant to import the design system from your current local project into Bingo and build the Design System reference page.
