skills.rest
openkaiden
openkaidenOFFICIAL
Explore all skills by this author →
GitHub

ui-components

Reuse @podman-desktop/ui-svelte components before building new UI elements.

95|38|Updated Aug 4, 2025
Search Tags:#design#frontend#svelte#ui-components#component-library#podman-desktop
One-click install
npx skills add https://github.com/openkaiden/kaiden --skill ui-components-openkaiden
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-components
Source: https://github.com/openkaiden/kaiden/tree/main/.agents/skills/ui-components
Command: npx skills add https://github.com/openkaiden/kaiden --skill ui-components-openkaiden

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Kaiden UI projects often diverge in look and behavior due to ad-hoc component usage; this Skill provides a centralized guide and enforces reuse of a shared component library to ensure consistent UI across the application.

Core Features & Use Cases

  • Reuse existing components from @podman-desktop/ui-svelte before building new ones to maintain visual consistency and reduce duplication.
  • Avoid raw Tailwind color usage; follow the color registry and use theme variables for theming.
  • Extend or wrap existing Kortex shared components when possible to minimize divergence across the app.

Quick Start

Begin by surveying the shared component library and selecting an appropriate existing component before creating a new UI element.

Frequently Asked Questions about ui-components

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

FAQPage Schema
How do I reuse Svelte UI components to maintain visual consistency in frontend development?▼

To maintain visual consistency when reusing Svelte UI components, survey the shared @podman-desktop/ui-svelte library before building new elements, extending existing components to minimize application divergence.

What is the best way to avoid look and behavior divergence in a Svelte component library?▼

The best way to avoid look and behavior divergence in a Svelte component library is by centralizing component usage, avoiding raw Tailwind colors, and wrapping existing Kortex shared components.

Can I use raw Tailwind color classes for theming in Kaiden UI development?▼

No, you cannot use raw Tailwind color classes for theming in Kaiden UI development; you must follow the color registry and use theme variables to ensure consistent application theming.

How do I extend an existing component in the @podman-desktop/ui-svelte library?▼

You extend an existing component in the @podman-desktop/ui-svelte library by wrapping the shared Kortex component, ensuring any new UI features integrate without duplicating visual logic.

When should I create a new UI component instead of using the shared Svelte library?▼

You should create a new UI component only after surveying the @podman-desktop/ui-svelte shared library and confirming that no existing component can be extended or wrapped to satisfy your requirements.

Related Skills

Explore More Design & Creative Skills→
podman-desktoppodman-desktop
477

svelte-ui-design

Build Svelte 5 UI components with Podman Desktop's design system.

Official
Intermediate
quanngynxquanngynx

hoc-pattern

Reuse shared React component behavior with Higher-Order Components.

Community
Intermediate
acquiaacquia
16

canvas-styling-conventions

Enforce Tailwind CSS v4 theme tokens, CVA variants, and cn utility in Canvas components.

Official
Intermediate
hschnehschne
1

tailwind

Style Rails ERB views and Svelte components with Tailwind CSS and DaisyUI utilities.

Community
Intermediate