UI Design System
try-works/role-model
React UI component systems with TailwindCSS + Radix + shadcn/ui.
OKLCH color space and color usage for web projects. An agent skill from trycompai/crm.
Install Better Colors
$ npx skills add trycompai/crm --skill better-colors -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install trycompai/crm better-colors --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/trycompai/crm.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/better-colors .claude/skills/better-colors && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "better-colors" agent skill from https://github.com/trycompai/crm/tree/release/.agents/skills/better-colors into .claude/skills/better-colors/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-colors", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/trycompai/crm/tree/release/.agents/skills/better-colorsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add trycompai/crm --skill better-colors -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install trycompai/crm better-colors --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/trycompai/crm.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/better-colors .agents/skills/better-colors && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "better-colors" agent skill from https://github.com/trycompai/crm/tree/release/.agents/skills/better-colors into .agents/skills/better-colors/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-colors", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add trycompai/crm --skill better-colors -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install trycompai/crm better-colors --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/trycompai/crm.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/better-colors .cursor/skills/better-colors && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "better-colors" agent skill from https://github.com/trycompai/crm/tree/release/.agents/skills/better-colors into .cursor/skills/better-colors/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-colors", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/trycompai/crm.git --path .agents/skills/better-colors--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add trycompai/crm --skill better-colors -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install trycompai/crm better-colors --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/trycompai/crm.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/better-colors .gemini/skills/better-colors && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "better-colors" agent skill from https://github.com/trycompai/crm/tree/release/.agents/skills/better-colors into .gemini/skills/better-colors/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-colors", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install trycompai/crm better-colorsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add trycompai/crm --skill better-colors -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/trycompai/crm.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/better-colors .github/skills/better-colors && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "better-colors" agent skill from https://github.com/trycompai/crm/tree/release/.agents/skills/better-colors into .github/skills/better-colors/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-colors", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add trycompai/crm --skill better-colors -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install trycompai/crm better-colors --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/trycompai/crm.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/better-colors .opencode/skills/better-colors && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "better-colors" agent skill from https://github.com/trycompai/crm/tree/release/.agents/skills/better-colors into .opencode/skills/better-colors/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-colors", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
better-colors- GitHub stars
- 11k
- Token cost
- ~1.9k tokens
- SKILL.md length
- 972 words
- Files
- 7
- Skills in repo
- 9
- Repo updated
- First seen
- Licence
- MIT
At a glance
OKLCH color space and color usage for web projects. An agent skill from trycompai/crm.
- Works in 3 steps: Use a Perceptual Color Space → Write and Format OKLCH Consistently → Measure Contrast, Gamut, and Palette…
- Color conversion
- SKILL.md covers Quick Reference, Core Principles, Common Mistakes and Review Output Format
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Better Colors is an agent skill from trycompai/crm. OKLCH color space and color usage for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, theme with Tailwind v4, and apply color with meaning. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, semantic color tokens, hue drift, chroma, dark mode colors, accent color, color meaning, light and dark appearance, increased contrast.
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files (for example `accessibility-contrast.md`, `agents/openai.yaml` and `color-conversion.md`).
It sits in Frontend & Design, covering Accessibility, Theming and dark mode and Design tokens. It works with Tailwind CSS. The repository describes itself as: Comp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM. The licence is MIT.
When your agent uses it
- Color conversion
- Palette generation
- Semantic color tokens
- Dark mode colors
Example prompts
- “/better-colors”
Workflow steps
3 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 6d4793d. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are css).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
oklch.fyi
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Better Colors loads about 1.9k tokens when it runs. Until then it costs about 113 tokens; SKILL.md has 972 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from trycompai/crm at commit 6d4793d, republished under its MIT licence (© trycompai). 972 words, ~1,932 tokens.
Download SKILL.mdSave it as
.claude/skills/better-colors/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.- name
- better-colors
- description
- OKLCH color space and color usage for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, theme with Tailwind v4, and apply color with meaning. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, semantic color tokens, hue drift, chroma, dark mode colors, accent color, color meaning, light and dark appearance, increased contrast.
OKLCH Colors
OKLCH is a perceptually uniform color space where lightness, chroma, and hue are useful design controls. Use it when the project already uses OKLCH, when creating a new color system, or when the user asks for conversion or palette work. Otherwise preserve the project's established tokens and notation: a consistent hex or RGB token system is better than introducing a second color representation for an isolated fix. To explore interactively, visit oklch.fyi.
Quick Reference
| 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, reporting failures, fixing on request | accessibility-contrast.md |
| Gamut & Tailwind | P3 fallbacks, @theme scales, gamut clamping | gamut-and-tailwind.md |
| Usage | Semantic tokens, one meaning per color, primary-action emphasis, appearance variants | color-usage.md |
Core Principles
1. Use a Perceptual Color Space
- Respect the existing system. Do not convert notation merely because this skill was loaded. Reuse the project's semantic tokens and authoring format unless the task includes a color-system migration.
- Perceptual uniformity. Equal L steps = equal brightness.
oklch(0.5 ...)is visually mid. HSL'slightness: 50%varies wildly by hue. - Stable hue. HSL blue shifts toward purple as lightness changes. OKLCH hue stays constant across the full lightness range.
- Independent chroma. Chroma is an absolute measure of colorfulness that doesn't depend on lightness. HSL saturation does.
- Finite gamut. Not every oklch value maps to a displayable sRGB color. High-chroma values at certain hues will clip; gamut awareness is required.
2. Write and Format OKLCH Consistently
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)Use three decimal places for L and C and up to three for H. Drop trailing zeros and format -0 as 0. OKLCH is Baseline 2023; when support requirements are unusually broad, check the target project's browser matrix instead of relying on a fixed global-coverage percentage.
3. Measure Contrast, Gamut, and Palette Behavior
| Rule | Value |
|---|---|
| Light/dark boundary | L > 0.73 = light background → dark text; below it, light text still scores higher |
| Lightness gap (light bg) | Foreground L < 0.35 when background L > 0.9 |
| Lightness gap (dark bg) | Foreground L > 0.9 when background L < 0.25 |
| Hue drift threshold | > 10° spread across palette steps = visible drift |
| APCA body text | |Lc| >= 75 minimum, >= 90 preferred |
| APCA non-body text | |Lc| >= 60 minimum |
| WCAG 2 normal text | 4.5:1 AA, 7:1 AAA |
| Contrast fix (only when asked) | Adjust L first; preserve C and H when possible, then remeasure the rendered pair |
Common Mistakes
| Issue | Fix |
|---|---|
| Raw color bypasses the project's semantic token system | Reuse or add the correct role token in the project's existing notation |
| Isolated OKLCH value introduced into a hex/RGB codebase | Preserve the established notation unless the task includes a color-system migration |
| HSL palette ramp with hue drift | Rebuild with constant oklch hue |
| Failing contrast (check foreground vs its background using APCA) | Report the pair, its measured Lc and the threshold it misses; change colors only when asked (then adjust L, 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 created by mechanically reversing the light palette | Use the light palette as a starting point, then tune chroma and lightness and recheck every foreground/background pair |
Hex in Tailwind v4 @theme | Convert to oklch values |
| Alpha with comma syntax | Use slash: oklch(L C H / alpha) |
| Same hue means two different things (link color reused decoratively) | One color, one meaning; give the second use a neutral |
| Semantic token used outside its role (separator as text) | Add a token for the missing role; never borrow by value |
| Several colored control backgrounds in one view | Fill only the single primary action; secondaries stay neutral |
| Palette verified only in light mode | Recheck every foreground/background pair in both appearances |
Show full SKILL.md (309 more words)Show less
Review Output Format
Use this format only when the user asks for a standalone color review. When better-interface orchestrates the review, provide domain evidence and findings to that skill and let its output format, severity scale, consolidation rules, cap, and verdict take precedence.
Present the standalone review in two parts.
Findings
Group all confirmed findings by principle. Use a markdown table with Severity, Location, Before, After, and Why columns. Never use separate "Before:" / "After:" lines.
- Severity:
HIGHmakes content unreadable or assigns a misleading semantic color;MEDIUMcreates a noticeable theme, gamut, or consistency failure;LOWis isolated polish. - Location: cite
path/to/file:line. If the artifact has no source files, cite the exact screen and component instead. - Before / After: show the current value or token and the exact replacement.
- Why: name the violated principle and include measured contrast or gamut evidence when relevant.
Consolidate a repeated systemic issue into one row and list every affected location. Omit principles with no findings.
| Severity | Location | Before | After | Why |
|---|---|---|---|---|
| MEDIUM | src/theme.css:18 | color: #3b82f6 | color: oklch(0.623 0.188 259.815) | New project colors use OKLCH tokens |
| MEDIUM | src/palette.ts:31 | Same absolute C across hues | Same C% of each hue's maximum chroma | Equal chroma values do not appear equally vivid across hues |
| HIGH | src/theme.css:52 | P3 color with no fallback | Add an sRGB fallback before @media (color-gamut: p3) | The color fails on non-P3 displays |
Verification and Verdict
After the findings:
- Verification: list the exact checks run and their observed results, including contrast measurements, gamut checks, and both light and dark appearances when applicable. If a check was not run, state what still needs verification.
- Verdict:
Blockif anyHIGHfinding remains,Needs changesif onlyMEDIUMorLOWfindings remain, andApproveonly when no actionable findings remain.
When there are no findings, omit the table, state "No actionable color findings", report verification, and end with Approve.
© trycompai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 6 other files in .agents/skills/better-colors of trycompai/crm.
- SKILL.md
- accessibility-contrast.md
- agents/openai.yaml
- color-conversion.md
- color-usage.md
- gamut-and-tailwind.md
- palette-generation.md
Open the folder on GitHubat commit 6d4793d
Compare with similar skills
Better Colors next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Better Colors this skilltrycompai/crm | 11k | — | ~1.9k | Automated safety check: Pass | MIT | |
| UI Design Systemtry-works/role-model | 118 | — | ~5k | Automated safety check: Pass | MIT | |
| Oklch SkillDinil-Thilakarathne/sona-ui | 118 | 1 repos | ~1.2k | Automated safety check: Pass | MIT | |
| Design Token Generatordylanfeltus/skills | 179 | — | ~2.9k | Automated safety check: Pass | MIT | |
| MCP Developmentcoollabsio/coolify | 63k | 1 repos | ~949 | Automated safety check: Pass | MIT | |
| Scalar Design Systemscalar/scalar | 16k | — | ~2.7k | Automated safety check: Pass | MIT |
Similar skills
Oklch Skill
Dinil-Thilakarathne/sona-ui
OKLCH color space for web projects. An agent skill from Dinil-Thilakarathne/sona-ui.
Design Token Generator
dylanfeltus/skills
Generates type scales, color palettes, spacing systems, WCAG contrast checks and dark mode palettes from formulas, as CSS custom properties, a Tailwind config or JSON tokens.
MCP Development
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
Scalar Design System
scalar/scalar
Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.
Extract Design
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
More from trycompai/crm
All 9 skills in this repoInstall Anti Slop
trycompai/crm
Install and configure the anti-slop Oxlint plugin in a local TypeScript or JavaScript repository.
Nuqs
trycompai/crm
nuqs (type-safe URL query state) best practices for Next.js and other React frameworks.
Nestjs Trpc
trycompai/crm
Build end-to-end type-safe tRPC APIs inside NestJS using the nestjs-trpc adapter — @Router/@Query/@Mutation/@Subscription decorators, TRPCModule.forRoot, injectable middlewares and context, Zod…
Better Accessibility
trycompai/crm
Accessibility engineering for product interfaces, from focus states and keyboard support to ARIA, forms, and screen readers.
Better Typography
trycompai/crm
Web typography from choosing fonts to spacing, wrapping and accessibility.
Better UI
trycompai/crm
Design engineering principles for making interfaces feel polished.
Related
Works with
Categories
Questions about Better Colors
What does Better Colors do?
OKLCH color space and color usage for web projects. An agent skill from trycompai/crm. Better Colors is an agent skill from trycompai/crm. OKLCH color space and color usage for web projects.
When should I use Better Colors?
Better Colors fits situations like: color conversion; palette generation; semantic color tokens; dark mode colors.
How do I install Better Colors in Claude Code?
Run `npx skills add trycompai/crm --skill better-colors -a claude-code`. Or copy the skill folder (.agents/skills/better-colors in trycompai/crm) into .claude/skills/better-colors in your project. Claude Code loads it when a task matches its description.
How do I install Better Colors in Codex?
Run `npx skills add trycompai/crm --skill better-colors -a codex`. Or copy the skill folder (.agents/skills/better-colors in trycompai/crm) into .agents/skills/better-colors in your project. Codex loads it when a task matches its description.
Can I use Better Colors in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add trycompai/crm --skill better-colors -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/better-colors, .gemini/skills/better-colors, .github/skills/better-colors and .opencode/skills/better-colors in your project.
What does Better Colors need to run?
SKILL.md names no scripts, command-line tools or credentials: Better Colors is instructions for the agent only.
Does Better Colors access the network?
SKILL.md names 1 domain. As links in the text: oklch.fyi. This is read from the text; nothing was executed.
Is Better Colors safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Better Colors use?
Better Colors is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Better Colors use?
About 1.9k tokens (SKILL.md is roughly 7.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Better Colors?
Skills that share tags, products or a category with Better Colors: UI Design System (try-works/role-model, 118 stars), Oklch Skill (Dinil-Thilakarathne/sona-ui, 118 stars), Design Token Generator (dylanfeltus/skills, 179 stars) and MCP Development (coollabsio/coolify, 63k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Better Colors?
trycompai (a GitHub organization) maintains it in trycompai/crm, which has 11,132 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on September 11, 2026.
Source: trycompai/crm on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.