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/core-variants.md

@@ -0,0 +1,156 @@
+---
+name: core-variants
+description: Using variants to apply utilities conditionally based on states, pseudo-classes, and media queries
+---
+
+# Variants
+
+Variants let you apply utility classes conditionally based on states, pseudo-classes, pseudo-elements, media queries, and more.
+
+## Overview
+
+Add a variant prefix to any utility class to apply it conditionally:
+
+```html
+<!-- Apply bg-sky-700 only on hover -->
+<button class="bg-sky-500 hover:bg-sky-700">Save</button>
+```
+
+Variants can be stacked to target specific situations:
+
+```html
+<!-- Dark mode, medium breakpoint, on hover -->
+<button class="dark:md:hover:bg-fuchsia-600">Save</button>
+```
+
+## Pseudo-Class Variants
+
+### Interactive States
+
+```html
+<button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-violet-500 active:bg-violet-700">
+  Save changes
+</button>
+```
+
+Common interactive variants:
+- `hover:` - `:hover` pseudo-class
+- `focus:` - `:focus` pseudo-class
+- `active:` - `:active` pseudo-class
+- `focus-visible:` - `:focus-visible`
+- `focus-within:` - `:focus-within`
+- `visited:` - `:visited`
+
+### Structural Variants
+
+```html
+<ul>
+  <li class="py-4 first:pt-0 last:pb-0">Item 1</li>
+  <li class="py-4 first:pt-0 last:pb-0">Item 2</li>
+  <li class="py-4 first:pt-0 last:pb-0">Item 3</li>
+</ul>
+```
+
+Common structural variants:
+- `first:` - `:first-child`
+- `last:` - `:last-child`
+- `odd:` - `:nth-child(odd)`
+- `even:` - `:nth-child(even)`
+- `only:` - `:only-child`
+
+### Form States
+
+```html
+<input class="border-gray-300 required:border-red-500 invalid:border-red-500" />
+```
+
+Common form variants:
+- `required:` - `:required`
+- `optional:` - `:optional`
+- `invalid:` - `:invalid`
+- `valid:` - `:valid`
+- `disabled:` - `:disabled`
+- `enabled:` - `:enabled`
+- `checked:` - `:checked`
+
+## Pseudo-Element Variants
+
+```html
+<input class="placeholder:text-gray-400 before:content-['*'] after:content-['required']" />
+```
+
+Common pseudo-element variants:
+- `before:` - `::before`
+- `after:` - `::after`
+- `placeholder:` - `::placeholder`
+- `selection:` - `::selection`
+- `first-line:` - `::first-line`
+- `first-letter:` - `::first-letter`
+
+## Media Query Variants
+
+### Responsive Variants
+
+```html
+<div class="text-sm md:text-base lg:text-lg">Responsive text</div>
+```
+
+### Dark Mode
+
+```html
+<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
+  Content
+</div>
+```
+
+By default uses `prefers-color-scheme`, but can be customized to use a class or data attribute.
+
+### Reduced Motion
+
+```html
+<div class="transition-all motion-reduce:transition-none">
+  Animated content
+</div>
+```
+
+## Attribute Selector Variants
+
+```html
+<!-- RTL support -->
+<div class="text-left rtl:text-right">Content</div>
+
+<!-- Open state -->
+<details class="[&[open]]:bg-gray-100">Details</details>
+```
+
+## Arbitrary Variants
+
+Use arbitrary variants for custom selectors:
+
+```html
+<ul>
+  <li class="lg:[&:nth-child(-n+3)]:hover:underline">Item</li>
+</ul>
+```
+
+## Child Selector Variants
+
+```html
+<div class="[&>*]:mb-4 [&>*:last-child]:mb-0">
+  <p>Paragraph 1</p>
+  <p>Paragraph 2</p>
+</div>
+```
+
+## Key Points
+
+- Variants prefix utilities to apply them conditionally
+- Variants can be stacked: `dark:md:hover:bg-blue-600`
+- Use variants for states, pseudo-classes, media queries, and more
+- Arbitrary variants enable custom selector patterns
+- Child selector variants target descendant elements
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/hover-focus-and-other-states
+-->