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-flexbox.md

@@ -0,0 +1,110 @@
+---
+name: layout-flexbox
+description: Flexbox layout utilities including flex-direction, justify, items, gap, grow, shrink, and wrap
+---
+
+# Flexbox
+
+Utilities for building flex layouts: direction, alignment, gap, and item sizing.
+
+## Usage
+
+### Flex direction and wrap
+
+```html
+<div class="flex flex-row">Horizontal (default)</div>
+<div class="flex flex-row-reverse">Reversed</div>
+<div class="flex flex-col">Vertical</div>
+<div class="flex flex-col-reverse">Vertical reversed</div>
+
+<div class="flex flex-wrap">Wrap when needed</div>
+<div class="flex flex-nowrap">No wrap (default)</div>
+<div class="flex flex-wrap-reverse">Wrap reversed</div>
+```
+
+### Justify content
+
+```html
+<div class="flex justify-start">Start</div>
+<div class="flex justify-end">End</div>
+<div class="flex justify-center">Center</div>
+<div class="flex justify-between">Space between</div>
+<div class="flex justify-around">Space around</div>
+<div class="flex justify-evenly">Space evenly</div>
+```
+
+### Align items
+
+```html
+<div class="flex items-start">Align start</div>
+<div class="flex items-end">Align end</div>
+<div class="flex items-center">Center (common)</div>
+<div class="flex items-baseline">Baseline</div>
+<div class="flex items-stretch">Stretch (default)</div>
+```
+
+### Align self (on flex children)
+
+```html
+<div class="flex">
+  <div class="self-auto">Auto</div>
+  <div class="self-start">Start</div>
+  <div class="self-center">Center</div>
+  <div class="self-stretch">Stretch</div>
+</div>
+```
+
+### Gap
+
+```html
+<div class="flex gap-4">gap-4 (1rem)</div>
+<div class="flex gap-x-2 gap-y-4">Different x/y gap</div>
+<div class="flex gap-0">No gap</div>
+```
+
+### Flex grow, shrink, basis
+
+```html
+<div class="flex">
+  <div class="w-14 flex-none">Fixed</div>
+  <div class="flex-1">Grows and shrinks</div>
+  <div class="flex-initial">Shrink only</div>
+  <div class="flex-auto">Grow/shrink with initial size</div>
+</div>
+```
+
+- `flex-1` = `flex: 1 1 0%` - equal distribution
+- `flex-initial` = `flex: 0 1 auto` - shrink, don't grow
+- `flex-auto` = `flex: 1 1 auto` - grow/shrink from content size
+- `flex-none` = `flex: none` - no grow or shrink
+
+### Order
+
+```html
+<div class="flex">
+  <div class="order-2">Second</div>
+  <div class="order-1">First</div>
+  <div class="order-last">Last</div>
+</div>
+```
+
+## Key Points
+
+- Use `flex` or `inline-flex` as container (see layout-display)
+- Direction: `flex-row`, `flex-col`, `flex-row-reverse`, `flex-col-reverse`
+- Justify: `justify-start`, `justify-center`, `justify-between`, `justify-evenly`
+- Align: `items-center`, `items-start`, `items-stretch`
+- Gap: `gap-{n}`, `gap-x-{n}`, `gap-y-{n}` (spacing scale)
+- Item sizing: `flex-1`, `flex-none`, `flex-auto`, `flex-initial`
+- Self alignment: `self-center`, `self-start`, etc.
+- Order: `order-{n}`, `order-first`, `order-last`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/flex-direction
+- https://tailwindcss.com/docs/justify-content
+- https://tailwindcss.com/docs/align-items
+- https://tailwindcss.com/docs/gap
+- https://tailwindcss.com/docs/flex
+- https://tailwindcss.com/docs/order
+-->