layout

Create complex panel layouts for testing. Use patterns like "2H", "3V", "2x2", "1+2H" to quickly set up multi-panel configurations.

majiayu000/claude-skill-registry·0installs660stars

SKILL.md

Full skill instructions

Create Panel Layout

Generate and apply complex panel layouts for testing the iOS/web grid system.

Arguments

$ARGUMENTS should contain a layout pattern. Supported patterns:

Pattern	Description
`2H`	2 panels side-by-side (horizontal split)
`2V`	2 panels stacked (vertical split)
`3H`	3 panels in a row
`3V`	3 panels in a column
`2x2`	4 panels in a 2x2 grid
`1+2H`	1 panel left, 2 stacked on right
`1+2V`	1 panel top, 2 side-by-side on bottom
`2+1H`	2 stacked on left, 1 panel on right
`2+1V`	2 side-by-side on top, 1 panel on bottom
`1+3`	1 large left, 3 stacked on right
`3+1`	3 stacked on left, 1 large right
`6`	6 panels (2 rows of 3)
`clear`	Remove all panels (empty layout)

If no pattern provided, default to 2H.

Steps

1. Parse the pattern

Determine how many panels are needed based on the pattern.

2. Get current plugins and start instances

# Get available plugins
curl -s http://localhost:47100/plugins

Use the agent plugin by default. Start as many instances as needed:

# Start a new agent instance (repeat as needed)
curl -s -X POST http://localhost:47100/plugins/agent/start

Track the instance IDs returned from each start call.

3. Generate the layout JSON

Build the layout tree based on the pattern. Each leaf needs:

type: "leaf"
id: unique string (e.g., "panel-1", "panel-2")
pluginName: "agent"
instanceId: the instance ID from step 2

For splits:

type: "split"
id: unique string
direction: "horizontal" or "vertical"
children: array of exactly 2 nodes
sizes: array of 2 numbers that sum to 100 (e.g., [50, 50])

4. Apply the layout

curl -s -X PUT http://localhost:47100/layout \
  -H "Content-Type: application/json" \
  -d '{"layout": {"version": 1, "root": <generated-tree>}}'

Layout Examples

2H (2 horizontal)

{
  "version": 1,
  "root": {
    "type": "split",
    "id": "root",
    "direction": "horizontal",
    "sizes": [50, 50],
    "children": [
      {"type": "leaf", "id": "panel-1", "pluginName": "agent", "instanceId": "1"},
      {"type": "leaf", "id": "panel-2", "pluginName": "agent", "instanceId": "2"}
    ]
  }
}

3V (3 vertical)

{
  "version": 1,
  "root": {
    "type": "split",
    "id": "root",
    "direction": "vertical",
    "sizes": [33, 67],
    "children": [
      {"type": "leaf", "id": "panel-1", "pluginName": "agent", "instanceId": "1"},
      {
        "type": "split",
        "id": "split-2",
        "direction": "vertical",
        "sizes": [50, 50],
        "children": [
          {"type": "leaf", "id": "panel-2", "pluginName": "agent", "instanceId": "2"},
          {"type": "leaf", "id": "panel-3", "pluginName": "agent", "instanceId": "3"}
        ]
      }
    ]
  }
}

2x2 (4 panel grid)

{
  "version": 1,
  "root": {
    "type": "split",
    "id": "root",
    "direction": "vertical",
    "sizes": [50, 50],
    "children": [
      {
        "type": "split",
        "id": "top-row",
        "direction": "horizontal",
        "sizes": [50, 50],
        "children": [
          {"type": "leaf", "id": "panel-1", "pluginName": "agent", "instanceId": "1"},
          {"type": "leaf", "id": "panel-2", "pluginName": "agent", "instanceId": "2"}
        ]
      },
      {
        "type": "split",
        "id": "bottom-row",
        "direction": "horizontal",
        "sizes": [50, 50],
        "children": [
          {"type": "leaf", "id": "panel-3", "pluginName": "agent", "instanceId": "3"},
          {"type": "leaf", "id": "panel-4", "pluginName": "agent", "instanceId": "4"}
        ]
      }
    ]
  }
}

1+2H (1 left, 2 stacked right)

{
  "version": 1,
  "root": {
    "type": "split",
    "id": "root",
    "direction": "horizontal",
    "sizes": [50, 50],
    "children": [
      {"type": "leaf", "id": "panel-1", "pluginName": "agent", "instanceId": "1"},
      {
        "type": "split",
        "id": "right-stack",
        "direction": "vertical",
        "sizes": [50, 50],
        "children": [
          {"type": "leaf", "id": "panel-2", "pluginName": "agent", "instanceId": "2"},
          {"type": "leaf", "id": "panel-3", "pluginName": "agent", "instanceId": "3"}
        ]
      }
    ]
  }
}

1+2V (1 top, 2 side-by-side bottom)

{
  "version": 1,
  "root": {
    "type": "split",
    "id": "root",
    "direction": "vertical",
    "sizes": [50, 50],
    "children": [
      {"type": "leaf", "id": "panel-1", "pluginName": "agent", "instanceId": "1"},
      {
        "type": "split",
        "id": "bottom-row",
        "direction": "horizontal",
        "sizes": [50, 50],
        "children": [
          {"type": "leaf", "id": "panel-2", "pluginName": "agent", "instanceId": "2"},
          {"type": "leaf", "id": "panel-3", "pluginName": "agent", "instanceId": "3"}
        ]
      }
    ]
  }
}

1+3 (1 large left, 3 stacked right)

{
  "version": 1,
  "root": {
    "type": "split",
    "id": "root",
    "direction": "horizontal",
    "sizes": [50, 50],
    "children": [
      {"type": "leaf", "id": "panel-1", "pluginName": "agent", "instanceId": "1"},
      {
        "type": "split",
        "id": "right-stack",
        "direction": "vertical",
        "sizes": [33, 67],
        "children": [
          {"type": "leaf", "id": "panel-2", "pluginName": "agent", "instanceId": "2"},
          {
            "type": "split",
            "id": "right-bottom",
            "direction": "vertical",
            "sizes": [50, 50],
            "children": [
              {"type": "leaf", "id": "panel-3", "pluginName": "agent", "instanceId": "3"},
              {"type": "leaf", "id": "panel-4", "pluginName": "agent", "instanceId": "4"}
            ]
          }
        ]
      }
    ]
  }
}

6 panels (2 rows of 3)

{
  "version": 1,
  "root": {
    "type": "split",
    "id": "root",
    "direction": "vertical",
    "sizes": [50, 50],
    "children": [
      {
        "type": "split",
        "id": "top-row",
        "direction": "horizontal",
        "sizes": [33, 67],
        "children": [
          {"type": "leaf", "id": "panel-1", "pluginName": "agent", "instanceId": "1"},
          {
            "type": "split",
            "id": "top-right",
            "direction": "horizontal",
            "sizes": [50, 50],
            "children": [
              {"type": "leaf", "id": "panel-2", "pluginName": "agent", "instanceId": "2"},
              {"type": "leaf", "id": "panel-3", "pluginName": "agent", "instanceId": "3"}
            ]
          }
        ]
      },
      {
        "type": "split",
        "id": "bottom-row",
        "direction": "horizontal",
        "sizes": [33, 67],
        "children": [
          {"type": "leaf", "id": "panel-4", "pluginName": "agent", "instanceId": "4"},
          {
            "type": "split",
            "id": "bottom-right",
            "direction": "horizontal",
            "sizes": [50, 50],
            "children": [
              {"type": "leaf", "id": "panel-5", "pluginName": "agent", "instanceId": "5"},
              {"type": "leaf", "id": "panel-6", "pluginName": "agent", "instanceId": "6"}
            ]
          }
        ]
      }
    ]
  }
}

clear (empty layout)

{
  "version": 1,
  "root": null
}

Output

Report:

Pattern interpreted
Number of instances started
Layout applied successfully
Tell user to check their iOS/web client

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/majiayu000/claude-skill-registry --skill layout

View on GitHub

skills/data/layout/SKILL.md