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

2.1 KiB

Raw Blame History

name, description

name	description
layout-inset	Controlling placement of positioned elements with top, right, bottom, left, and inset utilities

Top / Right / Bottom / Left

Utilities for controlling the placement of positioned elements.

Usage

Basic positioning

Use top-<number>, right-<number>, bottom-<number>, left-<number> to position elements:

<!-- Pin to top left corner -->
<div class="relative size-32">
  <div class="absolute top-0 left-0 size-16">01</div>
</div>

<!-- Span top edge -->
<div class="relative size-32">
  <div class="absolute inset-x-0 top-0 h-16">02</div>
</div>

<!-- Fill entire parent -->
<div class="relative size-32">
  <div class="absolute inset-0">05</div>
</div>

Inset utilities

Use inset-<number> for all sides, inset-x-<number> for horizontal, inset-y-<number> for vertical:

<div class="absolute inset-0">Fill parent</div>
<div class="absolute inset-x-0 top-0">Span top</div>
<div class="absolute inset-y-0 left-0">Span left</div>

Negative values

Prefix with a dash for negative values:

<div class="relative size-32">
  <div class="absolute -top-4 -left-4 size-14"></div>
</div>

Logical properties

Use start-<number> and end-<number> for RTL-aware positioning:

<div dir="ltr">
  <div class="absolute start-0 top-0">Left in LTR</div>
</div>
<div dir="rtl">
  <div class="absolute start-0 top-0">Right in RTL</div>
</div>

Percentage and custom values

Use fractions for percentages or arbitrary values:

<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
  Centered
</div>
<div class="absolute top-[117px] left-[20%]">
  Custom position
</div>

Key Points

inset-0 sets all sides to 0 (equivalent to top-0 right-0 bottom-0 left-0)
inset-x-0 sets left and right to 0
inset-y-0 sets top and bottom to 0
Use start/end for logical properties that adapt to text direction
Negative values use dash prefix: -top-4, -left-8
Combine with position utilities (absolute, fixed, relative, sticky)

2.1 KiB Raw Blame History