How do I install the El Badge skill?

Run npx skillmds@latest add jiaiyan/el-badge 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 Badge 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 Badge?

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 Badge free to use?

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

Who published El Badge?

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

El Badge by jiaiyan — Agent Skill

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

File contents

Badge Component

Badge component displays a number or status mark on buttons and icons for notifications and status indicators.

When to Use

Notification counts
Status indicators
Unread message badges
Attention markers

Basic Usage

<template>
  <el-badge :value="12" class="item">
    <el-button>comments</el-button>
  </el-badge>
  <el-badge :value="3" class="item">
    <el-button>replies</el-button>
  </el-badge>
</template>

Max Value

<template>
  <el-badge :value="200" :max="99" class="item">
    <el-button>comments</el-button>
  </el-badge>
</template>

Customizations

<template>
  <el-badge value="new" class="item">
    <el-button>comments</el-button>
  </el-badge>
  <el-badge value="hot" class="item">
    <el-button>replies</el-button>
  </el-badge>
</template>

Red Dot

<template>
  <el-badge is-dot class="item">
    <el-button>query</el-button>
  </el-badge>
  <el-badge is-dot class="item">
    <el-icon><Bell /></el-icon>
  </el-badge>
</template>

Offset

<template>
  <el-badge :value="5" :offset="[10, 10]">
    <el-button>Offset badge</el-button>
  </el-badge>
</template>

API Reference

Attributes

Name	Description	Type	Default
value	Display value	`string \| number`	`''`
max	Maximum value, shows `{max}+` when exceeded	`number`	`99`
is-dot	Display as a dot	`boolean`	`false`
hidden	Hidden badge	`boolean`	`false`
type	Badge type	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'danger'`
show-zero	Show badge when value is zero	`boolean`	`true`
color	Background color of the dot	`string`	—
offset	Offset of badge	`[number, number]`	`[0, 0]`
badge-style	Custom style of badge	`CSSProperties`	—
badge-class	Custom class of badge	`string`	—

Slots

Name	Description	Type
default	Customize default content	—
content	Customize badge content	`{ value: string }`

Common Patterns

Notification Badge

<template>
  <el-badge :value="unreadCount" :hidden="unreadCount === 0">
    <el-icon><Bell /></el-icon>
  </el-badge>
</template>

<script setup>
import { ref } from 'vue'

const unreadCount = ref(5)
</script>

Best Practices

Use max to prevent large numbers from overflowing
Use is-dot for simple status indicators
Set hidden when count is zero and show-zero is false

---name: el-badgedescription: Badge component for displaying numbers or status marks on buttons and icons. Invoke when user needs to show notification counts, status indicators, or attention markers.--- # Badge Component Badge component displays a number or status mark on buttons and icons for notifications and status indicators. ## When to Use - Notification counts - Status indicators - Unread message badges - Attention markers ## Basic Usage ```vue <template> <el-badge :value="12" class="item"> <el-button>comments</el-button> </el-badge> <el-badge :value="3" class="item"> <el-button>replies</el-button> </el-badge> </template> ``` ## Max Value ```vue <template> <el-badge :value="200" :max="99" class="item"> <el-button>comments</el-button> </el-badge> </template> ``` ## Customizations ```vue <template> <el-badge value="new" class="item"> <el-button>comments</el-button> </el-badge> <el-badge value="hot" class="item"> <el-button>replies</el-button> </el-badge> </template> ``` ## Red Dot ```vue <template> <el-badge is-dot class="item"> <el-button>query</el-button> </el-badge> <el-badge is-dot class="item"> <el-icon><Bell /></el-icon> </el-badge> </template> ``` ## Offset ```vue <template> <el-badge :value="5" :offset="[10, 10]"> <el-button>Offset badge</el-button> </el-badge> </template> ``` ## API Reference ### Attributes | Name | Description | Type | Default | |------|-------------|------|---------| | value | Display value | `string \| number` | `''` | | max | Maximum value, shows `{max}+` when exceeded | `number` | `99` | | is-dot | Display as a dot | `boolean` | `false` | | hidden | Hidden badge | `boolean` | `false` | | type | Badge type | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'danger'` | | show-zero | Show badge when value is zero | `boolean` | `true` | | color | Background color of the dot | `string` | — | | offset | Offset of badge | `[number, number]` | `[0, 0]` | | badge-style | Custom style of badge | `CSSProperties` | — | | badge-class | Custom class of badge | `string` | — | ### Slots | Name | Description | Type | |------|-------------|------| | default | Customize default content | — | | content | Customize badge content | `{ value: string }` | ## Common Patterns ### Notification Badge ```vue <template> <el-badge :value="unreadCount" :hidden="unreadCount === 0"> <el-icon><Bell /></el-icon> </el-badge> </template> <script setup> import { ref } from 'vue' const unreadCount = ref(5) </script> ``` ## Best Practices 1. Use `max` to prevent large numbers from overflowing 2. Use `is-dot` for simple status indicators 3. Set `hidden` when count is zero and `show-zero` is false

Frequently asked questions

El Badge