Create type-safe UI components with tailwind-variants in TypeScript files.
npx skills add https://github.com/zajca/zfaktury --skill component-builder-zajca
Please help me install this Agent Skill. Skill: component-builder Source: https://github.com/zajca/zfaktury/tree/main/.agents/skills/component-builder Command: npx skills add https://github.com/zajca/zfaktury --skill component-builder-zajca
This Skill standardizes the creation of UI components by enforcing a type-safe styling pattern using tailwind-variants, ensuring consistency and maintainability in the project's frontend.
primary, secondary, sm, md).Card component, use this skill to define its variant (e.g., default, elevated) and padding (e.g., sm, md) properties, ensuring all instances of Card are styled predictably.Use the component-builder skill to create a new UI component by defining its variants in a componentName.variants.ts file and then using those variants within the ComponentName.svelte file.
High-intent search queries and answers about installing and using this skill.
You build type-safe UI components by defining base classes, variant props, and compound variants in dedicated TypeScript files, ensuring consistent styling for reusable frontend elements within the `src/lib/ui/` directory.
Standardizing Svelte component styling involves enforcing a type-safe pattern using `tailwind-variants`, ensuring maintainability by defining reusable styling variations like `primary` or `secondary` in dedicated variant files.
Defining variants in separate TypeScript files improves frontend development by ensuring component props and styles are correctly typed, preventing runtime errors and making styling variations predictable across all component instances.
Yes, you can use this approach to support complex styling logic for reusable frontend elements by defining base classes, variant props, and compound variants in dedicated TypeScript files.
You need to create a dedicated variants file when creating a new UI component like a `Card`, allowing you to define its variant and padding properties to ensure all instances are styled predictably.
You apply defined tailwind-variants by creating a `componentName.variants.ts` file to establish the styling variations, then importing and using those variants within the corresponding `ComponentName.svelte` file.
s0lci700Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.
EpicenterHQGuide Svelte component mutations with TanStack Query and shadcn-svelte patterns.
raugadhStyle components with Tailwind CSS v4 utilities for responsive design and dark mode.
EngineerWithAIBuild scalable Tailwind CSS design systems with CVA variants and Radix UI primitives.