[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EN53P9YS9ED10CJ3CS2EJG":3,"skill-same:01M6EN53P9YS9ED10CJ3CS2EJG":78},{"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":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":54,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":56,"updatedAt":57,"install":58,"resources":71},"01M6EN53P9YS9ED10CJ3CS2EJG","frontend-orchestrator",null,"Coordinates frontend development tasks (React, TypeScript, UI\u002FUX). Use when implementing user interfaces, components, state management, or visual features. Applies frontend-standard.md for quality gates.","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\u002Faiskillstore\u002Fmarketplace\u002Fbrownbull\u002Ffrontend-orchestrator\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"frontend orchestrator","orchestrator","frontend","ui","gates","visual","coordinates","frontend development","use","management","quality","ux","state","state management","development","tasks","quality gates","react","components","typescript","2026-11-10 10:12:30",false,"---\r\nname: frontend-orchestrator\r\ndescription: Coordinates frontend development tasks (React, TypeScript, UI\u002FUX). Use when implementing user interfaces, components, state management, or visual features. Applies frontend-standard.md for quality gates.\r\n---\r\n\r\n# Frontend Orchestrator Skill\r\n\r\n## Role\r\nActs as CTO-Frontend, managing all UI\u002FUX tasks, React components, state management, and visual testing.\r\n\r\n## Responsibilities\r\n\r\n1. **Component Management**\r\n   - Track component hierarchy\r\n   - Manage state dependencies\r\n   - Ensure design system compliance\r\n\r\n2. **Task Execution**\r\n   - Assign tasks to frontend skills\r\n   - Monitor visual test results\r\n   - Validate accessibility (WCAG AA)\r\n\r\n3. **Context Maintenance**\r\n   ```\r\n   ai-state\u002Factive\u002Ffrontend\u002F\r\n   ├── components.json    # Component registry\r\n   ├── routes.json       # Route definitions\r\n   ├── state.json        # State shape\r\n   └── tasks\u002F           # Active frontend tasks\r\n   ```\r\n\r\n## Skill Coordination\r\n\r\n### Available Frontend Skills\r\n- `react-component-skill` - Creates\u002Fupdates React components\r\n- `state-management-skill` - Redux\u002FContext updates\r\n- `route-config-skill` - React Router changes\r\n- `ui-test-skill` - Playwright visual tests\r\n- `style-skill` - Tailwind\u002FCSS updates\r\n\r\n### Context Package to Skills\r\n```yaml\r\ncontext:\r\n  task_id: \"task-001-auth\"\r\n  components:\r\n    existing: [\"LoginForm\", \"AuthContext\"]\r\n    design_system: [\"Button\", \"Input\", \"Card\"]\r\n  state:\r\n    current: \"auth: { user, token, loading }\"\r\n    available_actions: [\"login\", \"logout\", \"refresh\"]\r\n  standards:\r\n    - \"react-patterns.md\"\r\n    - \"accessibility-wcag.md\"\r\n  test_requirements:\r\n    visual: [\"all viewport sizes\", \"loading states\"]\r\n```\r\n\r\n## Task Processing Flow\r\n\r\n1. **Receive from Main Orchestrator**\r\n```json\r\n{\r\n  \"task_id\": \"task-001-auth\",\r\n  \"what\": \"Password reset form\",\r\n  \"where\": \"\u002Fsrc\u002Fcomponents\u002Fauth\u002F\"\r\n}\r\n```\r\n\r\n2. **Prepare Context**\r\n- Load current component state\r\n- Check design system components\r\n- Review past similar implementations\r\n\r\n3. **Assign to Skill**\r\n```json\r\n{\r\n  \"skill\": \"react-component-skill\",\r\n  \"action\": \"create\",\r\n  \"context\": \"[prepared context]\"\r\n}\r\n```\r\n\r\n4. **Monitor Execution**\r\n- Watch operations.log\r\n- Run visual tests via Playwright\r\n- Check accessibility\r\n\r\n5. **Validate Results**\r\n```yaml\r\nchecks:\r\n  ✅ Component renders\r\n  ✅ Form validation works\r\n  ✅ Error states display\r\n  ✅ Responsive on mobile\r\n  ✅ Keyboard navigable\r\n  ✅ Screen reader compatible\r\n```\r\n\r\n## Frontend-Specific Standards\r\n\r\n### Component Checklist\r\n- [ ] TypeScript types defined\r\n- [ ] Props documented\r\n- [ ] Error boundaries implemented\r\n- [ ] Loading states handled\r\n- [ ] Memoization where needed\r\n- [ ] Unit tests written\r\n- [ ] Visual tests passed\r\n\r\n### State Management Rules\r\n- Single source of truth\r\n- Immutable updates only\r\n- Actions are serializable\r\n- Computed values in selectors\r\n- No business logic in components\r\n\r\n## Integration Points\r\n\r\n### With Backend Orchestrator\r\n- API contract negotiation\r\n- Error format agreement\r\n- Loading state coordination\r\n\r\n### With Human-Docs\r\nUpdates `frontend-developer.md` with:\r\n- New components added\r\n- Routes modified\r\n- State shape changes\r\n- Common patterns to follow\r\n\r\n## Event Communication\r\n\r\n### Listening For\r\n```json\r\n{\r\n  \"event\": \"backend.api.updated\",\r\n  \"endpoint\": \"\u002Fapi\u002Fauth\u002Freset\",\r\n  \"changes\": [\"new response format\"]\r\n}\r\n```\r\n\r\n### Broadcasting\r\n```json\r\n{\r\n  \"event\": \"frontend.component.created\",\r\n  \"component\": \"PasswordResetForm\",\r\n  \"location\": \"\u002Fsrc\u002Fcomponents\u002Fauth\u002F\",\r\n  \"tests\": \"passed\",\r\n  \"coverage\": \"92%\"\r\n}\r\n```\r\n\r\n## Test Requirements\r\n\r\n### Every Frontend Task Must\r\n1. **Unit Tests** - Component logic\r\n2. **Integration Tests** - Component interactions\r\n3. **Visual Tests** - Playwright screenshots\r\n4. **Accessibility Tests** - WCAG AA compliance\r\n5. **Responsive Tests** - Mobile\u002Ftablet\u002Fdesktop\r\n6. **Performance Tests** - Lighthouse scores\r\n\r\n## Success Metrics\r\n\r\n- Visual test pass rate > 95%\r\n- Accessibility score > 90\r\n- Performance score > 80\r\n- Zero TypeScript errors\r\n- Component reuse > 60%\r\n\r\n## Common Issues & Solutions\r\n\r\n### Issue: \"Component re-renders too often\"\r\n**Solution:** Add memoization, check dependency arrays\r\n\r\n### Issue: \"State updates not reflecting\"\r\n**Solution:** Check immutability, verify reducer logic\r\n\r\n### Issue: \"Visual test flakiness\"\r\n**Solution:** Add wait conditions, stabilize animations\r\n\r\n## Anti-Patterns to Avoid\r\n\r\n❌ Business logic in components\r\n❌ Direct DOM manipulation\r\n❌ Inline styles (use Tailwind)\r\n❌ Skipping error boundaries\r\n❌ Ignoring accessibility\r\n❌ Creating mega-components","# Frontend Orchestrator Skill\r\n\r\n## Role\r\nActs as CTO-Frontend, managing all UI\u002FUX tasks, React components, state management, and visual testing.\r\n\r\n## Responsibilities\r\n\r\n1. **Component Management**\r\n   - Track component hierarchy\r\n   - Manage state dependencies\r\n   - Ensure design system compliance\r\n\r\n2. **Task Execution**\r\n   - Assign tasks to frontend skills\r\n   - Monitor visual test results\r\n   - Validate accessibility (WCAG AA)\r\n\r\n3. **Context Maintenance**\r\n   ```\r\n   ai-state\u002Factive\u002Ffrontend\u002F\r\n   ├── components.json    # Component registry\r\n   ├── routes.json       # Route definitions\r\n   ├── state.json        # State shape\r\n   └── tasks\u002F           # Active frontend tasks\r\n   ```\r\n\r\n## Skill Coordination\r\n\r\n### Available Frontend Skills\r\n- `react-component-skill` - Creates\u002Fupdates React components\r\n- `state-management-skill` - Redux\u002FContext updates\r\n- `route-config-skill` - React Router changes\r\n- `ui-test-skill` - Playwright visual tests\r\n- `style-skill` - Tailwind\u002FCSS updates\r\n\r\n### Context Package to Skills\r\n```yaml\r\ncontext:\r\n  task_id: \"task-001-auth\"\r\n  components:\r\n    existing: [\"LoginForm\", \"AuthContext\"]\r\n    design_system: [\"Button\", \"Input\", \"Card\"]\r\n  state:\r\n    current: \"auth: { user, token, loading }\"\r\n    available_actions: [\"login\", \"logout\", \"refresh\"]\r\n  standards:\r\n    - \"react-patterns.md\"\r\n    - \"accessibility-wcag.md\"\r\n  test_requirements:\r\n    visual: [\"all viewport sizes\", \"loading states\"]\r\n```\r\n\r\n## Task Processing Flow\r\n\r\n1. **Receive from Main Orchestrator**\r\n```json\r\n{\r\n  \"task_id\": \"task-001-auth\",\r\n  \"what\": \"Password reset form\",\r\n  \"where\": \"\u002Fsrc\u002Fcomponents\u002Fauth\u002F\"\r\n}\r\n```\r\n\r\n2. **Prepare Context**\r\n- Load current component state\r\n- Check design system components\r\n- Review past similar implementations\r\n\r\n3. **Assign to Skill**\r\n```json\r\n{\r\n  \"skill\": \"react-component-skill\",\r\n  \"action\": \"create\",\r\n  \"context\": \"[prepared context]\"\r\n}\r\n```\r\n\r\n4. **Monitor Execution**\r\n- Watch operations.log\r\n- Run visual tests via Playwright\r\n- Check accessibility\r\n\r\n5. **Validate Results**\r\n```yaml\r\nchecks:\r\n  ✅ Component renders\r\n  ✅ Form validation works\r\n  ✅ Error states display\r\n  ✅ Responsive on mobile\r\n  ✅ Keyboard navigable\r\n  ✅ Screen reader compatible\r\n```\r\n\r\n## Frontend-Specific Standards\r\n\r\n### Component Checklist\r\n- [ ] TypeScript types defined\r\n- [ ] Props documented\r\n- [ ] Error boundaries implemented\r\n- [ ] Loading states handled\r\n- [ ] Memoization where needed\r\n- [ ] Unit tests written\r\n- [ ] Visual tests passed\r\n\r\n### State Management Rules\r\n- Single source of truth\r\n- Immutable updates only\r\n- Actions are serializable\r\n- Computed values in selectors\r\n- No business logic in components\r\n\r\n## Integration Points\r\n\r\n### With Backend Orchestrator\r\n- API contract negotiation\r\n- Error format agreement\r\n- Loading state coordination\r\n\r\n### With Human-Docs\r\nUpdates `frontend-developer.md` with:\r\n- New components added\r\n- Routes modified\r\n- State shape changes\r\n- Common patterns to follow\r\n\r\n## Event Communication\r\n\r\n### Listening For\r\n```json\r\n{\r\n  \"event\": \"backend.api.updated\",\r\n  \"endpoint\": \"\u002Fapi\u002Fauth\u002Freset\",\r\n  \"changes\": [\"new response format\"]\r\n}\r\n```\r\n\r\n### Broadcasting\r\n```json\r\n{\r\n  \"event\": \"frontend.component.created\",\r\n  \"component\": \"PasswordResetForm\",\r\n  \"location\": \"\u002Fsrc\u002Fcomponents\u002Fauth\u002F\",\r\n  \"tests\": \"passed\",\r\n  \"coverage\": \"92%\"\r\n}\r\n```\r\n\r\n## Test Requirements\r\n\r\n### Every Frontend Task Must\r\n1. **Unit Tests** - Component logic\r\n2. **Integration Tests** - Component interactions\r\n3. **Visual Tests** - Playwright screenshots\r\n4. **Accessibility Tests** - WCAG AA compliance\r\n5. **Responsive Tests** - Mobile\u002Ftablet\u002Fdesktop\r\n6. **Performance Tests** - Lighthouse scores\r\n\r\n## Success Metrics\r\n\r\n- Visual test pass rate > 95%\r\n- Accessibility score > 90\r\n- Performance score > 80\r\n- Zero TypeScript errors\r\n- Component reuse > 60%\r\n\r\n## Common Issues & Solutions\r\n\r\n### Issue: \"Component re-renders too often\"\r\n**Solution:** Add memoization, check dependency arrays\r\n\r\n### Issue: \"State updates not reflecting\"\r\n**Solution:** Check immutability, verify reducer logic\r\n\r\n### Issue: \"Visual test flakiness\"\r\n**Solution:** Add wait conditions, stabilize animations\r\n\r\n## Anti-Patterns to Avoid\r\n\r\n❌ Business logic in components\r\n❌ Direct DOM manipulation\r\n❌ Inline styles (use Tailwind)\r\n❌ Skipping error boundaries\r\n❌ Ignoring accessibility\r\n❌ Creating mega-components",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fbrownbull\u002Ffrontend-orchestrator",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":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill frontend-orchestrator",{"tool":64,"command":65},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill frontend-orchestrator",{"tool":67,"command":68},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill frontend-orchestrator","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbrownbull\u002Ffrontend-orchestrator\u002FSKILL.md",true,[72],{"path":73,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":76,"sourceHtmlUrl":77},"skill-report.json","REFERENCE","参考文档",12801,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbrownbull\u002Ffrontend-orchestrator\u002Fskill-report.json",[79,91,101,110,116,123],{"skillNo":80,"name":81,"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":82,"categories":83,"keywords":87,"publishedAt":44},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[84],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[88,89,90],"model","model hierarchy","model hierarchy skill",{"skillNo":92,"name":93,"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":94,"categories":95,"keywords":97,"publishedAt":44},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[96],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},[98,99,100],"MCP","zoom","zoom mcp",{"skillNo":102,"name":103,"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":104,"categories":105,"keywords":106,"publishedAt":44},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[107,108,109,99],"sdk","zoom apps sdk","apps",{"skillNo":111,"name":112,"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":113,"categories":114,"keywords":115,"publishedAt":44},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[112],{"skillNo":117,"name":118,"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":119,"categories":120,"keywords":122,"publishedAt":44},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[121],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},[118],{"skillNo":124,"name":125,"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":126,"categories":127,"keywords":128,"publishedAt":44},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[125]]