mcpField
M
modern-css-html

modern-css-html

github.com/kemiljkDesign & UI6167 installsUpdated 1w ago
Repository

About modern-css-html

A skill for developers writing HTML and CSS, focused on native platform features and support across Safari and Chrome/Edge. It provides implementation guidance, progressive-enhancement policies, and review checklists for common layout, color, and motion decisions.

Key features

  1. 01Native HTML elements and semantic structure
  2. 02Modern CSS layout and responsive patterns
  3. 03Color and theme guidance
  4. 04Animation and scroll-driven effects
  5. 05Browser support and fallback policy

Use cases

  1. 01Choose HTML elements for forms and controls
  2. 02Build responsive layouts and motion with CSS
  3. 03Plan fallbacks for newer CSS features

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/kemiljk/skills --skill modern-css-html

After installing, type/modern-css-htmlin Claude Code to confirm it loaded.

Bundled filesreferences/features.mdreferences/recipes.md

Details

From the project README

Modern CSS & HTML

Write CSS and HTML with current platform features. Prefer native materials over legacy hacks and unnecessary JavaScript.

Composition with other skills

  • This skill owns native implementation choices.
  • fluid-design owns interaction feel when physics, interruption, or gestures exceed CSS.
  • semantic-html-first owns element and ARIA boundaries.
  • If a native CSS/HTML feature can meet the requirement with acceptable support, use it.

Browser support policy

Target features available in both WebKit (Safari) and Blink (Chrome/Edge) unless the task explicitly allows a single-engine experiment.

  • Widely available in both engines: ship as default.
  • Newly available in both: ship with @supports / progressive enhancement.
  • Single-engine or unstable: mention as optional; provide a cross-engine path.

Do not hardcode volatile global percentage figures in recommendations. Re-check support when unsure, and encode the decision as "both engines / enhance / fallback".

Core defaults

HTML
  • Use native elements (button, a, details, dialog, select, form controls) before ARIA widgets.
  • Prefer semantic structure (main, nav, section, headings) over div soup.
  • Use Popover API + CSS Anchor Positioning before custom floating stacks when support allows.
Layout
  • gap over margin hacks; inset over four physical offsets; aspect-ratio over padding hacks.
  • 100dvh for mobile full-height; logical properties for direction-aware spacing.
  • Container queries for component responsiveness; range syntax for media queries.
  • subgrid, grid-template-areas, position: sticky, scroll snapping when they replace JS.
Colour and theme
  • Build palettes in oklch().
  • Derive states with color-mix() and relative colour syntax.
  • Prefer light-dark() with color-scheme over duplicated scheme blocks.
Motion
  • Animate translate, rotate, scale, and opacity preferentially.
  • Use @starting-style and transition-behavior: allow-discrete for entry/exit where supported.
  • Prefer CSS scroll-driven timelines over Intersection Observer class toggles when support allows.
  • Defer to fluid-design for springs, gestures, and interruptible physics.

Review checklist

  • Is there a native HTML element for this control?
  • Can layout/colour/motion be done in CSS without a library?
  • Are colours tokens/oklch rather than one-off hex?
  • Are fallbacks expressed with @supports where needed?
  • Does reduced-motion get a real alternative path?
  • Are physical left/right properties avoided for direction-sensitive UI?
  • If JS remains, is it covering a gap CSS/HTML cannot?

References

  • Read Task recipes when implementing a matching pattern.
  • Read Feature notes when choosing a feature or fallback. Load only the reference relevant to the current decision.

Comments

Markdown supported