v2-design-system-2026-refactor

Use when generating Cars24 product visuals for GridCard, StaticSliderCard, Banner, or rotating-banner media. This skill teaches imagegen how Cars24 visuals should look by using bundled reference assets, matching widget ratios, using filled image treatment, and preserving the product’s visual structure instead of generating generic ad art.

Install and use the GitHub repo `ishaankothiyal-designer/v2-design-system-2026-refactor` to turn plain-English UI prompts into standalone frontend apps for beginners. Use when a user says `install DLS`, asks to clone or set up that repo, or wants a page, dashboard, or app built with that design system without using Storybook. Always build a separate project/app, use only the repo library packages (`@geist/web`, `@geist/tokens`, `@geist/icons`), avoid hardcoded design values when a token exists, make the design responsive and breathable, use a floating brand switcher opened from a floating button as the default persistent utility control, and invoke the `imagegen` skill when the UI needs generated imagery.

Use when implementing or updating a UI component from a Figma component node in this Geist design-system repo. Start from the Figma node, inspect every variant, size, state, and token, search existing canonical components first, reuse patterns in packages/web and apps/storybook, map Figma variables to repo tokens exactly, and avoid hardcoded values when a token already exists.

Map a Figma node from the DLS library to the closest approved Storybook story and canonical repo component in this Geist design-system repo. Use when the user wants Code Connect style matching for Storybook without inventing unmapped patterns.

Map a Figma node from the DLS library to the closest approved Storybook story and canonical repo component in this Geist design-system repo. Use when the user wants Code Connect style matching for Storybook without inventing unmapped patterns.

Use when reading, inspecting, extracting, comparing, or documenting values from Figma so Figma remains the source of truth for components, tokens, typography, icons, and visual structure. Also use when syncing exact Figma values into Storybook, the registry, or code without inventing new styles.

Use when creating or updating Figma content from the repo so tokens, typography, icons, and component composition stay synchronized across Figma, Storybook, and GitHub. Also use when writing widgets or screen specs that must follow approved design-system rules without hallucinating styles or assets.