safe-css-append

name	safe-css-append
description	Safely append CSS styles from one file to another by identifying missing rules, adapting CSS variables, and verifying changes

Safe CSS Append Workflow

This skill provides a systematic approach for safely appending CSS styles from a source file to a destination file. The workflow ensures no content is overwritten, CSS variables are properly adapted, and all changes are verified.

When to Use This Skill

• Migrating styles between projects
• Copying component styles while preserving existing rules
• Adding new CSS rules without duplicating or conflicting with existing styles
• Adapting styles to use a different set of CSS variables

Workflow Steps

1. Read and Analyze Source CSS

First, examine the source CSS file to identify the selectors and rules you want to transfer:

# Read the source CSS file
cat /path/to/source/styles.css

# Identify specific selectors if needed
grep "selector-pattern" /path/to/source/styles.css

Document:

• Target selectors (e.g., .panel-tab, .header-nav)
• CSS variables used (e.g., --primary-color, --spacing-unit)
• Complete rule sets for each selector

2. Read and Check Destination CSS

Examine the destination file to understand existing rules and avoid duplication:

# Read the destination CSS file
cat /path/to/destination/styles.css

# Check if specific selectors already exist
grep  /path/to/destination/styles.css


grep  /path/to/destination/styles.css |  -20