modern-web-guidance

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 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 SKILL_VERSION

Example Output:

[
  {
    "id": "optimize-image-priority",
    "description": "Optimize the loading priority of Largest Contentful Paint (LCP) candidate images."
  },
  {
    "id": "defer-rendering-heavy-content",
    "description": "Reduce rendering times in content-heavy web pages by deferring rendering for offscreen content."
  }
]

Note: 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.