skills.rest
HiokKuek
HiokKuekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sgds-migration

Migrate frontend applications from other UI libraries to SGDS web components.

Updated Sep 5, 2026
Search Tags:#testing#react#design system#migration#tailwind#web components#sgds
One-click install
npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-migration-hiokkuek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sgds-migration
Source: https://github.com/HiokKuek/hdb_pricing/tree/main/.agents/skills/sgds-migration
Command: npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-migration-hiokkuek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Migrating an existing frontend application from UI libraries like MUI, Chakra UI, shadcn/ui, or Bootstrap to SGDS web components involves many coordinated changes: component swaps, event handler rewrites, test infrastructure updates, and CSS utility replacements. This Skill provides a structured four-phase workflow that prevents common pitfalls such as Tailwind preflight conflicts, Shadow DOM test failures, and inconsistent React wrapper usage. ## Core Features & Use Cases - Stack Scanning: Analyze a React codebase with the included Python script to identify UI library dependencies, component usage, and test coverage, producing a JSON migration plan. - Library-Specific Mappings: Reference guides map components and props from MUI, Chakra UI, shadcn/ui, and sgds-react v2 to their SGDS web component equivalents with before/after code examples. - Test Migration Paths: Choose between Vitest + Playwright browser testing (full Shadow DOM support) or patching an existing Jest/RTL suite with polyfills for ElementInternals, slots, and animations. - Use Case: A team with a React app built on Material UI needs to adopt the Singapore Government Design System. The Skill scans the codebase, guides SGDS installation with correct font and CSS import order, migrates Jest tests to handle Shadow DOM, and replaces MUI sx props with sgds: utility classes. ## Quick Start Ask the assistant to migrate your React project from Material UI to SGDS web components, starting with a scan of your current frontend stack.

Frequently Asked Questions about sgds-migration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate a React app from Material UI to SGDS?▼

Follow the four-phase workflow: scan your stack, install SGDS with Inter font and foundation CSS, migrate tests to Vitest plus Playwright or patch Jest/RTL, then replace MUI components and sx props with SGDS web components and sgds: utility classes. The from-mui.md reference provides component and props mapping tables.

Should I use Vitest with Playwright or patch my existing Jest tests for SGDS?▼

Use Vitest with Playwright browser testing for full Shadow DOM support and real browser behavior, recommended for new projects. Patch existing Jest/RTL with polyfills when you have a large test suite that is costly to rewrite, accepting that JSDOM cannot test shadow DOM internals.

Why do SGDS web component styles break when using Tailwind CSS?▼

Tailwind's preflight reset overrides SGDS web component internal styles. Import tailwindcss/theme.css and tailwindcss/utilities.css separately instead of the full tailwindcss import, which excludes the preflight reset while keeping utilities functional.

Can I migrate to SGDS incrementally without rewriting everything?▼

Yes, migrate one component at a time since SGDS web components use Shadow DOM and will not conflict with your old library's CSS. Old and new components can coexist during the transition, and custom components without SGDS equivalents can remain unchanged.

Does SGDS migration support frameworks other than React?▼

React is fully supported with dedicated analysis tooling and PascalCase React wrappers. For Vue, Angular, and other frameworks, the same Vitest plus Playwright testing foundation applies, but component analysis tooling is still a work in progress and manual discussion is recommended.

Why do getByRole queries fail on SGDS components in Jest tests?▼

JSDOM does not support real Shadow DOM, so RTL role and label queries cannot reach inside SGDS web components. Query the host elements directly with document.querySelector('sgds-input') or use getByText combined with closest('sgds-checkbox') instead.

Related Skills

Explore More Software Engineering Skills→
po4ykapo4yka

extract

Extract reusable components, design tokens, and patterns into a design system.

Community
Intermediate
GovTechSGGovTechSG
18

sgds-theming

Customize SGDS application themes with CSS token overrides.

Official
Intermediate
GovTechSGGovTechSG
18

sgds-forms

Validate SGDS form components with constraint and custom validation APIs.

Official
Intermediate
GovTechSGGovTechSG
18

sgds-getting-started

Bootstrap SGDS projects with fonts, foundation CSS, utilities, components, and app layouts.

Official
Intermediate