Files

zguiyang bbb2f41591 feat: add new OpenSpec skills for change management and onboarding

- Created `openspec-ff-change` skill for fast-forward artifact creation.
- Introduced `openspec-new-change` skill for structured change creation.
- Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow.
- Added `openspec-sync-specs` skill for syncing delta specs to main specs.
- Implemented `openspec-verify-change` skill for verifying implementation against change artifacts.
- Updated `.gitignore` to exclude OpenSpec generated files.
- Added `skills-lock.json` to manage skill dependencies.

2026-03-13 13:18:03 +08:00

1.7 KiB

Raw Blame History

name, description

name	description
layout-padding	Controlling element padding with spacing scale, logical properties, and directional utilities

Padding

Utilities for controlling an element's padding.

Usage

All sides

Use p-<number> to set padding on all sides:

<div class="p-4">Padding on all sides</div>
<div class="p-8">Larger padding</div>

Individual sides

Use pt-<number>, pr-<number>, pb-<number>, pl-<number>:

<div class="pt-6">Top padding</div>
<div class="pr-4">Right padding</div>
<div class="pb-8">Bottom padding</div>
<div class="pl-2">Left padding</div>

Horizontal and vertical

Use px-<number> for horizontal, py-<number> for vertical:

<div class="px-8">Horizontal padding</div>
<div class="py-8">Vertical padding</div>

Logical properties

Use ps-<number> (padding-inline-start) and pe-<number> (padding-inline-end) for RTL support:

<div dir="ltr">
  <div class="ps-8">Left padding in LTR</div>
  <div class="pe-8">Right padding in LTR</div>
</div>
<div dir="rtl">
  <div class="ps-8">Right padding in RTL</div>
  <div class="pe-8">Left padding in RTL</div>
</div>

Custom values

Use arbitrary values for custom padding:

<div class="p-[5px]">Custom padding</div>
<div class="px-[calc(50%-1rem)]">Custom calculation</div>

Key Points

Spacing scale: p-0 through p-96 (and beyond)
Individual: pt-*, pr-*, pb-*, pl-* for specific sides
Axes: px-* (horizontal), py-* (vertical)
Logical: ps-* (start), pe-* (end) adapt to text direction
No negative padding - padding cannot be negative in CSS
Common patterns: p-4, px-6, py-8, pt-2, pb-4

1.7 KiB Raw Blame History