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

3.0 KiB

Raw Blame History

name, description

name	description
visual-border	Border width, color, style, and border radius

Border

Utilities for border width, color, style, and radius.

Usage

Border width

<div class="border">1px all sides</div>
<div class="border-2">2px</div>
<div class="border-0">No border</div>

<div class="border-t border-r border-b border-l">Per side</div>
<div class="border-x-2">Horizontal</div>
<div class="border-y">Vertical</div>

Border color

<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Blue</div>
<div class="border border-red-500/50">With opacity</div>

Border style

<div class="border border-solid">Solid (default)</div>
<div class="border border-dashed">Dashed</div>
<div class="border border-dotted">Dotted</div>
<div class="border border-double">Double</div>
<div class="border border-none">None</div>

Border radius

<div class="rounded">Small (default)</div>
<div class="rounded-sm">2px</div>
<div class="rounded-md">6px</div>
<div class="rounded-lg">8px</div>
<div class="rounded-xl">12px</div>
<div class="rounded-2xl">16px</div>
<div class="rounded-full">Pill/circle</div>
<div class="rounded-none">0</div>

<div class="rounded-t-lg rounded-b-none">Per corner</div>
<div class="rounded-s-md rounded-e-xl">Logical (start/end)</div>

Divide (between children)

<div class="divide-y divide-gray-200">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<div class="divide-x divide-gray-300 flex">
  <div>Col 1</div>
  <div>Col 2</div>
</div>

Ring (focus outline)

<button class="ring-2 ring-blue-500 ring-offset-2">Ring</button>
<button class="focus:ring-3 focus:ring-blue-500">Focus ring</button>

Outline

Separate from border; used for focus states. In v4: outline = 1px; outline-2, outline-4 for width. Use outline-offset-2 for offset.

<button class="outline outline-offset-2 outline-sky-500">Outline</button>
<button class="focus:outline-2 focus:outline-cyan-500">Focus outline</button>
<!-- Accessibility: invisible but visible in forced-colors -->
<button class="focus:outline-hidden">Focus outline-hidden</button>

v4: outline-none = outline-style: none; outline-hidden = invisible but shows in forced-colors mode.

Key Points

Width: border, border-{0,2,4,8}, border-{t,r,b,l,x,y}
Color: border-{color}, opacity modifier
Radius: rounded-{size}, rounded-full, rounded-{t,r,b,l,s,e}-*, logical rounded-s-*, rounded-e-*
Divide: divide-{x,y}, divide-{color} for borders between flex/grid children
Ring: ring, ring-{n}, ring-{color}, ring-offset-{n} (v4 default ring = 1px; use ring-3 for 3px)
Outline: outline, outline-{n}, outline-{color}, outline-offset-{n}, outline-hidden, outline-none

3.0 KiB Raw Blame History