Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Modern Web Guidance

Searches and applies up-to-date web platform best-practice guides before any HTML/CSS/client-side JS work.

Dev & CodingIntermediate★ 429⑂ 45AI score 9/10Last updated: Sep 22, 2026

What it does

Before writing frontend code, Claude calls the modern-web-guidance npm package to look up the current best-practice guide for the task at hand.

  • search "<query>" returns ranked guide candidates with similarity scores and token counts
  • retrieve "<id>" pulls the full guide: implementation steps, browser-support data, fallback strategies
  • A verification step cross-checks generated code against the guide for correct modern patterns and fallbacks
  • Baseline-aware fallback logic, plus prompts to document a project browser-support policy in CLAUDE.md/AGENTS.md

Coverage includes modals/popovers, anchor positioning, container queries, :has(), View Transitions, scroll-driven animations, LCP/INP tuning, content-visibility, File System Access, WebUSB, and framework adaptation. It explicitly does not trigger for backend, SQL, Docker, or CI/CD work.

Who it's for

  • Frontend developers tired of LLMs suggesting obsolete CSS/JS patterns
  • Anyone who wants to check native platform capabilities before adding a dependency
  • React/Vue/Angular teams standardizing layout and styling approaches
  • Projects that need consistent browser-support and fallback policies

Example uses

  1. "The hero image loads slowly" → retrieves the LCP image priority guide and applies Fetch Priority
  2. "Build a dropdown anchored to this button" → suggests the Popover API plus CSS anchor positioning instead of a JS positioning library
  3. "Add a page transition animation" → pulls the View Transitions guide and implements it as progressive enhancement
  4. "This long content page janks while scrolling" → applies content-visibility and hidden="until-found" deferred rendering

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/aiskillstore/marketplace/HEAD/pending/googlechrome/modern-web-guidance/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the pending/googlechrome/modern-web-guidance folder from the GitHub repo aiskillstore/marketplace into my ~/.claude/skills/modern-web-guidance/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/aiskillstore/marketplace.git /tmp/marketplace && mkdir -p ~/.claude/skills && cp -r /tmp/marketplace/pending/googlechrome/modern-web-guidance ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Make sure Node.js is installed (node -v); the skill relies on npx.
  2. Clone the repo: git clone https://github.com/aiskillstore/marketplace.git /tmp/marketplace
  3. Create the skills directory: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r /tmp/marketplace/pending/googlechrome/modern-web-guidance ~/.claude/skills/
  5. Restart Claude Code and confirm modern-web-guidance appears in your skills list.
  6. When prompted for command permissions, allowlist only npx -y modern-web-guidance@latest * — never bare npx *.
  7. In sandboxed setups, approve outbound network access up front and set NPM_CONFIG_CACHE=/tmp/npm-cache if ~/.npm is read-only. On Windows use npx.cmd.
  8. Test with a frontend prompt such as "build an accessible modal dialog" and verify the skill triggers.
View source on GitHub ↗