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

Raw Blame History

name, description

name	description
layout-display	Controlling element display type including flex, grid, block, inline, hidden, and sr-only

Display

Utilities for controlling the display box type of an element.

Usage

Basic display types

<span class="inline">display: inline</span>
<span class="inline-block">display: inline-block</span>
<div class="block">display: block</div>

Flex and Grid containers

<!-- Flex container -->
<div class="flex items-center gap-4">Flex layout</div>
<span class="inline-flex items-baseline">Inline flex with text</span>

<!-- Grid container -->
<div class="grid grid-cols-3 gap-4">Grid layout</div>
<span class="inline-grid grid-cols-3 gap-4">Inline grid</span>

Flow root

Use flow-root to create a block-level element with its own block formatting context (fixes margin collapse):

<div class="flow-root">
  <div class="my-4">Content with isolated BFC</div>
</div>

Use contents for a "phantom" container whose children act like direct children of the parent:

<div class="flex">
  <div class="flex-1">01</div>
  <div class="contents">
    <div class="flex-1">02</div>
    <div class="flex-1">03</div>
  </div>
  <div class="flex-1">04</div>
</div>

Table display

<div class="table w-full">
  <div class="table-header-group bg-gray-100">
    <div class="table-row">
      <div class="table-cell p-2">Header 1</div>
      <div class="table-cell p-2">Header 2</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell p-2">Cell 1</div>
      <div class="table-cell p-2">Cell 2</div>
    </div>
  </div>
</div>

Hidden

<div class="hidden">Removed from document flow</div>
<div class="md:block hidden">Visible only on md+</div>

For visual-only hiding while keeping in DOM, use invisible or opacity-0 instead.

<a href="#">
  <svg><!-- icon --></svg>
  <span class="sr-only">Settings</span>
</a>

Use not-sr-only to undo: <span class="sr-only sm:not-sr-only">Settings</span>

Key Points

flex / inline-flex - Flexbox layout
grid / inline-grid - CSS Grid layout
block / inline / inline-block - Basic flow
hidden - display: none (removes from flow)
sr-only - Visually hidden but accessible to screen readers
contents - Children participate in parent's layout
flow-root - Establishes new BFC
Table utilities: table, table-row, table-cell, table-header-group, etc.

2.6 KiB Raw Blame History