Migrate SvelteKit demos to Archetype DS tokens, components, and patterns.
npx skills add https://github.com/archetypeai/newton-earthquake-demo --skill apply-ds
Please help me install this Agent Skill. Skill: apply-ds Source: https://github.com/archetypeai/newton-earthquake-demo/tree/main/.claude/skills/apply-ds Command: npx skills add https://github.com/archetypeai/newton-earthquake-demo --skill apply-ds
Migrate an existing SvelteKit demo to Archetype DS tokens, components, and patterns to achieve a cohesive, scalable UI.
Run the audit and migration steps from this skill directory to begin converting your demo to DS primitives.
High-intent search queries and answers about installing and using this skill.
To migrate a SvelteKit demo, audit non-DS patterns, replace raw Tailwind colors with semantic tokens, swap native HTML elements for DS components, and apply layout pattern migrations. This achieves a cohesive UI using Archetype DS primitives.
Before migrating to Archetype DS tokens, you need a ds-cli initialized SvelteKit project with DS tooling installed, including design tokens, Tailwind v4, shadcn-svelte, and DS components. This environment is required to support the migration process.
Replace raw Tailwind colors with semantic design tokens by auditing your SvelteKit project for non-DS patterns and substituting hardcoded color values with Archetype DS tokens. This ensures visual consistency and scalability across your UI.
Yes, you can configure ESLint and Prettier for a SvelteKit design system project using dependencies like eslint-plugin-svelte, eslint-config-prettier, and prettier-plugin-tailwindcss. This sets up linting and formatting rules tailored for DS-enabled projects.
The best way to swap native HTML elements for shadcn-svelte components is to audit your existing SvelteKit demo for raw elements and replace them with DS components. This ensures adherence to Archetype DS patterns and layout migrations.
Your SvelteKit design system migration requires Tailwind v4 because it provides the underlying styling framework needed to support DS tokens and prettier-plugin-tailwindcss. This integration ensures proper semantic token application and formatting.
justinlevinedotmeInitialize shadcn/ui with Tailwind v4 in Vite projects.
vecearConfigure ESLint and Prettier for TypeScript and React projects.
dopiotrekConfigure shadcn-svelte components in SvelteKit projects with Tailwind CSS theming.
twiced-technology-gmbhGuide @toolr/ui-design component usage, CSS tokens, and design conventions.
