[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M729YCSG1STY2QPY4N7N46TY":3,"skill-same:01M729YCSG1STY2QPY4N7N46TY":47},{"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":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":30,"ownerDescription":31,"updatedAt":32,"install":33,"resources":46},"01M729YCSG1STY2QPY4N7N46TY","frontend-ui-engineering",null,"Build production-quality user interfaces with attention to accessibility, performance, responsiveness, and maintainability. Use for any UI work, component development, frontend features, or when the user mentions React, Vue, CSS, design systems, or user-facing interfaces.","itsual\u002Fagent-skills-collection","itsual","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F47685900?v=4","01M7291J4K9RE0EWMQB0JM3WFN","Arockia Liborious","01M7291J58T0363Q45MQP9KESY",7,"MIT","https:\u002F\u002Fgithub.com\u002Fitsual\u002Fagent-skills-collection\u002Fblob\u002Fmain\u002Fskills\u002Fengineering\u002Ffrontend-ui-engineering\u002FSKILL.md",[],[],"2026-11-10 16:53:17",false,"---\nname: frontend-ui-engineering\ndescription: >\n  Build production-quality user interfaces with attention to accessibility, performance, responsiveness, and maintainability.\n  Use for any UI work, component development, frontend features, or when the user mentions React, Vue, CSS, design systems, or user-facing interfaces.\n---\n\n# Frontend UI Engineering\n\n## Overview\n\nFrontend code is user-facing. Quality here directly affects perception of the entire product.\n\n## When to Use\n\n- Building or modifying UI components and pages\n- Implementing design system elements\n- Addressing accessibility, responsiveness, or frontend performance\n\n## Core Principles\n\n- Accessibility is not optional (semantic HTML, keyboard, ARIA, contrast)\n- Mobile-first \u002F responsive by default\n- Prefer composition and clear component boundaries\n- Avoid unnecessary re-renders and large bundles\n- Match the existing design system when one exists\n\n## Process\n\n1. Understand the user goal and interaction\n2. Check existing components \u002F design system before creating new ones\n3. Implement with semantic structure and accessibility in mind\n4. Handle loading, empty, and error states\n5. Verify keyboard navigation and basic screen reader behavior\n6. Check responsiveness at key breakpoints\n\n## Checklist\n\n- [ ] Semantic HTML elements used appropriately\n- [ ] Interactive elements are keyboard accessible\n- [ ] Color contrast meets WCAG AA at minimum\n- [ ] Loading \u002F empty \u002F error states exist\n- [ ] No obvious layout shift or overflow issues\n- [ ] Component API is clear and documented if shared\n\n## Verification\n\n- Visual and interaction review in the browser\n- Basic accessibility checks pass\n- No major performance red flags (large unnecessary JS, layout thrashing)\n","# Frontend UI Engineering\n\n## Overview\n\nFrontend code is user-facing. Quality here directly affects perception of the entire product.\n\n## When to Use\n\n- Building or modifying UI components and pages\n- Implementing design system elements\n- Addressing accessibility, responsiveness, or frontend performance\n\n## Core Principles\n\n- Accessibility is not optional (semantic HTML, keyboard, ARIA, contrast)\n- Mobile-first \u002F responsive by default\n- Prefer composition and clear component boundaries\n- Avoid unnecessary re-renders and large bundles\n- Match the existing design system when one exists\n\n## Process\n\n1. Understand the user goal and interaction\n2. Check existing components \u002F design system before creating new ones\n3. Implement with semantic structure and accessibility in mind\n4. Handle loading, empty, and error states\n5. Verify keyboard navigation and basic screen reader behavior\n6. Check responsiveness at key breakpoints\n\n## Checklist\n\n- [ ] Semantic HTML elements used appropriately\n- [ ] Interactive elements are keyboard accessible\n- [ ] Color contrast meets WCAG AA at minimum\n- [ ] Loading \u002F empty \u002F error states exist\n- [ ] No obvious layout shift or overflow issues\n- [ ] Component API is clear and documented if shared\n\n## Verification\n\n- Visual and interaction review in the browser\n- Basic accessibility checks pass\n- No major performance red flags (large unnecessary JS, layout thrashing)\n",{"name":5,"description":7},"main","8d2fd11b59496bfb3792e747e5519817e554e6cf","skills\u002Fengineering\u002Ffrontend-ui-engineering",1,"https:\u002F\u002Fgithub.com\u002Fitsual\u002Fagent-skills-collection","https:\u002F\u002Fgithub.com\u002Fitsual","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Farockialiborious\u002F","Data Science & Analytics Leader | Helping organizations rethink their data-driven decision making process | AI Storyteller","2026-07-22 23:04:48",{"source":8,"skillName":5,"commands":34,"prompt":44,"zipAvailable":45},[35,38,41],{"tool":36,"command":37},"npx","npx skills add itsual\u002Fagent-skills-collection --skill frontend-ui-engineering",{"tool":39,"command":40},"bunx","bunx skills add itsual\u002Fagent-skills-collection --skill frontend-ui-engineering",{"tool":42,"command":43},"pnpm","pnpm dlx skills add itsual\u002Fagent-skills-collection --skill frontend-ui-engineering","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fitsual\u002Fagent-skills-collection\u002Fblob\u002Fmain\u002Fskills\u002Fengineering\u002Ffrontend-ui-engineering\u002FSKILL.md",true,[],[48,56,63,70,77,85],{"skillNo":49,"name":50,"nameZh":6,"description":51,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":52,"categories":53,"keywords":54,"publishedAt":55},"01M7297PK9X4VZRN6HAD9A58M9","compliance-monitoring","Design compliance monitoring and testing programs that verify controls work in practice and surface issues before regulators do. Use when building monitoring plans, compliance testing, or continuous control monitoring.","https:\u002F\u002Fgithub.com\u002Fitsual\u002Fagent-skills-collection\u002Fblob\u002Fmain\u002Fskills\u002Fcompliance\u002Fcompliance-monitoring\u002FSKILL.md",[],[],"2026-11-10 16:53:54",{"skillNo":57,"name":58,"nameZh":6,"description":59,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":60,"categories":61,"keywords":62,"publishedAt":55},"01M7297KXVGGV1CH7CEHA62FAT","complaints-handling","Operate complaints-handling processes that meet regulatory standards — logging, timely resolution, root-cause analysis, and fair outcomes. Use when designing or improving regulated complaints frameworks or analyzing complaint themes for conduct risk.","https:\u002F\u002Fgithub.com\u002Fitsual\u002Fagent-skills-collection\u002Fblob\u002Fmain\u002Fskills\u002Fcompliance\u002Fcomplaints-handling\u002FSKILL.md",[],[],{"skillNo":64,"name":65,"nameZh":6,"description":66,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":67,"categories":68,"keywords":69,"publishedAt":55},"01M7297HXEX2PSHBEDVWRJC924","aml-kyc-basics","Apply AML\u002FKYC fundamentals — customer due diligence, monitoring, suspicious activity escalation, and recordkeeping — for financial crime compliance. Use when designing onboarding controls, transaction monitoring concepts, or AML program components in financial services.","https:\u002F\u002Fgithub.com\u002Fitsual\u002Fagent-skills-collection\u002Fblob\u002Fmain\u002Fskills\u002Fcompliance\u002Faml-kyc-basics\u002FSKILL.md",[],[],{"skillNo":71,"name":72,"nameZh":6,"description":73,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":76,"publishedAt":55},"01M7297G229RT4FXA2KW7EG2K6","ai-model-compliance","Apply compliance controls to AI and automated decision systems — transparency, fairness, human oversight, documentation, and regulatory alignment. Use when deploying AI in regulated processes (credit, fraud, customer decisions) or responding to AI governance expectations.","https:\u002F\u002Fgithub.com\u002Fitsual\u002Fagent-skills-collection\u002Fblob\u002Fmain\u002Fskills\u002Fcompliance\u002Fai-model-compliance\u002FSKILL.md",[],[],{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":83,"publishedAt":84},"01M729KEEE7VTT48V1J7YMS8GA","data-quality-management","Manage data quality end-to-end — dimensions, rules, remediation, and prevention — beyond one-off cleaning scripts. Use when building sustained data quality programs or fixing systemic accuracy, completeness, or consistency problems.","https:\u002F\u002Fgithub.com\u002Fitsual\u002Fagent-skills-collection\u002Fblob\u002Fmain\u002Fskills\u002Fdata-analytics\u002Fdata-quality-management\u002FSKILL.md",[],[],"2026-11-10 16:53:43",{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":84},"01M729K3VDSZC6TF67TYQ4Z8W9","data-lineage","Capture and use data lineage — where data comes from, how it transforms, and what depends on it — for impact analysis, debugging, and trust. Use when tracing metric origins, assessing change impact, or diagnosing broken pipelines.","https:\u002F\u002Fgithub.com\u002Fitsual\u002Fagent-skills-collection\u002Fblob\u002Fmain\u002Fskills\u002Fdata-analytics\u002Fdata-lineage\u002FSKILL.md",[],[]]