UsersPage uses a query hook (use_users) to load data
On mutation, invalidate/refetch affected queries
On error, show user-friendly message and capture exception to monitoring
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: willyu1007-ai-first-template-frontend-complete-examples3description: Complete Examples4---56# Complete Examples78This skill provides a small example showing a feature folder layout and how UI, hooks, and APIs connect.910---1112## Example feature layout1314```text15src/features/users/16 api/17 users_api.ts18 components/19 UsersPage.tsx20 UserRow.tsx21 hooks/22 use_users.ts23 types/24 user.ts25 index.ts26```2728---2930## Example flow31321. Route renders `UsersPage`332. `UsersPage` uses a query hook (`use_users`) to load data343. On mutation, invalidate/refetch affected queries354. On error, show user-friendly message and capture exception to monitoring3637---38> Converted and distributed by [TomeVault](https://tomevault.io/claim/willyu1007) — claim your Tome and manage your conversions.39<!-- tomevault:4.0:skill_md:2026-04-14 -->
Run npx skillmds@latest add tomevault-io/willyu1007-ai-first-template-frontend-complete-examples in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Complete Examples It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io