Vibe Index
🎯

styling

🎯Skill

from epicenterhq/epicenter

VibeIndex|
What it does

styling skill from epicenterhq/epicenter

styling

Installation

Install skill:
npx skills add https://github.com/epicenterhq/epicenter --skill styling
16
-
Last UpdatedJan 26, 2026
View on GitHubBack to Skills

Skill Details

SKILL.md

CSS and Tailwind styling guidelines. Use when writing styles, creating UI components, reviewing CSS/Tailwind code, or deciding on wrapper element structure.

Overview

# Styling Guidelines

Minimize Wrapper Elements

Avoid creating unnecessary wrapper divs. If classes can be applied directly to an existing semantic element with the same outcome, prefer that approach.

Good (Direct Application)

```svelte

{@render children()}

```

Avoid (Unnecessary Wrapper)

```svelte

{@render children()}

```

This principle applies to all elements where the styling doesn't conflict with the element's semantic purpose or create layout issues.

Tailwind Best Practices

  • Use the cn() utility from $lib/utils for combining classes conditionally
  • Prefer utility classes over custom CSS
  • Use tailwind-variants for component variant systems
  • Follow the background/foreground convention for colors
  • Leverage CSS variables for theme consistency

More from this repository10

🎯
documentation🎯Skill

documentation skill from epicenterhq/epicenter

🎯
svelte🎯Skill

svelte skill from epicenterhq/epicenter

🎯
error-handling🎯Skill

error-handling skill from epicenterhq/epicenter

🎯
git🎯Skill

git skill from epicenterhq/epicenter

🎯
workflow🎯Skill

workflow skill from epicenterhq/epicenter

🎯
monorepo🎯Skill

monorepo skill from epicenterhq/epicenter

🎯
readme-writing🎯Skill

readme-writing skill from epicenterhq/epicenter

🎯
rust-errors🎯Skill

rust-errors skill from epicenterhq/epicenter

🎯
honesty🎯Skill

honesty skill from epicenterhq/epicenter

🎯
control-flow🎯Skill

control-flow skill from epicenterhq/epicenter