Claude Development Notes

Spacing Guidelines

Preferred Margins and Padding

For this project, use minimal spacing to keep layouts compact:

Padding Classes

Use
```
py-1
```
(0.25rem top/bottom) instead of
```
py-4
```
or
```
py-5
```
Use
```
px-1
```
(0.25rem left/right) for minimal horizontal padding
Use
```
p-1
```
for minimal padding on all sides
Use
```
p-2
```
(0.5rem) for slightly more padding when needed

Margin Classes

Use
```
my-1
```
(0.25rem top/bottom) for minimal vertical margins
Use
```
mx-1
```
(0.25rem left/right) for minimal horizontal margins
Use
```
m-1
```
for minimal margin on all sides
Use
```
m-2
```
(0.5rem) for slightly more margin when needed

When to Use Larger Spacing

Use
```
py-2
```
or
```
py-3
```
only for major section separators
Use
```
my-3
```
or
```
my-4
```
for spacing between distinct content blocks
Avoid
```
py-4
```
,
```
py-5
```
,
```
my-4
```
,
```
my-5
```
unless absolutely necessary for visual hierarchy

Bootstrap Spacing Scale Reference

```
1
```
= 0.25rem (4px)
```
2
```
= 0.5rem (8px)
```
3
```
= 1rem (16px)
```
4
```
= 1.5rem (24px)
```
5
```
= 3rem (48px)

Current Project Preference

Keep the UI compact and dense. Prioritize

py-1

px-1

my-1

mx-1

for most elements.

Claude Development Notes

Spacing Guidelines

Preferred Margins and Padding

For this project, use minimal spacing to keep layouts compact:

Padding Classes

Use
```
py-1
```
(0.25rem top/bottom) instead of
```
py-4
```
or
```
py-5
```
Use
```
px-1
```
(0.25rem left/right) for minimal horizontal padding
Use
```
p-1
```
for minimal padding on all sides
Use
```
p-2
```
(0.5rem) for slightly more padding when needed

Margin Classes

Use
```
my-1
```
(0.25rem top/bottom) for minimal vertical margins
Use
```
mx-1
```
(0.25rem left/right) for minimal horizontal margins
Use
```
m-1
```
for minimal margin on all sides
Use
```
m-2
```
(0.5rem) for slightly more margin when needed

When to Use Larger Spacing

Use
```
py-2
```
or
```
py-3
```
only for major section separators
Use
```
my-3
```
or
```
my-4
```
for spacing between distinct content blocks
Avoid
```
py-4
```
,
```
py-5
```
,
```
my-4
```
,
```
my-5
```
unless absolutely necessary for visual hierarchy

Bootstrap Spacing Scale Reference

```
1
```
= 0.25rem (4px)
```
2
```
= 0.5rem (8px)
```
3
```
= 1rem (16px)
```
4
```
= 1.5rem (24px)
```
5
```
= 3rem (48px)

Current Project Preference

Keep the UI compact and dense. Prioritize

py-1

px-1

my-1

mx-1

for most elements.

Claude Development Notes

Claude Development Notes

Spacing Guidelines

Preferred Margins and Padding

Padding Classes

Margin Classes

When to Use Larger Spacing

Bootstrap Spacing Scale Reference

Current Project Preference

Related Skills

Markdown Converter

Nano Banana Pro

1password

Claude Development Notes

Spacing Guidelines

Preferred Margins and Padding

Padding Classes

Margin Classes

When to Use Larger Spacing

Bootstrap Spacing Scale Reference

Current Project Preference