--- name: css-append-selector-verify-726b3ed9cce3 description: Safely append CSS styles from one file to another, with per-selector grep verification after every append to catch silent truncation that tail or wc-l alone would miss --- # Safe CSS Append Workflow (with Per-Selector Verification) 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 **every appended selector is individually confirmed present** — so silent heredoc truncation of long lines is caught immediately rather than being masked by a passing line-count check. ## 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: ```bash # 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: ```bash # Read the destination CSS file cat /path/to/destination/styles.css # Check if specific selectors already exist grep "selector-name" /path/to/destination/styles.css # Check for existing CSS variables grep "^[[:space:]]*--" /path/to/destination/styles.css | head -20 ``` **Identify:** - Existing selectors that might conflict - CSS variable naming conventions in the destination - Any existing rules for the target selectors ### 3. Identify Missing Styles and Required Adaptations Compare source and destination to determine: - Which selectors are completely missing - Which properties are missing from existing selectors - How CSS variables need to be mapped (source → destination) **Example variable mapping:** ``` Source: --panel-bg → Destination: --background-secondary Source: --text-primary → Destination: --color-text-primary Source: --border-radius → Keep as-is (if already defined in destination) ``` ### 4. Prepare Adapted CSS Content Create the CSS content to append, adapting variables as needed: ```css /* Example adapted CSS */ .new-selector { background-color: var(--background-secondary); /* was --panel-bg */ color: var(--color-text-primary); /* was --text-primary */ border-radius: var(--border-radius); /* unchanged */ padding: 8px 16px; } .existing-selector { /* Only add missing properties, not the entire rule */ new-property: value; } ``` ### 5. Safely Append to Destination Use append operations (never overwrite) to add the new styles. **Record the line count BEFORE appending** (use this in step 6): ```bash BEFORE=$(wc -l < /path/to/destination/styles.css) ``` Then append: ```bash cat >> /path/to/destination/styles.css << 'EOF' /* Added styles from source project */ .selector-name { property: value; variable-property: var(--adapted-variable); } EOF ``` **Best practices:** - Add a comment indicating the source or purpose - Include a blank line before the new content for readability - Use `>>` (append) never `>` (overwrite) ### 6. Verify the Changes (Per-Selector Grep + Tail) Confirm that the styles were added correctly. **Do not rely on `tail` or `wc -l` alone** — a heredoc can silently truncate an overly long line, leaving a selector block incomplete while the line count still increases. The required approach is to grep for *every* selector that was just appended. #### 6a. Line-count delta ```bash AFTER=$(wc -l < /path/to/destination/styles.css) echo "Lines added: $((AFTER - BEFORE))" ``` #### 6b. Per-selector grep — one grep per appended selector ```bash # Repeat for every selector appended in step 5 grep -n "\.selector-name" /path/to/destination/styles.css || echo "MISSING: .selector-name" grep -n "\.another-selector" /path/to/destination/styles.css || echo "MISSING: .another-selector" ``` If any grep prints "MISSING", the append was incomplete — re-run step 5. #### 6c. Automation helper for many selectors If many selectors were appended, use a loop: ```bash DEST=/path/to/destination/styles.css MISSING=0 for selector in \ ".selector-name" \ ".another-selector" \ ".yet-another"; do if ! grep -q "$selector" "$DEST"; then echo "MISSING SELECTOR: $selector" MISSING=$((MISSING + 1)) fi done if [ "$MISSING" -gt 0 ]; then echo "ERROR: $MISSING selector(s) not found — append may have been truncated." exit 1 else echo "All selectors verified present." fi ``` #### 6d. Visual spot-check ```bash tail -n 30 /path/to/destination/styles.css ``` **Why per-selector grep is required:** - `wc -l` increments even when a line is truncated — the count passes but content is lost. - `tail` shows recent lines but only reveals truncation if you happen to notice a cut-off line visually. - A `grep` for each selector name fails with a non-zero exit code if the selector is absent, making the failure explicit and automatable. ## Complete Example Here's a full example workflow: ```bash # 1. Read source CSS and identify target cat project-a/components.css | grep -A 10 ".button-primary" # 2. Check destination for conflicts grep ".button-primary" project-b/main.css grep "^[[:space:]]*--btn-" project-b/main.css # 3. Identify that .button-primary is missing, and variables need mapping: # --btn-color → --primary-color (exists in destination) # --btn-padding → create inline value # 4. Record line count before append BEFORE=$(wc -l < project-b/main.css) # 5. Append adapted styles cat >> project-b/main.css << 'EOF' /* Button styles from project-a */ .button-primary { background-color: var(--primary-color); padding: 10px 20px; border-radius: 4px; font-weight: 600; } EOF # 6a. Line-count delta AFTER=$(wc -l < project-b/main.css) echo "Lines before: $BEFORE | Lines after: $AFTER | Added: $((AFTER - BEFORE))" # 6b. Per-selector grep — catches truncation that wc -l and tail miss grep -n "\.button-primary" project-b/main.css \ && echo "OK: .button-primary" \ || echo "MISSING: .button-primary — possible truncation!" # 6c. Visual spot-check tail -n 10 project-b/main.css ``` ## Safety Checklist - [ ] Source file read and analyzed - [ ] Destination file checked for existing rules - [ ] Missing styles identified - [ ] CSS variables mapped correctly - [ ] Append operation used (not overwrite) - [ ] Every appended selector individually confirmed with grep (not just tail/wc -l) - [ ] Automation loop (or per-selector greps) returned zero missing selectors - [ ] No duplicate selectors created - [ ] All variable references exist in destination ## Common Pitfalls 1. **Overwriting instead of appending**: Always use `>>`, never `>` 2. **Variable mismatch**: Ensure all CSS variables exist in the destination or are properly defined 3. **Duplicate selectors**: Check for existing rules before adding complete selector blocks 4. **Incomplete verification**: Always grep for every appended selector by name — `tail` and `wc -l` do not detect mid-block truncation 5. **Heredoc line-length truncation**: Very long CSS property values or data URIs inside a heredoc can be silently cut. If a line is extremely long, use a temporary file approach instead (see Tips) ## Tips - Use `wc -l` before and after as a *supplementary* sanity check, but never as the sole verification - Collect all selector names appended in a shell array at write time, then loop over them in the verification step — this eliminates the risk of forgetting to check a selector - Keep a mapping document for complex variable transformations - For very long lines (e.g., embedded SVGs or data URIs), write the CSS to a temp file first and use `cat tmpfile >> dest.css` rather than a heredoc; then grep-verify as normal - Group related selectors together when appending multiple rules --- Source attribution: AG064 Original project: https://github.com/AG064/OpenSpace/blob/ff671ef61ed6587c49bd54c81cdc751c0b99e363/showcase/skills/css-append-selector-verify/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Mega AI Hub. ## Upstream license notice MIT License Copyright (c) 2026 ✨Data Intelligence Lab@HKU✨ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Mega AI Hub resource metadata Creator / publisher: AG064 Original project: https://github.com/AG064/OpenSpace/blob/ff671ef61ed6587c49bd54c81cdc751c0b99e363/showcase/skills/css-append-selector-verify/SKILL.md Attribution basis: Source repository record Fields of work: Design, Development & Engineering Roles: Frontend Developer, Product Designer, UX Designer Specialties: Cross Platform, Design, Frontend Tools: Tool not specified Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: 5ce5cf4522445e2b66bf012f0cf6703f5f646ac32e8fa78f29b3cbbf1bb18e9f