Skip to main content
NEW · APP STORE Now on iOS · macOS · iPad Android & Windows soon GET IT
Prompts StyleSeed UI Design Token Manager

agent product skill risk: low

StyleSeed UI Design Token Manager

The prompt instructs the model to list, add, or update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values synchronized, following specified act…

SKILL 1 file

SKILL.md
---
name: antigravity-awesome-skills-ui-tokens-ddbe991b
description: "List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync."
---
# UI Tokens

## Overview

Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill manages design tokens without letting the source-of-truth files drift apart. It is meant for teams using the Toss seed's JSON token files and CSS implementation together.

## When to Use
- Use when you need to inspect the current token set
- Use when you want to add a new color, shadow, radius, spacing, or typography token
- Use when you need to update a token and propagate the change safely
- Use when the project has both JSON token files and CSS variables that must stay aligned

## How It Works

### Supported Actions

- `list`: show the current tokens in a human-readable form
- `add`: introduce a new token and wire it through the implementation
- `update`: change an existing token value and audit the downstream usage

### Typical Source-of-Truth Split

For the Toss seed:
- JSON under `tokens/`
- CSS variables and theme wiring under `css/theme.css`
- typography support in the font and base CSS files

### Rules

- keep JSON and CSS in sync
- prefer semantic names over descriptive names
- provide dark-mode support where relevant
- update the token implementation, not just the source manifest
- check for direct component usage that might now be stale

## Output

Return:
1. The requested token inventory or change summary
2. Every file touched
3. Any affected components or utilities that should be reviewed
4. Follow-up actions if the new token requires broader adoption

## Best Practices

- Add semantic intent, not one-off brand shades
- Avoid token sprawl by extending existing scales first
- Keep naming consistent with the rest of the system
- Review contrast and accessibility when introducing new colors

## Additional Resources

- [StyleSeed repository](https://github.com/bitjaru/styleseed)
- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-tokens/SKILL.md)

## Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

REQUIRED CONTEXT

  • action (list/add/update)
  • token details or current token set

OPTIONAL CONTEXT

  • dark-mode values
  • target semantic name

ROLES & RULES

  1. keep JSON and CSS in sync
  2. prefer semantic names over descriptive names
  3. provide dark-mode support where relevant
  4. update the token implementation, not just the source manifest
  5. check for direct component usage that might now be stale
  6. Use this skill only when the task clearly matches the scope described above.
  7. Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  8. Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

EXPECTED OUTPUT

Format
structured_report
Schema
numbered_list · The requested token inventory or change summary, Every file touched, Any affected components or utilities that should be reviewed, Follow-up actions if the new token requires broader adoption
Constraints
  • Return the requested token inventory or change summary
  • List every file touched
  • List any affected components or utilities that should be reviewed
  • Include follow-up actions if the new token requires broader adoption

SUCCESS CRITERIA

  • Return the requested token inventory or change summary
  • List every file touched
  • Identify any affected components or utilities that should be reviewed
  • Include follow-up actions if the new token requires broader adoption
  • Add semantic intent, not one-off brand shades
  • Avoid token sprawl by extending existing scales first
  • Keep naming consistent with the rest of the system
  • Review contrast and accessibility when introducing new colors

CAVEATS

Missing context
  • Exact command or argument syntax expected from the user
  • Repository-specific file paths beyond the high-level examples
  • Success criteria or validation steps for changes
Ambiguities
  • When exactly to provide dark-mode support is not defined
  • How to 'check for direct component usage' is unspecified
  • No explicit input format or parameters for the add/update actions

QUALITY

OVERALL
0.62
CLARITY
0.82
SPECIFICITY
0.78
REUSABILITY
0.35
COMPLETENESS
0.72

IMPROVEMENT SUGGESTIONS

  • Add a clear 'Input' section describing the expected arguments or message format for each action (list/add/update)
  • Replace the single-project references with placeholders so the prompt can be reused for other token systems
  • Specify output format more precisely (e.g., required JSON structure or markdown template)

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR AGENT