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