luko248/css-first

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 | | Column wrapping | column-wrap + column-height | css-demos/layout/column-wrap.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 | | Container by name only | @container name without type | css-demos/container/named-queries.css | | Page transitions | View Transitions (+ element-scoped) | 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 | | Text wrap around shapes | shape-outside shape functions | css-demos/visual/shape-outside-functions.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 | | Text justification | text-justify | css-demos/visual/text-justify.css | | Focus outlines clipped | overflow: clip + clip-margin | css-demos/visual/overflow-clip-margin.css | | Underline ink skipping | text-decoration-skip-ink | css-demos/visual/text-decoration-skip-ink.css | | Crisp pixel-art scaling | image-rendering: crisp-edges | css-demos/visual/image-rendering.css | | Aligned / steady digits | font-variant-numeric: tabular-nums | css-demos/visual/font-variant-numeric.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 | | Roll back one rule | revert-rule | css-demos/specificity/revert-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/