Baseline-first HTML/CSS guidance for AI coding agents. Routes UI generation toward native HTML elements and modern CSS that has reached Web Platform Baseline Widely-available status for at least 9 months, prompts before Newly-available features, and avoids Limited features without explicit fallback. Covers dialog, popover, anchor positioning, container queries, subgrid, :has(), @scope, @layer, view transitions, scroll-driven animations, light-dark(), oklch(), color-mix(), text-wrap, and accessibility primitives.
Plugin modern-html from marketplace standardbeagle-tools in standardbeagle/standardbeagle-tools. Commands read from the repo's manifest — 4 days ago.
modern-html-accessibility-primitivesNative a11y primitives — focus-visible, focus-within, inert, prefers-reduced-motion, prefers-color-scheme, prefers-contrast, forced-colors, accessibility-tree for dialog/popover/anchor-positioning, ARIA labeling. Use when: focus styles, keyboard nav, animating UI, picking colors, modal/popover conte
modern-html-baseline-decision-protocolBaseline-tier decision tree for HTML/CSS/DOM Tier A Widely-9mo auto-adopt, Tier B Newly prompt, Tier C Limited avoid sans fallback. Use when: writing CSS/HTML, picking UI pattern, replacing JS lib, choosing layout/animation primitive, before popover/dialog/container-queries/anchor-positioning/view-t
modern-html-css-architectureCascade layers (@layer), @scope at-rule, native CSS nesting for stylesheet structure, specificity, component scoping, replacing BEM/CSS-Modules. Use when: new design system, migrating off Sass mixins, organizing token layers, specificity battles, scoping component CSS sans build step. Skip: single-f
modern-html-js-replacement-patternsReplace JS UI libs with native HTML/CSS — modal, tooltip, popover, dropdown, accordion, tabs, carousel, sticky, smooth-scroll, form-validation, lazy-load, line-clamp. Use when: replacing/evaluating Floating UI, Popper, Headless UI, Radix, Reach, Tippy, Swiper, GSAP, Framer Motion, IntersectionObserv
modern-html-modern-css-layoutContainer queries, container query units (cqw/cqh/cqi/cqb), subgrid, :has() relational selector for responsive component-driven sizing. Use when: cards/sidebars/dashboards/responsive components, grandchild row alignment across siblings, styling parents by descendants, replacing viewport media querie
modern-html-native-form-controlsNative form/input/validation/picker/auto-size — constraint validation (required, pattern, type-inputs), :user-valid/:user-invalid, accent-color, color-scheme, customizable select Limited, field-sizing:content. Use when: login/signup/search/data-entry forms, validation styling, tinting checkbox/radio
modern-html-native-html-primitivesNative dialog/popover/tooltip/accordion/disclosure/search/lazy-img/command-buttons — dialog (showModal, ::backdrop, requestClose), Popover API (popover, popovertarget, auto/manual/hint), details/summary name attr exclusive accordion, inert, loading=lazy, command/commandfor. Use when: dialog/modal, t
modern-html-performance-and-containmentcontent-visibility:auto, contain-intrinsic-size, contain property, will-change discipline, container queries to reduce layout thrash for long lists/articles/dashboards/off-screen content. Use when: long article archives, chat logs, infinite-scroll feeds, dashboards with off-screen widgets, before vi
modern-html-scroll-and-motionScroll snap, scroll-driven animations, view transitions same-doc/cross-doc, smooth-scroll — scroll-snap-type, animation-timeline scroll()/view(), startViewTransition, @view-transition MPA, ::scroll-button/::scroll-marker, prefers-reduced-motion. Use when: carousel, snap scroller, page transitions SP
modern-html-theming-and-colorDark mode, color tokens, palettes, dynamic color — color-scheme, light-dark(), prefers-color-scheme, oklch/oklab, color-mix, relative color syntax, @property for animatable color tokens, @supports gating Newly features. Use when: dark mode toggle, brand color tokens, tonal scales, animating colors,
Browser superpowers for AI coding agents: dev-server and reverse proxy with traffic logging, a deduped priority error inbox, 50+ frontend diagnostic functions, accessibility/performance/security/SEO/responsive/API/loading audits, visual-regression snapshots, replay testing, tunnels, and sketch/design modes
36 skills · 4 agents · hooks
Dart task management with adversarial cooperation loops and full dart-query MCP schema parity - DartQL batch operations, advanced filtering, task relationships, documents, time tracking, and automated task execution through quality verification pipelines. Requires @standardbeagle/[email protected]+ (dartai_loop_snapshot tool used by /dartai:start).
29 skills · 6 agents · hooks
Token-efficient Figma integration with query-based data shaping, image export, design tokens, and adversarial design library extraction. Build production-ready component libraries with exact CSS, assets, HTML mockups, and comprehensive documentation using the Ralph Wiggum quality loop.
28 skills · 4 agents
Contextually-loaded development standards and project-aware skills. Replaces bulk CLAUDE.md instructions with on-demand rules, language-scoped guidelines, and project-type skill templates.
25 skills · hooks
SLOP (Simple Language Open Protocol) integration for MCP management. Migrate existing MCP setups, search and execute tools, manage resources, and orchestrate multiple MCP servers. Includes Dart MCP tool reference skills for reduced get_metadata calls.
23 skills · 2 agents · 1 MCP server
UX-driven development toolkit for building accessible, user-centered websites and applications. Integrates UX principles, accessibility verification (WCAG 2.2), Nielsen's heuristics, and usability best practices directly into the development workflow. Includes agents for comprehensive audits and component design.
20 skills · 4 agents
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.
1 skill
tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.
1 skill
Design fluency for frontend development. 1 skill with 24 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.
1 skill · 4 agents · hooks
Recommended: all published HyperFrames skills in one versioned bundle. Create and render videos from HTML: the contract, film, captions, overlays, motion and look references, the CLI, the registry, media, Figma, slideshows and Remotion ports.
22 skills
Project Anatole: an optional, learning watchdog for unattended agents (OWASP-mapped rules, a per-project baseline, learn / notify / enforce modes). Default off.
Editorial diagrams in your brand, as self-contained HTML and SVG. Architecture, flowcharts, sequence, state machines, ER and database schemas, timelines, swimlanes, org charts, Gantt, Wardley maps, user journeys, service blueprints, UML class, lifecycle phase maps, and charts from bar, line and scatter to Sankey, treemap and heatmap, plus many more. Redraws draw.io, Mermaid, Excalidraw and PlantUML files. Exports SVG and PNG.
1 skill · 7 commands
This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.