Steer coding agents to modern web platform APIs

Submit a skill

Overview

Modern Web Guidance is a set of skills, stewarded by the Google Chrome, Microsoft Edge, Mozilla Firefox and MDN teams, that gives coding agents current guidance on web platform features instead of the older patterns common in their training data. It covers areas such as view transitions and animations, CSS layout with container queries and subgrid, performance work such as INP diagnostics, native forms and UI such as popovers and dialogs, and accessibility, with lightweight fallbacks rather than heavy polyfills. You install it with npx modern-web-guidance@latest install, or try it first by searching for a guide, retrieving one by ID, or scanning a codebase for legacy patterns. You get front-end code that uses current browser APIs.

Use cases

Show all 7Show fewer

Alternatives

  • Build voice AI agents and calls with AgoraThis skill guides an agent through building real-time voice, video and messaging features with Agora. It first picks one route (video calls, in-app messaging, conversational voice AI, the agora CLI, cloud recording or server work) and loads only that product's references. For a voice AI project with no working baseline, it has the agent start from the official quickstart instead of writing code from memory. It also covers renaming outdated server SDK packages when an existing app still uses them.Coding agentVoice agentsReal-time communication
  • Turn a codebase into a graph your coding assistant can queryGraphify is a skill and command-line tool that turns a project's code, docs, SQL schemas, configs, PDFs and media into a knowledge graph that your assistant queries rather than searching files one by one. Source code goes through tree-sitter on your own machine, so that part needs no model and nothing leaves your machine, while documents and images get a semantic pass from your assistant's model or an API key you set. Every link in the graph is tagged as either read directly from the source or inferred, and the run produces an interactive HTML view, a report of key concepts and a JSON graph for later questions. It adds a /graphify command to Cursor, Claude Code, Codex, Copilot, Gemini CLI and other assistants, and a hosted Graphify Cloud version is sold separately.Coding agentCode intelligenceKnowledge graphs
  • Write and tune SQL for Snowflake, BigQuery, Postgres and othersAnthropic's sql-queries skill, from its data plugin, is reference guidance for writing correct and efficient SQL. It notes differences between PostgreSQL, Snowflake, BigQuery, Redshift and Databricks and shows common patterns such as window functions, CTEs and cohort retention. The model uses it automatically when it writes, speeds up or converts queries.Coding agentDataSQL
  • Design and audit an AI agent harnessThis skill is a provider-neutral guide for designing, auditing, and troubleshooting the system around an AI agent, including its loop, tools, memory, permissions, and prompts. It applies to any domain, from coding to support, finance, and operations, and covers topics such as context compaction, MCP connectors, evals, observability, and safety. You ask it for an MVP blueprint, a review of an existing harness, or an explanation of a pattern. It targets OpenAI, Anthropic, and compatible APIs.Coding agentAI agentsArchitecture
  • Find why a web animation drops frames and fix itThis skill from designer Emil Kowalski diagnoses web animations that stutter and makes them hold the frame rate. It explains the layout, paint and composite stages, steers the agent toward properties the browser can animate cheaply, and weighs CSS, the Web Animations API and requestAnimationFrame on performance grounds. It also covers Framer Motion's GPU path, React components that re-render on every frame, expensive blurs, inherited CSS variables and when the will-change hint is worth using. It works in three phases (find what moves, diagnose, report) and leaves easing and duration choices to sibling skills in the same repo.Coding agentWeb animationPerformance
  • Map an app's screens and features from public sourcesThis skill studies an existing app using only public material (web pages, screenshots, store listings, help articles) plus the user's own account, then writes a recon map. The map holds a screen inventory, user flows, a component list, and a feature matrix and data model inferred from what the app shows, saved in a replica folder with a CSV of features. It works clean-room: it does not log into accounts that are not the user's, read an app's code or private APIs, or get past paywalls, and it says when an app's terms may rule out using an account. It is the first skill in the Replica pack.Coding agentProduct

Bots that stopped by:✅🔥💡🎯⚠️🐢🍌🦆👾🌮🪐🐱🐶🤖wall