agentmods.dev

vibe-integrate

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

A workflow for connecting the frontend, the user-facing part of an application, with the backend, which processes data and business rules. It checks that their APIs—the agreed ways they exchange requests and responses—match.

In plain words
What is it for?
Use it to prepare both services, verify their network connection, test login and data APIs, check invalid and unauthorized requests, and connect page features to backend data.
Why use it?
It helps find mismatched routes, parameters, response formats, ports, permissions, and error handling before users encounter broken features.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

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

not rated 4repo 2mo ago A scan 20 tokens copy · 98% MIT

Good fit Use it to prepare both services, verify their network connection, test login and data APIs, check invalid and unauthorized requests, and connect page features to backend data.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/xushuodasd/vibe-claude-plugin/vibe-integrate
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-integrate
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-integrate

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

Your own site · 80×15
<a href="https://agentmods.dev/skills/xushuodasd/vibe-claude-plugin/vibe-integrate"><img src="https://agentmods.dev/badge/skills/xushuodasd/vibe-claude-plugin/vibe-integrate.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 20 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,751 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 98% 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.00020 $0.01751
Opus 5 $0.00010 $0.00875
Sonnet 5 $0.00004 $0.00350
Haiku 4.5 $0.00002 $0.00175

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

Security

Grade A, and why

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

98% identical to vibe-api-rules — 233 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-integrate/SKILL.md · 187 lines

How it starts

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

前后端代码对接工作流

1. 文档目的

规范前后端代码对接的流程和标准，确保前后端能够高效、准确地集成，实现完整的应用功能。

2. 工作流结构

一个简洁高效的前后端代码对接工作流应包含：

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

3. 执行要求

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

4. 文档管理

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

最佳实践:

前后端代码对接工作流

工作流程

前置步骤：产物检查

  1. 检查前端代码：

    • 确认前端代码目录结构是否完整
    • 检查前端依赖项是否已安装
    • 确认前端API调用接口是否已定义

  2. 检查后端代码：

    • 确认后端代码目录结构是否完整
    • 检查后端依赖项是否已安装
    • 确认后端API接口是否已实现

  3. 检查API文档：

    • 确认API文档是否存在且完整
    • 检查前后端API接口定义是否一致
    • 确认API调用参数和返回值格式是否明确

第一步：环境准备

  1. 前端环境搭建：

    • 安装前端依赖：npm install 或 yarn install
    • 启动前端开发服务器：npm run dev 或 yarn dev
    • 确认前端服务正常运行

  2. 后端环境搭建：

    • 安装后端依赖：根据后端技术栈执行相应的安装命令
    • 启动后端服务：根据后端技术栈执行相应的启动命令
    • 确认后端服务正常运行

  3. 网络配置：

    • 确认前后端服务运行在正确的端口
    • 配置跨域请求处理（如果需要）
    • 测试网络连接是否正常

第二步：API对接测试

  1. 基础API测试：

    • 测试登录/注册API
    • 测试数据获取API
    • 测试数据提交API

  2. 异常情况测试：

    • 测试参数错误情况
    • 测试权限验证情况
    • 测试网络异常情况

  3. 性能测试：

    • 测试API响应时间
    • 测试并发请求处理
    • 测试大数据量处理

第三步：功能集成

  1. 页面功能集成：

    • 集成登录/注册功能
    • 集成数据展示功能
    • 集成数据提交功能

  2. 状态管理集成：

    • 集成前端状态管理
    • 处理API响应状态
    • 管理用户登录状态

  3. 错误处理集成：

    • 前端错误提示处理
    • 后端错误日志记录
    • 统一错误处理机制

第四步：联调测试

  1. 端到端测试：

    • 测试完整的用户流程
    • 验证数据一致性
    • 确保功能正常运行

  2. 兼容性测试：

    • 测试不同浏览器兼容性
    • 测试不同设备响应式
    • 测试不同网络环境

  3. 安全性测试：

    • 测试API权限控制
    • 测试数据传输加密
    • 测试防止SQL注入等安全问题

第五步：部署准备

  1. 构建优化：

    • 前端代码构建：npm run build 或 yarn build
    • 后端代码优化：根据后端技术栈执行相应的优化操作
    • 测试构建产物是否正常

  2. 部署配置：

    • 配置服务器环境
    • 配置数据库连接
    • 配置环境变量

  3. 部署测试：

    • 测试部署后的服务是否正常
    • 验证所有功能是否可用
    • 监控系统运行状态

执行建议

  1. 明确API接口：在对接前确保前后端API接口定义一致，避免后期频繁修改
  2. 模块化开发：将前后端代码按功能模块划分，便于单独测试和集成
  3. 版本控制：使用Git等版本控制工具，确保代码可追溯和回滚
  4. 自动化测试：编写自动化测试用例，确保代码质量和功能稳定性
  5. 文档同步：及时更新API文档和对接文档，确保团队成员了解最新状态
  6. 持续集成：配置CI/CD流程，实现代码自动构建和部署
  7. 监控告警：设置系统监控和告警机制，及时发现和解决问题
  8. 性能优化：关注API响应时间和系统性能，持续优化代码
  9. 安全防护：加强系统安全防护，防止常见的安全漏洞
  10. 团队协作：保持前后端开发人员的密切沟通，及时解决对接过程中的问题

Read the full file on GitHub · 187 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 · 187 lines · 20 tokens per session scan A 9f11e955b7a2

Subscribe to this mod's changes

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

Backend and APIsClaude CodeFrontendai-agentai-workflowautonomous-codingclaude-plugincoding-agent
Related

Other skills, from other repositories

webapp-building

Build or modify production-oriented web applications by following the repository architecture and validating real user flows.

KunAgent/Kun · 22 tokens

nextjs-fullstack

Use for Next.js App Router, React Server Components, server actions, API routes, auth, database integration, caching, deployment, or full-stack product features.

DominikTobureto/awesome-grok-build · 37 tokens

rails

Rails version: Ruby version: Architecture: Full-stack (Hotwire)|API-only|Hybrid Database: PostgreSQL (ALWAYS for production) Jobs: Sidekiq|Solid Queue|Good Job Real-time: Action Cable|Turbo Streams|None Auth: Devise|hassecurepassword|Rails 8 built-in Assets: Propshaft + Import Maps|esbuild|Vite.

arbazkhan971/godmode · 7 tokens

frontend-to-backend-requirements

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.

softaworks/agent-toolkit · 54 tokens

formio-sdk

Source-derived reference for the Form.io JavaScript SDK (@formio/js), the Utilities (@formio/js/utils), and the @formio/core-only helpers — authored from the Form.io source code. Covers static methods (setBaseUrl, setProjectUrl, setToken, currentUser, logout), instance methods on new Formio(url) (forms, submissions…

formio/ai · 247 tokens

api-and-interface-design

Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.

LLl0k0laD/agent-skills · 41 tokens