[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EB3688FNCJ02FD4ABCJ8EF":3,"skill-same:01M6EB3688FNCJ02FD4ABCJ8EF":59},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":31,"linkOnly":32,"markdownContent":33,"markdownBody":34,"frontMatter":35,"refName":36,"commitSha":37,"skillDirectory":38,"forksCount":39,"repositoryHtmlUrl":40,"repositoryHomepageUrl":41,"ownerHtmlUrl":42,"ownerBlogUrl":6,"ownerDescription":43,"updatedAt":44,"install":45,"resources":58},"01M6EB3688FNCJ02FD4ABCJ8EF","angular-performance",null,"Optimization techniques including OnPush, @defer, and Image Optimization. Use when optimizing Angular rendering, deferring blocks, or improving Core Web Vitals. (triggers: ChangeDetectionStrategy.OnPush, @defer, NgOptimizedImage, runOutsideAngular, OnPush)","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FHoangNguyen0403\u002Fagent-skills-standard\u002Fangular-performance\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30],"performance","angular","angular performance","image","web","core","Optimization","core web vitals","use","triggers","web vitals","rendering","2026-11-10 10:12:30",false,"---\nname: angular-performance\ndescription: 'Optimization techniques including OnPush, @defer, and Image Optimization. Use when optimizing Angular rendering, deferring blocks, or improving Core Web Vitals. (triggers: ChangeDetectionStrategy.OnPush, @defer, NgOptimizedImage, runOutsideAngular, OnPush)'\n---\n\n# Performance\n\n## **Priority: P1 (HIGH)**\n\n## Principles\n\n- **OnPush**: Always use **ChangeDetectionStrategy.OnPush** on all components. Components should only update when **Signals for state** change or Inputs change.\n- **Deferrable Views**: Use **@defer (on viewport)** to lazy load heavy components\u002Fchunks below the fold. Use triggers: **on interaction**, **on idle**, **when condition**. @defer creates a separate **lazy-loaded chunk** automatically. Use **@placeholder** { \u003CSpinner \u002F> } for loading states.\n- **Images**: Import **NgOptimizedImage** and replace \u003Cimg src='...'> with **\u003Cimg ngSrc='...'** width='800' height='600'>. Add **priority attribute** for LCP images. This enables lazy loading, responsive **srcset**, and preconnect hints automatically.\n\n## Guidelines\n\n- **Zoneless**: Prepare for Zoneless Angular by avoiding **Zone.runOutsideAngular** hacks. Use **Signals for all reactive state** instead. Opt into **provideExperimentalZonelessChangeDetection()**.\n- **TrackBy**: Always provide a **stable unique identifier** in loops using **@for (item of items; track item.id)** — the track expression **replaces trackBy**. This prevents Angular from destroying and recreating DOM nodes.\n\n## Anti-Patterns\n\n- **No function calls in template**: **{{ calculate() }} re-evaluates on every change detection cycle**. Use a **computed() signal** or pure pipes to avoid per-cycle re-evaluation as it **caches until dependencies change**.\n- **No logic in constructor**: Initialize state in `ngOnInit` or signal effects instead.\n\n## References\n\n- [Defer Usage](references\u002Fdefer-usage.md)\n\n","# Performance\n\n## **Priority: P1 (HIGH)**\n\n## Principles\n\n- **OnPush**: Always use **ChangeDetectionStrategy.OnPush** on all components. Components should only update when **Signals for state** change or Inputs change.\n- **Deferrable Views**: Use **@defer (on viewport)** to lazy load heavy components\u002Fchunks below the fold. Use triggers: **on interaction**, **on idle**, **when condition**. @defer creates a separate **lazy-loaded chunk** automatically. Use **@placeholder** { \u003CSpinner \u002F> } for loading states.\n- **Images**: Import **NgOptimizedImage** and replace \u003Cimg src='...'> with **\u003Cimg ngSrc='...'** width='800' height='600'>. Add **priority attribute** for LCP images. This enables lazy loading, responsive **srcset**, and preconnect hints automatically.\n\n## Guidelines\n\n- **Zoneless**: Prepare for Zoneless Angular by avoiding **Zone.runOutsideAngular** hacks. Use **Signals for all reactive state** instead. Opt into **provideExperimentalZonelessChangeDetection()**.\n- **TrackBy**: Always provide a **stable unique identifier** in loops using **@for (item of items; track item.id)** — the track expression **replaces trackBy**. This prevents Angular from destroying and recreating DOM nodes.\n\n## Anti-Patterns\n\n- **No function calls in template**: **{{ calculate() }} re-evaluates on every change detection cycle**. Use a **computed() signal** or pure pipes to avoid per-cycle re-evaluation as it **caches until dependencies change**.\n- **No logic in constructor**: Initialize state in `ngOnInit` or signal effects instead.\n\n## References\n\n- [Defer Usage](references\u002Fdefer-usage.md)\n\n",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FHoangNguyen0403\u002Fagent-skills-standard\u002Fangular-performance",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":46,"prompt":56,"zipAvailable":57},[47,50,53],{"tool":48,"command":49},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill angular-performance",{"tool":51,"command":52},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill angular-performance",{"tool":54,"command":55},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill angular-performance","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FHoangNguyen0403\u002Fagent-skills-standard\u002Fangular-performance\u002FSKILL.md",true,[],[60,74,84,93,99,106],{"skillNo":61,"name":62,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":70,"publishedAt":31},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[65],{"categoryNo":66,"categoryName":67,"taxonomyType":68,"taxonomyTypeDesc":69},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[71,72,73],"model","model hierarchy","model hierarchy skill",{"skillNo":75,"name":76,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":80,"publishedAt":31},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[79],{"categoryNo":66,"categoryName":67,"taxonomyType":68,"taxonomyTypeDesc":69},[81,82,83],"MCP","zoom","zoom mcp",{"skillNo":85,"name":86,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":31},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[90,91,92,82],"sdk","zoom apps sdk","apps",{"skillNo":94,"name":95,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":98,"publishedAt":31},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[95],{"skillNo":100,"name":101,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":105,"publishedAt":31},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[104],{"categoryNo":66,"categoryName":67,"taxonomyType":68,"taxonomyTypeDesc":69},[101],{"skillNo":107,"name":108,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":111,"publishedAt":31},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[108]]