Claude-Code-Workflow/.claude/workflows/cli-templates/ui-design/systems/layout-templates.json

{
  "$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"
  }
}