skills.rest
iress
iressOFFICIAL
Explore all skills by this author →
WebsiteGitHub

token-usage

Guide AI agents to apply IDS design tokens in React components and CSS.

1|4|Updated Oct 8, 2025
Search Tags:#typescript#react#css-variables#design-tokens#token-mapping#ids-tokens#cssvars
One-click install
npx skills add https://github.com/iress/design-system --skill token-usage-iress
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: token-usage
Source: https://github.com/iress/design-system/tree/main/.agents/skills/token-usage
Command: npx skills add https://github.com/iress/design-system --skill token-usage-iress

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

AI agents often struggle to use IDS design tokens consistently, leading to mis-typed values and inconsistent styling across React components and CSS.

Core Features & Use Cases

  • Import patterns: CSS variables, cssVars, and designTokens metadata to access tokens in JS and CSS.
  • Correct usage patterns: discourage hard-coded values, encourage token-based design for colour, spacing, typography, and radii.
  • Real-world use: ensure consistent theming and design fidelity when building components, themes, and custom styles.
  • Internal tooling guidance: guidance on mapping tokens to CSS variables and converting references for tooling.

Quick Start

Install the tokens package and import the CSS variables, then wrap your app with IressProvider to begin using IDS tokens.

Frequently Asked Questions about token-usage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use IDS design tokens in React components for consistent styling?▼

Access IDS design tokens in React by importing CSS variables, cssVars, or designTokens metadata. Wrap your application with IressProvider to ensure consistent theming and styling across components.

What's the best way to map design tokens to CSS variables in TypeScript?▼

Mapping design tokens to CSS variables in TypeScript is best handled using internal tooling helpers like mapTokensToCssVariables and convertReferencesToVariables, which correctly convert token references for styling.

Why should I avoid hard-coded values when applying design tokens in CSS?▼

Avoid hard-coded values in CSS because they cause mis-typed values and inconsistent styling. Using design tokens ensures consistent theming and design fidelity for colour, spacing, typography, and radii.

Can I access design token metadata directly in JavaScript for theming?▼

Yes, you can access design token metadata directly in JavaScript by importing the designTokens module. This provides structured access to token data for building custom themes and component styles.

What are common mistakes when applying IDS tokens in component development?▼

Common mistakes when applying IDS tokens include using hard-coded values instead of CSS variables, incorrect import patterns, and mis-typing token values, which lead to inconsistent styling across React components.

Do I need to wrap my app with IressProvider to start using cssVars?▼

Yes, you need to wrap your app with IressProvider and import the CSS variables to start using cssVars. This setup applies the token configurations globally for consistent component theming.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

shadcn-setup-and-theming

Install and configure shadcn/ui with Tailwind and design tokens in React projects.

Official
Intermediate
WesleySmitsWesleySmits
6

validating-design-tokens

Detect hard-coded values and enforce design tokens in CSS and component code.

Community
Advanced
AhChaoAhChao
1

frontend-style-guide

Enforce Mantine v8 styling and CSS modules in React TSX components.

Community
Basic
lsst-sqrelsst-sqre
2

squared-package

Integrate the squared package into TypeScript React/Next.js apps without a build step.

Official
Intermediate