BrowserUX Standards-first front-end ecosystem
A native-web toolbox for building fast, accessible, installable web experiences with Web Components, native CSS, PWA primitives, browser APIs, and optional Vite, React, and Vue layers.
HTML
CSS
JS
TS
PWA
Vite
React
Vue
The Core
The Core is the standards-first foundation of BrowserUX: Starter for projects, BrowserUX CSS for native user interface styling, and a shared philosophy that keeps HTML, CSS, browser APIs, service workers, and deployment behavior visible.
-
BrowserUX Starter
HTML
CSS
JS
PWA
Vite
UX
Accessibility
Performance
Dark Mode
A standards-first starter foundation for static sites, PWAs, and client-side apps. Choose raw, Vite Vanilla, React, or Vue without hiding HTML, CSS, service workers, or browser APIs.
Go to BrowserUX Starter
-
BrowserUX CSS
CSS
UX
Accessibility
Reset
Normalization
Dark Mode
A native CSS foundation focused on user interface defaults, accessibility, user preferences, semantic HTML, and platform behavior before heavy visual abstraction.
Go to BrowserUX.css
The Web Components
BrowserUX Web Components are native Custom Elements built on browser APIs. They add practical UI behavior such as theme switching, native sharing, PWA install/update prompts, and lazy image loading without requiring a framework.
-
BrowserUX Theme Switcher
TypeScript
UX
Accessibility
Dark Mode
A Custom Element for light/dark theme switching, user preference detection, and localStorage persistence, usable with or without a framework.
Go to BrowserUX Theme Switcher
-
BrowserUX Share Button
TypeScript
UX
Accessibility
A Custom Element around the Web Share API, with an accessible fallback when native sharing is unavailable.
Go to BrowserUX Share Button
-
BrowserUX PWA UI
TypeScript
PWA
UX
Accessibility
A framework-agnostic Custom Element for PWA install prompts and update flows built around beforeinstallprompt and service worker lifecycle events.
Go to BrowserUX PWA UI
-
BrowserUX Lazy Img
TypeScript
UX
Performance
A zero-dependency Custom Element for lazy-loading images with IntersectionObserver and native image behavior.
Go to BrowserUX Lazy Img
The Vite Plugins
BrowserUX Vite plugins are small build-time helpers for standards-first sites: optimized images, preload hints, SEO files, critical CSS, and service worker asset injection stay explicit and configurable.
-
BrowserUX Preload Assets
Vite
TypeScript
Performance
A Vite plugin that injects preload, modulepreload, and preconnect hints for critical resources while keeping the output inspectable.
Go to BrowserUX Preload Assets
-
BrowserUX SEO Files
Vite
TypeScript
SEO
A Vite plugin that generates technical SEO files such as sitemap.xml and robots.txt from the built site.
Go to BrowserUX SEO Files
-
BrowserUX Inject SW Assets
Vite
TypeScript
PWA
A Vite plugin that injects static assets into a custom service worker so offline behavior stays explicit with Workbox injectManifest.
Go to BrowserUX Inject SW Assets
-
BrowserUX Image Optimize
Vite
TypeScript
Performance
A Vite plugin that generates AVIF/WebP variants and optimizes image assets so native image delivery stays fast and predictable.
Go to BrowserUX Image Optimize
-
BrowserUX Critical CSS
Vite
TypeScript
Performance
A Vite plugin that extracts above-the-fold CSS, inlines it in the head, and defers the full stylesheet to reduce render-blocking CSS.
Go to BrowserUX Critical CSS
The Claude Code Skills
BrowserUX frontend skills help review, refactor, document, and audit interface code with the same standards-first lens: readable HTML, resilient CSS, accessible interactions, and maintainable browser behavior.
-
Front Review
Claude code
A Claude Code skill that reviews frontend files for bugs, accessibility risks, performance issues, and maintainability.
Go to BrowserUX Front Review
-
Front Refactor
Claude code
A Claude Code skill that refactors frontend files with clearer naming, simpler logic, dead code removal, and modern syntax without changing behavior.
Go to BrowserUX Front Refactor
-
Front Comments
Claude code
A Claude Code skill that adds useful structured comments where they clarify frontend behavior.
Go to BrowserUX Front Comments
-
Front A11y
Claude code
Accessibility
A Claude Code skill that audits or fixes accessibility issues in frontend files against WCAG 2.1 AA expectations.
Go to BrowserUX Front A11y
The Blog
The Blog explains the decisions behind BrowserUX, from native CSS and Web Components to PWA behavior, Vite build tooling, accessibility, and practical frontend architecture.
-
BrowserUX Blog
Educational resources that support the project's tools, with practical explanations and standards-first frontend development notes.
Go to the blog of BrowserUX
