vue-table-skill

vue-table-skill is a skill for Claude Code, Codex from jiushiwon/wg-skills. It costs 129 tokens per session (2,537 once invoked), scanned A, original, Apache-2.0.

A reusable Vue 3 and TypeScript table component guide with display and interaction options such as sorting, filtering, selection, pagination, loading states, empty states, and tree-shaped data.

In plain words
What is it for?
Use it for data tables, reports, inventory lists, logs, monitoring screens, bulk selection, sortable or filterable lists, paged results, and hierarchical data.
Why use it?
It collects common table behavior in one component instead of requiring each data list to implement it separately. This reduces repeated table code for business interfaces.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it for data tables, reports, inventory lists, logs, monitoring screens, bulk selection, sortable or filterable lists, paged results, and hierarchical data.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/jiushiwon/wg-skills/vue-table-skill
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add jiushiwon/wg-skills --skill vue-table-skill
Clone the repo
git clone --depth 1 https://github.com/jiushiwon/wg-skills

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for vue-table-skill

README.md
[![agentmods](https://agentmods.dev/badge/skills/jiushiwon/wg-skills/vue-table-skill/github.svg)](https://agentmods.dev/skills/jiushiwon/wg-skills/vue-table-skill)
Your own site
<a href="https://agentmods.dev/skills/jiushiwon/wg-skills/vue-table-skill"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/vue-table-skill/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for vue-table-skill

Your own site · 80×15
<a href="https://agentmods.dev/skills/jiushiwon/wg-skills/vue-table-skill"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/vue-table-skill.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 129 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,537 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00129 $0.02537
Opus 5 $0.00064 $0.01269
Sonnet 5 $0.00026 $0.00507
Haiku 4.5 $0.00013 $0.00254

Measured 6d ago against content hash 15b7d48878da, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

vue-table-skill scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.

The scan reads SKILL.md. This mod also ships 3 executable files (demo-components/base-table/html/demo.js, demo-components/base-table/html/loading.js, demo-components/base-table/html/paginated.js), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

vibeCoding/frontend/vue/vue-base-skill/vue-table-skill/SKILL.md · 279 lines

How it starts

The opening of the file, as written. The whole thing — 279 lines — stays where its author put it; the contents beside it link to each section on GitHub.

vue-table-skill 表格技能

🎯 定位

Vue3 + TypeScript 泛型表格组件,支持 23 种形态,包含 3 个独立组件:

  • base-table - 通用表格组件(23 种形态)
  • base-loading - 加载中组件(7 种动画 / 5 种尺寸 / 5 种主题)
  • base-paginated - 分页组件(5 种模式 / 3 种尺寸 / 3 种形状)

核心约束

  • ✅ 零 HTML5 标签(<button> <input> <select> <table> 全部禁用)
  • ✅ 全部用 <div> <span> + CSS3 实现
  • ✅ 强依赖 <base-button> <base-status> <base-card>
  • ✅ 全部使用 var(--*) Token

📦 组件清单

1. base-table 通用表格(23 种形态)

# 形态 说明 参数
1 基础表格 默认形态 -
2 固定列 左/右固定列 fixed: 'left'|'right'
3 操作列 编辑/删除/自定义 actions
4 可选择行 自定义复选框 selectable
5 可排序 表头排序 sortable
6 可筛选 列筛选 filterable
7 可展开行 详情展开 expandable
8 表头分组 多级表头 children
9 合并单元格 行列合并 spanMethod
10 行编辑 单元格编辑 editable
11 树形数据 树形结构 treeData
12 虚拟滚动 大数据量 virtual
13 拖拽排序 拖拽调整 dragSort
14 可调整列宽 拖拽列宽 resizable
15 汇总行 底部汇总 showSummary
16 斑马纹 隔行变色 striped
17 边框 带边框 bordered
18 悬停高亮 鼠标悬停 hover
19 紧凑模式 减少内边距 compact
20 固定表头 表头固定 height
21 加载中 加载状态 loading
22 空状态 无数据 emptyText
23 分页表格 内置分页 pagination

文档base-table.md

2. base-loading 加载中(7 种动画)

动画 说明
dots 三点弹跳(默认)
bar 条状横扫
ring 圆环旋转
pulse 脉冲扩散
wave 波浪起伏
cube 方块翻转(3D)
ripple 涟漪扩散

类型 / 5 种:container / fullscreen / section / inline / overlay 尺寸 / 5 种:xs / sm / md / lg / xl 主题 / 5 种:primary / success / warning / danger / info

文档base-loading.md

3. base-paginated 分页(5 种模式)

模式 说明 适用场景
classic 经典分页(数字按钮 + 上下页) 桌面端默认
button 按钮组(首末页 + 上下页) 卡片风格
dropdown 下拉页码 页数多时
simple 简洁模式 移动端
scroll 滚动加载 无限滚动

尺寸 / 3 种:sm / md / lg 形状 / 3 种:round / square / circle 主题 / 5 种:primary / success / warning / danger / info 位置 / 3 种:left / center / right

Read the full file on GitHub · 279 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 6d ago Changed · +139 lines · +54 tokens per session 15b7d48878da
  2. 9d ago First seen · 140 lines · 75 tokens per session scan A 027528c48e10

Subscribe to this mod's changes

vue-table-skill is a skill published in the GitHub repository jiushiwon/wg-skills (100 stars, last pushed 2d ago), licensed Apache-2.0. It adds 129 tokens to every session and 2,537 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

shadcn-svelte

Pre-built shadcn-svelte components for json-render Svelte apps. Use when working with @json-render/shadcn-svelte, adding standard UI components to a Svelte catalog, or building Svelte web UIs with shadcn-svelte + Tailwind CSS components.

vercel-labs/json-render · 63 tokens

create-site

Creates a new Power Pages code site (SPA) using React, Angular, Vue, or Astro. Guides through the full process from initial concept to deployed site: requirements discovery, scaffolding, component planning, design, implementation, validation, and deployment. Use when the user wants to create, build, or scaffold a new…

microsoft/power-platform-skills · 73 tokens

v3-create-crud

A page generator for standard create, read, update, and delete screens, commonly called CRUD screens. It uses Element Plus, a Vue user-interface library, to build tables, searches, pagination, forms, and delete confirmations.

un-pany/v3-admin-vite · 108 tokens

v3-use-composables

Documentation for reusable Vue functions in a project, covering device detection, asynchronous dropdown data, loading screens, pagination, routing, themes, page titles, and watermarks.

un-pany/v3-admin-vite · 137 tokens

moai-domain-uiux

UI/UX design systems specialist covering accessibility, icons, theming, design tokens, and user experience patterns. Use when working on design systems, WCAG compliance, ARIA patterns, or dark mode theming.

modu-ai/moai-adk · 49 tokens

moai-domain-frontend

Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.

modu-ai/moai-adk · 54 tokens