메뉴
Convert CSS colors between HSL and OKLCH color spaces with mathematical accuracy. Use when: (1) migrating a CSS codebase from HSL to OKLCH or vice versa, (2) the user asks to "convert colors", "hsl to oklch", "oklch to hsl", (3) adding new color values to an OKLCH-based theme, (4) verifying color equivalence across color spaces.
| name | oklch-converter |
| description | Convert CSS colors between HSL and OKLCH color spaces with mathematical accuracy. Use when: (1) migrating a CSS codebase from HSL to OKLCH or vice versa, (2) the user asks to "convert colors", "hsl to oklch", "oklch to hsl", (3) adding new color values to an OKLCH-based theme, (4) verifying color equivalence across color spaces. |
OKLCH (Oklab Lightness-Chroma-Hue) is a perceptually uniform color space. Unlike HSL, equal numeric steps produce equal perceived brightness/saturation changes, making it ideal for design systems.
HSL: H S% L% e.g. 192 100% 50%
OKLCH: L% C H e.g. 89.03% 0.1739 171.27
none for hue, e.g. 59.82% 0 noneRun the Node.js script at script/oklch-convert.js to convert HSL values to OKLCH. Edit the colors array in the script with your [name, H, S, L] tuples, then run:
node ~/.claude/skills/oklch-converter/script/oklch-convert.js
When converting a CSS file from HSL to OKLCH:
H S% L% to L% C H formathsl(var(--name)) to oklch(var(--name))hsl(...) to oklch(...)hsl( in .ts, .tsx, .js, .jsx files — JS/TS code that reads CSS variables and wraps them in template literals (e.g. `hsl(${value})`) must also be updated| HSL | OKLCH | Description |
|---|---|---|
0 0% 0% | 0% 0 none | Black |
0 0% 100% | 100% 0 none | White |
0 0% 50% | 59.82% 0 none | Mid gray |
0 100% 50% | 62.80% 0.2577 29.23 | Pure red |
120 100% 50% | 86.64% 0.2948 142.50 | Pure green |
240 100% 50% | 45.20% 0.3132 264.05 | Pure blue |
180 100% 50% | 90.54% 0.1546 194.77 | Pure cyan |
60 100% 50% | 96.80% 0.2115 109.77 | Pure yellow |
CLI tool for crawling career pages and job aggregators. Use when the user asks to search for jobs, crawl career pages, find job listings, configure jobcrawl, add companies to config, run aggregator searches (YC), detect ATS providers, discover career page URLs, filter saved jobs, or any task involving the jobcrawl CLI. Triggers on: 'crawl jobs', 'find jobs', 'search careers', 'jobcrawl', 'add company', 'crawl aggregators', 'YC jobs', 'detect provider', 'discover career pages', 'match jobs', 'job search config'.
Implement the WICG HTML-in-Canvas API for rendering HTML/CSS content into 2D canvas, WebGL, and WebGPU contexts with full interactivity, accessibility, and transform synchronization. Use when: (1) drawing HTML elements into a canvas with drawElementImage(), (2) rendering styled text, forms, or rich content in canvas, (3) using layoutsubtree attribute, (4) handling paint events for canvas child elements, (5) using texElementImage2D() for WebGL HTML textures, (6) using copyElementImageToTexture() for WebGPU, (7) transferring element snapshots to OffscreenCanvas workers with captureElementImage(), (8) synchronizing DOM hit-test transforms with canvas-rendered positions, (9) building accessible canvas applications with ARIA and drawFocusIfNeeded(), or (10) any code involving the html-in-canvas or canvas-draw-element Chrome flag APIs.
Export Claude Code sessions as readable markdown transcripts. Use when the user says 'seshi', 'export session', 'export transcript', 'save session', 'session to markdown', or wants to convert a past Claude Code conversation into a shareable document.