CSS Generator, Editor and Enhancer Skill

Overview

This skill provides comprehensive CSS generation, editing, and enhancement capabilities. It helps users create, modify, optimize, and enhance CSS code with modern features and best practices.

When to Use This Skill

Use this skill when:

• Creating new CSS files from scratch based on user requirements
• Modifying or editing existing CSS properties and rules
• Enhancing CSS with modern features like variables, flexbox, grid, animations
• Optimizing CSS for performance and minification
• Generating CSS components and frameworks
• Converting design specifications to CSS code
• Validating and linting CSS code

Core Capabilities

1. CSS Generation

• Generate CSS from design specifications
• Create CSS for specific layouts (flexbox, grid, etc.)
• Generate responsive CSS based on breakpoints
• Create CSS animations and transitions
• Generate utility classes (similar to Tailwind)

2. CSS Editing

• Modify existing CSS properties
• Update CSS selectors and rules
• Refactor CSS for better organization
• Convert between different CSS syntaxes (e.g., traditional to CSS-in-JS)

3. CSS Enhancement

• Add modern CSS features to legacy code
• Implement CSS custom properties (variables)
• Enhance with flexbox and grid layouts
• Add modern typography and spacing
• Improve accessibility features

4. CSS Optimization

• Minify CSS for production
• Remove unused CSS rules
• Optimize CSS selectors for performance
• Combine and organize CSS files

Usage Patterns

For CSS Generation

When users ask for:

• "Create CSS for a responsive navigation bar"
• "Generate CSS for a card component"
• "Create a CSS grid layout for a dashboard"
• "Generate CSS animations for a button"

For CSS Editing

When users ask to:

• "Update the color scheme in this CSS file"
• "Change the font sizes in this stylesheet"
• "Modify the media queries for mobile"

For CSS Enhancement

When users want to:

• "Modernize this CSS with flexbox"
• "Add CSS variables to this stylesheet"
• "Improve the accessibility of this CSS"
• "Convert this to use CSS Grid instead of floats"

Available Tools

Scripts

• generate-css.js: Generate CSS based on specifications
• optimize-css.js: Minify and optimize CSS
• css-validator.js: Validate CSS syntax
• css-enhancer.js: Add modern features to existing CSS

Assets

• CSS templates for common components
• Predefined color palettes
• Responsive breakpoints configurations
• CSS framework boilerplates

Workflow

1. Analyze Requirements: Understand what CSS functionality is needed
2. Select Approach: Choose between generation, editing, or enhancement
3. Apply Best Practices: Use modern CSS features and performance considerations
4. Validate Output: Ensure CSS is valid and follows best practices
5. Optimize: Minify or enhance as needed

Best Practices

Modern CSS Features

• Use CSS custom properties (variables) for maintainability
• Implement flexbox and grid for layouts
• Use logical properties for internationalization
• Leverage modern units (rem, em, fr, etc.)
• Apply container queries where appropriate

Performance Considerations

• Minimize CSS file size
• Optimize selectors for performance
• Use efficient animation properties (transform, opacity)
• Consider critical CSS for above-the-fold content

Accessibility

• Ensure sufficient color contrast
• Use semantic CSS where appropriate
• Consider focus states and keyboard navigation
• Support reduced motion preferences