Agent Skills
› AjayIrkal23/agentic-mercy-10x
› frontend-server-data-patterns
frontend-server-data-patterns
GitHub用于构建或修改由API驱动的表格、列表、搜索页及查询状态流。规范前端查询对象模型，定义服务端过滤、排序、分页及异步UI行为，确保查询逻辑与服务端一致并管理请求生命周期。
Trigger Scenarios
构建API驱动的数据列表或表格
实现搜索页面的筛选与分页功能
设计前端查询状态与服务端数据的映射
Install
npx skills add AjayIrkal23/agentic-mercy-10x --skill frontend-server-data-patterns -g -y
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-followfor the always-on frontend baseline.frontend-structure-standardsfor component and module boundaries.frontend-response-handlingfor envelope parsing and normalized errors.api-contract-standardsfor request and response shape stability.backend-api-standardswhen 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-handlingshould take over for API parsing and errors.
Version History
- 581d130 Current 2026-07-19 09:08
