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.
npx agentmods add skills/icheer/skills/frontend-prototype-buildernpx skills add icheer/skills --skill frontend-prototype-buildergit clone --depth 1 https://github.com/icheer/skillsWrote 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.
[](https://agentmods.dev/skills/icheer/skills/frontend-prototype-builder)<a href="https://agentmods.dev/skills/icheer/skills/frontend-prototype-builder"><img src="https://agentmods.dev/badge/skills/icheer/skills/frontend-prototype-builder.svg" alt="Measured on agentmods" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00146 | $0.01894 |
| Opus 5 | $0.00073 | $0.00947 |
| Sonnet 5 | $0.00029 | $0.00379 |
| Haiku 4.5 | $0.00015 | $0.00189 |
Grade A, and why
frontend-prototype-builder 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 3d ago.
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.
How it starts
The opening of the file, as written. The whole thing — 173 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Interactive Prototype Builder
You are a production-grade Vue 3 frontend engineer. Your job is to take a finalized product spec and build an interactive, visually polished prototype — something stakeholders can click through and experience. The demo is not the final product, but it is presented to decision-makers, so it must look intentional and feel polished.
Tech Stack Summary
Mandatory: Vue 3 (Options API only) + TDesign component library.
- Desktop →
tdesign-vue-next/ Mobile →tdesign-mobile-vue - Full projects use LESS for styling; single HTML files use plain CSS
- TypeScript allowed sparingly (interfaces, simple types only)
- Forbidden: Composition API,
<script setup>, Tailwind, SCSS, React, CSS-in-JS, heavy animation libs
Before implementing any TDesign component, check if the tdesign-mcp-server tool is
available in the environment. If it is, query component API docs and DOM structures
through it to avoid guessing prop names and slots. If unavailable, reference the docs:
- Desktop: https://tdesign.tencent.com/vue-next/overview
- Mobile: https://tdesign.tencent.com/mobile-vue/overview
For the full tech stack rules, prohibitions table, and design guidelines, read references/tech-stack.md.
Workflow
Step 1 — Confirm Demo Scope
Path A — Entering from Phase 2 (a 【Phase 2 Complete】 package exists):
- Load the Spec file from the path in the package.
- Use the
Recommended demo scopefield as the default suggestion. - Present it to the user and confirm: which scenario to demo?
Path B — Direct entry (no upstream context):
- Ask the user to provide a Spec document or describe the feature and core user flow.
Always ask, never assume. Do NOT attempt to demo every feature in the Spec. Pick one core scenario and make it fully interactive, because a half-baked full demo is worse than a polished slice.
Edge cases:
| Situation | Action |
|---|---|
| User changes scenario mid-implementation | Stop. Return to Step 1, re-confirm, restart from Step 2. |
| Spec says "Cross-platform", user wants both | Recommend two separate entry points. Ask which to build first. |
| User insists on both platforms simultaneously | Build two App.vue entry points with separate TDesign imports. Confirm before proceeding. |
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 3d ago First seen · 173 lines · 146 tokens per session scan A 5a98b61f8c7d
frontend-prototype-builder is a skill published in the GitHub repository icheer/skills (5 stars, last pushed 13d ago), licensed MIT. It adds 146 tokens to every session and 1,894 once invoked, about $0.0007 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-08-31.
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.
v3-create-crud
创建增删改查（CRUD）页面，基于 Element Plus 组件库，包含表格、搜索、分页、新增/编辑弹窗、删除确认等功能。当用户提到以下任何场景时都应触发：创建管理页面、创建列表页、创建表格页。即使用户没有明确说 CRUD，只要意图是创建带表格和表单操作的后台页面就应该使用此 Skill。使用时需提供模块名称和字段信息。.
create-component
End-to-end SEED component implementation guide for React Web, Lynx, and cross-platform work. Use when adding or changing components across rootage, qvism, react/lynx packages, registry snippets, docs, examples, or when writing/refactoring docs/stories Storybook files. Story-only work follows a CSF Next fast path…
seed-design
SEED Design 통합 가이드. 공통 컴포넌트 스펙과 파운데이션을 공식 문서에서 찾고, React·Lynx 프로젝트의 구현·설치·CLI·마이그레이션을 대상 플랫폼에 맞게 안내하며, 지원되는 플랫폼의 사용 상태를 Doctor로 진단한다. SEED Design 관련 질문, 컴포넌트 사용법, 색상·타이포·스페이싱, 셋업, 스니펫, 업그레이드, "잘 쓰고 있나?", "뭘 고쳐야 하나?" 같은 요청이면 이 스킬을 사용한다.
v3-use-composables
项目内置组合式函数使用教程，涵盖设备检测、异步下拉、全屏加载、分页、路由监听、主题切换、动态标题、水印等组合式函数。当用户提到以下任何场景时都应触发：使用组合式函数、调用 Composables、判断设备类型、异步加载下拉选项、全屏 Loading、分页逻辑、监听路由变化、切换主题、设置页面标题、添加水印。即使用户没有明确说 Composables，只要意图是使用项目内置的组合式函数就应该使用此 Skill。.
markstream-nuxt
Integrate markstream-vue into a Nuxt 3 or Nuxt 4 app. Use when Codex needs client-only boundaries, SSR-safe setup, browser-only peer gating, worker-aware initialization, renderer mode selection, or a safe MarkdownRender integration inside pages, components, or Nuxt plugins.