Menu
Detects hardcoded values in a component's SCSS that should be replaced with Aurora design tokens, and suggests the correct token for each one
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
A commit message generator that uses gitmojis to make your commits more fun and expressive
Cria um branch a partir da main e abre um pull request com título de commit convencional, descrição estruturada e labels — incluindo as tags constitucionais da Consumidor Positivo: classificação de custo (CapEx/OpEx), risco, prioridade, impacto e escopo. Use ao abrir um PR neste repo. Mantém também as regras específicas de Aurora (release-please, prebuild, lint).
Reads a component and lists accessibility issues based on WCAG 2.1 AA and web accessibility best practices
Creates the full structure of a new Aurora component — index.tsx, styles.scss and stories — following the project's conventions
| name | token-audit |
| description | Detects hardcoded values in a component's SCSS that should be replaced with Aurora design tokens, and suggests the correct token for each one |
Detect hardcoded values in a component's SCSS file and suggest Aurora design token replacements.
If the component name has not been provided, ask for it before proceeding.
Run the following grep commands on lib/components/<ComponentName>/styles.scss to find candidates. Run all in parallel:
# Hex colors
grep -n "#[0-9a-fA-F]\{3,8\}" lib/components/<ComponentName>/styles.scss
# Hardcoded font-size
grep -n "font-size:\s*[0-9]" lib/components/<ComponentName>/styles.scss
# Hardcoded font-weight
grep -n "font-weight:\s*[0-9]" lib/components/<ComponentName>/styles.scss
# Hardcoded font-family (string literals, not variables)
grep -n "font-family:\s*['\"]" lib/components/<ComponentName>/styles.scss
# Hardcoded border-radius (px values)
grep -n "border-radius:\s*[0-9]" lib/components/<ComponentName>/styles.scss
# Hardcoded box-shadow
grep -n "box-shadow:\s*[0-9]" lib/components/<ComponentName>/styles.scss
# Hardcoded opacity (decimal values)
grep -n "opacity:\s*0\.[0-9]" lib/components/<ComponentName>/styles.scss
# Hardcoded spacing in padding/margin/gap (px values)
grep -n -E "(padding|margin|gap|top|right|bottom|left):\s*[1-9][0-9]*px" lib/components/<ComponentName>/styles.scss
Read all token files to build the substitution map:
lib/core/tokens/colors.jsonlib/core/tokens/typography.jsonlib/core/tokens/border.jsonlib/core/tokens/layout.jsonlib/core/tokens/shadow.jsonlib/core/tokens/opacity.jsonIgnore the following — they are intentional and have no token equivalent:
0, 0px, 0% — zero values1px — hairline borders100%, 50%, auto, inherit, none — layout utilitiesrgba(...) inside box-shadow — shadows use their own token$) or CSS custom properties (var(--...))!important modifiers — check the value itself, not the flagFor each hardcoded value found (after filtering), output an entry in this format:
<property>: <value> — styles.scss:
$<token-name> → <token-value><property>: $<token-name>If no matching token exists for a value, output:
<property>: <value> — styles.scss:
Use the values below to match hardcoded values to tokens:
$color-*)All color tokens follow the pattern $color-<palette>-<shade>.
Palettes: neutral, brand-blue, brand-emerald, brand-cyan, brand-yellow, info, success, error, warning.
Shades: 00, 10, 20, 30, 40, 50, 60.
Read lib/core/tokens/colors.json for the full hex map.
| Token | Value |
|---|---|
$font-title | 'Lexend Deca', sans-serif |
$font-body | 'Source Sans 3', sans-serif |
$font-weight-bold | 700 |
$font-weight-semibold | 600 |
$font-weight-medium | 500 |
$font-weight-regular | 400 |
$font-size-h1 | 56px |
$font-size-h2 | 48px |
$font-size-h3 | 40px |
$font-size-h4 | 32px |
$font-size-h5 | 28px |
$font-size-h6 | 24px |
$font-size-p1 | 20px |
$font-size-p2 | 16px |
$font-size-p3 | 14px |
$font-size-p4 | 12px |
$spacing-*)| Token | Value |
|---|---|
$spacing-050 | 4px |
$spacing-100 | 8px |
$spacing-200 | 16px |
$spacing-300 | 24px |
$spacing-400 | 32px |
$spacing-500 | 40px |
$spacing-600 | 48px |
$spacing-700 | 56px |
$spacing-800 | 64px |
$spacing-900 | 72px |
$border-radius-*)| Token | Value |
|---|---|
$border-radius-small | 4px |
$border-radius-medium | 8px |
$border-radius-big | 16px |
$border-radius-pill | 999px |
$shadow-*)| Token | Value |
|---|---|
$shadow-01 | 0px 2px 8px ... |
$shadow-02 | 0px 8px 24px ... |
$shadow-03 | 0px 16px 40px ... |
$shadow-04 | 0px 24px 56px ... |
$opacity-*)| Token | Value |
|---|---|
$opacity-00 | 0.05 |
$opacity-10 | 0.2 |
$opacity-20 | 0.4 |
$opacity-30 | 0.6 |
$opacity-40 | 0.8 |
Close with a one-line summary:
X hardcoded value(s) found — Y have a token replacement, Z have no equivalent in the Aurora token set.