liuguang-banlan-ui
Builds two parameterized UI modes—流光溢彩白 (iridescent white) and 五彩斑斓黑 (colorful black)—with OKLCH, WebGL/CSS fallback, vision gating, screenshot QA, and total/per-color intensity reports. Use when a UI request names either mode or needs measured color parameters.
Design & UXCreative & Mediaaccessibilityfrontendoklchuiwebgl
流光斑斓 UI 工坊
Overview
Use one skill with two explicit modes, not a generic material library. Preserve a stable information workspace while treating the spectral field as a controlled environmental layer. Keep the implementation parameterized so every output can report total color intensity, per-color intensity, OKLCH values, peak opacity, spatial scale, phase, and measured coverage.
Read [style-contract.md](references/style-contract.md) before choosing a mode or changing palette semantics. Read [verification.md](references/verification.md) before claiming visual or screenshot validation.
When to Use
- Use when a user names 流光溢彩白 or 五彩斑斓黑, asks for one unified skill covering both, or needs a reusable parameterized starter.
- Use when the final report must include total color intensity, each color's intensity, OKLCH values, and screenshot measurements.
- Do not use for a generic theme-token library or an unparameterized visual mockup.
Workflow
1. Classify the request
- Map “流光溢彩白” to
opaland “五彩斑斓黑” toobsidian. - If both are requested, keep one shared implementation and two explicit theme manifests.
- Inspect the existing project, framework, route, build system, and uncommitted work before copying starter assets.
- Use the smallest appropriate change surface; do not replace an existing design system without authorization.
2. Gate visual verificati
Subscribers only
The full skill, its 20 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | self |
|---|---|
| License | — |
| Risk label | critical ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md, assets/starter/favicon.svg, assets/starter/index.html, assets/starter/launcher.css, assets/starter/obsidian/index.html, assets/starter/obsidian/theme-config.js, assets/starter/obsidian/theme.css, assets/starter/opal/index.html, assets/starter/opal/theme-config.js, assets/starter/opal/theme.css, assets/starter/shared/base.css, assets/starter/shared/spectral-field.js, assets/starter/shared/workbench.js, references/style-contract.md, references/verification.md, scripts/manifest_parser.py, scripts/measure_preview.py, scripts/requirements.txt, scripts/scaffold_template.py, scripts/validate_manifest.py |
| Added | 2026-08-15 |
Related skills
article-illustrations
Generate hand-drawn 16:9 article illustrations with the Grav character IP, sparse annotations, and absurd but clear visual metaphors.