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.2 KiB

Raw Blame History

name, description

name	description
effects-visibility-interactivity	Visibility, cursor, pointer-events, user-select, and z-index

Visibility & Interactivity

Utilities for visibility, cursor, pointer-events, user-select, and stacking.

Usage

Visibility

<div class="visible">Visible (default)</div>
<div class="invisible">Hidden but in layout</div>
<div class="collapse">Table collapse</div>

Use invisible when you need to keep layout space; use hidden (display:none) to remove from flow.

Cursor

<button class="cursor-pointer">Pointer</button>
<div class="cursor-not-allowed">Disabled</div>
<div class="cursor-wait">Loading</div>
<div class="cursor-move">Draggable</div>
<div class="cursor-grab">Grab</div>
<div class="cursor-grabbing">Grabbing</div>
<div class="cursor-text">Text select</div>
<div class="cursor-default">Default</div>
<div class="cursor-none">No cursor</div>

Pointer events

<div class="pointer-events-none">Ignore all pointer events</div>
<div class="pointer-events-auto">Default behavior</div>

Useful for overlays: make overlay pointer-events-none so clicks pass through, or pointer-events-none on disabled elements.

User select

<p class="select-none">Cannot select</p>
<p class="select-text">Select text (default)</p>
<p class="select-all">Select all on click</p>
<p class="select-auto">Browser default</p>

Z-index

<div class="z-0">0</div>
<div class="z-10">10</div>
<div class="z-20">20</div>
<div class="z-50">50</div>
<div class="z-auto">Auto</div>
<div class="z-[100]">Arbitrary</div>

Common: z-0 (base), z-10 (dropdowns), z-20 (fixed nav), z-50 (modal), z-40 (overlay).

Key Points

Visibility: visible, invisible, collapse
Cursor: cursor-{pointer,not-allowed,wait,move,grab,text,default,none}
Pointer events: pointer-events-none, pointer-events-auto
User select: select-none, select-text, select-all
Z-index: z-{0,10,20,30,40,50,auto}, z-[n]

2.2 KiB Raw Blame History