skills.rest
spatulatom
spatulatomCOMMUNITY
Explore all skills by this author →
𝕏@tomtommyXYGitHub

browser-compatibility

Measure CSS, JS syntax, and API compatibility against target browsers.

1|Updated Mar 10, 2023
Search Tags:#compatibility#browser#stylelint#browserslist#doiuse#eslint-plugin-compat#build-output
One-click install
npx skills add https://github.com/spatulatom/testing-next-13-beta-typescript-tailwind-prisma --skill browser-compatibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-compatibility
Source: https://github.com/spatulatom/testing-next-13-beta-typescript-tailwind-prisma/tree/main/.github/skills/browser-compatibility
Command: npx skills add https://github.com/spatulatom/testing-next-13-beta-typescript-tailwind-prisma --skill browser-compatibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a complete workflow to verify that a project's shipped code runs across target browsers, and to enforce compatibility checks during development and CI.

Core Features & Use Cases

  • Phase-based workflow: Measure the build output for CSS features, JS syntax, and JS APIs using doiuse, es-check, and eslint-plugin-compat.
  • Generate a browser-compat-findings.md template and repeatable scripts for CI to ensure ongoing compatibility checks.
  • Document results, decisions, and constraints, enabling easy handoff and auditing.

Quick Start

Run Phase 1: build the project, resolve browser targets, and generate the browser-compat-findings.md to start measuring CSS, JS syntax, and JS APIs.

Frequently Asked Questions about browser-compatibility

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

FAQPage Schema
How do I check browser compatibility of CSS and JavaScript in my build output?▼

Browser compatibility verification measures your build output using doiuse for CSS features, es-check for JS syntax, and eslint-plugin-compat for JS APIs against a defined target browsers baseline.

What is the best way to enforce browser compatibility checks in CI?▼

Enforcing browser compatibility in CI involves generating repeatable npm scripts and configuration files that run compatibility checks against your build output during continuous integration pipelines.

How do I document my project's browser compatibility posture for auditing?▼

Document your project's compatibility posture by generating a browser-compat-findings.md file that records measured gaps, decisions, and constraints for easy handoff and auditing.

Can I use eslint-plugin-compat and doiuse together to measure compatibility gaps?▼

Yes, you can use eslint-plugin-compat and doiuse together to measure JS API and CSS feature compatibility gaps in your build output against a specified target browsers baseline.

Do I need a browserslist configuration to verify browser compatibility end-to-end?▼

Yes, a target browsers baseline is required to scope compatibility verification, allowing tools to decide which CSS features and JS syntax gaps exist in your shipped code.

Why does my build output fail browser compatibility checks on older browsers?▼

Build output fails compatibility checks when shipped code includes CSS features or JS syntax unsupported by the target browsers baseline, identified by measuring gaps with doiuse and es-check.

Related Skills

Explore More Software Engineering Skills→
sayali-ingle-pdlsayali-ingle-pdl

browserslistrc

Generate a .browserslistrc file defining browser targets for CSS autoprefixing and JavaScript transpilation.

Community
Intermediate
DaFumDaFum
1

perf-budget-enforcer

Enforce performance budgets for bundle size, load time, and FPS in CI builds.

Community
Intermediate
charleshall888charleshall888
1

ui-lint

Run ESLint and Stylelint auto-fix passes and export a JSON lint report.

Community
Intermediate
GoogleChromeGoogleChrome
926

baseline-status

Verifies web platform feature Browser Baseline statuses and outputs JSON for frontend workflows.

Official
Basic