Css Modern

CSS Modern Features Skill

Master cutting-edge CSS features: custom properties, container queries, :has(), @layer, and native CSS nesting.

Overview

This skill provides atomic, focused guidance on modern CSS features (2022-2025) with browser compatibility information and fallback strategies.

Skill Metadata

Usage

Skill("css-modern")

Parameter Schema

parameters:
  feature:
    type: string
    required: true
    enum: [custom-properties, container-queries, has-selector, layers, nesting, logical-properties]
    description: Modern CSS feature to explore

  include_fallback:
    type: boolean
    required: false
    default: true
    description: Include browser fallback patterns

  browser_support:
    type: boolean
    required: false
    default: true
    description: Include compatibility information

validation:
  - rule: feature_required
    message: "feature parameter is required"
  - rule: valid_feature
    message: "feature must be one of: custom-properties, container-queries..."

Topics Covered

Custom Properties (CSS Variables)

• Declaration and inheritance
• Computed values with calc()
• Theming systems
• JavaScript integration

Container Queries

• container-type and container-name
• @container syntax
• Container query units (cqi, cqw)
• Style queries

:has() Selector

• Parent selection patterns
• Form state styling
• Previous sibling selection
• Performance considerations

@layer (Cascade Layers)

• Layer definition and ordering
• Third-party CSS management
• Specificity without !important

CSS Nesting

• Native nesting syntax
• & selector usage
• Media queries in nesting

Retry Logic

retry_config:
  max_attempts: 3
  backoff_type: exponential
  initial_delay_ms: 1000
  max_delay_ms: 10000

Logging & Observability

logging:
  entry_point: skill_invoked
  exit_point: skill_completed
  metrics:
    - invocation_count
    - feature_usage
    - fallback_requests

Quick Reference

Custom Properties

/* Definition */
:root {
  --color-primary: #3b82f6;
  --spacing-md: 1rem;
}

/* Usage */
.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
}

/* With fallback */
color: var(--text-color, black);

/* With calc() */
margin: calc(var(--spacing-md) * 2);

Container Queries

/* Define container */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* Query container */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

/* Container units */
.card-title {
  font-size: clamp(1rem, 5cqi, 2rem);
}

:has() Selector

/* Style parent based on child */
.card:has(.card-image) {
  padding-top: 0;
}

/* Form validation styling */
.form:has(:invalid) .submit-btn {
  opacity: 0.5;
  pointer-events: none;
}

/* Style previous sibling */
.item:has(+ .item:hover) {
  transform: translateX(-5px);
}

/* Check for empty state */
.list:not(:has(li)) {
  display: none;
}

@layer

/* Define layer order */
@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after {
    margin: 0;
    box-sizing: border-box;
  }
}

@layer components {
  .button {
    padding: 0.5rem 1rem;
  }
}

@layer utilities {
  .hidden { display: none !important; }
}

CSS Nesting

.card {
  background: white;
  border-radius: 8px;

  & .card-header {
    padding: 1rem;
    border-bottom: 1px solid #eee;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Browser Support (2025)

Fallback Patterns

@supports Usage

/* Feature detection */
@supports (container-type: inline-size) {
  .wrapper {
    container-type: inline-size;
  }
}

/* Fallback for :has() */
@supports not selector(:has(*)) {
  /* JavaScript-based alternative styles */
  .card.has-image {
    padding-top: 0;
  }
}

Progressive Enhancement

/* Base experience */
.card {
  padding: 1rem;
}

/* Enhanced for modern browsers */
@supports (container-type: inline-size) {
  .card-wrapper {
    container-type: inline-size;
  }

  @container (min-width: 400px) {
    .card {
      display: grid;
    }
  }
}

Test Template

describe('CSS Modern Skill', () => {
  test('validates feature parameter', () => {
    expect(() => skill({ feature: 'invalid' }))
      .toThrow('feature must be one of: custom-properties...');
  });

  test('includes fallback when flag is true', () => {
    const result = skill({ feature: 'container-queries', include_fallback: true });
    expect(result).toContain('@supports');
  });

  test('includes browser support when flag is true', () => {
    const result = skill({ feature: 'has-selector', browser_support: true });
    expect(result).toContain('Chrome');
    expect(result).toContain('Safari');
  });
});

Error Handling

Related Skills

• css-fundamentals (selector knowledge)
• css-flexbox-grid (container query layouts)
• css-performance (feature impact on performance)

Css Modern Guide

Overview

This guide provides comprehensive documentation for the css-modern skill in the custom-plugin-css plugin.

Category: General

Quick Start

Prerequisites

• Familiarity with general concepts
• Development environment set up
• Plugin installed and configured

Basic Usage

# Invoke the skill
claude "css-modern - [your task description]"

# Example
claude "css-modern - analyze the current implementation"

Core Concepts

Key Principles

1. Consistency - Follow established patterns 2. Clarity - Write readable, maintainable code 3. Quality - Validate before deployment

Best Practices

• Always validate input data
• Handle edge cases explicitly
• Document your decisions
• Write tests for critical paths

Common Tasks

Task 1: Basic Implementation

# Example implementation pattern
def implement_css_modern(input_data):
    """
    Implement css-modern functionality.

    Args:
        input_data: Input to process

    Returns:
        Processed result
    """
    # Validate input
    if not input_data:
        raise ValueError("Input required")

    # Process
    result = process(input_data)

    # Return
    return result

Task 2: Advanced Usage

For advanced scenarios, consider:

• Configuration customization via assets/config.yaml
• Validation using scripts/validate.py
• Integration with other skills

Troubleshooting

Common Issues

Related Resources

• SKILL.md - Skill specification
• config.yaml - Configuration options
• validate.py - Validation script

---

Last updated: 2025-12-30

Css Modern Patterns

Design Patterns

Pattern 1: Input Validation

Always validate input before processing:

def validate_input(data):
    if data is None:
        raise ValueError("Data cannot be None")
    if not isinstance(data, dict):
        raise TypeError("Data must be a dictionary")
    return True

Pattern 2: Error Handling

Use consistent error handling:

try:
    result = risky_operation()
except SpecificError as e:
    logger.error(f"Operation failed: {e}")
    handle_error(e)
except Exception as e:
    logger.exception("Unexpected error")
    raise

Pattern 3: Configuration Loading

Load and validate configuration:

import yaml

def load_config(config_path):
    with open(config_path) as f:
        config = yaml.safe_load(f)
    validate_config(config)
    return config

Anti-Patterns to Avoid

❌ Don't: Swallow Exceptions

# BAD
try:
    do_something()
except:
    pass

✅ Do: Handle Explicitly

# GOOD
try:
    do_something()
except SpecificError as e:
    logger.warning(f"Expected error: {e}")
    return default_value

Category-Specific Patterns: General

Recommended Approach

1. Start with the simplest implementation 2. Add complexity only when needed 3. Test each addition 4. Document decisions

Common Integration Points

• Configuration: assets/config.yaml
• Validation: scripts/validate.py
• Documentation: references/GUIDE.md

---

Pattern library for css-modern skill