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.2 KiB

Raw Blame History

name, description

name	description
visual-background	Background color, gradient, image, and attachment utilities

Background

Utilities for background color, gradients, images, and attachment.

Usage

Background color

<div class="bg-white">White</div>
<div class="bg-gray-100">Light gray</div>
<div class="bg-blue-500">Blue</div>
<div class="bg-sky-500/50">50% opacity</div>
<div class="bg-[#1da1f2]">Arbitrary</div>
<div class="bg-(--my-bg)">CSS variable</div>

Color palette follows theme (red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone).

Background image and gradient

<div class="bg-gradient-to-r from-blue-500 to-purple-600">Linear gradient</div>
<div class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">Multi-stop</div>

<div class="bg-[url('/img/hero.jpg')]">Image</div>
<div class="bg-[url('/img/hero.jpg')] bg-cover bg-center">Image with size/position</div>

Gradient directions: to-t, to-tr, to-r, to-br, to-b, to-bl, to-l, to-tl.

Background size and position

<div class="bg-auto">auto</div>
<div class="bg-cover">cover</div>
<div class="bg-contain">contain</div>

<div class="bg-center">center</div>
<div class="bg-top">top</div>
<div class="bg-bottom">bottom</div>
<div class="bg-left">left</div>
<div class="bg-right">right</div>
<div class="bg-[position:2rem_2rem]">Arbitrary</div>

Background repeat and attachment

<div class="bg-repeat">repeat (default)</div>
<div class="bg-no-repeat">no-repeat</div>
<div class="bg-repeat-x">repeat-x</div>

<div class="bg-fixed">fixed (parallax)</div>
<div class="bg-local">local</div>
<div class="bg-scroll">scroll</div>

Key Points

Colors: bg-{color}-{shade}, opacity /50, arbitrary bg-[#hex]
Gradients: bg-gradient-to-{dir}, from-*, via-*, to-*
Image: bg-[url('...')], bg-cover, bg-center, etc.
Size: bg-auto, bg-cover, bg-contain
Position: bg-center, bg-top, bg-[position:...]

2.2 KiB Raw Blame History