frontend-request-skill

frontend-request-skill is a skill for Claude Code, Codex from jiushiwon/wg-skills. It costs 66 tokens per session (4,326 once invoked), scanned A, original, Apache-2.0.

A design guide for the request layer of a frontend application, meaning the code that sends requests to a backend service and handles its responses. It covers web projects as well as uni-app projects for mobile apps, mini-programs, and web pages.

In plain words
What is it for?
Use it to design request wrappers, response and authentication interceptors, token-refresh queues, mock responses, request deduplication, file uploads, error messages, and Server-Sent Events for streaming updates such as AI chat replies.
Why use it?
It prevents every page from implementing authentication, errors, retries, duplicate-request prevention, and loading behavior differently. A shared request layer makes these network rules easier to maintain.

Skill for Claude CodeCodex

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

Good fit Use it to design request wrappers, response and authentication interceptors, token-refresh queues, mock responses, request deduplication, file uploads, error messages, and Server-Sent Events for streaming updates such as AI chat replies.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/jiushiwon/wg-skills/frontend-request-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 frontend-request-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 frontend-request-skill

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

Your own site · 80×15
<a href="https://agentmods.dev/skills/jiushiwon/wg-skills/frontend-request-skill"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/frontend-request-skill.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 66 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,326 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 warn 7 Sept 2026
SkillSpector: 2 findings, up to medium

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

  • medium Tool Misuse · line 72
    Tool defaults are unsafe or overly permissive (e.g. disabled TLS verification, no authentication, world-writable permissions). Unsafe defaults widen the attack surface.
    Fix: Override unsafe defaults with secure settings (verify=True, auth required, restrictive permissions). Review and harden all tool configurations.
  • medium Tool Misuse · line 180
    Tool defaults are unsafe or overly permissive (e.g. disabled TLS verification, no authentication, world-writable permissions). Unsafe defaults widen the attack surface.
    Fix: Override unsafe defaults with secure settings (verify=True, auth required, restrictive permissions). Review and harden all tool configurations.
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.00066 $0.04326
Opus 5 $0.00033 $0.02163
Sonnet 5 $0.00013 $0.00865
Haiku 4.5 $0.00007 $0.00433

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

Security

Grade A, and why

frontend-request-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 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.

vibeCoding/frontend/frontend-request-skill/SKILL.md · 347 lines

How it starts

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

前端请求层设计 Skill

定位

只聚焦前端请求层设计:从 request.ts 出发,建立统一、健壮、可维护的请求体系。

本 skill 提供两层规范

  1. 通用前端规范:面向 Web/H5/React/Vue 等标准前端项目,基于 fetch / axios 实现。
  2. uniapp 适配规范:面向 uni-app 小程序/APP/H5 跨端项目,基于 uni.request 实现。

二者核心思想完全一致(统一入口、响应信封、鉴权拦截、错误码映射、Token 刷新队列、SSE、上传),仅底层网络 API 不同。

本 skill 只处理请求相关逻辑,不依赖其他 skill。

解决的问题

痛点 后果 本技能方案
每个页面各自调原生请求 鉴权/错误处理重复 统一 request.ts
Token 过期无感知 用户操作失败 响应拦截器识别 401,统一交给 auth service 处理
重复点击导致重复请求 数据异常/资源浪费 防抖去重
后端接口未 ready 前端阻塞 Mock 机制
游客误触敏感接口 报错/白屏 请求层前置拦截
错误提示不统一 用户体验差 统一错误通知
SSE/流式接口不知如何接入 聊天/AI 回复无法流式展示 跨端 SSE 封装 + 打字机效果
Token 过期后并发请求全部失败 用户重复登录、数据丢失 Token 刷新队列 + 失败请求自动重试

When to Use

  • "请求封装"
  • "request.ts 怎么写"
  • "前端请求统一处理"
  • "uniapp 请求统一处理"
  • "接口拦截"
  • "Token 刷新"(请求层衔接部分,详见 references/auth-patterns.md
  • "游客模式拦截"
  • "Mock 数据配置"
  • "接口防抖"
  • "错误处理"
  • "文件上传"
  • "SSE 流式请求"
  • "打字机效果"
  • "Server-Sent Events"
  • "AI 聊天流式回复"

When NOT to Use

  • 需要完整登录鉴权/权限设计 → 本 skill 只提供请求层衔接,完整鉴权体系需单独设计
  • 需要项目整体规范化/目录结构诊断 → 不在本 skill 范围内
  • 需要跨平台兼容性审计 → 不在本 skill 范围内

两层规范速查

规范 适用场景 底层 API 参考位置
通用前端规范 Web / H5 / React / Vue 等 fetch / axios references/frontend-spec.md
uniapp 适配规范 微信小程序 / App / H5 uni.request / uni.uploadFile references/uniapp-spec.md

二者仅在「底层网络 API」和「Token 存储方式」上有差异;响应信封、错误码、鉴权拦截、去重、Mock、SSE 解析逻辑完全一致。

Quick Reference

能力 关键选项 参考位置
统一请求 request<T>(options) references/frontend-spec.mdreferences/uniapp-spec.md
Token 注入 needAuthauthMode references/auth-patterns.md
401/403 处理 skipAuthHandler references/auth-patterns.md
防抖去重 skipDebounce references/request-impl.md
Mock 数据 USE_MOCK references/mock-guide.md
错误提示 showErrorToast references/error-handling.md
文件上传 upload<T>(options) references/error-handling.md
SSE 流式请求 sse<T>(options, onMessage) references/sse-guide.md
Token 自动刷新 auth.service.ts 队列 references/auth-patterns.md

Read the full file on GitHub · 347 lines

Files

What ships with it

8 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.

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 · 347 lines · 66 tokens per session scan A fede8a5888f5

Subscribe to this mod's changes

frontend-request-skill is a skill published in the GitHub repository jiushiwon/wg-skills (99 stars, last pushed today), licensed Apache-2.0. It adds 66 tokens to every session and 4,326 once invoked, about $0.0003 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-30.

Related

Other skills, from other repositories

copilotkit-upgrade

Use when migrating a CopilotKit v1 application to v2 -- updating package imports, replacing deprecated hooks and components, switching from GraphQL runtime to AG-UI protocol runtime, and resolving breaking API changes.

CopilotKit/CopilotKit · 48 tokens

nextjs-pages-router

Set up tRPC in Next.js Pages Router with createNextApiHandler, createTRPCNext, withTRPC HOC, SSR via ssr option and ssrPrepass, SSG via createServerSideHelpers with getStaticProps, and server-side helpers for getServerSideProps prefetching.

trpc/trpc · 67 tokens

with-tanstack-query

Compose Angular Query with signal-owned Table filtering, sorting, and pagination state using reactive query options, manual row-model boundaries, direct query data, server counts, and valid injection context.

TanStack/table · 42 tokens

auth-web-cloudbase

CloudBase Web Authentication Quick Guide for frontend integration after auth-tool has already been checked. Provides concise and practical Web authentication solutions with multiple login methods and complete user management.

TencentCloudBase/CloudBase-AI-Toolkit · 38 tokens

service-digital-engagement-channel-configure

Configures and deploys enhanced chat Messaging Channels for Messaging for In-App and Web (MIAW). Use when the user needs to create, deploy, and activate a messaging channel configured with Omni-Channel Flow, Omni-Channel Queue, User, or Agentforce Service Agent routing. Generates MessagingChannel metadata, deploys it…

forcedotcom/sf-skills · 173 tokens

om-system-extension

Extend installed Open Mercato modules through UMES enrichers, interceptors, mutation guards, widgets, menus, entity extensions, events, component/page replacements, and overrides. Use for "extend core", "add field/column/action", "hide page", "intercept API", "UMES", or "rozszerz moduł".

open-mercato/open-mercato · 73 tokens