메뉴
Keeps agents up to date on modern CSS capabilities and replacements for legacy approaches. Use this when editing CSS files.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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;
}
}