一键在 Manus 中运行任何 Skill

validate-tokens

星标217

分支61

更新时间2026年6月30日 10:05

Read-only audit of OUDS design token usage across SCSS component files. Use this skill when the user asks to validate, check, or audit tokens, when reviewing PRs that touch scss/_*.scss or packages/, or before a release. Performs cross-brand presence check (are tokens defined in all 3 brands?) and anti-pattern detection (hardcoded values, raw tokens, forbidden patterns). Generates a structured report — does not modify files.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

Orange-OpenSource

Orange-OpenSource/Orange-Boosted-Bootstrap

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Workflow: Validate Token Usage

This is a read-only audit. Generate a report, do not modify files.

Step 1 — Load brand tokens

Read all 3 files and extract $ouds-* definitions:

packages/orange/scss/tokens/_component.scss
packages/sosh/scss/tokens/_component.scss
packages/orange-compact/scss/tokens/_component.scss

Step 2 — Identify component SCSS files

All scss/_*.scss + scss/forms/_*.scss, excluding: _variables.scss, _config.scss, _functions.scss, _mixins.scss, _maps.scss, _root.scss, _reboot.scss, _utilities.scss, _helpers.scss, _grid.scss, _containers.scss, _images.scss, _type.scss, _transitions.scss, _forms.scss, _variables-dark.scss

Step 3 — For each file

Cross-brand check

Find $ouds-<component>-* tokens used as values → verify present in all 3 brands. Skip semantic tokens ($ouds-color-*, $ouds-space-*, etc.) — always present.

Anti-pattern detection

Pattern	Severity
Hardcoded px/rem/em	WARNING
Hardcoded hex color	WARNING
`$core-ouds-*` (raw token)	ERROR
`$core-orange-` / `$core-sosh-`	ERROR
`lighten()` / `darken()`	ERROR
`border: none`	ERROR
Direct `transition:`	ERROR
Direct `border-radius:`	ERROR

Exceptions: standalone 0, @keyframes, comments, 100%, calc() multipliers, // stylelint-disable lines.

Step 4 — Generate report

╔══════════════════════════════════════════════╗
║  OUDS TOKEN VALIDATION REPORT               ║
║  Files analyzed: N                           ║
╚══════════════════════════════════════════════╝

── CROSS-BRAND PRESENCE ────────────────────────
✅ PASS: N files — all tokens in all brands
❌ FAIL: $token-name missing in [brand]

── ANTI-PATTERNS ───────────────────────────────
⚠️  WARNING: file:line → suggestion
❌ ERROR: file:line → fix

── SUMMARY ─────────────────────────────────────
Cross-brand: N pass, N fail
Anti-patterns: N warnings, N errors

同仓库更多 Skills

同仓库

project-knowledge

Orange-OpenSource/Orange-Boosted-Bootstrap

OUDS Web project knowledge base: glossary of 154 terms, build pipeline, npm scripts, CI/CD jobs, and file structure. Use this skill when encountering unfamiliar project terminology (DTCG, rtlcss, Pa11y, etc.), when you need to know which npm command to run, what CI jobs check, where files live, or general project context. For the detailed file map, read references/project-map.md.

2026-07-10217

token-system

Orange-OpenSource/Orange-Boosted-Bootstrap

OUDS design token system rules and architecture. Use this skill when working with tokens, adding new component tokens, debugging undefined token errors, working on dark mode, editing _variables.scss, or touching any file in packages/*/scss/tokens/. Covers the 3-tier hierarchy (raw→semantic→component), CSS custom property bridge for dark mode, auto-generated file protections, import order, and the color-mode mixin. For deep architecture details, read references/architecture.md.

2026-07-10217

accessibility

Orange-OpenSource/Orange-Boosted-Bootstrap

WCAG 2.2 accessibility rules for OUDS Web. Use this skill when creating or editing interactive components, writing HTML templates, adding ARIA attributes, handling focus states, or reviewing accessibility. Covers WCAG 2.2 Level AAA target (AA fallback), ARIA patterns for every component type, focus-visible mixin, color contrast (7:1 AAA / 4.5:1 AA), 44×44px touch targets, reduced motion, RTL, focus trapping, and cognitive accessibility. Always invoke this skill for any work touching user interaction or markup structure.

2026-06-30217

code-review

Orange-OpenSource/Orange-Boosted-Bootstrap

OUDS Web compliance code review. Use this skill when reviewing a diff, preparing a commit, or when asked to check code quality. Acts as a safety net that verifies all OUDS conventions are respected: token usage (no hardcoded values, no raw tokens), required mixins (border-radius, transition), accessibility (ARIA, focus-visible), multi-brand sync (tokens in all 3 brands), and file hygiene (no dist/, no auto-gen edits). Invoke proactively before any commit or PR submission.

2026-06-30217

component-patterns

Orange-OpenSource/Orange-Boosted-Bootstrap

SCSS and JS structural patterns for OUDS Web components. Use this skill when creating, editing, or reviewing component SCSS files (scss/_*.scss, scss/forms/_*.scss) or JS component files (js/src/*.js). Covers CSS custom property declarations at top of class, state overrides via variable overrides (not property overrides), scss-docs-start/end markers, border-width compensation with calc(), mask-image icon pattern, responsive breakpoint overrides, and the OUDS mod comment convention.

2026-06-30217

create-component

Orange-OpenSource/Orange-Boosted-Bootstrap

Step-by-step workflow for creating a new SCSS and/or JavaScript component in OUDS Web. Use this skill when scaffolding a new UI component, form component, or interactive element from scratch. Covers SCSS file structure, brand entry point imports, token setup across 3 brands, ARIA requirements, JS BaseComponent boilerplate, unit tests, documentation page, and the full build/verify/checklist process.

2026-06-30217

name

validate-tokens

description

Workflow: Validate Token Usage

This is a read-only audit. Generate a report, do not modify files.

Step 1 — Load brand tokens

Read all 3 files and extract $ouds-* definitions:

packages/orange/scss/tokens/_component.scss
packages/sosh/scss/tokens/_component.scss
packages/orange-compact/scss/tokens/_component.scss

Step 2 — Identify component SCSS files

Step 3 — For each file

Cross-brand check

Find $ouds-<component>-* tokens used as values → verify present in all 3 brands. Skip semantic tokens ($ouds-color-*, $ouds-space-*, etc.) — always present.

Anti-pattern detection

Pattern	Severity
Hardcoded px/rem/em	WARNING
Hardcoded hex color	WARNING
`$core-ouds-*` (raw token)	ERROR
`$core-orange-` / `$core-sosh-`	ERROR
`lighten()` / `darken()`	ERROR
`border: none`	ERROR
Direct `transition:`	ERROR
Direct `border-radius:`	ERROR

Exceptions: standalone 0, @keyframes, comments, 100%, calc() multipliers, // stylelint-disable lines.

Step 4 — Generate report

╔══════════════════════════════════════════════╗
║  OUDS TOKEN VALIDATION REPORT               ║
║  Files analyzed: N                           ║
╚══════════════════════════════════════════════╝

── CROSS-BRAND PRESENCE ────────────────────────
✅ PASS: N files — all tokens in all brands
❌ FAIL: $token-name missing in [brand]

── ANTI-PATTERNS ───────────────────────────────
⚠️  WARNING: file:line → suggestion
❌ ERROR: file:line → fix

── SUMMARY ─────────────────────────────────────
Cross-brand: N pass, N fail
Anti-patterns: N warnings, N errors