CSS First Agent Skill

An intelligent AI agent skill for providing context-aware, modern CSS-first solutions with semantic analysis and framework detection.

Description

This skill transforms any AI agent into a CSS-first expert that enforces zero-JavaScript solutions using cutting-edge CSS features (2021-2026). The agent analyzes user intent, detects project context, and provides intelligently ranked CSS suggestions with implementation guidance.

Core Capabilities:

Semantic Intent Recognition: Understands layout, animation, spacing, responsive, visual, interaction, stacking, and typography intents
Framework Detection: Automatically detects React, Vue, Angular, Svelte, Tailwind, Bootstrap, etc.
Logical-First Approach: Prioritizes writing-mode aware properties for internationalization
MDN Integration: Pulls live browser support data and baseline status
Intelligent Ranking: Scores suggestions by intent match, browser support, and framework compatibility

When to Use This Skill

Use this skill when:

User asks for UI implementation solutions
User needs to center elements, create layouts, add animations
User wants responsive design patterns
User asks about CSS properties or browser support
User needs modern CSS alternatives to JavaScript solutions

Live MDN Fetch Workflow

Use the live fetch workflow defined in references/live-mdn-fetch.md whenever Baseline status, newly available features, or current MDN content is requested.

Rules & Guidelines

All behavior rules are documented in references/rules/:

| Rule | File | Summary | | ------------------------ | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | | CSS-Only Enforcement | references/rules/css-only-enforcement.md | Always prioritize CSS over JavaScript | | Logical Properties First | references/rules/logical-properties-first.md | Use inline-size over width, etc. | | Modern CSS Features | references/rules/modern-css-features.md | Prioritize 2021-2025 features with baseline | | Semantic Intent Analysis | references/rules/semantic-intent-analysis.md | Detect user intent before suggesting solutions | | Framework Awareness | references/rules/framework-awareness.md | Auto-detect and adapt to project frameworks | | Browser Support | references/rules/browser-support-consideration.md | Always provide baseline status indicators | | Progressive Enhancement | references/rules/progressive-enhancement.md | Core functionality first, enhancements on top | | Browser Verification | references/rules/browser-verification.md | Use MCP servers / browser hooks to verify CSS |

CSS Demos

Production-ready CSS examples organized by category. See css-demos/INDEX.md for the full catalog with MDN links, baseline status, and browser support percentages.

Browser Support Levels

🟢 Widely Available (95%+): Safe for production use
🔵 Newly Available (85-94%): Recently stable, verify target browsers
🟡 Limited Availability (70-84%): Use with progressive enhancement
🟣 Experimental (<70%): Cutting-edge features, use cautiously

Quick Reference

| User Intent | CSS Solution | Demo File | | ------------------------ | ------------------------------- | ------------------------------------------------------ | | Center element | Flexbox / Grid | css-demos/layout/centering-logical.css | | Spacing | Logical Properties | css-demos/layout/logical-spacing.css | | Aligned nested grids | Subgrid | css-demos/layout/subgrid.css | | Parent selection | :has() | css-demos/layout/has-selector.css | | Component styles | CSS Nesting | css-demos/layout/css-nesting.css | | Masonry layout | Grid Lanes | css-demos/layout/grid-lanes-masonry.css | | z-index issues | isolation: isolate | css-demos/layout/isolation-stacking.css | | Fill width with margins | stretch | css-demos/layout/stretch-keyword.css | | Responsive layout | Media queries (range syntax) | css-demos/responsive/media-queries.css | | Feature detection | @supports | css-demos/responsive/supports-rule.css | | Full-height sections | Dynamic viewport units | css-demos/responsive/viewport-units.css | | Container responsive | Container size queries | css-demos/container/size-queries.css | | Component theming | Container style queries | css-demos/container/style-queries.css | | Sticky detection | Scroll state queries | css-demos/container/scroll-state-queries.css | | Tooltip arrow flip | Anchored container queries | css-demos/container/anchored-queries.css | | Page transitions | View Transitions (+ nested) | css-demos/animation/view-transitions.css | | Scroll effects | Scroll-driven animations | css-demos/animation/scroll-driven.css | | Scroll reveals | Scroll-triggered animations | css-demos/animation/scroll-triggered.css | | Entry/exit animation | @starting-style | css-demos/animation/starting-style.css | | Dark mode | light-dark() | css-demos/theming/light-dark-function.css | | Tooltips | Anchor Positioning | css-demos/positioning/anchor-positioning.css | | Carousel / Slider | CSS Carousel | css-demos/interaction/css-carousel.css | | Tabs / Scroll spy | CSS Carousel | css-demos/interaction/css-carousel.css | | Flip card / 3D tile | backface-visibility | css-demos/interaction/flip-card.css | | 3D scenes / Cubes | perspective + preserve-3d | css-demos/interaction/perspective-3d.css | | Popovers / Dropdowns | Popover API | css-demos/interaction/popover.css | | Hover tooltips (no JS) | Interest Invokers | css-demos/interaction/interest-invokers.css | | Touch vs pointer | Hover media queries | css-demos/interaction/hover-media-queries.css | | Scroll chaining | overscroll-behavior | css-demos/interaction/overscroll-behavior.css | | Fixed nav anchor offset | scroll-margin / scroll-padding | css-demos/interaction/scroll-margin-padding.css | | Highlight anchor target | :target / :focus-within | css-demos/interaction/target-focus-within.css | | Form validation | :user-valid/:user-invalid | css-demos/visual/form-validation.css | | Color variations | color-mix() | css-demos/visual/color-mix.css | | Color conversion | Relative color syntax | css-demos/visual/relative-colors.css | | Glassmorphism | backdrop-filter | css-demos/visual/backdrop-filter.css | | Adaptive text on bg | mix-blend-mode | css-demos/visual/mix-blend-mode.css | | Modern shapes | corner-shape | css-demos/visual/corner-shape.css | | Responsive clipping | clip-path: shape() | css-demos/visual/clip-path-shape.css | | Gap separators | column-rule / row-rule | css-demos/visual/gap-decorations.css | | Optical text centering | text-box-trim | css-demos/visual/text-box-trim.css | | Focus outlines clipped | overflow: clip + clip-margin | css-demos/visual/overflow-clip-margin.css | | Conditional values | if() | css-demos/functions/css-if-function.css | | Reusable CSS logic | @function | css-demos/functions/custom-functions.css | | Data-driven styles | Advanced attr() | css-demos/functions/advanced-attr.css | | Auto contrast text | contrast-color() | css-demos/functions/contrast-color.css | | Circular layout | sin() / cos() | css-demos/functions/trigonometric-functions.css | | Staggered animations | sibling-index() / sibling-count() | css-demos/functions/sibling-functions.css | | Cascade control | @layer | css-demos/specificity/cascade-layers.css | | Scoped styles | @scope | css-demos/specificity/scope-rule.css | | Custom select styling | appearance: base-select | css-demos/native-customization/customizable-select.css | | Reduced motion | prefers-reduced-motion | css-demos/accessibility/prefers-reduced-motion.css | | High contrast | prefers-contrast | css-demos/accessibility/prefers-reduced-motion.css | | Forced colors (Win HC) | forced-colors | css-demos/accessibility/prefers-reduced-motion.css |

css-first