How Agent Skills Accelerate Backend Page Development with Claude

What are Agent Skills

Claude’s official definition: each skill contains instructions, metadata and optional resources (usually scripts or templates); Claude automatically uses these resources when needed. A skill is stored as a folder that must contain a SKILL.md file (description and metadata) and may include additional resources such as scripts or reference documents. SKILL.md must include name and description, which Claude loads into the system prompt. Effectively a skill is a bounded‑task execution unit that provides the model with a reusable knowledge package.

Agent Skills vs. MCP

We often encounter MCP (Model Context Protocol) when using AI applications. How does it differ from Agent Skills?

MCP (Model Context Protocol) is an open protocol from Anthropic that standardizes how applications provide context and tools to large language models.

Agents need two capabilities: knowledge acquisition – provided by Agent Skills; action execution – provided by MCP, which solves tool description, model invocation and context passing.

Key comparison:

Essence: Agent Skills – task template; MCP – tool protocol.

Purpose: Agent Skills define workflow; MCP provides execution ability.

Content: Agent Skills – prompt + workflow + decision boundary; MCP – API / tool.

Executes code: Agent Skills – optional; MCP – mandatory.

Complexity: Agent Skills – low; MCP – high.

Applicable scenarios: Agent Skills – knowledge‑type, experience‑type tasks; MCP – system integration.

Practice of Skills in Backend Pages

Problem background

Backend page development in B‑side products falls into two demand types: modifying existing pages (legacy logic) and creating new pages (adding menus, building from scratch). New pages are typically high‑repetition, low‑complexity and strongly standardized, matching the characteristics of Agent Skills.

Development process decomposition

Using a procurement list page as an example, the page is broken down into:

Basic form filters.

Table display.

Additional actions such as create, import and other business operations.

Workflow analysis

Configure basic page info: define path, create directory, set constants, enumerate storage locations, name new APIs.

Build basic functionality: study PRD and prototype, review interface fields, modify filter and table configurations.

Implement extra features and complex logic: custom display logic, validation, tab switching, drawer components, etc.

Creating a Skill: from configuration to generation

The initial skill configuration is defined via Codex’s built‑in skill creator. Example prompt:

// ⬇️ 明确目标
根据模板文件，帮我创建一个名称为mars Booking列表页的skill，这个skill用于创建以mars-kit套件(对应项目的组件库包名)为基础组件的列表页面
//  ⬇️ 定义基础配置
你需要根据用户给的需求原型和需求描述、接口信息定义以及用户输入的基础配置信息，如果没有使用默认的基础配置信息，进行list页面的搭建
包含以下配置：
1. 基础配置：
   - 文件默认存放地址：/mars-booking/xxx
   - 页面配置地址：app.json
   - 接口默认存放地址：
   - 常量枚举存放地址：
2. 模版构建：
   - 参照参考文件完成fields配置(表单配置)
   - 参照参考文件完成column配置(表格配置)
   - 构建过程中不确定的信息，可以进行数据mock
3. 内容输出配置：
   - 本次新增页面的基础信息
   - 提示本次模板缺失的内容

The skill ingests the prototype, interface JSON and configuration locations to generate a template.

Generation results and issue analysis

Generation time: ~13 minutes, consuming ~20% of the Codex window quota and ~50 k tokens.

Code redundancy and inconsistent style – unnecessary types were added and the logic did not match the project’s actual development style.

Component matching inaccuracies – the AI sometimes selected the wrong component type (e.g., read‑only vs. editable).

Optimization strategies

Reduce token consumption

Self‑analysis identified four causes:

Codex reads a wide range of project files to mimic style.

Multiple reads of the mars-kit component library for correct matching.

Missing interface information leads to unnecessary inference.

Unfixed output order causes repeated file reads.

Eliminate code redundancy and style inconsistency

Key constraint principles: express important constraints as executable rules (“when X, generate Y”) and avoid vague directives such as “keep it simple”.

Improve component matching efficiency

A matching rule covering 70‑80% of repetitive content is proposed, leaving the remaining 20% for manual handling.

Optimized skill plan

Enhanced constraints

Read no more than five list files for reference.

Determine path from the tail of the routing file.

Reference top‑level service files for API naming and structure.

Fix build order to avoid back‑and‑forth thinking.

Add matching rules to reduce repeated component‑library reads.

Introduce result validation – only prompt the user to supplement the output instead of performing a second modification pass.

Comparison of first and optimized generations

Time: 13 min 23 s → 5 min 32 s (≈50% reduction).

Compliance / usability: First generation had misplaced configuration, non‑compliant enums and redundant API definitions; optimized generation meets “ready‑to‑use” criteria with minimal tweaks.

Extensibility: First generation was poor; optimized generation provides a clear hierarchical skill structure, facilitating future maintenance.

Long‑term thoughts on backend skill maintenance

Core principle: skills should focus on the 70‑80% of repetitive work; the remaining 20% is handled manually.

Layered skill design allows continuous refinement of constraint and matching layers, improving code stability and precision.

Maintain and interlink list‑page and detail‑page skills for long‑term scalability.