Agent Skills › AjayIrkal23/agentic-mercy-10x › frontend-server-data-patterns

frontend-server-data-patterns

GitHub

规范前端服务端数据驱动页面的开发模式，涵盖查询状态建模、过滤排序分页逻辑及异步UI状态管理，确保前后端交互一致性。

skills/frontend-server-data-patterns/SKILL.md AjayIrkal23/agentic-mercy-10x

触发场景

构建或修改API驱动的列表、表格或搜索页面定义映射后端过滤条件的前端查询对象处理服务器数据的加载、空值、错误和分页状态

安装

npx skills add AjayIrkal23/agentic-mercy-10x --skill frontend-server-data-patterns -g -y

更多选项

不安装直接使用

npx skills use AjayIrkal23/agentic-mercy-10x@frontend-server-data-patterns

指定 Agent (Claude Code)

npx skills add AjayIrkal23/agentic-mercy-10x --skill frontend-server-data-patterns -a claude-code -g -y

安装 repo 全部 skill

npx skills add AjayIrkal23/agentic-mercy-10x --all -g -y

预览 repo 内 skill

npx skills add AjayIrkal23/agentic-mercy-10x --list

SKILL.md

Frontmatter

{
    "name": "frontend-server-data-patterns",
    "schema": 1,
    "category": "frontend",
    "surfaces": [
        "frontend"
    ],
    "triggers": {
        "paths": [
            ".hook.",
            "\/api-client",
            "\/api\/",
            "\/hooks\/use",
            "\/src\/hooks\/",
            "api.js",
            "api.ts",
            "use-",
            "useHook"
        ],
        "intents": [
            "frontend"
        ],
        "keywords": [
            "api-backed",
            "async",
            "behavior",
            "building",
            "changing",
            "data",
            "define",
            "filtering",
            "flows",
            "frontend",
            "lists",
            "model",
            "pagination",
            "patterns",
            "query",
            "query-state",
            "screen",
            "screens",
            "search",
            "server",
            "server-backed",
            "server-driven",
            "sorting",
            "state",
            "tables"
        ]
    },
    "platforms": [
        "linux",
        "darwin",
        "windows"
    ],
    "token-cost": 468,
    "description": "ALWAYS invoke when building or changing API-backed tables, lists, search screens, or frontend query-state flows with server-driven filtering, sorting, and pagination. MUST use to model API-backed frontend query state and define query-state and async UI behavior for a server-backed screen.",
    "disable-model-invocation": false
}

Frontend Server Data Patterns

Use When

Building or updating API-backed lists, tables, or search pages.
Defining frontend query objects that map to backend filters.
Handling loading, empty, error, and pagination states for server data.

Do Not Use

Structuring general frontend modules or hooks without server data.
Styling or visual design work.
Defining backend query validation or response envelopes.

Owns

Query object shape on the frontend.
Server-driven filtering, sorting, pagination, and search behavior.
UI state expectations for async server data screens.
Request lifecycle between page, store or query layer, and API client.

Does Not Own

General component architecture or file organization.
Backend whitelist, index, or DB execution strategy.
Styling, animation, or visual system direction.

Combine With

frontend-standards-always-follow for the always-on frontend baseline.
frontend-structure-standards for component and module boundaries.
frontend-response-handling for envelope parsing and normalized errors.
api-contract-standards for request and response shape stability.
backend-api-standards when frontend and backend query semantics must match.

Workflow

Define the query object as the source of truth for the screen.
Send filters, sort, search, and pagination to the backend instead of computing them locally.
Keep API access outside of UI components.
Reset page state when filter inputs change in a way that invalidates the current page.
Validate success, error, loading, and empty states together.

Output Contract

Frontend query-state shape and fetch flow.
Mapping between UI controls and backend query params.
Required user-visible states for server-backed screens.
The point where frontend-response-handling should take over for API parsing and errors.