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-utility-classes.md

@@ -0,0 +1,59 @@
+---
+name: core-utility-classes
+description: Understanding Tailwind's utility-first approach and how to style elements with utility classes
+---
+
+# Utility Classes
+
+Tailwind CSS uses a utility-first approach where you style elements by combining many single-purpose utility classes directly in your markup.
+
+## Overview
+
+Instead of writing custom CSS, you compose designs using utility classes:
+
+```html
+<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg">
+  <img class="size-12 shrink-0" src="/logo.svg" alt="Logo" />
+  <div>
+    <div class="text-xl font-medium text-black">ChitChat</div>
+    <p class="text-gray-500">You have a new message!</p>
+  </div>
+</div>
+```
+
+## Benefits
+
+- **Faster development** - No need to come up with class names or switch between HTML and CSS files
+- **Safer changes** - Adding or removing utilities only affects that element
+- **Easier maintenance** - Find the element and change classes, no need to remember custom CSS
+- **More portable** - Copy entire UI chunks between projects easily
+- **Smaller CSS** - Utilities are reusable, so CSS doesn't grow linearly
+
+## Why Not Inline Styles?
+
+Utility classes have important advantages over inline styles:
+
+- **Design constraints** - Choose from a predefined design system instead of magic numbers
+- **State variants** - Target hover, focus, and other states with variants like `hover:bg-blue-600`
+- **Responsive design** - Use responsive variants like `md:flex` for media queries
+
+## Utility Class Structure
+
+Utility classes follow consistent naming patterns:
+
+- **Property-value**: `bg-blue-500`, `text-lg`, `rounded-xl`
+- **Responsive**: `md:flex`, `lg:text-center`
+- **State variants**: `hover:bg-blue-600`, `focus:outline-2`
+- **Arbitrary values**: `top-[117px]`, `bg-[#bada55]`
+
+## Key Points
+
+- Every utility class is single-purpose and composable
+- Utilities can be combined with variants for conditional styling
+- Use complete class names - Tailwind scans your files as plain text
+- Avoid dynamically constructing class names with string interpolation
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/styling-with-utility-classes
+-->