Skill — Layout scheme

Layout spacing and dimension tokens.

Skill — Layout scheme

Copy the block below into your AI chat when the Skills index says to include this file.

GitHub: inked-colibri-skills

# Layout Variables Scheme (Base)

Official base layout boilerplate. Spacing tokens reference the Sizes scale; dimension tokens provide useful block widths.

```json
{
  "variables": {
    "Layout/Spacing/Small": {
      "type": "number",
      "value": "Sizes/1",
      "description": "Use for padding or gap at block level"
    },
    "Layout/Spacing/Medium": {
      "type": "number",
      "value": "Sizes/3",
      "description": "Use for padding or gap at group level"
    },
    "Layout/Spacing/Large": {
      "type": "number",
      "value": "Sizes/5",
      "description": "Use for padding or gap at section level"
    },
    "Layout/Dimensions/Block-1": {
      "type": "number",
      "value": 160,
      "description": "Layout dimension for Block-1"
    },
    "Layout/Dimensions/Block-2": {
      "type": "number",
      "value": 320,
      "description": "Layout dimension for Block-2"
    },
    "Layout/Dimensions/Block-3": {
      "type": "number",
      "value": 480,
      "description": "Layout dimension for Block-3"
    },
    "Layout/Dimensions/Block-4": {
      "type": "number",
      "value": 640,
      "description": "Layout dimension for Block-4"
    },
    "Layout/Dimensions/Block-5": {
      "type": "number",
      "value": 800,
      "description": "Layout dimension for Block-5"
    },
    "Layout/Dimensions/Block-6": {
      "type": "number",
      "value": 960,
      "description": "Layout dimension for Block-6"
    },
    "Layout/Dimensions/Block-7": {
      "type": "number",
      "value": 1120,
      "description": "Layout dimension for Block-7"
    },
    "Layout/Dimensions/Block-8": {
      "type": "number",
      "value": 1280,
      "description": "Layout dimension for Block-8"
    },
    "Layout/Dimensions/Block-9": {
      "type": "number",
      "value": 1440,
      "description": "Layout dimension for Block-9"
    },
    "Layout/Dimensions/MinWidth": {
      "type": "number",
      "value": 320,
      "description": "Minimum viewport/section width"
    },
    "Layout/Dimensions/MaxWidth": {
      "type": "number",
      "value": 1920,
      "description": "Max grid width, 12 columns"
    }
  }
}
```

## Recommended usage

- Use `Layout/Spacing/*` for padding, margin, and gap.
- Use `Layout/Dimensions/*` for section widths, container thresholds, and grid widths.
- Keep everything connected to the same `Sizes/...` source of truth.

Written by Narek Ch