Menu
Keeps agents up to date on modern CSS capabilities and replacements for legacy approaches. Use this when editing CSS files.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Communication behavior for leader agents who speak directly to users. Language matching, dense precision, fact verification, and clear-as-possible answers.
Shared dependency version catalog for dependency-installing and dependency-bumping agents. Load before adding, updating, or recommending dependencies.
Ultra-compressed English-only communication. Drops everything non-essential. Keeps full technical accuracy. No tiers, no modes.
Use this when you need to build, debug, capture, validate, and refine Godot games end to end with native GDScript, staged planning, scene builders, visual QA, and optional 3D asset workflows.
Convert a local document or image file to a Markdown file using Mistral OCR. Supports PDF, Office, OpenDocument, images, and text/code formats. Use when you need to extract text from a file into a clean Markdown file.
Complete ruleset for authoring developer directives in the Mycelium framework
| name | modern-css-snippets |
| description | Keeps agents up to date on modern CSS capabilities and replacements for legacy approaches. Use this when editing CSS files. |
Use this skill to stay current on modern CSS capabilities and replacements for legacy approaches. These are modern CSS patterns that replace legacy JavaScript-heavy or hacky CSS approaches. Sourced from modern-css.com.
no runtime inputs required. read the appropriate reference file based on the task context.
your outputs are textual guidance and code snippets:
references/@supports feature detection when neededif local references are not readable, view them online at https://github.com/digitalygo/opencode-setup/tree/main/skills/modern-css-snippets/references
| File | Topics Covered |
|---|---|
set-01.md | Layout patterns, color functions, typography, form validation, feature detection, resets, scoped styles |
set-02.md | Scroll behaviors, animations, snapping, dark mode, media queries, logical properties |
set-03.md | Accessibility, interactions, popovers, transforms, grid areas, nesting, custom functions |
| Feature | Support Status | Fallback Strategy |
|---|---|---|
:has() | Modern browsers | Progressive enhancement |
subgrid | Firefox, Safari | Grid fallback or @supports |
| Container queries | Modern browsers | Media query fallback |
| View Transitions API | Chrome/Edge | No fallback available |
oklch() | Modern browsers | Hex/HSL fallback |
popover API | Modern browsers | JavaScript polyfill |
@function | Experimental | CSS custom properties |
@supports (property: value) {
.element {
property: value;
}
}