Enforce minimal spacing conventions for compact layouts in Svelte/Bootstrap projects. Uses py-1, px-1, my-1, mx-1 as defaults.
This skill enforces minimal spacing conventions for compact, dense UI layouts in Svelte projects using Bootstrap or Tailwind utility classes.
Guides AI agents to apply consistent, minimal spacing when building or modifying UI components. The project prefers compact layouts with tight margins and padding.
When writing or modifying UI components, follow these spacing rules:
When no specific spacing requirement is given, default to:
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
**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>
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/svelte-treeview-spacing-guidelines/raw