modern-web-guidance

Modern Web Guidance

Search and retrieve standardized modern web best practices at the start of implementing or updating any web UI, CSS layout/animation, or client-side JS logic (dates/timezones, sanitization, performance, accessibility, UX fixes) before writing ad-hoc solutions or adding dependencies.

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 separate search calls.
• 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).

npx -y modern-web-guidance@latest search "<query>" --skill-version 2026_10_30-58d055df

Note: Returns [{ "id", "description" }, ...]. Judge results by their description fields:

• Match found: Call retrieve directly—do not also run list.
• No match on a web UI/CSS/DOM behavior (or broad UI audit): If search returns [] or unrelated descriptions because your phrasing differed from the catalog (or your task spans multiple categories), run npx -y modern-web-guidance@latest list once to check if the pattern is covered under more general terminology.
• Topic not covered: If no guide description directly matches your task, proceed with your implementation without retry loops or retrieving unrelated guides.

Step 2. Retrieve Best Practices

Once you have relevant id(s) from the search results, call retrieve to get the full guide(s)—including both specific use-case guides that match your task and any broader discipline guide (e.g., html, css, forms, accessibility, color, performance, security) that applies. You can pass multiple IDs separated by commas.