What framework does this target?

It targets the WebX framework, specifically utilizing Go, templ, and the Datastar library for hypermedia-driven interactivity.

How does it verify that the migration was successful?

It generates a dedicated showcase page for manual visual verification and creates automated E2E tests using Playwright to check both rendering and interactive behavior.

Does this skill handle interactive components?

Yes, it specifically supports Tier 2 interactive components by defining signal structs and utilizing Datastar (ds.*) helpers for state management.

Can I use it with custom Tailwind classes?

Absolutely. The skill includes a step to rebuild the CSS using the project's Tailwind configuration if new classes are introduced during the migration.

DaisyUI to WebX Component Migrator

Name: DaisyUI to WebX Component Migrator
Author: plaenen

byplaenen

•

设计工具

Migrates DaisyUI components into type-safe WebX templ components with integrated Datastar interactivity and E2E testing.

This skill automates the complex process of porting DaisyUI components into the WebX Go ecosystem. It follows a rigorous migration guide to transform standard HTML/CSS structures into modular templ components, mapping DaisyUI modifiers to typed Go constants. The skill handles both Tier 1 visual components and Tier 2 interactive components, ensuring that state management is handled correctly via Datastar helpers. Beyond code generation, it also manages the creation of showcase pages, Tailwind CSS rebuilding, and the generation of Playwright-based E2E tests to ensure component reliability.

主要功能

01Automated generation of showcase pages and routing registration

02Standardized E2E test generation using Playwright

03Automated conversion of DaisyUI HTML to Go templ components

04Mapping of DaisyUI modifiers to typed Go constants for better DX

052 GitHub stars

06Datastar attribute integration for high-performance interactivity

使用场景

01Maintaining UI quality through automated E2E testing of frontend components

02Scaling a Go-based web application with a consistent DaisyUI design system

03Converting static CSS components into interactive hypermedia-driven elements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add plaenen/webx migrate-component

For use in Claude.ai and ChatGPT