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

2.1 KiB

Raw Blame History

name, description

name	description
effects-form-controls	Form control styling with accent-color, appearance, caret-color, and resize

Form Controls & Input Styling

Utilities for styling form controls: accent color, native appearance, caret color, and resize behavior.

Usage

Accent color

Control the accent color of checkboxes, radio buttons, range inputs, and progress:

<input type="checkbox" class="accent-pink-500" checked />
<input type="radio" class="accent-rose-500" name="opt" />
<input type="range" class="accent-indigo-500" />

<!-- Opacity modifier -->
<input type="checkbox" class="accent-purple-500/75" />

Appearance

Remove native form control styling for custom designs:

<!-- Custom select with overlay icon -->
<div class="grid">
  <select class="col-start-1 row-start-1 appearance-none bg-gray-50 ...">
    <option>Yes</option>
  </select>
  <svg class="pointer-events-none col-start-1 row-start-1 ...">...</svg>
</div>

<!-- Restore default in forced-colors mode (accessibility) -->
<input type="checkbox" class="appearance-none forced-colors:appearance-auto" />

Caret color

Set the text input cursor color:

<textarea class="caret-pink-500">Focus to see caret</textarea>
<input class="caret-blue-500" />

Resize

Control textarea resize behavior:

<textarea class="resize-y">Vertical only</textarea>
<textarea class="resize-x">Horizontal only</textarea>
<textarea class="resize">Both directions</textarea>
<textarea class="resize-none">No resize handle</textarea>

Key Points

accent-* - theme colors for checkboxes, radio, range; use accent-[#hex] or accent-(--var) for custom
appearance-none - remove native styling (custom selects, checkboxes)
appearance-auto - restore default (e.g. for forced-colors: active)
caret-* - theme colors for input cursor; matches text color patterns
resize - both; resize-x - horizontal; resize-y - vertical; resize-none - no handle

2.1 KiB Raw Blame History