How do I install the El Space skill?

Run npx skillmds@latest add jiaiyan/el-space in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is El Space safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with El Space?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is El Space free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published El Space?

jiaiyan (@jiaiyan) published this skill. Their other Agent Skills are listed on their SkillMD profile.

El Space by jiaiyan — Agent Skill

Name: El Space
Rating: 4.666666666666667 (3 reviews)
Author: jiaiyan

File contents

Space Component

Space component provides consistent spacing between elements for better layout control.

When to Use

Consistent component spacing
Button groups
Form layouts
Navigation items

Basic Usage

<template>
  <el-space>
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
    <el-button>Button 3</el-button>
  </el-space>
</template>

Vertical Layout

<template>
  <el-space direction="vertical">
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
  </el-space>
</template>

Control Size

<template>
  <el-space size="small">
    <el-button>Small</el-button>
  </el-space>
  <el-space size="default">
    <el-button>Default</el-button>
  </el-space>
  <el-space size="large">
    <el-button>Large</el-button>
  </el-space>
</template>

Custom Size

<template>
  <el-space :size="20">
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
  </el-space>
</template>

Auto Wrapping

<template>
  <el-space wrap>
    <el-button v-for="i in 20" :key="i">Button {{ i }}</el-button>
  </el-space>
</template>

Spacer

<template>
  <el-space spacer="|">
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
  </el-space>
</template>

Fill Container

<template>
  <el-space fill>
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
  </el-space>
</template>

API Reference

Attributes

Name	Description	Type	Default
alignment	Alignment of items	CSS align-items	`'center'`
direction	Placement direction	`'vertical' \| 'horizontal'`	`'horizontal'`
spacer	Spacer element	`string \| number \| VNode`	—
size	Spacing size	`'default' \| 'small' \| 'large' \| number \| [number, number]`	`'small'`
wrap	Auto wrapping	`boolean`	`false`
fill	Fill container	`boolean`	`false`
fill-ratio	Fill ratio	`number`	`100`

Slots

Name	Description
default	Items to be spaced

Best Practices

Use wrap for responsive layouts
Use spacer for custom separators
Use fill for equal-width items

---name: el-spacedescription: Space component for consistent spacing between elements. Invoke when user needs to create consistent gaps between components, layout spacing, or element arrangement.--- # Space Component Space component provides consistent spacing between elements for better layout control. ## When to Use - Consistent component spacing - Button groups - Form layouts - Navigation items ## Basic Usage ```vue <template> <el-space> <el-button>Button 1</el-button> <el-button>Button 2</el-button> <el-button>Button 3</el-button> </el-space> </template> ``` ## Vertical Layout ```vue <template> <el-space direction="vertical"> <el-button>Button 1</el-button> <el-button>Button 2</el-button> </el-space> </template> ``` ## Control Size ```vue <template> <el-space size="small"> <el-button>Small</el-button> </el-space> <el-space size="default"> <el-button>Default</el-button> </el-space> <el-space size="large"> <el-button>Large</el-button> </el-space> </template> ``` ## Custom Size ```vue <template> <el-space :size="20"> <el-button>Button 1</el-button> <el-button>Button 2</el-button> </el-space> </template> ``` ## Auto Wrapping ```vue <template> <el-space wrap> <el-button v-for="i in 20" :key="i">Button {{ i }}</el-button> </el-space> </template> ``` ## Spacer ```vue <template> <el-space spacer="|"> <el-button>Button 1</el-button> <el-button>Button 2</el-button> </el-space> </template> ``` ## Fill Container ```vue <template> <el-space fill> <el-button>Button 1</el-button> <el-button>Button 2</el-button> </el-space> </template> ``` ## API Reference ### Attributes | Name | Description | Type | Default | |------|-------------|------|---------| | alignment | Alignment of items | CSS align-items | `'center'` | | direction | Placement direction | `'vertical' \| 'horizontal'` | `'horizontal'` | | spacer | Spacer element | `string \| number \| VNode` | — | | size | Spacing size | `'default' \| 'small' \| 'large' \| number \| [number, number]` | `'small'` | | wrap | Auto wrapping | `boolean` | `false` | | fill | Fill container | `boolean` | `false` | | fill-ratio | Fill ratio | `number` | `100` | ### Slots | Name | Description | |------|-------------| | default | Items to be spaced | ## Best Practices 1. Use `wrap` for responsive layouts 2. Use `spacer` for custom separators 3. Use `fill` for equal-width items

Frequently asked questions

El Space