adobe / adobe/leonardo

Add Agent Skill for @adobe/leonardo-contrast-colors

Open
#268 0 comments 0 reactions 0 assignees View on GitHub
documentation enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.