Ryan Buckley

You can port Base UI and shadcn/ui components into the BlazeUI Blazor library, both headless and styled variants, run visual fidelity comparisons against the shadcn reference app using CSS diffs and animation verification, and automate browser interactions like form filling, screenshots, and web data extraction.

These skills target .NET and Blazor developers building or maintaining the BlazeUI component library, particularly engineers migrating React-based Base UI or shadcn/ui components into Blazor and QA-minded developers verifying visual parity through programmatic style and animation comparison.

The port-base-ui skill fetches Base UI source and tests from GitHub, plans the Blazor file structure, implements all sub-parts, writes bUnit tests, and verifies the build. The port-component skill additionally creates styled templates, demo pages, compiles Tailwind CSS, and verifies visuals via playwright-cli.

Required runtimes include the dotnet CLI for Blazor builds and bUnit tests, Node.js with pnpm or npx for the shadcn reference app, and playwright-cli for browser automation. Supporting shell utilities such as curl, lsof, sed, and process management commands are also used during reference testing.

Use reference-test to compare existing BlazeUI styled components against the shadcn/ui reference app, diagnosing CSS differences and animation timing issues such as Blazor render cycle conflicts. Use port-component only when adding a brand-new component; neither skill covers fixing existing components or general code review.