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.

.agents/skills/tailwindcss/references/layout-display.md

@@ -0,0 +1,110 @@
+---
+name: layout-display
+description: 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
+
+```html
+<span class="inline">display: inline</span>
+<span class="inline-block">display: inline-block</span>
+<div class="block">display: block</div>
+```
+
+### Flex and Grid containers
+
+```html
+<!-- 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):
+
+```html
+<div class="flow-root">
+  <div class="my-4">Content with isolated BFC</div>
+</div>
+```
+
+### Contents
+
+Use `contents` for a "phantom" container whose children act like direct children of the parent:
+
+```html
+<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
+
+```html
+<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
+
+```html
+<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.
+
+### Screen reader only
+
+```html
+<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.
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/display
+-->