claude-code-workflow 6.2.1 → 6.2.3

package/.claude/workflows/cli-templates/ui-design/systems/animation-tokens.json

@@ -0,0 +1,247 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+
+  "duration": {
+    "$type": "duration",
+    "instant": { "$value": "0ms" },
+    "fast": { "$value": "150ms" },
+    "normal": { "$value": "300ms" },
+    "slow": { "$value": "500ms" },
+    "slower": { "$value": "1000ms" }
+  },
+
+  "easing": {
+    "$type": "cubicBezier",
+    "linear": { "$value": "linear" },
+    "ease-in": { "$value": "cubic-bezier(0.4, 0, 1, 1)" },
+    "ease-out": { "$value": "cubic-bezier(0, 0, 0.2, 1)" },
+    "ease-in-out": { "$value": "cubic-bezier(0.4, 0, 0.2, 1)" },
+    "spring": { "$value": "cubic-bezier(0.68, -0.55, 0.265, 1.55)" },
+    "bounce": { "$value": "cubic-bezier(0.68, -0.6, 0.32, 1.6)" }
+  },
+
+  "keyframes": {
+    "_comment_pattern": "Define pairs (in/out, open/close, enter/exit)",
+    "_comment_required": "Required keyframes for components",
+
+    "fade-in": {
+      "0%": { "opacity": "0" },
+      "100%": { "opacity": "1" }
+    },
+    "fade-out": {
+      "_comment": "reverse of fade-in",
+      "0%": { "opacity": "1" },
+      "100%": { "opacity": "0" }
+    },
+
+    "slide-up": {
+      "0%": { "transform": "translateY(10px)", "opacity": "0" },
+      "100%": { "transform": "translateY(0)", "opacity": "1" }
+    },
+    "slide-down": {
+      "_comment": "reverse direction",
+      "0%": { "transform": "translateY(0)", "opacity": "1" },
+      "100%": { "transform": "translateY(10px)", "opacity": "0" }
+    },
+
+    "scale-in": {
+      "0%": { "transform": "scale(0.95)", "opacity": "0" },
+      "100%": { "transform": "scale(1)", "opacity": "1" }
+    },
+    "scale-out": {
+      "_comment": "reverse of scale-in",
+      "0%": { "transform": "scale(1)", "opacity": "1" },
+      "100%": { "transform": "scale(0.95)", "opacity": "0" }
+    },
+
+    "accordion-down": {
+      "0%": { "height": "0", "opacity": "0" },
+      "100%": { "height": "var(--radix-accordion-content-height)", "opacity": "1" }
+    },
+    "accordion-up": {
+      "_comment": "reverse",
+      "0%": { "height": "var(--radix-accordion-content-height)", "opacity": "1" },
+      "100%": { "height": "0", "opacity": "0" }
+    },
+
+    "dialog-open": {
+      "0%": { "transform": "translate(-50%, -48%) scale(0.96)", "opacity": "0" },
+      "100%": { "transform": "translate(-50%, -50%) scale(1)", "opacity": "1" }
+    },
+    "dialog-close": {
+      "_comment": "reverse",
+      "0%": { "transform": "translate(-50%, -50%) scale(1)", "opacity": "1" },
+      "100%": { "transform": "translate(-50%, -48%) scale(0.96)", "opacity": "0" }
+    },
+
+    "dropdown-open": {
+      "0%": { "transform": "scale(0.95) translateY(-4px)", "opacity": "0" },
+      "100%": { "transform": "scale(1) translateY(0)", "opacity": "1" }
+    },
+    "dropdown-close": {
+      "_comment": "reverse",
+      "0%": { "transform": "scale(1) translateY(0)", "opacity": "1" },
+      "100%": { "transform": "scale(0.95) translateY(-4px)", "opacity": "0" }
+    },
+
+    "toast-enter": {
+      "0%": { "transform": "translateX(100%)", "opacity": "0" },
+      "100%": { "transform": "translateX(0)", "opacity": "1" }
+    },
+    "toast-exit": {
+      "_comment": "reverse",
+      "0%": { "transform": "translateX(0)", "opacity": "1" },
+      "100%": { "transform": "translateX(100%)", "opacity": "0" }
+    },
+
+    "spin": {
+      "0%": { "transform": "rotate(0deg)" },
+      "100%": { "transform": "rotate(360deg)" }
+    },
+    "pulse": {
+      "0%, 100%": { "opacity": "1" },
+      "50%": { "opacity": "0.5" }
+    }
+  },
+
+  "interactions": {
+    "_comment_pattern": "Define for each interactive component state",
+    "_structure": {
+      "property": "string - CSS properties (comma-separated)",
+      "duration": "{duration.*}",
+      "easing": "{easing.*}"
+    },
+
+    "button-hover": {
+      "property": "background-color, transform",
+      "duration": "{duration.fast}",
+      "easing": "{easing.ease-out}"
+    },
+    "button-active": {
+      "property": "transform",
+      "duration": "{duration.instant}",
+      "easing": "{easing.ease-in}"
+    },
+    "card-hover": {
+      "property": "box-shadow, transform",
+      "duration": "{duration.normal}",
+      "easing": "{easing.ease-in-out}"
+    },
+    "input-focus": {
+      "property": "border-color, box-shadow",
+      "duration": "{duration.fast}",
+      "easing": "{easing.ease-out}"
+    },
+    "dropdown-toggle": {
+      "property": "opacity, transform",
+      "duration": "{duration.fast}",
+      "easing": "{easing.ease-out}"
+    },
+    "accordion-toggle": {
+      "property": "height, opacity",
+      "duration": "{duration.normal}",
+      "easing": "{easing.ease-in-out}"
+    },
+    "dialog-toggle": {
+      "property": "opacity, transform",
+      "duration": "{duration.normal}",
+      "easing": "{easing.spring}"
+    },
+    "tabs-switch": {
+      "property": "color, border-color",
+      "duration": "{duration.fast}",
+      "easing": "{easing.ease-in-out}"
+    }
+  },
+
+  "transitions": {
+    "default": { "$value": "all {duration.normal} {easing.ease-in-out}" },
+    "colors": { "$value": "color {duration.fast} {easing.linear}, background-color {duration.fast} {easing.linear}" },
+    "transform": { "$value": "transform {duration.normal} {easing.spring}" },
+    "opacity": { "$value": "opacity {duration.fast} {easing.linear}" },
+    "all-smooth": { "$value": "all {duration.slow} {easing.ease-in-out}" }
+  },
+
+  "component_animations": {
+    "_comment_pattern": "Map each component to its animations - MUST match design-tokens.json component list",
+    "_structure": {
+      "stateOrInteraction": {
+        "animation": "keyframe-name {duration.*} {easing.*} OR none",
+        "transition": "{interactions.*} OR none"
+      }
+    },
+
+    "button": {
+      "hover": { "animation": "none", "transition": "{interactions.button-hover}" },
+      "active": { "animation": "none", "transition": "{interactions.button-active}" }
+    },
+    "card": {
+      "hover": { "animation": "none", "transition": "{interactions.card-hover}" }
+    },
+    "input": {
+      "focus": { "animation": "none", "transition": "{interactions.input-focus}" }
+    },
+    "dialog": {
+      "open": { "animation": "dialog-open {duration.normal} {easing.spring}" },
+      "close": { "animation": "dialog-close {duration.normal} {easing.ease-in}" }
+    },
+    "dropdown": {
+      "open": { "animation": "dropdown-open {duration.fast} {easing.ease-out}" },
+      "close": { "animation": "dropdown-close {duration.fast} {easing.ease-in}" }
+    },
+    "toast": {
+      "enter": { "animation": "toast-enter {duration.normal} {easing.ease-out}" },
+      "exit": { "animation": "toast-exit {duration.normal} {easing.ease-in}" }
+    },
+    "accordion": {
+      "open": { "animation": "accordion-down {duration.normal} {easing.ease-out}" },
+      "close": { "animation": "accordion-up {duration.normal} {easing.ease-in}" }
+    },
+    "_comment_missing": "Add mappings for: tabs, switch, checkbox, badge, alert"
+  },
+
+  "accessibility": {
+    "prefers_reduced_motion": {
+      "duration": "0ms",
+      "keyframes": {},
+      "note": "Disable animations when user prefers reduced motion",
+      "css_rule": "@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }"
+    }
+  },
+
+  "_metadata": {
+    "version": "string",
+    "created": "ISO timestamp",
+    "source": "code-import|explore|text",
+    "code_snippets": [
+      {
+        "animation_name": "string - keyframe/transition name",
+        "source_file": "string - absolute path",
+        "line_start": "number",
+        "line_end": "number",
+        "snippet": "string - complete @keyframes or transition code",
+        "context_type": "css-keyframes|css-transition|js-animation|scss-animation|etc"
+      }
+    ]
+  },
+
+  "_field_rules": {
+    "schema": "$schema MUST reference W3C Design Tokens format specification",
+    "duration_wrapper": "All duration values MUST use $value wrapper with ms units",
+    "easing_wrapper": "All easing values MUST use $value wrapper with standard CSS easing or cubic-bezier()",
+    "keyframes": "keyframes MUST define complete component state animations (open/close, enter/exit)",
+    "interactions_refs": "interactions MUST reference duration and easing using {token.path} syntax",
+    "component_mapping": "component_animations MUST map component states to specific keyframes and transitions",
+    "component_coverage": "component_animations MUST be defined for all interactive and stateful components",
+    "transitions_wrapper": "transitions MUST use $value wrapper for complete transition definitions",
+    "accessibility": "accessibility.prefers_reduced_motion MUST be included with CSS media query rule",
+    "code_snippets": "_metadata.code_snippets ONLY present in Code Import mode"
+  },
+
+  "_animation_component_integration": {
+    "requirement": "Each component in design-tokens.json component section MUST have corresponding entry in component_animations",
+    "state_based": "State-based animations (dialog.open, accordion.close) MUST use keyframe animations",
+    "interaction": "Interaction animations (button.hover, input.focus) MUST use transitions",
+    "consistency": "All animation references use {token.path} syntax for consistency"
+  }
+}

package/.claude/workflows/cli-templates/ui-design/systems/design-tokens.json

@@ -0,0 +1,342 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "name": "string - Token set name",
+  "description": "string - Token set description",
+
+  "color": {
+    "background": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" }, "$description": "optional" },
+    "foreground": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+    "card": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+    "card-foreground": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+    "border": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+    "input": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+    "ring": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+
+    "interactive": {
+      "primary": {
+        "default": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+        "hover": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+        "active": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+        "disabled": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+        "foreground": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } }
+      },
+      "secondary": {
+        "_comment": "Same structure as primary",
+        "default": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+        "hover": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+        "active": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+        "disabled": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+        "foreground": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } }
+      },
+      "accent": {
+        "_comment": "Same structure (no disabled state)",
+        "default": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+        "hover": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+        "active": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+        "foreground": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } }
+      },
+      "destructive": {
+        "_comment": "Same structure (no active/disabled states)",
+        "default": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+        "hover": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+        "foreground": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } }
+      }
+    },
+
+    "muted": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+    "muted-foreground": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+
+    "chart": {
+      "1": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+      "2": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+      "3": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+      "4": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+      "5": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } }
+    },
+
+    "sidebar": {
+      "background": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+      "foreground": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+      "primary": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+      "primary-foreground": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+      "accent": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+      "accent-foreground": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+      "border": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } },
+      "ring": { "$type": "color", "$value": { "light": "oklch(...)", "dark": "oklch(...)" } }
+    }
+  },
+
+  "typography": {
+    "font_families": {
+      "sans": "string - 'Font Name', fallback1, fallback2",
+      "serif": "string",
+      "mono": "string"
+    },
+    "font_sizes": {
+      "xs": "0.75rem",
+      "sm": "0.875rem",
+      "base": "1rem",
+      "lg": "1.125rem",
+      "xl": "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem"
+    },
+    "line_heights": {
+      "tight": "number",
+      "normal": "number",
+      "relaxed": "number"
+    },
+    "letter_spacing": {
+      "tight": "string",
+      "normal": "string",
+      "wide": "string"
+    },
+    "combinations": [
+      {
+        "name": "h1|h2|h3|h4|h5|h6|body|caption",
+        "font_family": "sans|serif|mono",
+        "font_size": "string - reference to font_sizes",
+        "font_weight": "number - 400|500|600|700",
+        "line_height": "string",
+        "letter_spacing": "string"
+      }
+    ]
+  },
+
+  "spacing": {
+    "0": "0",
+    "1": "0.25rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "6": "1.5rem",
+    "8": "2rem",
+    "12": "3rem",
+    "16": "4rem",
+    "20": "5rem",
+    "24": "6rem",
+    "32": "8rem",
+    "40": "10rem",
+    "48": "12rem",
+    "56": "14rem",
+    "64": "16rem"
+  },
+
+  "opacity": {
+    "disabled": "0.5",
+    "hover": "0.8",
+    "active": "1"
+  },
+
+  "shadows": {
+    "2xs": "string - CSS shadow value",
+    "xs": "string",
+    "sm": "string",
+    "DEFAULT": "string",
+    "md": "string",
+    "lg": "string",
+    "xl": "string",
+    "2xl": "string"
+  },
+
+  "border_radius": {
+    "sm": "string - calc() or fixed",
+    "md": "string",
+    "lg": "string",
+    "xl": "string",
+    "DEFAULT": "string"
+  },
+
+  "breakpoints": {
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px"
+  },
+
+  "component": {
+    "_comment_pattern": "COMPONENT PATTERN - Apply to: button, card, input, dialog, dropdown, toast, accordion, tabs, switch, checkbox, badge, alert",
+    "_example_button": {
+      "$type": "component",
+      "base": {
+        "_comment": "Layout properties using camelCase",
+        "display": "inline-flex|flex|block",
+        "alignItems": "center",
+        "borderRadius": "{border_radius.md}",
+        "transition": "{transitions.default}"
+      },
+      "size": {
+        "small": { "height": "32px", "padding": "{spacing.2} {spacing.3}", "fontSize": "{typography.font_sizes.xs}" },
+        "default": { "height": "40px", "padding": "{spacing.2} {spacing.4}" },
+        "large": { "height": "48px", "padding": "{spacing.3} {spacing.6}", "fontSize": "{typography.font_sizes.base}" }
+      },
+      "variant": {
+        "variantName": {
+          "default": { "backgroundColor": "{color.interactive.primary.default}", "color": "{color.interactive.primary.foreground}" },
+          "hover": { "backgroundColor": "{color.interactive.primary.hover}" },
+          "active": { "backgroundColor": "{color.interactive.primary.active}" },
+          "disabled": { "backgroundColor": "{color.interactive.primary.disabled}", "opacity": "{opacity.disabled}", "cursor": "not-allowed" },
+          "focus": { "outline": "2px solid {color.ring}", "outlineOffset": "2px" }
+        }
+      },
+      "state": {
+        "_comment": "For stateful components (dialog, accordion, etc.)",
+        "open": { "animation": "{animation.name.component-open} {animation.duration.normal} {animation.easing.ease-out}" },
+        "closed": { "animation": "{animation.name.component-close} {animation.duration.normal} {animation.easing.ease-in}" }
+      }
+    }
+  },
+
+  "elevation": {
+    "$type": "elevation",
+    "base": { "$value": "0" },
+    "overlay": { "$value": "40" },
+    "dropdown": { "$value": "50" },
+    "dialog": { "$value": "50" },
+    "tooltip": { "$value": "60" }
+  },
+
+  "_metadata": {
+    "version": "string - W3C version or custom version",
+    "created": "ISO timestamp - 2024-01-01T00:00:00Z",
+    "source": "code-import|explore|text",
+    "theme_colors_guide": {
+      "description": "Theme colors are the core brand identity colors that define the visual hierarchy and emotional tone of the design system",
+      "primary": {
+        "role": "Main brand color",
+        "usage": "Primary actions (CTAs, key interactive elements, navigation highlights, primary buttons)",
+        "contrast_requirement": "WCAG AA - 4.5:1 for text, 3:1 for UI components"
+      },
+      "secondary": {
+        "role": "Supporting brand color",
+        "usage": "Secondary actions and complementary elements (less prominent buttons, secondary navigation, supporting features)",
+        "principle": "Should complement primary without competing for attention"
+      },
+      "accent": {
+        "role": "Highlight color for emphasis",
+        "usage": "Attention-grabbing elements used sparingly (badges, notifications, special promotions, highlights)",
+        "principle": "Should create strong visual contrast to draw focus"
+      },
+      "destructive": {
+        "role": "Error and destructive action color",
+        "usage": "Delete buttons, error messages, critical warnings",
+        "principle": "Must signal danger or caution clearly"
+      },
+      "harmony_note": "All theme colors must work harmoniously together and align with brand identity. In multi-file extraction, prioritize definitions with semantic comments explaining brand intent."
+    },
+    "conflicts": [
+      {
+        "token_name": "string - which token has conflicts",
+        "category": "string - colors|typography|etc",
+        "definitions": [
+          {
+            "value": "string - token value",
+            "source_file": "string - absolute path",
+            "line_number": "number",
+            "context": "string - surrounding comment or null",
+            "semantic_intent": "string - interpretation of definition"
+          }
+        ],
+        "selected_value": "string - final chosen value",
+        "selection_reason": "string - why this value was chosen"
+      }
+    ],
+    "code_snippets": [
+      {
+        "category": "colors|typography|spacing|shadows|border_radius|component",
+        "token_name": "string - which token this snippet defines",
+        "source_file": "string - absolute path",
+        "line_start": "number",
+        "line_end": "number",
+        "snippet": "string - complete code block",
+        "context_type": "css-variable|css-class|js-object|scss-variable|etc"
+      }
+    ],
+    "usage_recommendations": {
+      "typography": {
+        "common_sizes": {
+          "small_text": "sm (0.875rem)",
+          "body_text": "base (1rem)",
+          "heading": "2xl-4xl"
+        },
+        "common_combinations": [
+          {
+            "name": "Heading + Body",
+            "heading": "2xl",
+            "body": "base",
+            "use_case": "Article sections"
+          }
+        ]
+      },
+      "spacing": {
+        "size_guide": {
+          "tight": "1-2 (0.25rem-0.5rem)",
+          "normal": "4-6 (1rem-1.5rem)",
+          "loose": "8-12 (2rem-3rem)"
+        },
+        "common_patterns": [
+          {
+            "pattern": "padding-4 margin-bottom-6",
+            "use_case": "Card content spacing",
+            "pixel_value": "1rem padding, 1.5rem margin"
+          }
+        ]
+      }
+    }
+  },
+
+  "_field_rules": {
+    "schema": "$schema MUST reference W3C Design Tokens format specification",
+    "colors": "All color values MUST use OKLCH format with light/dark mode values",
+    "types": "All tokens MUST include $type metadata (color, dimension, duration, component, elevation)",
+    "states": "Color tokens MUST include interactive states (default, hover, active, disabled) where applicable",
+    "fonts": "Typography font_families MUST include Google Fonts with fallback stacks",
+    "spacing": "Spacing MUST use systematic scale (multiples of 0.25rem base unit)",
+    "components": "Component definitions MUST be structured objects referencing other tokens via {token.path} syntax",
+    "component_states": "Component definitions MUST include state-based styling (default, hover, active, focus, disabled)",
+    "elevation": "elevation z-index values MUST be defined for layered components (overlay, dropdown, dialog, tooltip)",
+    "metadata_guide": "_metadata.theme_colors_guide RECOMMENDED in all modes to help users understand theme color roles and usage",
+    "metadata_conflicts": "_metadata.conflicts MANDATORY in Code Import mode when conflicting definitions detected",
+    "metadata_snippets": "_metadata.code_snippets ONLY present in Code Import mode",
+    "metadata_recommendations": "_metadata.usage_recommendations RECOMMENDED for universal components"
+  },
+
+  "_required_components": {
+    "_comment": "12+ components required, use pattern above",
+    "button": "5 variants (primary, secondary, destructive, outline, ghost) + 3 sizes + states (default, hover, active, disabled, focus)",
+    "card": "2 variants (default, interactive) + hover animations",
+    "input": "states (default, focus, disabled, error) + 3 sizes",
+    "dialog": "overlay + content + states (open, closed with animations)",
+    "dropdown": "trigger (references button) + content + item (with states) + states (open, closed)",
+    "toast": "2 variants (default, destructive) + states (enter, exit with animations)",
+    "accordion": "trigger + content + states (open, closed with animations)",
+    "tabs": "list + trigger (states: default, hover, active, disabled) + content",
+    "switch": "root + thumb + states (checked, disabled)",
+    "checkbox": "states (default, checked, disabled, focus)",
+    "badge": "4 variants (default, secondary, destructive, outline)",
+    "alert": "2 variants (default, destructive)"
+  },
+
+  "_token_reference_syntax": {
+    "_comment": "Use {token.path} to reference other tokens",
+    "examples": [
+      "{color.interactive.primary.default}",
+      "{spacing.4}",
+      "{typography.font_sizes.sm}"
+    ],
+    "resolution": "References are resolved during CSS generation",
+    "nested": "Supports nested references (e.g., {component.button.base})"
+  },
+
+  "_conflict_resolution_rules": {
+    "_comment": "Code Import Mode only",
+    "detect": "MUST detect when same token has different values across files",
+    "read": "MUST read semantic comments (/* ... */) surrounding definitions",
+    "prioritize": "MUST prioritize definitions with semantic intent over bare values",
+    "record": "MUST record ALL definitions in conflicts array, not just selected one",
+    "explain": "MUST explain selection_reason referencing semantic context",
+    "verify": "For core theme tokens (primary, secondary, accent): MUST verify selected value aligns with overall color scheme described in comments"
+  }
+}