agentmods.dev

vibe-frontend

vibe-frontend is a skill for Claude Code from xushuodasd/VIBE-Claude-Plugin. It costs 21 tokens per session (1,811 once invoked), scanned A, a copy of vibe-api-rules, MIT.

A structured workflow for building the frontend, the part of an application users see and interact with. It organizes preparation, task breakdown, implementation, documentation, and completion checks.

In plain words
What is it for?
Use it to inspect project documents, prepare the frontend directory and dependencies, split work into small modules, follow API definitions, and record the resulting work.
Why use it?
It reduces confusion about what frontend work belongs in the current stage and helps keep the user interface aligned with the project's API rules and plans.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin. Also seen: mentions subagents.

Part of the vibe-claude-plugin plugin — 25 skills, 1 command shipped together

not rated 4repo 2mo ago A scan 21 tokens copy · 95% MIT

Good fit Use it to inspect project documents, prepare the frontend directory and dependencies, split work into small modules, follow API definitions, and record the resulting work.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/xushuodasd/vibe-claude-plugin/vibe-frontend
View source ↗ xushuodasd/VIBE-Claude-Plugin
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 xushuodasd/VIBE-Claude-Plugin --skill vibe-frontend
Clone the repo
git clone --depth 1 https://github.com/xushuodasd/VIBE-Claude-Plugin

Made for: Claude Code.

Or install vibe-claude-plugin, the plugin that ships this one along with the rest of its 25 skills, 1 command.

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 vibe-frontend

README.md
[![agentmods](https://agentmods.dev/badge/skills/xushuodasd/vibe-claude-plugin/vibe-frontend/github.svg)](https://agentmods.dev/skills/xushuodasd/vibe-claude-plugin/vibe-frontend)
Your own site
<a href="https://agentmods.dev/skills/xushuodasd/vibe-claude-plugin/vibe-frontend"><img src="https://agentmods.dev/badge/skills/xushuodasd/vibe-claude-plugin/vibe-frontend/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 vibe-frontend

Your own site · 80×15
<a href="https://agentmods.dev/skills/xushuodasd/vibe-claude-plugin/vibe-frontend"><img src="https://agentmods.dev/badge/skills/xushuodasd/vibe-claude-plugin/vibe-frontend.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 21 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,811 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.
Origin 95% copy Near-identical to another mod 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.00021 $0.01811
Opus 5 $0.00010 $0.00905
Sonnet 5 $0.00004 $0.00362
Haiku 4.5 $0.00002 $0.00181

Measured 11d ago against content hash 68c5ecf57c7f, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

vibe-frontend 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 11d 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.

Origin

This is a copy

95% identical to vibe-api-rules — 205 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

skills/vibe-frontend/SKILL.md · 151 lines

How it starts

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

前端开发工作流

0. 身份强制声明 (Persona Injection)

【警告】当你进入此工作流时，你不再是一个拥有全局视角的架构师或总监！ 你现在的身份是：高级前端组件工程师。 你的唯一职责是：只关注你当前被分配的这个最小前端模块。不要去操心后端的数据库怎么存，不要去修改项目的基础架构。你的视野必须被物理隔离在当前的 DOM、CSS 和前端逻辑中。严格按照 API 契约和输入参数干活，做到极致的高内聚！

1. 文档目的

规范前端开发流程，确保前端开发工作有序、高效进行，保证代码质量和项目进度。

2. 工作流结构

一个完整的前端开发工作流应包含：

  • 基本信息：名称、目标
  • 前置步骤：产物检查、依赖项确认
  • 执行步骤：详细的执行流程和顺序
  • 执行建议：专业建议和注意事项
  • 成功标准：任务完成的判定条件
  • 失败处理：异常情况的应对措施
  • 输出成果：明确的交付物和保存位置

3. 执行要求

  • 严格按照步骤执行
  • 与用户保持深度沟通
  • 记录关键信息和结果
  • 遇到异常时按失败处理机制执行
  • 确保输出成果符合用户预期

4. 文档管理

  • 执行后根据实际情况更新文档
  • 进行版本管理，确保使用最新版本

5. 工作流程

前置步骤：准备工作

  1. 检查项目阶段：

    • 查看./.vibe/stage.md文件，确认当前项目开发阶段
    • 如果阶段未设定，提示用户先执行项目阶段开发计划工作流

  2. 检查API设计规范：

    • 确认./.vibe/workflows/api-rules.md文件是否存在
    • 读取API设计规范文档，了解API调用要求

  3. 检查前端目录：

    • 确认./frontend目录是否存在
    • 如果不存在，创建基础前端项目结构

  4. 检查依赖项：

    • 确认前端项目的依赖项是否已安装
    • 如果未安装，执行依赖安装命令

第一步：阶段任务分析

  1. 读取开发计划：

    • 查看./项目文档/开发计划/前端开发文档（前端开发计划）.md文件
    • 了解当前阶段的前端开发任务和要求

  2. 严格读取API接口文档：

    • 提取出所有的入参、出参、路由、方法。
    • 确保后续代码与接口契约 100% 对齐。无接口文档不得进行数据交互开发。

  3. 任务分解：

    • 将当前阶段的开发任务分解为具体的功能模块
    • 确定每个模块的开发优先级和时间估算

第二步：子智能体分发与最小模块开发 (Subagent Delegation)

  1. 功能模块分解与企业级分层：

    • 将当前阶段的开发任务分解为最小功能模块（例如：单个按钮、单一表单、单独的自定义 Hook）。
    • 严格遵循企业级规范：Pages/Views(页面层) -> Components(组件层) -> Hooks(逻辑层) -> API Clients(接口请求层)。

  2. 子智能体开发 (Subagent Coding)：

    • 鉴于 AI 上下文有限，对于分解出的每一个小模块，应当隔离上下文，作为一个独立的小任务进行编写。
    • 编码规范：接口化编程（定义 TypeScript Interface/Types），高内聚低耦合。
    • 严格按照 API 文档实现网络请求，处理加载状态与异常错误。

  3. 代码组装与页面拼装：

    • 将各个小组件和逻辑 Hook 组装起来，形成完整的页面。
    • 检查代码逻辑是否清晰流畅。

第三步：集成测试

  1. 模块集成：

    • 将所有开发完成的模块集成到一起
    • 确保模块间的交互正常

  2. 整体测试：

    • 进行端到端测试
    • 验证整个前端应用的功能和性能

  3. API调用检查：

    • 全面检查所有API调用是否符合规范
    • 确保API调用的安全性和可靠性

第四步：文档编写

  1. 前端开发手册：

    • 在./frontend/doc目录下创建前端开发手册
    • 记录开发过程、技术选型、API调用方式等
    • 编写模块使用说明和维护指南

  2. API问题报告：

    • 如果发现缺少需要的API，编写API问题报告
    • 详细描述API需求和使用场景

6. 执行建议

  1. 阶段聚焦：只完成当前阶段的开发任务，避免过度开发
  2. 模块化优先：坚持最小功能模块化原则，确保每个模块独立可测试
  3. API规范：严格按照API设计规范进行开发，确保接口调用正确
  4. 代码质量：注重代码的可读性、可维护性和性能
  5. 测试驱动：采用测试驱动开发方法，确保功能的正确性
  6. 沟通协作：与后端开发人员保持密切沟通，确保前后端接口对接顺畅
  7. 文档同步：及时更新前端开发手册，确保文档与代码同步

Read the full file on GitHub · 151 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. 11d ago First seen · 151 lines · 21 tokens per session scan A 68c5ecf57c7f

Subscribe to this mod's changes

vibe-frontend is a skill published in the GitHub repository xushuodasd/VIBE-Claude-Plugin (4 stars, last pushed 2mo ago), licensed MIT. It adds 21 tokens to every session and 1,811 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. It is 95% identical to vibe-api-rules, differing in 205 lines, and is treated as a copy.

Claude CodeFrontendai-agentai-workflowautonomous-codingclaude-plugincoding-agent
Related

Other skills, from other repositories

react-doctor

Catch bad React in your changes — run react-doctor's deterministic scan and fix what it flags.

New1Direction/korgex · 23 tokens

accessibility

Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards. Use this skill to generate semantic ARIA for Web and accessibility traits for Web and Native platforms (iOS/Android).

New1Direction/korgex · 47 tokens

coding-standards

Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.

shahidshabbir-se/my-pi-setup · 28 tokens

frontend-ui-ux

Designer-turned-developer expertise for crafting stunning UI/UX even without design mockups.

shahidshabbir-se/my-pi-setup · 22 tokens

frontend-patterns

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

shahidshabbir-se/my-pi-setup · 24 tokens

accessibility-a11y

Implement web accessibility (a11y) best practices following WCAG guidelines to create inclusive, accessible user interfaces.

shahidshabbir-se/my-pi-setup · 28 tokens