Skill: UI Translation

Purpose

Translate natural language UI descriptions into IDS (Iress Design System) component implementations using @iress-oss/ids-components and @iress-oss/ids-tokens.

Translation Workflow

1. Identify the UI elements — Break the description into components: actions (buttons), inputs (fields), layout (stacks, grids), content (text, cards), overlays (modals, slideouts), navigation
2. Map to IDS components — Use the component mapping to find the right IDS component for each element
3. Verify component capabilities — Before recommending a component, read its .ai/components/<name>.md doc (in node_modules/@iress-oss/ids-components/.ai/components/) to verify it supports the required features (async, filtering, validation, etc.)
4. Apply layout — Wrap elements in IressStack (vertical), IressInline (horizontal), or IressRow/IressCol (grid) only when needed. Check whether the parent component already provides layout (e.g. card footer, modal actions, button group) before adding wrappers. Never wrap a single child in a layout component. Always make grids responsive with span={{ xs: 12, md: ... }}
5. Add responsive behaviour — Even if the description only mentions desktop, stack columns on mobile and relocate secondary content to IressSlideout or collapsible sections
6. Apply styling — Use styling props for spacing, colour, and typography. Spacing tokens must include the category prefix: gap="spacing.4", p="spacing.6". Alias tokens ("xs", "sm", "md", "lg", "xl") are also valid. Never use bare numbers like gap="4".
7. Verify output — Check that all imports resolve, no raw HTML is used where IDS components exist, grid layouts use responsive span values, and no common anti-patterns are present (disabled buttons, slot attributes, redundant textStyle)

Setup

Important: IDS v6 is currently in beta. Install with the @beta tag: