[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"workflow-asset-0c9bea87":3,"seo:featured-workflow:0c9bea87-4d36-11f1-9bc6-00163e2b0d79:es":85,"workflow-related-asset-0c9bea87-0c9bea87-4d36-11f1-9bc6-00163e2b0d79":86},{"id":4,"uuid":5,"slug":6,"title":7,"description":8,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":13,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":15,"tags":22,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":29,"asset_kind":30,"target_tools":31,"install_mode":35,"entrypoint":19,"risk_profile":36,"dependencies":38,"verification":44,"agent_metadata":47,"agent_fit":60,"trust":72,"provenance":81,"created_at":83,"updated_at":84},3051,"0c9bea87-4d36-11f1-9bc6-00163e2b0d79","asset-0c9bea87","Arco Design — Comprehensive React UI Library by ByteDance","Arco Design is a React component library developed by ByteDance featuring 60+ components, a design token system, and built-in dark mode for building modern enterprise applications.","8a911193-3180-11f1-9bc6-00163e2b0d79","AI Open Source","",0,2,"en",[16],{"id":17,"step_order":18,"title":19,"description":11,"prompt_template":20,"variables":11,"depends_on":21,"expected_output":11},3614,1,"Arco Design Overview","# Arco Design — Comprehensive React UI Library by ByteDance\n\n## Quick Use\n```bash\nnpm install @arco-design\u002Fweb-react\n```\n```tsx\nimport React from 'react';\nimport { Button } from '@arco-design\u002Fweb-react';\nimport '@arco-design\u002Fweb-react\u002Fdist\u002Fcss\u002Farco.css';\nexport default () => \u003CButton type=\"primary\">Hello Arco\u003C\u002FButton>;\n```\n\n## Introduction\nArco Design is a design system and React component library created by ByteDance. It provides 60+ production-quality components with consistent styling, a flexible theming system based on design tokens, and tooling for rapid enterprise UI development. A separate Vue 3 version is also available.\n\n## What Arco Design Does\n- Provides 60+ React components: tables, forms, date pickers, trees, uploads, and notifications\n- Offers a design token system for theming via CSS variables and Less overrides\n- Includes built-in dark mode that toggles with a single class change\n- Ships with an icon library and a design resource kit for Figma\n- Supports on-demand component loading for optimized bundle sizes\n\n## Architecture Overview\nArco Design components are built with React hooks and TypeScript. Styling uses Less with CSS variables for runtime theming. The design token layer defines colors, spacing, radius, and typography as variables that cascade through components. An optional CLI (`arco-cli`) scaffolds projects with Arco Design pre-configured. The component library is tree-shakeable when using the babel-plugin-import or built-in ESM imports.\n\n## Self-Hosting & Configuration\n- Install with `npm install @arco-design\u002Fweb-react`\n- Import the CSS with `import '@arco-design\u002Fweb-react\u002Fdist\u002Fcss\u002Farco.css'`\n- Use `ConfigProvider` to set locale, theme variables, and component defaults\n- Enable dark mode by adding `arco-theme-dark` class to the body element\n- Tree-shake unused components with `babel-plugin-import` or native ESM imports\n\n## Key Features\n- Design token system enables full theme customization via CSS variables\n- Dark mode built into every component with a single class toggle\n- Table component supports virtual scrolling, column pinning, and custom cell rendering\n- Form component handles validation, dynamic fields, and complex nested layouts\n- Arco CLI generates project scaffolds, component templates, and theme packages\n\n## Comparison with Similar Tools\n- **Ant Design** — More established with a larger community; Arco offers a fresh design language and built-in dark mode\n- **Material UI** — Google's Material Design for React; Arco follows its own enterprise-focused design system\n- **Mantine** — Hooks-centric with strong defaults; Arco's design token system offers more structured theming\n- **Chakra UI** — Style props approach; Arco uses traditional className and CSS variables\n- **Semi Design** — Also from a Chinese tech company; Arco has broader component coverage\n\n## FAQ\n**Q: Is Arco Design production-ready?**\nA: Yes. It is used internally at ByteDance across multiple products and maintained actively.\n\n**Q: Is there a Vue version of Arco Design?**\nA: Yes. `@arco-design\u002Fweb-vue` provides the same components and design system for Vue 3.\n\n**Q: How do I customize the theme?**\nA: Override Less variables at build time, use the ConfigProvider component, or modify CSS custom properties at runtime.\n\n**Q: Does Arco Design support internationalization?**\nA: Yes. The ConfigProvider accepts a locale prop with built-in support for 20+ languages.\n\n## Sources\n- https:\u002F\u002Fgithub.com\u002Farco-design\u002Farco-design\n- https:\u002F\u002Farco.design","0",[23],{"id":24,"name":25,"slug":26,"icon":27},12,"Configs","config","⚙️",false,"612902f06aaa3c9d80b29b996b4ac2087afa674963ed0ce1304a582532fa9649","skill",[32,33,34],"claude_code","codex","gemini_cli","single",{"executes_code":28,"modifies_global_config":28,"requires_secrets":37,"uses_absolute_paths":28,"network_access":28},[],{"npm":39,"pip":41,"brew":42,"system":43},[40],"@arco-design\u002Fweb-react",[],[],[],{"commands":45,"expected_files":46},[],[19],{"asset_kind":30,"target_tools":48,"install_mode":35,"entrypoint":19,"risk_profile":49,"dependencies":51,"content_hash":29,"verification":56,"inferred":59},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":50,"uses_absolute_paths":28,"network_access":28},[],{"npm":52,"pip":53,"brew":54,"system":55},[40],[],[],[],{"commands":57,"expected_files":58},[],[19],true,{"target":33,"score":61,"status":62,"policy":63,"why":64,"asset_kind":30,"install_mode":35},98,"native","allow",[65,66,67,68,69,70,71],"target_tools includes codex","asset_kind skill","install_mode single","markdown-only","policy allow","safe markdown-only Codex install","trust established",{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":29,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":75,"review_status":76,"signals":77},"established","hash_only",[],"unreviewed",[78,79,80],"author has published assets","content hash available","no dangerous capability badges",{"owner_uuid":9,"owner_name":10,"source_url":82,"content_hash":29,"visibility":18,"created_at":83,"updated_at":84},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fasset-0c9bea87","2026-05-11 20:36:36","2026-05-11 22:27:17",null,[87,140,187,233],{"id":88,"uuid":89,"slug":90,"title":91,"description":92,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":93,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":94,"tags":95,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":97,"asset_kind":30,"target_tools":98,"install_mode":35,"entrypoint":99,"risk_profile":100,"dependencies":102,"verification":107,"agent_metadata":110,"agent_fit":122,"trust":124,"provenance":128,"created_at":130,"updated_at":131,"__relatedScore":132,"__relatedReasons":133,"__sharedTags":138},1025,"25e291e1-35b8-11f1-9bc6-00163e2b0d79","ant-design-enterprise-class-react-ui-library-25e291e1","Ant Design — Enterprise-Class React UI Library","Ant Design is an enterprise-class UI design language and React component library created by Alibaba. 60+ production-ready components with comprehensive patterns, internationalization for 30+ languages, and a rich theme system. The go-to choice for admin dashboards.",123,[],[96],{"id":24,"name":25,"slug":26,"icon":27},"460ef48461de8e9e15ebdddee74cf6b4048361119e3de4f9f5cf3baf5512807c",[32,33,34],"SKILL.md",{"executes_code":28,"modifies_global_config":28,"requires_secrets":101,"uses_absolute_paths":28,"network_access":28},[],{"npm":103,"pip":104,"brew":105,"system":106},[],[],[],[],{"commands":108,"expected_files":109},[],[11],{"asset_kind":30,"target_tools":111,"install_mode":35,"entrypoint":99,"risk_profile":112,"dependencies":114,"content_hash":97,"verification":119},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":113,"uses_absolute_paths":28,"network_access":28},[],{"npm":115,"pip":116,"brew":117,"system":118},[],[],[],[],{"commands":120,"expected_files":121},[],[11],{"target":33,"score":61,"status":62,"policy":63,"why":123,"asset_kind":30,"install_mode":35},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":97,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":125,"review_status":76,"signals":126},[],[127,78,79,80],"asset has usage views",{"owner_uuid":9,"owner_name":10,"source_url":129,"content_hash":97,"visibility":18,"created_at":130,"updated_at":131},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fant-design-enterprise-class-react-ui-library-25e291e1","2026-04-11 23:07:25","2026-05-11 21:09:57",127.14013252774335,[134,135,136,137],"topic-match","same-kind","same-target","same-author",[26,139],"configs",{"id":141,"uuid":142,"slug":143,"title":144,"description":145,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":146,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":147,"tags":148,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":150,"asset_kind":30,"target_tools":151,"install_mode":35,"entrypoint":152,"risk_profile":153,"dependencies":155,"verification":160,"agent_metadata":163,"agent_fit":175,"trust":177,"provenance":180,"created_at":182,"updated_at":183,"__relatedScore":184,"__relatedReasons":185,"__sharedTags":186},1979,"9a96eebb-3ead-11f1-9bc6-00163e2b0d79","material-ui-mui-react-components-implement-google-material-9a96eebb","Material UI (MUI) — React Components That Implement Google Material Design","A comprehensive React component library following Material Design guidelines, offering 50+ production-ready components with deep theming and customization support.",66,[],[149],{"id":24,"name":25,"slug":26,"icon":27},"dc88d3ccce0822762ae522675fdf7db9c18b7ba7fe06e8a02605c0b47d665498",[32,33,34],"Material UI React Components",{"executes_code":28,"modifies_global_config":28,"requires_secrets":154,"uses_absolute_paths":28,"network_access":28},[],{"npm":156,"pip":157,"brew":158,"system":159},[],[],[],[],{"commands":161,"expected_files":162},[],[152],{"asset_kind":30,"target_tools":164,"install_mode":35,"entrypoint":152,"risk_profile":165,"dependencies":167,"content_hash":150,"verification":172},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":166,"uses_absolute_paths":28,"network_access":28},[],{"npm":168,"pip":169,"brew":170,"system":171},[],[],[],[],{"commands":173,"expected_files":174},[],[152],{"target":33,"score":61,"status":62,"policy":63,"why":176,"asset_kind":30,"install_mode":35},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":150,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":178,"review_status":76,"signals":179},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":181,"content_hash":150,"visibility":18,"created_at":182,"updated_at":183},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fmaterial-ui-mui-react-components-implement-google-material-9a96eebb","2026-04-23 08:44:36","2026-05-11 20:37:10",126.73911220405124,[134,135,136,137],[26,139],{"id":188,"uuid":189,"slug":190,"title":191,"description":192,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":193,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":194,"tags":195,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":197,"asset_kind":30,"target_tools":198,"install_mode":35,"entrypoint":99,"risk_profile":199,"dependencies":201,"verification":206,"agent_metadata":209,"agent_fit":221,"trust":223,"provenance":226,"created_at":228,"updated_at":229,"__relatedScore":230,"__relatedReasons":231,"__sharedTags":232},2890,"d637a034-4bc2-11f1-9bc6-00163e2b0d79","asset-d637a034","Ant Design Mobile — Essential UI Blocks for Mobile Web Apps","A mobile-first React component library from the Ant Design ecosystem, providing high-quality UI components optimized for touch interaction and mobile performance.",15,[],[196],{"id":24,"name":25,"slug":26,"icon":27},"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":200,"uses_absolute_paths":28,"network_access":28},[],{"npm":202,"pip":203,"brew":204,"system":205},[],[],[],[],{"commands":207,"expected_files":208},[],[],{"asset_kind":30,"target_tools":210,"install_mode":35,"entrypoint":99,"risk_profile":211,"dependencies":213,"content_hash":197,"verification":218,"inferred":59},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":212,"uses_absolute_paths":28,"network_access":28},[],{"npm":214,"pip":215,"brew":216,"system":217},[],[],[],[],{"commands":219,"expected_files":220},[],[],{"target":33,"score":61,"status":62,"policy":63,"why":222,"asset_kind":30,"install_mode":35},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":197,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":224,"review_status":76,"signals":225},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":227,"content_hash":197,"visibility":18,"created_at":228,"updated_at":229},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fasset-d637a034","2026-05-10 00:19:21","2026-05-11 21:13:43",125.80617997398389,[134,135,136,137],[26,139],{"id":234,"uuid":235,"slug":236,"title":237,"description":238,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":239,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":240,"tags":241,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":197,"asset_kind":30,"target_tools":243,"install_mode":35,"entrypoint":99,"risk_profile":244,"dependencies":246,"verification":251,"agent_metadata":254,"agent_fit":266,"trust":268,"provenance":271,"created_at":273,"updated_at":274,"__relatedScore":275,"__relatedReasons":276,"__sharedTags":277},2886,"7887c4d3-4bc2-11f1-9bc6-00163e2b0d79","asset-7887c4d3","React Native Paper — Material Design Components for React Native","A cross-platform UI component library implementing Material Design guidelines for React Native apps, maintained by Callstack with first-class TypeScript support.",13,[],[242],{"id":24,"name":25,"slug":26,"icon":27},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":245,"uses_absolute_paths":28,"network_access":28},[],{"npm":247,"pip":248,"brew":249,"system":250},[],[],[],[],{"commands":252,"expected_files":253},[],[],{"asset_kind":30,"target_tools":255,"install_mode":35,"entrypoint":99,"risk_profile":256,"dependencies":258,"content_hash":197,"verification":263,"inferred":59},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":257,"uses_absolute_paths":28,"network_access":28},[],{"npm":259,"pip":260,"brew":261,"system":262},[],[],[],[],{"commands":264,"expected_files":265},[],[],{"target":33,"score":61,"status":62,"policy":63,"why":267,"asset_kind":30,"install_mode":35},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":197,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":269,"review_status":76,"signals":270},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":272,"content_hash":197,"visibility":18,"created_at":273,"updated_at":274},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fasset-7887c4d3","2026-05-10 00:16:44","2026-05-11 19:45:29",125.71919205351736,[134,135,136,137],[26,139]]