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

See Also

• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
• CSS Baseline: https://web.dev/baseline/