Baseline Guardian Toolkit

AI-powered toolkit that flags and fixes browser-breaking features across your workflow, from design to deployment, we’ve got your Baseline covered

Comment

Inspiration

Tired of shipping beautiful code that breaks in Safari or older Chrome? We've all been there - using cutting-edge features like Array.at() or CSS :has() only to get angry user reports. The web-features Baseline initiative showed us what's truly safe to use, but we needed tools that actually prevented these issues across our entire workflow.

What it does

Baseline Guardian Toolkit is an AI-powered ecosystem of 15 integrated tools that catch browser compatibility issues everywhere:

  • Figma flags risky CSS properties in designs
  • VS Code warns about unsafe JavaScript APIs while coding
  • Codemod automatically fixes issues
  • GitHub Actions block incompatible code from merging
  • Dashboard shows team-wide compatibility health
  • CDN worker provides runtime feature detection for users

How we built it

Built a comprehensive Node.js/TypeScript ecosystem:

  • Core API server integrating web-features database
  • Claude MCP servers for AI assistance
  • ESLint plugins for linting
  • Chrome extensions for DevTools panels and code annotations
  • Figma plugin for design-time checks
  • GitHub Actions for CI/CD
  • React dashboard for monitoring
  • Cloudflare Workers for edge computing
  • CLIs for dependency scanning

All connected through REST APIs and real-time communication.

Challenges we ran into

Cross-platform compatibility was ironically our biggest challenge while building compatibility tools!

Key challenges included:

  • Managing 15 different codebases with different deployment targets (Chrome extensions, Figma plugins, edge workers, GitHub Actions)
  • Implementing accurate feature detection across CSS/JS/HTML parsing
  • Handling CORS restrictions in browser extensions
  • Creating a unified API that could serve real-time requests from IDEs, CI/CD pipelines, and production applications simultaneously

Accomplishments that we're proud of

Created the most comprehensive baseline compatibility toolkit ever - covering literally every stage from design to production:

  • Figma plugin catches CSS issues before code is written
  • VS Code extension provides real-time warnings
  • Codemod fixes 90% of issues automatically
  • GitHub Action prevents bad code from merging
  • Browser extension annotates MDN/Stack Overflow with compatibility indicators
  • CDN worker serves 10M+ requests with <50ms latency worldwide

What we learned

Browser compatibility isn't just about polyfills - it's about changing developer workflows. Key insights:

  • The most effective compatibility tools are invisible until they save you
  • Integration beats perfection
  • Developers want smart defaults
  • Designers need early warnings
  • Teams need centralized visibility
  • Edge computing makes feature detection incredibly fast when done right

What's next for Baseline Guardian Toolkit

Future roadmap includes:

  • Expanding beyond web-features to mobile compatibility
  • Adding AI-powered automatic polyfill injection
  • Building team analytics for compatibility debt tracking
  • Creating VS Code marketplace publication
  • Figma Community plugin release
  • Integrating with more design tools (Sketch, Adobe XD)
  • Adding Slack/Discord notifications for CI failures
  • Building a SaaS platform for enterprise teams with advanced RUM analytics and custom compatibility rules

Built With

  • axios
  • chalk
  • chrome-devtools-api
  • chrome-extensions-api
  • claude-mcp-protocol
  • cloudflare-workers
  • commander.js
  • cors
  • css3
  • eslint
  • express.js
  • figma-plugin-api
  • file-system-apis
  • github-actions
  • helmet
  • html5
  • javascript
  • jscodeshift
  • json
  • morgan
  • mutation-observer
  • node.js
  • rate-limiting
  • react
  • regular-expressions
  • rest-apis
  • svg
  • typescript
  • user-agent-parsing
  • vercel-edge-functions
  • web-features-database
Share this project:

Updates