SKILL.md
Modern Web Guidance
A skill to search for specific web development use cases and retrieve their corresponding best practice guides.
When to use
Must use this skill:
- At the start of implementing any web UI, CSS layout/animation, or client-side JS logic (dates/timezones, sanitization, performance, accessibility)—including when fixing UX symptoms (e.g., janky interactions, layout shifts).
- Before creating or updating a component, to check if a standardized modern web pattern already exists.
- To avoid implementing ad-hoc solutions or loading large dependencies unnecessarily.
Usage Instructions
Step 1. Search Use Cases
Run modern-web-guidance directly with npx using a 2–5 word action-oriented query for a single web platform capability or UI pattern:
- Keep queries focused and generic: Describe the user-visible capability (
<verb> + <UI/platform object>, optionally paired with the target HTML/CSS/JS feature name if known). Omit framework/library names (React,Vue,Tailwind, etc.) and app/domain nouns (product, route, or component/file names). Split multi-feature tasks into separatesearchcalls. - Example: Search
"light dismiss dialog"or"responsive data table", not"dialog"(too terse),"responsive table dark mode"(compound — split into two searches), or"close React settings modal on outside click"(framework/app noise).