component-builder
Component Builder
This skill documents the tailwind-variants pattern used for UI components in this project. All UI components should follow this pattern for consistency and type safety.
When to Use
Use this skill when:
- Creating new UI components in
src/lib/ui/ - Refactoring existing components to use tailwind-variants
- Adding new variants to existing components
Quick Start
Every component needs two files:
componentName.variants.ts- Variant definitionsComponentName.svelte- The component
More from svelte-society/sveltesociety.dev
svelte-code-writer
CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating or editing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.
15using-remote-functions
Create SvelteKit components using Remote Functions for type-safe client-server communication. Use when building components that need to fetch data, submit forms, or execute server commands. Remote Functions work at the component level, not page level.
13page builder
Patterns for building list and detail pages with forms, filters, and data fetching
10e2e test builder
Create Playwright E2E tests using Page Object Model pattern with database isolation
10admin crud page
Create admin dashboard pages with tables, forms, and actions
7sample-basic
A minimal example skill demonstrating the required structure. Use this as a template when creating new skills.
1