New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Upload Component First

by yyw-code in yyw-code/MallBase

MallBase Vben Admin 上传组件与字段契约规则；实现图片、视频或文件上传，以及处理 FileInfo 回填和提交值时使用。

MITAuto-check passed

Install Upload Component First

skills CLI
$ npx skills add yyw-code/MallBase --skill upload-component-first -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install yyw-code/MallBase upload-component-first --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/yyw-code/MallBase.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/skills/vbenAdmin/upload-component-first .claude/skills/upload-component-first && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
upload-component-first
GitHub stars
106
Token cost
~553 tokens
SKILL.md length
86 words
Files
1
Skills in repo
12
Repo updated
First seen
Licence
MIT

At a glance

MallBase Vben Admin 上传组件与字段契约规则；实现图片、视频或文件上传，以及处理 FileInfo 回填和提交值时使用。

  • Works in 8 steps: 优先使用… → UI 状态使用 FileInfo；url 保存可提交值，full_url… → 新素材契约优先提交数值型… → …
  • SKILL.md covers 适用范围, 强制规则, 引入方式 and 用法示例, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Upload Component First is an agent skill from yyw-code/MallBase. MallBase Vben Admin 上传组件与字段契约规则；实现图片、视频或文件上传，以及处理 FileInfo 回填和提交值时使用。

Its SKILL.md is about 550 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It works with Ant Design. The repository describes itself as: MallBase 是一个基于 PHP 的商城型业务基础框架，围绕 用户、商品、订单、权限 四个最核心的商业模块，提供一套清晰、稳定、可扩展的业务结构基线。 它不是一个功能齐全的电商系统，也不是通用 Web 框架，而是一个专注于“商城核心模型”的业务底座，用于快速构建和演进各类商业应用。 The licence is MIT.

Example prompts

  • “/upload-component-first”

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. 优先使用 #/components/upload/index.vue，禁止在业务页面重复实现上传或素材选择逻辑。
  2. UI 状态使用 FileInfo；url 保存可提交值，full_url 仅用于预览，asset_id 保存素材 ID。
  3. 新素材契约优先提交数值型 asset_id；只有真实后端接口明确接受存储路径时，才回退提交 url 字符串。
  4. 后端字段类型是最终依据。商品媒体字段遵循 GoodsApi.MediaValue = number | string，其他模块不得未经核对直接照搬。
  5. full_url、*_full_url 和前端拼接的完整地址不得作为持久化提交值。
  6. 编辑回填使用后端返回的素材值与完整预览地址构造 FileInfo，不在页面硬编码域名。
  7. 多图、排序或关联对象必须保留接口要求的数组/对象结构，不能统一粗暴转换成字符串数组。
  8. 批量编辑若覆盖媒体字段，必须同时处理回填、预览和提交转换。

What it can do on your machine

Read from SKILL.md and the folder at commit 3f10589. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are vue and typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Upload Component First loads about 553 tokens when it runs. Until then it costs about 23 tokens; SKILL.md has 86 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~23
When it runs · the whole SKILL.md, loaded when a task matches
~553

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from yyw-code/MallBase at commit 3f10589, republished under its MIT licence (© yyw-code). 86 words, ~553 tokens.

Download SKILL.mdSave it as .claude/skills/upload-component-first/SKILL.md (or your agent's skills folder).
name
upload-component-first
description
MallBase Vben Admin 上传组件与字段契约规则；实现图片、视频或文件上传，以及处理 FileInfo 回填和提交值时使用。

Vben 规则：上传组件与字段契约

适用范围

frontend/admin/apps/web-antd 中的图片、视频和文件上传交互，以及编辑回填、预览和提交转换。

强制规则

  1. 优先使用 #/components/upload/index.vue，禁止在业务页面重复实现上传或素材选择逻辑。
  2. UI 状态使用 FileInfo；url 保存可提交值，full_url 仅用于预览，asset_id 保存素材 ID。
  3. 新素材契约优先提交数值型 asset_id；只有真实后端接口明确接受存储路径时，才回退提交 url 字符串。
  4. 后端字段类型是最终依据。商品媒体字段遵循 GoodsApi.MediaValue = number | string，其他模块不得未经核对直接照搬。
  5. full_url、*_full_url 和前端拼接的完整地址不得作为持久化提交值。
  6. 编辑回填使用后端返回的素材值与完整预览地址构造 FileInfo，不在页面硬编码域名。
  7. 多图、排序或关联对象必须保留接口要求的数组/对象结构，不能统一粗暴转换成字符串数组。
  8. 批量编辑若覆盖媒体字段，必须同时处理回填、预览和提交转换。

引入方式

vue
import type { FileInfo } from '#/components/upload';
import Upload from '#/components/upload/index.vue';

用法示例

vue
<!-- 单图上传 -->
<Upload v-model:value="formData.image" type="image" module="goods" />

<!-- 多图上传 -->
<Upload v-model:value="formData.images" type="images" module="goods" :max-count="10" />

<!-- 文件上传 -->
<Upload v-model:value="formData.file" type="file" module="setting" />
  • v-model:value 单文件绑定类型通常为 FileInfo | string | undefined
  • v-model:value 多文件绑定类型通常为 FileInfo[]
  • module 指定上传模块（如 "goods"、"user" 等）

契约边界示例

typescript
function toMediaValue(file?: FileInfo | string): number | string {
  if (!file) return '';
  if (typeof file === 'string') {
    return /^\d+$/.test(file) ? Number(file) : file;
  }
  if (file.asset_id) return file.asset_id;
  return /^\d+$/.test(file.url) ? Number(file.url) : file.url;
}

该示例只适用于后端接受 number | string 的媒体字段。提交前仍需核对对应的 backend/route/api/admin/*.php、Controller/Service 校验和前端 API 类型。

禁止

  • ❌ 使用 <a-input> 让用户手动输入图片 URL
  • ❌ 手动实现图片上传逻辑
  • ❌ 把 full_url 提交到只接受素材 ID 或存储路径的字段
  • ❌ 看到 FileInfo.url 就假设它一定是文件路径

参考位置

  • frontend/admin/apps/web-antd/src/components/upload/index.vue
  • frontend/admin/apps/web-antd/src/components/upload/index.ts
  • frontend/admin/apps/web-antd/src/views/goods/goods/composables/useGoodsEdit.ts
  • frontend/admin/apps/web-antd/src/api/goods/goods.ts

自检清单

  • 上传逻辑未重复造轮子。
  • 回填对象包含可靠的提交值、预览地址和文件名。
  • 素材 ID、兼容路径、单图/多图结构与真实后端契约一致。
  • 提交数据不包含 full_url，保存后二次进入仍能稳定回显。

© yyw-code, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .codex/skills/vbenAdmin/upload-component-first of yyw-code/MallBase.

Open the folder on GitHubat commit 3f10589

Compare with similar skills

Upload Component First next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Upload Component First compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Upload Component First this skillyyw-code/MallBase106—~553Automated safety check: PassMIT
LobeHub Interactive Prototypelobehub/lobehub83k—~1.6kAutomated safety check: PassCustom licence
Version ReleaseNG-ZORRO/ng-zorro-antd9.2k—~3.1kAutomated safety check: PassMIT
Ant Design Mobile Releaseant-design/ant-design-mobile12k—~497Automated safety check: PassMIT
Building With Lobe UIlobehub/lobe-ui2.2k—~2kAutomated safety check: PassMIT
Feature SyncNG-ZORRO/ng-zorro-antd9.2k—~840Automated safety check: PassMIT

Similar skills

  • LobeHub Interactive Prototype

    lobehub/lobehub

    Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Version Release

    NG-ZORRO/ng-zorro-antd

    NG-ZORRO/ng-zorro-antd repository release workflow. An agent skill from NG-ZORRO/ng-zorro-antd.

    9.2k GitHub stars~3.1k tokensUpdated 8 days ago
    DevelopmentAuto-check passed

  • Ant Design Mobile Release

    ant-design/ant-design-mobile

    Prepares an npm release of ant-design-mobile up to the version commit, then tags and publishes the GitHub Release after you run the publish command yourself.

    12k GitHub stars~497 tokensUpdated 23 days ago
    DevelopmentAuto-check passed

  • Building With Lobe UI

    lobehub/lobe-ui

    Build UI with the LobeHub design ecosystem — @lobehub/ui (plus its base-ui, chat, mobile, awesome, brand, mdx, i18n namespaces), @lobehub/icons, @lobehub/charts, @lobehub/fluent-emoji and…

    2.2k GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Feature Sync

    NG-ZORRO/ng-zorro-antd

    Sync an Ant Design React component or feature into NG-ZORRO.

    9.2k GitHub stars~840 tokensUpdated 8 days ago
    Frontend & DesignAuto-check passed

  • Ant Design Vue UI

    lazzyfu/goInsight

    Build, refactor, or review production-grade admin interfaces with Vue 3 + JavaScript + Ant Design Vue 4.x.

    730 GitHub stars~2k tokensUpdated 6 mo ago
    DatabasesAuto-check passed

More from yyw-code/MallBase

All 12 skills in this repo

  • Payment Notify Idempotency

    yyw-code/MallBase

    MallBase 支付与退款回调安全规则；修改 backend/route/notify.php、PayNotifyController、NotifyService、WechatPaymentResultService、mbpaymentlog，或处理微信/其它渠道 webhook 的验签、解密、防重放、金额校验、幂等、事务与 HTTP 应答时使用。

    106 GitHub stars~495 tokensUpdated 2 mo ago
    Auto-check passed

  • Route Permission System

    yyw-code/MallBase

    MallBase ThinkPHP 后台路由与权限元数据规则；新增或调整 backend/route/api/admin 路由、System 权限码、菜单元数据、/:id 路径参数、共享 permission 或 sync:permissions 同步时使用。

    106 GitHub stars~499 tokensUpdated 2 mo ago
    Auto-check passed

  • Architecture Layering

    yyw-code/MallBase

    MallBase ThinkPHP 后端分层、Swoole Service 无状态与 IDE 泛型规则；开发或重构 backend/app 下的 Controller、Service、Model，调整 BaseController/BaseService、service()/model() 调用、构造注入或协程安全状态时使用。

    106 GitHub stars~391 tokensUpdated 2 mo ago
    Auto-check passed

  • E2E Webantd Realapi

    yyw-code/MallBase

    MallBase Vben Admin 局部格式化与真实后端 E2E 收口规则；修改、测试或回归 web-antd 代码时使用。

    106 GitHub stars~308 tokensUpdated 2 mo ago
    Auto-check passed

  • List Query Sync

    yyw-code/MallBase

    MallBase ThinkPHP 列表查询与分页返回规则；实现或调整 Service 的 buildListQuery、分页 list/total、动态筛选、关联查询、统计、导出或 compact('total', 'list') 返回时使用。

    106 GitHub stars~395 tokensUpdated 2 mo ago
    Auto-check passed

  • Thinkphp

    yyw-code/MallBase

    MallBase ThinkPHP 后端规则导航；仅在后端任务涉及多个场景、需要查找项目规则，或无法确定应读取哪个更具体的 ThinkPHP skill 时使用。

    106 GitHub stars~185 tokensUpdated 2 mo ago
    Auto-check passed

Works with

Questions about Upload Component First

What does Upload Component First do?

MallBase Vben Admin 上传组件与字段契约规则；实现图片、视频或文件上传，以及处理 FileInfo 回填和提交值时使用。. Upload Component First is an agent skill from yyw-code/MallBase.

How do I install Upload Component First in Claude Code?

Run `npx skills add yyw-code/MallBase --skill upload-component-first -a claude-code`. Or copy the skill folder (.codex/skills/vbenAdmin/upload-component-first in yyw-code/MallBase) into .claude/skills/upload-component-first in your project. Claude Code loads it when a task matches its description.

How do I install Upload Component First in Codex?

Run `npx skills add yyw-code/MallBase --skill upload-component-first -a codex`. Or copy the skill folder (.codex/skills/vbenAdmin/upload-component-first in yyw-code/MallBase) into .agents/skills/upload-component-first in your project. Codex loads it when a task matches its description.

Can I use Upload Component First in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add yyw-code/MallBase --skill upload-component-first -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/upload-component-first, .gemini/skills/upload-component-first, .github/skills/upload-component-first and .opencode/skills/upload-component-first in your project.

What does Upload Component First need to run?

SKILL.md names no scripts, command-line tools or credentials: Upload Component First is instructions for the agent only.

Does Upload Component First access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Upload Component First safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Upload Component First use?

Upload Component First is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Upload Component First use?

About 553 tokens (SKILL.md is roughly 2.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Upload Component First?

Skills that share tags, products or a category with Upload Component First: LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Version Release (NG-ZORRO/ng-zorro-antd, 9.2k stars), Ant Design Mobile Release (ant-design/ant-design-mobile, 12k stars) and Building With Lobe UI (lobehub/lobe-ui, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Upload Component First?

yyw-code (a GitHub user) maintains it in yyw-code/MallBase, which has 106 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on August 3, 2026.

Source: yyw-code/MallBase on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.