skills.rest
s0lci700
s0lci700COMMUNITY
Explore all skills by this author →
GitHub

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

1|Updated Feb 18, 2026
Search Tags:#frontend#css#svelte#design-tokens#component-conversion#bits-ui
One-click install
npx skills add https://github.com/s0lci700/OVERLAYS --skill svelte-native
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte-native
Source: https://github.com/s0lci700/OVERLAYS/tree/main/.claude/skills/svelte-native
Command: npx skills add https://github.com/s0lci700/OVERLAYS --skill svelte-native

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts a bits-ui / shadcn-svelte / tailwind-variants component into a native Svelte 5 + CSS component that adheres to the project's design tokens, avoiding styling conflicts and Tailwind-only workflows.

Core Features & Use Cases

  • Native Svelte 5 component with a paired CSS file and design token variables.
  • Detects and resolves styling conflicts when Tailwind variants or bits-ui quirks fight the token system.
  • Use cases include migrating components from design-system libraries to a native framework while preserving look and behavior.

Quick Start

Convert a bits-ui component to a native Svelte 5 component with a paired CSS file and design tokens.

Frequently Asked Questions about svelte-native

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

FAQPage Schema
How do I convert a bits-ui component to native Svelte 5 with CSS?▼

Converting a bits-ui component to native Svelte 5 involves generating a paired CSS file and design token variables, replacing Tailwind utility classes to resolve styling conflicts and adhere to the project's design system.

What is the best way to fix Tailwind variant conflicts in a Svelte design system?▼

The best way to fix Tailwind variant conflicts in a Svelte design system is converting components to native Svelte 5 paired with CSS files and token variables, eliminating reliance on Tailwind utility classes.

Why does Tailwind class resolution fail when using bits-ui components?▼

Tailwind class resolution fails when bits-ui quirks or tailwind-variants conflict with the project's token system, requiring conversion to native Svelte 5 components with paired CSS files to restore styling consistency.

Can I migrate shadcn-svelte components to a native framework without losing design tokens?▼

Yes, migrating shadcn-svelte components to a native Svelte 5 framework preserves look and behavior by generating paired CSS files and adhering to the project's design token variables.

When should I not use Tailwind utility classes for frontend component conversion?▼

Avoid Tailwind utility classes for frontend component conversion when design tokens conflict with library-based styling or class resolution fails, necessitating a native Svelte 5 CSS approach.

Related Skills

Explore More Software Engineering Skills→
hai-serieshai-series
3

hai-ui

Build cross-platform UIs with Svelte 5 Runes, DaisyUI, and Tailwind CSS.

Official
Advanced
nirukk52nirukk52
1

frontend-development

Coordinate SvelteKit 2, Svelte 5 runes, Skeleton UI, and Encore clients for frontend features.

Community
Advanced
dylantarredylantarre
38

svelte

Build token-driven Svelte 5 components using runes and TypeScript.

Community
Intermediate
TNHoang2708TNHoang2708
1

ck:ui-styling

Integrate shadcn/ui components and Tailwind CSS for accessible responsive interfaces.

Community
Advanced