Color Expert

Установка

npx skills add meodai/skill.color-expert

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл устроен в три слоя. SKILL.md содержит главное: какое цветовое пространство брать под задачу, как строить перцептивно ровные шкалы и токены, как проверять контраст, какие библиотеки и инструменты использовать. INDEX.md помогает агенту найти нужный справочный файл, а в папке references лежат больше сотни материалов: конспекты статей Оттоссона об OKLAB, лекций Бриггса, видео, документация библиотек Culori, Spectral.js, Poline и других. Ответ подстраивается под режим: конкретный дизайн-проект, дизайн-система, генеративное искусство, общий вопрос или разработка генератора палитр.

Для кого. Для дизайнеров, фронтенд-разработчиков и авторов генеративной графики, которые работают с цветом всерьез.

Пример запроса к агенту

Построй 9-ступенчатую шкалу для акцента #E2561B в OKLCH и проверь контраст текста в обеих темах

Ограничения

Справочники большие, агент читает их выборочно, поэтому глубина ответа зависит от того, какие файлы он откроет. Материалы на английском. Скилл содержит мнения автора, например против coolors.co, они обоснованы в справочниках, но это позиция, а не стандарт. Лицензия CC BY 4.0.

Как отключить. Удалите папку или символическую ссылку color-expert из каталога скиллов агента.

Проверка безопасности

• Скилл состоит только из инструкций и справочников

Коротко о README

README рассказывает, как скилл вырос из заметок в базу знаний и как автор добавляет новые источники: транскрипты видео, конвертированные PDF, документацию репозиториев. Описаны структура справочников по разделам: история, современная наука, техники и инструменты. Перечислены ключевые позиции, заложенные в скилл, и дан порядок установки через npx skills или символическую ссылку.

SKILL.md

---
name: color-expert
description: Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do not explicitly ask for "color theory."
---

# Color Expert

A comprehensive knowledge base for color-related work. See `references/INDEX.md` for 140+ detailed reference files; this skill file contains the essential knowledge to answer most questions directly.

## How to Use This Skill

Match the response to the user's explicit request and clearly implied constraints from context. Five common modes:

**Concrete design or art project** — "help me pick colors for my logo / poster / illustration / app." Ask about medium (print, screen, paint, mixed), brand or mood, audience, accessibility needs, and any existing colors to harmonize with. Then propose. Don't lecture about CIE 1931 or OKLCH internals unless asked. Recommend specific tools and palettes that fit the constraints, not generic theory.

**Design system, ramps, or theme tokens** — "build me a 9-step accent scale", "palette for light + dark mode", "Tailwind/Radix-style ramps", "what's the right gray ramp for our brand?" Prioritize in this order:

- Use OKLCH to build perceptually uniform scales (consistent lightness across hues, no muddy mid-tones).
- Build a token graph: reference tokens (palette) → semantic tokens (surface, on-surface, accent, success, warning, danger) → component usage; see *Implementation Guidance* below.
- Verify every text/background pair against APCA or WCAG in both light and dark.

The test for a sequential ramp is **flat perceptual derivative** — plot the perceptual step size between consecutive samples; it should be a horizontal line, in color *and* in grayscale. Bumps are regions where the ramp exaggerates change that isn't in the data (this is jet's core failure, not its ugliness).

## Color Spaces — What to Use When

| Task                            | Use                                    | Why                                                                       |
| ------------------------------- | -------------------------------------- | ------------------------------------------------------------------------- |
| Perceptual color manipulation   | **OKLCH**                              | Best uniformity for lightness, chroma, hue. Fixes CIELAB's blue problem.  |
| CSS gradients & palettes        | **OKLCH** or `color-mix(in oklab)`     | No mid-gradient darkening like RGB/HSL                                    |
| Gamut-aware color picking       | **OKHSL / OKHSV**                      | Ottosson's picker spaces — cylindrical like HSL but perceptually grounded |
| Normalized saturation (0-100%)  | **HSLuv**                              | CIELUV chroma normalized per hue/lightness. HPLuv for pastels.            |
| Print workflows                 | **CIELAB D50**                         | ICC standard illuminant                                                   |
| Screen workflows                | **CIELAB D65** or OKLAB                | D65 = screen standard                                                     |
| Cross-media appearance matching | **CAM16 / CIECAM02**                   | Accounts for surround, adaptation, luminance, and viewing conditions      |
| HDR                             | **Jzazbz / ICtCp**                     | Designed for extended dynamic range                                       |

Похожие