Add Agent Skill for @adobe/leonardo-contrast-colors
- Dominant language
- JavaScript
- Stars
- 2.1k
- Forks
- 130
- PR merge metrics
- No merged PRs in 30d
Description
Part of #266 — Leonardo AI tooling initiative.
## Summary
Create an Agent Skill so that AI coding assistants (Cursor, Claude Code, Codex, etc.) can activate targeted, structured guidance when helping developers use `@adobe/leonardo-contrast-colors`.
Agent Skills follow the [agentskills.io specification](https://agentskills.io/specification).
## Directory structure
```
skills/
└── leonardo-colors/
├── SKILL.md # Required — frontmatter + step-by-step instructions
└── references/
└── api.md # Detailed API reference (loaded on demand)
```
The directory name `leonardo-colors` must match the `name` field in `SKILL.md` frontmatter.
## `SKILL.md` frontmatter
```yaml
---
name: leonardo-colors
description: Generate accessible color themes using @adobe/leonardo-contrast-colors. Use when the user needs help building contrast-based color palettes, checking WCAG accessibility, creating adaptive themes, or using the Leonardo API.
---
```
## `SKILL.md` body content
Step-by-step instructions covering:
- Installing the package
- Creating `Color` and `BackgroundColor` instances (colorKeys, ratios, colorspace)
- Creating a `Theme` (lightness, contrast multiplier, saturation, output format)
- Reading `theme.contrastColors`, `theme.contrastColorPairs`, `theme.contrastColorValues`
- Using `Theme.addColor`, `Theme.removeColor`, `Theme.updateColor`
- Adapting a theme at runtime (setting `theme.lightness`, `theme.contrast`)
- Utility functions: `contrast()`, `convertColorValue()`, `luminance()`, `createScale()`
- Common accessibility recipes: AA (4.5:1), AAA (7:1), large text (3:1), APCA
- Available colorspaces and output formats
## `references/api.md`
Full API reference for all exported classes and functions. Loaded on demand to keep the main `SKILL.md` under the recommended 500-line limit.
## Distribution
Point users to install via:
```bash
npx skills add https://github.com/adobe/leonardo
```
(once agentskills.io discovery is supported, or manually by copying the directory)
## Acceptance criteria
- [ ] `skills/leonardo-colors/SKILL.md` exists with valid frontmatter (`name`, `description`)
- [ ] `SKILL.md` body covers the core usage patterns listed above
- [ ] `references/api.md` contains the full API reference
- [ ] `SKILL.md` is under 500 lines; detailed content deferred to references
- [ ] Tested in Cursor by reading the skill and verifying it activates on Leonardo-related prompts
Contributor guide
Research direction
Start by reviewing the agentskills.io specification and the requested skills/leonardo-colors/SKILL.md and references/api.md structure. Document the listed @adobe/leonardo-contrast-colors APIs and accessibility recipes, keeping SKILL.md under 500 lines. Verify the frontmatter, API reference coverage, installation guidance, and activation behavior in Cursor.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100