kiso_skill
- Shell
31
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
3 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill steveclarke/dotfiles --skill kiso- SKILL.md3.7 KB
Overview
This skill helps you build accessible, themeable Rails UI components with Tailwind CSS using Kiso. It provides ERB-based components, theming via CSS variables, icon integration, and helpers for composing forms and layouts in Rails + Hotwire apps. Use it to standardize styling, apply semantic color systems, and customize components globally or per instance.
How this skill works
The skill exposes a helper (kui) to render components as ERB partials composed from base classes, variants, and compound variants. It maps semantic utilities (bg-primary, text-foreground, etc.) to CSS variables for consistent theming and automatically resolves class conflicts with tailwind_merge. Icons are rendered server-side via the kiso_icon helper and can be extended by pinning icon sets.
When to use it
- Building consistent UI components across a Rails + Hotwire app
- Creating accessible buttons, badges, cards, forms, and layout primitives
- Applying or customizing a semantic color theme for light/dark mode
- Overriding global defaults or tailoring styles for individual components
- Rendering inline SVG icons server-side with a consistent API
Best practices
- Install via the gem and run the installer to scaffold required assets and helpers
- Prefer semantic color names (primary, success, error, neutral) instead of raw color utilities
- Configure global overrides in an initializer for app-wide consistency and zero per-render cost
- Use per-instance css_classes for one-off style adjustments; rely on tailwind_merge to resolve conflicts
- Load detailed reference docs (components, theming, icons) on demand — don’t import everything at once
Example use cases
- Render a card with header, title, and content using nested kui calls for consistent spacing and headings
- Create a themed CTA button using color: :primary and variant: :solid to match branding
- Apply a global button shape and default variant via Kiso.configure in config/initializers
- Quickly add inline SVG icons from bundled Lucide or pinned sets using kiso_icon within buttons and links
- Customize a form input’s styles per-instance while keeping default form component behavior intact
FAQ
Override the theme CSS variables in your app stylesheet using @theme inline and set --color-primary and related foreground variables.
Can I change a component globally?
Yes. Use Kiso.configure in an initializer to set base classes, variants, compound_variants, and defaults. These are applied once at boot.
How are conflicting classes handled?
Per-instance css_classes merge with theme defaults and global config; conflicts are resolved by tailwind_merge to produce the final class string.
