Skill Claude CodeCodex
Translate Figma design properties and structures into IDS (Iress Design System) component implementations. Use when the user provides Figma designs, mentions Figma MCP, asks to convert a design to code, or references Figma component names, variants, or auto-layout properties.
Skill Claude CodeCodex
Guide for maintaining the IDS (Iress Design System) monorepo. Covers adding/modifying components, updating tokens, managing dependencies, releases, CI/CD troubleshooting, bundle size budgets, documentation upkeep, and PR review checklists. Use when asked to add a component, update tokens, fix CI, review a PR, cut a…
Skill Claude CodeCodex
Guide on correctly using IDS design tokens in React components and CSS. Covers import patterns, common mistakes, and practical usage rules for each token category. Use when the user asks about design tokens, CSS variables, CSS custom properties, spacing values, colour tokens, typography tokens, theme tokens, token…
Skill Claude CodeCodex
Audit and review application UI for IDS compliance, accessibility, usability, and cognitive load. Covers component usage validation, WCAG accessibility checks, cognitive load assessment, and UX quality evaluation. Use when asked to review UI, check accessibility, assess usability, audit IDS compliance, or when the…
Skill Claude CodeCodex
Translate natural language UI descriptions into IDS (Iress Design System) component implementations using @iress-oss/ids-components and @iress-oss/ids-tokens. Use when the user describes a UI in plain language and wants IDS component code, or asks to build a form, page, layout, or component using IDS.
Skill Claude CodeCodex
Migrate applications between IDS (Iress Design System) major versions — including v4→v5, v5→v6, and OUI→v6. Covers component renaming, prop changes, form architecture migration (Formik→React Hook Form), testing updates, and common gotchas. Use when the user asks about upgrading, migrating, or updating IDS versions, or…