mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-10 02:24:35 +08:00
refactor: consolidate workflow commands and add UI design templates
1. Remove deprecated task-generate.md - Replaced by task-generate-agent.md in previous commits - Clean up duplicate command documentation 2. Update ui-design-agent.md - Refine agent specifications and workflow integration 3. Add UI design template files - Create ~/.claude/workflows/cli-templates/ui-design/systems/ - Add animation-tokens.json for animation and transition patterns - Add design-tokens.json for color, typography, spacing tokens - Add layout-templates.json for structural layout patterns - Modular design system management 4. Update analyze_commands.py - Enhance command analysis capabilities - Improve metadata extraction Key improvements: - Remove duplicate/deprecated documentation - Modular UI design template management - Better workflow command organization
This commit is contained in:
catlog22
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
{
|
||||
"$schema": "https://tr.designtokens.org/format/",
|
||||
"templates": [
|
||||
{
|
||||
"target": "string - page/component name (e.g., hero-section, product-card)",
|
||||
"description": "string - layout description",
|
||||
"component_type": "universal|specialized",
|
||||
"device_type": "mobile|tablet|desktop|responsive",
|
||||
"layout_strategy": "string - grid-3col|flex-row|stack|sidebar|etc",
|
||||
|
||||
"structure": {
|
||||
"tag": "string - HTML5 semantic tag (header|nav|main|section|article|aside|footer|div|etc)",
|
||||
"attributes": {
|
||||
"class": "string - semantic class name",
|
||||
"role": "string - ARIA role (navigation|main|complementary|etc)",
|
||||
"aria-label": "string - ARIA label",
|
||||
"aria-describedby": "string - ARIA describedby",
|
||||
"data-state": "string - data attributes for state management (open|closed|etc)"
|
||||
},
|
||||
"layout": {
|
||||
"_comment": "LAYOUT PROPERTIES ONLY - Use camelCase for property names",
|
||||
"display": "grid|flex|block|inline-flex",
|
||||
"grid-template-columns": "{spacing.*} or CSS value (repeat(3, 1fr))",
|
||||
"grid-template-rows": "string",
|
||||
"gap": "{spacing.*}",
|
||||
"padding": "{spacing.*}",
|
||||
"margin": "{spacing.*}",
|
||||
"alignItems": "start|center|end|stretch",
|
||||
"justifyContent": "start|center|end|space-between|space-around",
|
||||
"flexDirection": "row|column",
|
||||
"flexWrap": "wrap|nowrap",
|
||||
"position": "relative|absolute|fixed|sticky",
|
||||
"top": "string",
|
||||
"right": "string",
|
||||
"bottom": "string",
|
||||
"left": "string",
|
||||
"width": "string",
|
||||
"height": "string",
|
||||
"maxWidth": "string",
|
||||
"minHeight": "string"
|
||||
},
|
||||
"responsive": {
|
||||
"_comment": "ONLY properties that CHANGE at each breakpoint - NO repetition",
|
||||
"sm": {
|
||||
"grid-template-columns": "1fr",
|
||||
"padding": "{spacing.4}"
|
||||
},
|
||||
"md": {
|
||||
"grid-template-columns": "repeat(2, 1fr)",
|
||||
"gap": "{spacing.6}"
|
||||
},
|
||||
"lg": {
|
||||
"grid-template-columns": "repeat(3, 1fr)"
|
||||
}
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"_comment": "Recursive structure - same fields as parent",
|
||||
"tag": "string",
|
||||
"attributes": {},
|
||||
"layout": {},
|
||||
"responsive": {},
|
||||
"children": [],
|
||||
"content": "string or {{placeholder}}"
|
||||
}
|
||||
],
|
||||
"content": "string - text content or {{placeholder}} for dynamic content"
|
||||
},
|
||||
|
||||
"accessibility": {
|
||||
"patterns": [
|
||||
"string - ARIA patterns used (e.g., WAI-ARIA Tabs pattern, Dialog pattern)"
|
||||
],
|
||||
"keyboard_navigation": [
|
||||
"string - keyboard shortcuts (e.g., Tab/Shift+Tab navigation, Escape to close)"
|
||||
],
|
||||
"focus_management": "string - focus trap strategy, initial focus target",
|
||||
"screen_reader_notes": [
|
||||
"string - screen reader announcements (e.g., Dialog opened, Tab selected)"
|
||||
]
|
||||
},
|
||||
|
||||
"usage_guide": {
|
||||
"common_sizes": {
|
||||
"small": {
|
||||
"dimensions": "string - e.g., px-3 py-1.5 (height: ~32px)",
|
||||
"use_case": "string - Compact UI, mobile views"
|
||||
},
|
||||
"medium": {
|
||||
"dimensions": "string - e.g., px-4 py-2 (height: ~40px)",
|
||||
"use_case": "string - Default size for most contexts"
|
||||
},
|
||||
"large": {
|
||||
"dimensions": "string - e.g., px-6 py-3 (height: ~48px)",
|
||||
"use_case": "string - Prominent CTAs, hero sections"
|
||||
}
|
||||
},
|
||||
"variant_recommendations": {
|
||||
"variant_name": {
|
||||
"description": "string - when to use this variant",
|
||||
"typical_actions": ["string - action examples"]
|
||||
}
|
||||
},
|
||||
"usage_context": [
|
||||
"string - typical usage scenarios (e.g., Landing page hero, Product listing grid)"
|
||||
],
|
||||
"accessibility_tips": [
|
||||
"string - accessibility best practices (e.g., Ensure heading hierarchy, Add aria-label)"
|
||||
]
|
||||
},
|
||||
|
||||
"extraction_metadata": {
|
||||
"source": "code-import|explore|text",
|
||||
"created": "ISO timestamp",
|
||||
"code_snippets": [
|
||||
{
|
||||
"component_name": "string - which layout component",
|
||||
"source_file": "string - absolute path",
|
||||
"line_start": "number",
|
||||
"line_end": "number",
|
||||
"snippet": "string - complete HTML/CSS/JS code block",
|
||||
"context_type": "html-structure|css-utility|react-component|vue-component|etc"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
"_field_rules": {
|
||||
"schema": "$schema MUST reference W3C Design Tokens format specification",
|
||||
"semantic_tags": "structure.tag MUST use semantic HTML5 tags (header, nav, main, section, article, aside, footer)",
|
||||
"aria": "structure.attributes MUST include ARIA attributes where applicable (role, aria-label, aria-describedby)",
|
||||
"token_refs": "structure.layout MUST use {token.path} syntax for all spacing values",
|
||||
"no_visual": "structure.layout MUST NOT include visual styling (colors, fonts, shadows - those belong in design-tokens)",
|
||||
"layout_only": "structure.layout contains ONLY layout properties (display, grid, flex, position, spacing)",
|
||||
"breakpoints": "structure.responsive MUST define breakpoint-specific overrides matching breakpoint tokens",
|
||||
"no_repetition": "structure.responsive uses ONLY the properties that change at each breakpoint (no repetition)",
|
||||
"recursive": "structure.children inherits same structure recursively for nested elements",
|
||||
"component_type": "component_type MUST be 'universal' or 'specialized'",
|
||||
"accessibility": "accessibility MUST include patterns, keyboard_navigation, focus_management, screen_reader_notes",
|
||||
"usage_guide_universal": "usage_guide REQUIRED for universal components (buttons, inputs, forms, cards, navigation, etc.)",
|
||||
"usage_guide_specialized": "usage_guide OPTIONAL for specialized components (can be simplified or omitted)",
|
||||
"code_snippets": "extraction_metadata.code_snippets ONLY present in Code Import mode"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user