This skill lists common UI patterns and recommended defaults.
Forms
Validate at the boundary (schema-first where possible).
Display field-level errors and a single top-level error summary for submission failures.
Dialogs / modals
Trap focus inside the dialog.
Ensure ESC closes the dialog (unless forbidden for safety reasons).
Restore focus to the triggering element on close.
Notifications
Prefer a single notification mechanism (snackbar/toast).
Use success messages sparingly; highlight failures and required actions.
Tables / grids
Prefer server-side pagination for large datasets.
Keep sorting/filtering state in the URL for shareability (when appropriate).
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: willyu1007-ai-first-template-common-patterns3description: Common Patterns4---56# Common Patterns78This skill lists common UI patterns and recommended defaults.910---1112## Forms1314- Validate at the boundary (schema-first where possible).15- Display field-level errors and a single top-level error summary for submission failures.1617---1819## Dialogs / modals2021- Trap focus inside the dialog.22- Ensure ESC closes the dialog (unless forbidden for safety reasons).23- Restore focus to the triggering element on close.2425---2627## Notifications2829- Prefer a single notification mechanism (snackbar/toast).30- Use success messages sparingly; highlight failures and required actions.3132---3334## Tables / grids3536- Prefer server-side pagination for large datasets.37- Keep sorting/filtering state in the URL for shareability (when appropriate).3839---40> Converted and distributed by [TomeVault](https://tomevault.io/claim/willyu1007) — claim your Tome and manage your conversions.41<!-- tomevault:4.0:skill_md:2026-04-14 -->
Run npx skillmds@latest add tomevault-io/willyu1007-ai-first-template-common-patterns 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.
Common Patterns It is listed under Coding & Dev Tools 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