菜单
OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, and handle gamut boundaries. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Read an open GitHub pull request via the `gh` CLI and rewrite its title and description to follow a conventional-commits + JIRA-ticket format with a concise structured body and a smart pre-merge checklist derived from the diff. Use this skill whenever the user wants to clean up, format, normalize, standardize, or apply a template to a pull request — including phrases like "fix my PR description" or "update PR".
Compact the current conversation into a handoff document for another agent to pick up.
Pipe the response's prose to the macOS clipboard via `pbcopy` so the user can paste it directly. Use when the user says "copy to clipboard", "/copy", "pbcopy this", "put it on my clipboard", or otherwise asks for paste-ready output. macOS only.
Best practices for OpenID Connect (OIDC) and OAuth 2.0 — flow selection, token validation, endpoints, discovery, and security hardening. Use when building, integrating, or reviewing authentication code: OIDC/OAuth clients (RP), authorization servers (OP), an OIDC library, ID token / JWT validation, PKCE, refresh tokens, DPoP, or logout. Triggers on OpenID Connect, OAuth, SSO, ID token, access token, auth flow, JWKS, client_secret, PKCE, or "log in with".
Code-review skill with mode routing. Default lens is `standard` (alias `quick`) — correctness, security, quality in one pass with a verdict. Other modes: `security` (OWASP, high-confidence only), `architecture` (module depth, coupling, boundaries), `merge-risk` (shippability + reversibility), `intent` (alias `adversarial`) — does the diff deliver what was promised, `multi` (alias `full`) — six parallel reviewers plus a verifier. Invoke as /review-code [<mode>] [<scope>]. Use for any code-review or PR-audit task.
OAuth2.0
| name | frontend-oklch |
| description | OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, and handle gamut boundaries. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors. |
OKLCH is a perceptually uniform color space where the numbers actually mean what you think they mean. Most color problems in CSS — broken palettes, failing contrast, hue drift — come from using color spaces that don't match how we see. OKLCH fixes the model so the tools work. To explore interactively, visit oklch.fyi.
| Category | When to use | Reference |
|---|---|---|
| Conversion | Hex/rgb/hsl to oklch | color-conversion.md |
| Palettes | Generate scales, multi-hue, dark mode | palette-generation.md |
| Contrast | APCA/WCAG checks, fixing failing contrast | accessibility-contrast.md |
| Gamut | P3 fallbacks, gamut clamping, sRGB fallbacks | gamut.md |
oklch(0.5 ...) is visually mid. HSL's lightness: 50% varies wildly by hue.oklch(L C H)
oklch(L C H / alpha)
| Channel | Range | Description |
|---|---|---|
| L (Lightness) | 0–1 | 0 = black, 1 = white. Perceptually uniform. |
| C (Chroma) | 0–~0.4 | Colorfulness. 0 = gray. Max depends on L and H. |
| H (Hue) | 0–360 | Hue angle in degrees. |
| alpha | 0–1 | Optional transparency. Slash syntax. |
oklch(0.637 0.237 25.331)
oklch(0.8 0.05 200 / 0.5)
Formatting: L and C use 3 decimal places, H uses up to 3. Drop trailing zeros. Format -0 as 0. Browser support: Baseline 2023, 96%+ global coverage.
| Rule | Value |
|---|---|
| Light/dark boundary | L > 0.6 = light background → use dark text |
| Lightness gap (light bg) | Foreground L < 0.45 when background L > 0.85 |
| Lightness gap (dark bg) | Foreground L > 0.75 when background L < 0.25 |
| Hue drift threshold | > 10° spread across palette steps = visible drift |
| APCA normal text | |Lc| >= 60 to pass, >= 75 for pass+ |
| WCAG 2 normal text | 4.5:1 AA, 7:1 AAA |
| Contrast fix | Adjust L only — chroma has negligible effect |
Always present color changes as a markdown table with Before and After columns. Include every color that was changed — not just a subset. Never list findings as separate "Before:" / "After:" lines outside of a table.
| Before | After |
|---|---|
color: #3b82f6 | color: oklch(0.623 0.188 259.815) |
| Same absolute C across hues | Same C% of each hue's max chroma |
| No sRGB fallback for P3 color | @media (color-gamut: p3) wrapper |
This keeps feedback scannable and diff-friendly. Each row is a self-contained change the developer can act on independently.
| Issue | Fix |
|---|---|
| Hex/rgb/hsl color in new code | Convert to oklch() |
| HSL palette ramp with hue drift | Rebuild with constant oklch hue |
| Failing contrast (check foreground vs its background using APCA) | Adjust oklch L channel, keep C and H |
| High chroma without gamut check | Clamp to max chroma for the L/H in sRGB |
| Same absolute C across different hues | Use same C% (percentage of max) for consistent vividness |
| P3 color without sRGB fallback | Add @media (color-gamut: p3) pattern |
| Dark mode with hand-picked colors | Derive from light palette by reversing L mapping |
| Alpha with comma syntax | Use slash: oklch(L C H / alpha) |
rgbToOklch / oklchToRgb / hexToRgb / rgbToHex with alpha passthrough