Svelte Treeview Spacing Guidelines

This skill enforces minimal spacing conventions for compact, dense UI layouts in Svelte projects using Bootstrap or Tailwind utility classes.

What This Skill Does

Guides AI agents to apply consistent, minimal spacing when building or modifying UI components. The project prefers compact layouts with tight margins and padding.

Instructions

When writing or modifying UI components, follow these spacing rules:

1. Default Padding Classes

2. Default Margin Classes

3. When to Use Larger Spacing

4. Bootstrap Spacing Scale Reference

5. Default Behavior

When no specific spacing requirement is given, default to:

6. Review Existing Code

When modifying existing components:

1. Identify any uses of `py-4`, `py-5`, `my-4`, `my-5`

2. Replace with `py-1`, `my-1` unless the larger spacing is justified

3. Document exceptions with inline comments

Examples

**Before (too spacious):**

```svelte

<div class="card py-4 my-4">

<h2 class="py-3">Title</h2>

<p class="my-3">Content</p>

</div>

```

**After (compact):**

```svelte

<div class="card py-1 my-2">

<h2 class="py-1">Title</h2>

<p class="my-1">Content</p>

</div>

```

Constraints