mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-11 02:33:51 +08:00
f798dd4172
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
248 lines
9.0 KiB
JSON
248 lines
9.0 KiB
JSON
{
|
|
"$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"
|
|
}
|
|
}
|