giime-components

Original：🇨🇳 Chinese

Translated

【Must Read · Mandatory】Mandatory usage specification for Giime component library. You must read this skill before writing or modifying any frontend code involving UI components. It covers enhanced features of gm-* components, usage of plugins such as GmConfirmBox/GmMessage/GmCopy, common code patterns, and how to obtain MCP documents.

3installs

Sourcegiikin/skills

Added on2026-03-03

NPX Install

npx skill4agent add giikin/skills giime-components

SKILL.md Content (Chinese)

View Translation Comparison →

Giime Component Library Usage Specification

Giime is an internal component library extended and enhanced based on Element Plus. All

el-

components have corresponding

gm-

versions. Unlisted

gm-*

components have the same behavior as

el-*

components and can be directly replaced for use.

Usage Principles

Prioritize Giime:
```
el-button
```
→
```
gm-button
```
,
```
el-table
```
→
```
gm-table
```
, and so on. Giime unifies default behaviors on the basis of Element Plus (such as automatic loading, default filterable), which can reduce repeated configuration when used directly.
Special Requirements: You can use native Element Plus components when Giime cannot meet your needs.
Legacy Code Compatibility: Keep old code as it is, and write new code in accordance with this specification.
Use
GmConfirmBox
for secondary confirmation: Use
```
GmConfirmBox
```
for dangerous operations such as deletion, which automatically handles the loading and disabled state of the confirmation button to avoid duplicate submissions.
Use
GmCopy
for copy functions:
```
GmCopy
```
automatically handles clipboard API compatibility and prompts success/failure, no need to write try-catch manually.
Use
GmMessage
for message prompts:
```
GmMessage
```
merges identical messages by default (
```
grouping: true
```
), which avoids a large number of repeated prompts popping up in a short time, and provides a better experience than
```
ElMessage
```
.

Core Enhancement Features (gm-* vs el-*)

The following components have enhanced behaviors compared to Element Plus, you need to understand the differences when using them:

Component	Enhancement Content
`gm-button`	Automatically handles loading for async `@click` ; automatically sets type='info' when disabled; automatic Clarity event tracking
`gm-select`	Default `filterable: true` ; recommended to use `:options` to pass in options
`gm-cascader`	Default `filterable: true`
`gm-table`	Added `tableId` attribute (injects TableCtx); default `scrollbarAlwaysOn: true`
`gm-upload`	Supports `v-model:fileList` two-way binding
`gm-image`	Added download progress, default toolbar (zoom/rotate/download), `download()` method
`gm-image-viewer`	Same as `gm-image` , added download progress and default toolbar
`gm-popover`	Added `before-enter` / `before-leave` / `after-enter` / `after-leave` events
`GmMessage`	Default `grouping: true` (merge identical messages); supports global `plain` configuration
`GmMessageBox`	Alert disables Esc and mask closing by default; confirm/prompt shows cancel button by default
`GmConfirmBox`	Secondary confirmation pop-up, automatically handles confirmation button loading and disabled state
`GmCopy`	Copy to clipboard, automatically prompts success/failure

Note:
gm-select-v2
does not enable
filterable
by default, which is different from
gm-select
.

Common Code Patterns

Secondary Confirmation for Deletion

ts

const handleDelete = () => {
  GmConfirmBox({ message: '是否确认删除？' }, async () => {
    await deleteItem();
    GmMessage.success('删除成功');
  });
};

Async Button (Automatic Loading)

Just bind an async function, no need to manually manage the loading state. When the button only executes

emit

and does not return a Promise, automatic loading will not be triggered:

vue

<gm-button @click="handleSubmit">提交</gm-button>

ts

const handleSubmit = async () => {
  await submitForm();
  GmMessage.success('提交成功');
};

Selector (:options Syntax)

vue

<gm-select v-model="form.status" clearable :options="statusOptions" />

Copy to Clipboard

ts

GmCopy(text);

Get Detailed Documentation

When using specific components, Hooks or utility functions, get detailed usage through the

giime-docs

MCP:

Call
```
get-giime-docs-sidebar
```
to get the complete directory (including links to all components/Hooks/utility functions)
Call
```
get-giime-component-doc({ link })
```
to get the corresponding Markdown documentation

If the

giime-docs

MCP is not configured, refer to mcp-setup.md for installation.