modern-web-guidance

Search and retrieve best-practice guides for modern HTML, CSS, and client-side JavaScript features.

Updated Mar 28, 2026
One-click install
npx skills add https://github.com/po4yka/blog --skill modern-web-guidance-po4yka
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: modern-web-guidance
Source: https://github.com/po4yka/blog/tree/main/.agents/skills/modern-web-guidance
Command: npx skills add https://github.com/po4yka/blog --skill modern-web-guidance-po4yka

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires modern-web-guidance, and includes references (resource) components.

What problem does it solve? Web platform APIs evolve rapidly, and AI training data often contains obsolete patterns for HTML, CSS, and client-side JavaScript. This Skill provides a searchable index of up-to-date best-practice guides so implementations use current, standards-compliant techniques instead of outdated approaches. ## Core Features & Use Cases - Semantic Search: Query an index of web development guides with action-oriented phrases to find relevant patterns for UI, scroll, performance, forms, and system APIs. - Guide Retrieval: Fetch full implementation guides by ID, including code examples, accessibility requirements, and browser fallback strategies. - Browser Support Policies: Interpret Baseline availability data and apply custom fallback policies for restricted runtimes like Electron or Tauri. - Use Case: Before building an animated modal dialog, search for top-layer animation guidance and retrieve a guide covering <dialog>, @starting-style, transition-behavior: allow-discrete, and reduced-motion handling. ## Quick Start Ask the assistant to search modern-web-guidance for best practices on the web feature you are about to implement, such as animating a dialog or styling a custom select picker.

Frequently Asked Questions about modern-web-guidance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find best practices for a modern CSS feature?

Run the search command with an action-oriented query describing your goal, such as animating element entry or styling scrollbars. The CLI returns matching guides with IDs, which you then pass to the retrieve command to get the full implementation guide.

What topics do the modern web guidance guides cover?

Guides cover UI and layout patterns like dialogs, popovers, anchor positioning, and container queries, plus scroll-driven animations, Core Web Vitals performance, accessibility, forms, and newer APIs like WebMCP and HTML-in-Canvas.

When should I not use this web guidance search?

Do not use it for backend work like SQL, ORMs, or Express routes, CI/CD pipelines and Docker, or generic tooling like ESLint, Git, or local Python and Go scripts. It is scoped strictly to client-side web development.

How do the guides handle browser compatibility and fallbacks?

Each guide includes Baseline availability data and fallback strategies. Features that are Baseline Widely Available need no fallback, while newer features include feature-detection snippets, polyfills, or graceful-degradation patterns unless a custom browser support policy overrides this.

Why does the npx modern-web-guidance command fail on Windows?

On Windows, npx may fail to resolve the package; use npx.cmd instead. The command also requires network access to fetch the npm package, though you can retry with the --offline flag if the initial run hangs.