skills.rest
ferrarifankid04
ferrarifankid04COMMUNITY
Explore all skills by this author →
GitHub

modern-web-guidance

Searches and retrieves best-practice guides for modern web development features.

Updated Aug 6, 2026
Search Tags:#best practices#performance#web development#frontend#css#search#browser apis
One-click install
npx skills add https://github.com/ferrarifankid04/ai-skills-public --skill modern-web-guidance-ferrarifankid04
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modern-web-guidance
Source: https://github.com/ferrarifankid04/ai-skills-public/tree/main/antigravity/plugins/modern-web-guidance-plugin/skills/modern-web-guidance
Command: npx skills add https://github.com/ferrarifankid04/ai-skills-public --skill modern-web-guidance-ferrarifankid04

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires modern-web-guidance.

What problem does it solve? Web APIs evolve rapidly and AI training data often contains obsolete patterns, leading to outdated HTML, CSS, and JavaScript implementations. This Skill provides up-to-date, curated best-practice guides for modern web features so generated code follows current standards. ## Core Features & Use Cases - Semantic Search: Query an action-oriented description (e.g., "optimize image loading priority") to find relevant guides with similarity scores. - Guide Retrieval: Fetch full implementation guides by ID, covering UI patterns, scroll animations, Core Web Vitals, and modern browser APIs. - Browser Support Policies: Interpret Baseline availability data and apply fallback recommendations based on custom browser support requirements. - Use Case: Before building a modal dialog in React, search for the native <dialog> element pattern and retrieve the guide to implement it without heavy third-party dependencies. ## Quick Start Ask the assistant to search modern-web-guidance for best practices on implementing a scroll-driven animation before writing any CSS.

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 modern CSS features?▼

Run npx -y modern-web-guidance@latest search with an action-oriented query describing your goal, such as container queries or backdrop filters. The command returns matching guides with IDs, categories, and similarity scores.

How to check if a web API is safe to use without fallbacks?▼

Retrieve the relevant guide and check its Baseline availability data. Features marked Baseline Widely available are safe without fallbacks; for others, follow the guide's fallback recommendations unless a custom browser support policy applies.

Does modern-web-guidance work with React and Vue projects?▼

Yes, the guides are framework-agnostic and cover adapting layout and style patterns to React, Vue, and Angular. You adapt the framework-neutral guidance to your specific component setup.

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

On Windows, npx may fail to resolve the package; use npx.cmd instead. If the command hangs, you may be offline, so retry with npx --offline to use cached packages.

When should I not use modern web guidance search?▼

Skip it for backend work like SQL, ORMs, and Express routes, CI/CD pipelines, Docker, and generic tooling like ESLint or Git. It targets only HTML, CSS, and client-side JavaScript tasks.

Related Skills

Explore More Software Engineering Skills→
kriscendobotkriscendobot
3

supports-feature-query-progressive-enhancement

Gate modern CSS features within @supports blocks with structural fallbacks.

Community
Intermediate
CivicActionsCivicActions
2

performance-frontend

Audit frontend performance by analyzing Core Web Vitals and render-blocking resources.

Official
Advanced
HakiickHakiick

responsive-tester

Validate responsive design across mobile, tablet, and desktop viewports with Playwright.

Community
Intermediate
iPlug2iPlug2
2.4k

setup-deps

Download iPlug2 SDKs and prebuilt libraries via shell scripts.

Official
Intermediate