[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KKHWYTJSKE8AZPBC4PMP9M":3,"skill-same:01M6KKHWYTJSKE8AZPBC4PMP9M":66},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":34,"linkOnly":35,"markdownContent":36,"markdownBody":37,"frontMatter":38,"refName":39,"commitSha":40,"skillDirectory":41,"forksCount":13,"repositoryHtmlUrl":42,"repositoryHomepageUrl":6,"ownerHtmlUrl":43,"ownerBlogUrl":6,"ownerDescription":44,"updatedAt":45,"install":46,"resources":59},"01M6KKHWYTJSKE8AZPBC4PMP9M","safe-css-append",null,"Safely append CSS styles from one file to another by identifying missing rules, adapting CSS variables, and verifying changes","AG064\u002FOpenSpace","AG064","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F184930299?v=4","01M6KHVFG7TB73NHX3RDYSTMH2","01M6KHVFMM7XA2PZA9Z83PHS3V",0,"MIT","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fsafe-css-append\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33],"css","safe","append","safe css append","file","Rules","missing","css variables","styles","Variables","changes","2026-11-10 10:12:30",false,"---\nname: safe-css-append\ndescription: Safely append CSS styles from one file to another by identifying missing rules, adapting CSS variables, and verifying changes\n---\n\n# Safe CSS Append Workflow\n\nThis 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.\n\n## When to Use This Skill\n\n- Migrating styles between projects\n- Copying component styles while preserving existing rules\n- Adding new CSS rules without duplicating or conflicting with existing styles\n- Adapting styles to use a different set of CSS variables\n\n## Workflow Steps\n\n### 1. Read and Analyze Source CSS\n\nFirst, examine the source CSS file to identify the selectors and rules you want to transfer:\n\n```bash\n# Read the source CSS file\ncat \u002Fpath\u002Fto\u002Fsource\u002Fstyles.css\n\n# Identify specific selectors if needed\ngrep \"selector-pattern\" \u002Fpath\u002Fto\u002Fsource\u002Fstyles.css\n```\n\n**Document:**\n- Target selectors (e.g., `.panel-tab`, `.header-nav`)\n- CSS variables used (e.g., `--primary-color`, `--spacing-unit`)\n- Complete rule sets for each selector\n\n### 2. Read and Check Destination CSS\n\nExamine the destination file to understand existing rules and avoid duplication:\n\n```bash\n# Read the destination CSS file\ncat \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css\n\n# Check if specific selectors already exist\ngrep \"selector-name\" \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css\n\n# Check for existing CSS variables\ngrep \"^[[:space:]]*--\" \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css | head -20\n```\n\n**Identify:**\n- Existing selectors that might conflict\n- CSS variable naming conventions in the destination\n- Any existing rules for the target selectors\n\n### 3. Identify Missing Styles and Required Adaptations\n\nCompare source and destination to determine:\n- Which selectors are completely missing\n- Which properties are missing from existing selectors\n- How CSS variables need to be mapped (source → destination)\n\n**Example variable mapping:**\n```\nSource: --panel-bg → Destination: --background-secondary\nSource: --text-primary → Destination: --color-text-primary\nSource: --border-radius → Keep as-is (if already defined in destination)\n```\n\n### 4. Prepare Adapted CSS Content\n\nCreate the CSS content to append, adapting variables as needed:\n\n```css\n\u002F* Example adapted CSS *\u002F\n.new-selector {\n    background-color: var(--background-secondary);  \u002F* was --panel-bg *\u002F\n    color: var(--color-text-primary);               \u002F* was --text-primary *\u002F\n    border-radius: var(--border-radius);            \u002F* unchanged *\u002F\n    padding: 8px 16px;\n}\n\n.existing-selector {\n    \u002F* Only add missing properties, not the entire rule *\u002F\n    new-property: value;\n}\n```\n\n### 5. Safely Append to Destination\n\nUse append operations (never overwrite) to add the new styles:\n\n```bash\n# Append new CSS rules\ncat >> \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css \u003C\u003C 'EOF'\n\n\u002F* Added styles from source project *\u002F\n.selector-name {\n    property: value;\n    variable-property: var(--adapted-variable);\n}\nEOF\n```\n\n**Best practices:**\n- Add a comment indicating the source or purpose\n- Include a blank line before the new content for readability\n- Use `>>` (append) never `>` (overwrite)\n\n### 6. Verify the Changes\n\nConfirm that the styles were added correctly:\n\n```bash\n# View the last N lines to see appended content\ntail -n 20 \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css\n\n# Verify specific selectors were added\ngrep \"new-selector-name\" \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css\n\n# Check the complete file if needed\ncat \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css | tail -n 50\n```\n\n## Complete Example\n\nHere's a full example workflow:\n\n```bash\n# 1. Read source CSS and identify target\ncat project-a\u002Fcomponents.css | grep -A 10 \".button-primary\"\n\n# 2. Check destination for conflicts\ngrep \".button-primary\" project-b\u002Fmain.css\ngrep \"^[[:space:]]*--btn-\" project-b\u002Fmain.css\n\n# 3. Identify that .button-primary is missing, and variables need mapping:\n#    --btn-color → --primary-color (exists in destination)\n#    --btn-padding → create inline value\n\n# 4. Append adapted styles\ncat >> project-b\u002Fmain.css \u003C\u003C 'EOF'\n\n\u002F* Button styles from project-a *\u002F\n.button-primary {\n    background-color: var(--primary-color);\n    padding: 10px 20px;\n    border-radius: 4px;\n    font-weight: 600;\n}\nEOF\n\n# 5. Verify\ntail -n 10 project-b\u002Fmain.css\ngrep \".button-primary\" project-b\u002Fmain.css\n```\n\n## Safety Checklist\n\n- [ ] Source file read and analyzed\n- [ ] Destination file checked for existing rules\n- [ ] Missing styles identified\n- [ ] CSS variables mapped correctly\n- [ ] Append operation used (not overwrite)\n- [ ] Changes verified with tail\u002Fgrep\n- [ ] No duplicate selectors created\n- [ ] All variable references exist in destination\n\n## Common Pitfalls\n\n1. **Overwriting instead of appending**: Always use `>>`, never `>`\n2. **Variable mismatch**: Ensure all CSS variables exist in the destination or are properly defined\n3. **Duplicate selectors**: Check for existing rules before adding complete selector blocks\n4. **Missing verification**: Always verify changes after appending\n\n## Tips\n\n- Use `wc -l` before and after to confirm lines were added\n- Keep a mapping document for complex variable transformations\n- Consider using a temporary file to preview changes before appending\n- Group related selectors together when appending multiple rules","# Safe CSS Append Workflow\n\nThis 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.\n\n## When to Use This Skill\n\n- Migrating styles between projects\n- Copying component styles while preserving existing rules\n- Adding new CSS rules without duplicating or conflicting with existing styles\n- Adapting styles to use a different set of CSS variables\n\n## Workflow Steps\n\n### 1. Read and Analyze Source CSS\n\nFirst, examine the source CSS file to identify the selectors and rules you want to transfer:\n\n```bash\n# Read the source CSS file\ncat \u002Fpath\u002Fto\u002Fsource\u002Fstyles.css\n\n# Identify specific selectors if needed\ngrep \"selector-pattern\" \u002Fpath\u002Fto\u002Fsource\u002Fstyles.css\n```\n\n**Document:**\n- Target selectors (e.g., `.panel-tab`, `.header-nav`)\n- CSS variables used (e.g., `--primary-color`, `--spacing-unit`)\n- Complete rule sets for each selector\n\n### 2. Read and Check Destination CSS\n\nExamine the destination file to understand existing rules and avoid duplication:\n\n```bash\n# Read the destination CSS file\ncat \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css\n\n# Check if specific selectors already exist\ngrep \"selector-name\" \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css\n\n# Check for existing CSS variables\ngrep \"^[[:space:]]*--\" \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css | head -20\n```\n\n**Identify:**\n- Existing selectors that might conflict\n- CSS variable naming conventions in the destination\n- Any existing rules for the target selectors\n\n### 3. Identify Missing Styles and Required Adaptations\n\nCompare source and destination to determine:\n- Which selectors are completely missing\n- Which properties are missing from existing selectors\n- How CSS variables need to be mapped (source → destination)\n\n**Example variable mapping:**\n```\nSource: --panel-bg → Destination: --background-secondary\nSource: --text-primary → Destination: --color-text-primary\nSource: --border-radius → Keep as-is (if already defined in destination)\n```\n\n### 4. Prepare Adapted CSS Content\n\nCreate the CSS content to append, adapting variables as needed:\n\n```css\n\u002F* Example adapted CSS *\u002F\n.new-selector {\n    background-color: var(--background-secondary);  \u002F* was --panel-bg *\u002F\n    color: var(--color-text-primary);               \u002F* was --text-primary *\u002F\n    border-radius: var(--border-radius);            \u002F* unchanged *\u002F\n    padding: 8px 16px;\n}\n\n.existing-selector {\n    \u002F* Only add missing properties, not the entire rule *\u002F\n    new-property: value;\n}\n```\n\n### 5. Safely Append to Destination\n\nUse append operations (never overwrite) to add the new styles:\n\n```bash\n# Append new CSS rules\ncat >> \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css \u003C\u003C 'EOF'\n\n\u002F* Added styles from source project *\u002F\n.selector-name {\n    property: value;\n    variable-property: var(--adapted-variable);\n}\nEOF\n```\n\n**Best practices:**\n- Add a comment indicating the source or purpose\n- Include a blank line before the new content for readability\n- Use `>>` (append) never `>` (overwrite)\n\n### 6. Verify the Changes\n\nConfirm that the styles were added correctly:\n\n```bash\n# View the last N lines to see appended content\ntail -n 20 \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css\n\n# Verify specific selectors were added\ngrep \"new-selector-name\" \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css\n\n# Check the complete file if needed\ncat \u002Fpath\u002Fto\u002Fdestination\u002Fstyles.css | tail -n 50\n```\n\n## Complete Example\n\nHere's a full example workflow:\n\n```bash\n# 1. Read source CSS and identify target\ncat project-a\u002Fcomponents.css | grep -A 10 \".button-primary\"\n\n# 2. Check destination for conflicts\ngrep \".button-primary\" project-b\u002Fmain.css\ngrep \"^[[:space:]]*--btn-\" project-b\u002Fmain.css\n\n# 3. Identify that .button-primary is missing, and variables need mapping:\n#    --btn-color → --primary-color (exists in destination)\n#    --btn-padding → create inline value\n\n# 4. Append adapted styles\ncat >> project-b\u002Fmain.css \u003C\u003C 'EOF'\n\n\u002F* Button styles from project-a *\u002F\n.button-primary {\n    background-color: var(--primary-color);\n    padding: 10px 20px;\n    border-radius: 4px;\n    font-weight: 600;\n}\nEOF\n\n# 5. Verify\ntail -n 10 project-b\u002Fmain.css\ngrep \".button-primary\" project-b\u002Fmain.css\n```\n\n## Safety Checklist\n\n- [ ] Source file read and analyzed\n- [ ] Destination file checked for existing rules\n- [ ] Missing styles identified\n- [ ] CSS variables mapped correctly\n- [ ] Append operation used (not overwrite)\n- [ ] Changes verified with tail\u002Fgrep\n- [ ] No duplicate selectors created\n- [ ] All variable references exist in destination\n\n## Common Pitfalls\n\n1. **Overwriting instead of appending**: Always use `>>`, never `>`\n2. **Variable mismatch**: Ensure all CSS variables exist in the destination or are properly defined\n3. **Duplicate selectors**: Check for existing rules before adding complete selector blocks\n4. **Missing verification**: Always verify changes after appending\n\n## Tips\n\n- Use `wc -l` before and after to confirm lines were added\n- Keep a mapping document for complex variable transformations\n- Consider using a temporary file to preview changes before appending\n- Group related selectors together when appending multiple rules",{"name":5,"description":7},"main","ff671ef61ed6587c49bd54c81cdc751c0b99e363","showcase\u002Fskills\u002Fsafe-css-append","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace","https:\u002F\u002Fgithub.com\u002FAG064","AG064, E.Mi.\r\n\r\nA person who thinks all the time, yet all they have to think is nothing. I want to improve the world and work on open source projects","2026-10-08 06:53:48",{"source":8,"skillName":5,"commands":47,"prompt":57,"zipAvailable":58},[48,51,54],{"tool":49,"command":50},"npx","npx skills add AG064\u002FOpenSpace --skill safe-css-append",{"tool":52,"command":53},"bunx","bunx skills add AG064\u002FOpenSpace --skill safe-css-append",{"tool":55,"command":56},"pnpm","pnpm dlx skills add AG064\u002FOpenSpace --skill safe-css-append","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fsafe-css-append\u002FSKILL.md",true,[60],{"path":61,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":64,"sourceHtmlUrl":65},".skill_id","OTHER","其他",29,"https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fsafe-css-append\u002F.skill_id",[67,90,107,116,145,161],{"skillNo":68,"name":69,"nameZh":6,"description":70,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":71,"categories":72,"keywords":73,"publishedAt":34},"01M6KKMPWA0B5SCCH766F8M5EA","write-special-chars-ts-check","Workaround for write_file failures caused by special characters (apostrophes, backticks, template literals) using a Python heredoc script, plus a reliable TypeScript type-checking step that filters output to only the newly-written files to avoid being misled by pre-existing errors.","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fwrite-special-chars-ts-check\u002FSKILL.md",[],[74,75,76,77,78,79,80,81,82,83,84,85,86,87,27,88,89],"write special chars ts check","check","write","filters","Existing","type-checking","for","errors","script","output","type","files","only","template","python","typescript",{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":96,"publishedAt":34},"01M6KKMJXVBNVEY3TRK055F4A7","write-special-chars-readback","Workaround for write_file failures caused by special characters (apostrophes, backticks, template literals) using a Python heredoc script, with mandatory post-write verification via read_file and cleanup of \u002Ftmp helper scripts.","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fwrite-special-chars-readback\u002FSKILL.md",[],[97,98,76,87,99,100,27,88,101,102,103,104,105,80,82,106],"readback","write special chars readback","cleanup","read","scripts","verification","via","post","helper","with",{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":113,"publishedAt":34},"01M6KKMEGX9M9NC105J0W3Q5B9","write-special-chars-heredoc","Workaround for write_file failures caused by special characters (apostrophes, backticks, template literals) by using a Python heredoc script executed via shell.","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fwrite-special-chars-heredoc\u002FSKILL.md",[],[76,114,88,80,103,87,115,27,82],"write special chars heredoc","shell",{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":127,"publishedAt":34},"01M6KKM8EJ2AATVHZBNB916WT0","worldmonitor-reference","Curated architecture index of the WorldMonitor open-source dashboard. Reference for extracting patterns — vanilla TypeScript, Panel class hierarchy, service layer, CSS grid, API edge functions, refresh scheduler, and 60+ data source integrations.","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fworldmonitor-reference\u002FSKILL.md",[122],{"categoryNo":123,"categoryName":124,"taxonomyType":125,"taxonomyTypeDesc":126},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[128,129,130,131,89,23,132,133,134,135,80,136,137,138,139,140,141,142,143,144],"reference","worldmonitor","worldmonitor reference","dashboard","architecture","extracting","hierarchy","source","layer","panel","patterns","edge functions","integrations","open","api","data","scheduler",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":151,"publishedAt":34},"01M6KKM39PHYK627F19GE2B9XN","virtual-list","Implement efficient virtual scrolling for rendering large lists with DOM recycling, chunk-based rendering, and performance optimizations","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fvirtual-list\u002FSKILL.md",[],[152,153,154,155,80,156,106,157,158,159,160],"virtual list","list","virtual","chunk","dom","rendering","recycling","implement","performance",{"skillNo":162,"name":163,"nameZh":6,"description":164,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":167,"publishedAt":34},"01M6KKKY7T2P61Y0JH54CDEJKQ","verify-directory-structure","Diagnose and resolve file access issues by first verifying the directory structure.","https:\u002F\u002Fgithub.com\u002FAG064\u002FOpenSpace\u002Fblob\u002Fmain\u002Fshowcase\u002Fskills\u002Fverify-directory-structure\u002FSKILL.md",[],[168,169,170,171,172,173,27,174,175,176],"directory","verify","structure","verify directory structure","access","first","issues","diagnose","file access"]