[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"workflow-asset-ecb288d8":3,"seo:featured-workflow:ecb288d8-4d35-11f1-9bc6-00163e2b0d79:zh":84,"workflow-related-asset-ecb288d8-ecb288d8-4d35-11f1-9bc6-00163e2b0d79":85},{"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":12,"parent_id":12,"parent_uuid":11,"lang_type":13,"steps":14,"tags":21,"has_voted":27,"visibility":17,"share_token":11,"is_featured":12,"content_hash":28,"asset_kind":29,"target_tools":30,"install_mode":34,"entrypoint":18,"risk_profile":35,"dependencies":37,"verification":44,"agent_metadata":47,"agent_fit":60,"trust":72,"provenance":81,"created_at":83,"updated_at":83},3049,"ecb288d8-4d35-11f1-9bc6-00163e2b0d79","asset-ecb288d8","Riot.js — Simple and Elegant Component-Based UI Library","Riot.js is a lightweight UI library that brings custom components to all browsers with a minimal footprint, using an intuitive tag-based syntax that compiles to standard Web Components.","8a911193-3180-11f1-9bc6-00163e2b0d79","AI Open Source","",0,"en",[15],{"id":16,"step_order":17,"title":18,"description":11,"prompt_template":19,"variables":11,"depends_on":20,"expected_output":11},3612,1,"Riot.js Overview","# Riot.js — Simple and Elegant Component-Based UI Library\n\n## Quick Use\n```bash\nnpm install riot @riotjs\u002Fcompiler\n```\n```html\n\u003C!-- my-counter.riot -->\n\u003Cmy-counter>\n  \u003Cbutton onclick={increment}>{state.count}\u003C\u002Fbutton>\n  \u003Cscript>\n    export default {\n      state: { count: 0 },\n      increment() { this.update({ count: this.state.count + 1 }) }\n    }\n  \u003C\u002Fscript>\n\u003C\u002Fmy-counter>\n```\n\n## Introduction\nRiot.js is a component-based UI library with a tiny footprint (around 6kB gzipped). It uses custom HTML tags that encapsulate template, logic, and styles in a single file, compiling them into efficient JavaScript. Riot embraces web standards and outputs native Custom Elements.\n\n## What Riot.js Does\n- Defines reusable UI components using a simple single-file tag format\n- Compiles custom tags to standard Web Components (Custom Elements v1)\n- Provides reactive state management with a straightforward `this.update()` API\n- Supports template expressions, conditionals, loops, and slots within tags\n- Works standalone or alongside other frameworks via Web Components interop\n\n## Architecture Overview\nRiot compiles `.riot` files into JavaScript modules at build time. Each component has a template (HTML with expressions), a script (lifecycle hooks and methods), and optional scoped styles. At runtime, components mount to DOM nodes and use a targeted DOM diffing algorithm for updates. State changes trigger re-renders only for the affected component subtree. Riot components register as native Custom Elements, enabling cross-framework usage.\n\n## Self-Hosting & Configuration\n- Install with `npm install riot` and `@riotjs\u002Fcompiler` for build-time compilation\n- Use `@riotjs\u002Fwebpack-loader`, `@riotjs\u002Frollup-plugin`, or `@riotjs\u002Fvite-plugin` for bundler integration\n- Mount components with `riot.mount(\"my-counter\")` or the component's `mount` export\n- Pre-compile tags for production to avoid shipping the compiler to the browser\n- No global configuration needed; each component is self-contained\n\n## Key Features\n- Single-file components combine HTML, JS, and scoped CSS in one `.riot` file\n- Compiles to native Custom Elements for interop with any framework\n- Template syntax uses plain JavaScript expressions instead of a custom DSL\n- Lifecycle hooks (onBeforeMount, onMounted, onUpdated, onUnmounted) cover the full component lifecycle\n- Slots and named slots support component composition patterns\n\n## Comparison with Similar Tools\n- **Vue** — Much larger framework with router, state management ecosystem; Riot is minimal and focused\n- **Svelte** — Compiler-based with no runtime; Riot has a small runtime but also uses compilation\n- **Lit** — Also targets Web Components; Riot offers a richer single-file component format\n- **Alpine.js** — Attribute-based enhancement; Riot uses custom tag syntax with full components\n- **Hyperapp** — Purely functional VDOM; Riot uses mutable state with explicit update calls\n\n## FAQ\n**Q: Is Riot.js still maintained?**\nA: Yes. Riot 9.x is actively developed with regular releases and a responsive maintainer community.\n\n**Q: Can Riot components be used inside React or Vue apps?**\nA: Yes. Since Riot compiles to native Custom Elements, they work in any framework that supports standard HTML elements.\n\n**Q: Does Riot support server-side rendering?**\nA: Yes. The `@riotjs\u002Fssr` package renders Riot components to HTML strings on the server.\n\n**Q: How does Riot handle routing?**\nA: The `@riotjs\u002Froute` package provides a lightweight client-side router designed for Riot apps.\n\n## Sources\n- https:\u002F\u002Fgithub.com\u002Friot\u002Friot\n- https:\u002F\u002Friot.js.org","0",[22],{"id":23,"name":24,"slug":25,"icon":26},12,"Configs","config","⚙️",false,"f70e9308b8bb7ef19f8cacc3ce7b041dee1df6b816224a2f8795707d66bef0b5","skill",[31,32,33],"claude_code","codex","gemini_cli","single",{"executes_code":27,"modifies_global_config":27,"requires_secrets":36,"uses_absolute_paths":27,"network_access":27},[],{"npm":38,"pip":41,"brew":42,"system":43},[39,40],"@riotjs\u002Fcompiler","riot",[],[],[],{"commands":45,"expected_files":46},[],[18],{"asset_kind":29,"target_tools":48,"install_mode":34,"entrypoint":18,"risk_profile":49,"dependencies":51,"content_hash":28,"verification":56,"inferred":59},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":50,"uses_absolute_paths":27,"network_access":27},[],{"npm":52,"pip":53,"brew":54,"system":55},[39,40],[],[],[],{"commands":57,"expected_files":58},[],[18],true,{"target":32,"score":61,"status":62,"policy":63,"why":64,"asset_kind":29,"install_mode":34},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":27,"asset_signed_hash":28,"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":28,"visibility":17,"created_at":83,"updated_at":83},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fasset-ecb288d8","2026-05-11 20:35:42",null,[86,138,185,230],{"id":87,"uuid":88,"slug":89,"title":90,"description":91,"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":92,"parent_id":12,"parent_uuid":11,"lang_type":13,"steps":93,"tags":94,"has_voted":27,"visibility":17,"share_token":11,"is_featured":12,"content_hash":96,"asset_kind":29,"target_tools":97,"install_mode":34,"entrypoint":98,"risk_profile":99,"dependencies":101,"verification":106,"agent_metadata":109,"agent_fit":121,"trust":123,"provenance":126,"created_at":128,"updated_at":129,"__relatedScore":130,"__relatedReasons":131,"__sharedTags":136},1005,"4fa5bf54-3580-11f1-9bc6-00163e2b0d79","chart-js-simple-yet-flexible-html5-canvas-charts-4fa5bf54","Chart.js — Simple Yet Flexible HTML5 Canvas Charts","Chart.js is the most popular charting library for the web — simple HTML5 canvas charts with 8 built-in chart types, responsive, animated, and mixable. The go-to choice when you need beautiful charts with minimal setup.",82,[],[95],{"id":23,"name":24,"slug":25,"icon":26},"41c24270d82c1d5722b5f32f39da6efc32c931d07d7089cdcf4b5bc6e67b331a",[31,32,33],"SKILL.md",{"executes_code":27,"modifies_global_config":27,"requires_secrets":100,"uses_absolute_paths":27,"network_access":27},[],{"npm":102,"pip":103,"brew":104,"system":105},[],[],[],[],{"commands":107,"expected_files":108},[],[11],{"asset_kind":29,"target_tools":110,"install_mode":34,"entrypoint":98,"risk_profile":111,"dependencies":113,"content_hash":96,"verification":118},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":112,"uses_absolute_paths":27,"network_access":27},[],{"npm":114,"pip":115,"brew":116,"system":117},[],[],[],[],{"commands":119,"expected_files":120},[],[11],{"target":32,"score":61,"status":62,"policy":63,"why":122,"asset_kind":29,"install_mode":34},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":27,"asset_signed_hash":96,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":124,"review_status":76,"signals":125},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":127,"content_hash":96,"visibility":17,"created_at":128,"updated_at":129},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fchart-js-simple-yet-flexible-html5-canvas-charts-4fa5bf54","2026-04-11 16:27:43","2026-05-11 20:08:02",117.87861713856411,[132,133,134,135],"topic-match","same-kind","same-target","same-author",[25,137],"configs",{"id":139,"uuid":140,"slug":141,"title":142,"description":143,"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":144,"parent_id":12,"parent_uuid":11,"lang_type":13,"steps":145,"tags":146,"has_voted":27,"visibility":17,"share_token":11,"is_featured":12,"content_hash":148,"asset_kind":29,"target_tools":149,"install_mode":34,"entrypoint":98,"risk_profile":150,"dependencies":152,"verification":157,"agent_metadata":160,"agent_fit":172,"trust":174,"provenance":178,"created_at":180,"updated_at":181,"__relatedScore":182,"__relatedReasons":183,"__sharedTags":184},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,[],[147],{"id":23,"name":24,"slug":25,"icon":26},"460ef48461de8e9e15ebdddee74cf6b4048361119e3de4f9f5cf3baf5512807c",[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":151,"uses_absolute_paths":27,"network_access":27},[],{"npm":153,"pip":154,"brew":155,"system":156},[],[],[],[],{"commands":158,"expected_files":159},[],[11],{"asset_kind":29,"target_tools":161,"install_mode":34,"entrypoint":98,"risk_profile":162,"dependencies":164,"content_hash":148,"verification":169},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":163,"uses_absolute_paths":27,"network_access":27},[],{"npm":165,"pip":166,"brew":167,"system":168},[],[],[],[],{"commands":170,"expected_files":171},[],[11],{"target":32,"score":61,"status":62,"policy":63,"why":173,"asset_kind":29,"install_mode":34},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":27,"asset_signed_hash":148,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":175,"review_status":76,"signals":176},[],[177,78,79,80],"asset has usage views",{"owner_uuid":9,"owner_name":10,"source_url":179,"content_hash":148,"visibility":17,"created_at":180,"updated_at":181},"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",115.14013252774335,[132,133,134,135],[25,137],{"id":186,"uuid":187,"slug":188,"title":189,"description":190,"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":191,"parent_id":12,"parent_uuid":11,"lang_type":13,"steps":192,"tags":193,"has_voted":27,"visibility":17,"share_token":11,"is_featured":12,"content_hash":195,"asset_kind":29,"target_tools":196,"install_mode":34,"entrypoint":98,"risk_profile":197,"dependencies":199,"verification":204,"agent_metadata":207,"agent_fit":219,"trust":221,"provenance":224,"created_at":180,"updated_at":226,"__relatedScore":227,"__relatedReasons":228,"__sharedTags":229},1029,"25e2a55c-35b8-11f1-9bc6-00163e2b0d79","lit-simple-library-fast-lightweight-web-components-25e2a55c","Lit — Simple Library for Fast Lightweight Web Components","Lit is a simple library for building fast, lightweight web components. Built by Google on top of the standard Web Components APIs, it provides reactive properties, scoped styles, and a declarative templating system in about 5KB.",94,[],[194],{"id":23,"name":24,"slug":25,"icon":26},"278a6c7c3593fbefefc74f3e6d12d47323a5c1ffbf362c251fb06ab568ef65c1",[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":198,"uses_absolute_paths":27,"network_access":27},[],{"npm":200,"pip":201,"brew":202,"system":203},[],[],[],[],{"commands":205,"expected_files":206},[],[11],{"asset_kind":29,"target_tools":208,"install_mode":34,"entrypoint":98,"risk_profile":209,"dependencies":211,"content_hash":195,"verification":216},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":210,"uses_absolute_paths":27,"network_access":27},[],{"npm":212,"pip":213,"brew":214,"system":215},[],[],[],[],{"commands":217,"expected_files":218},[],[11],{"target":32,"score":61,"status":62,"policy":63,"why":220,"asset_kind":29,"install_mode":34},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":27,"asset_signed_hash":195,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":222,"review_status":76,"signals":223},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":225,"content_hash":195,"visibility":17,"created_at":180,"updated_at":226},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Flit-simple-library-fast-lightweight-web-components-25e2a55c","2026-05-11 20:31:18",114.96658540793327,[132,133,134,135],[25,137],{"id":231,"uuid":232,"slug":233,"title":234,"description":235,"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":236,"parent_id":12,"parent_uuid":11,"lang_type":13,"steps":237,"tags":238,"has_voted":27,"visibility":17,"share_token":11,"is_featured":12,"content_hash":240,"asset_kind":29,"target_tools":241,"install_mode":34,"entrypoint":98,"risk_profile":242,"dependencies":244,"verification":249,"agent_metadata":252,"agent_fit":264,"trust":266,"provenance":269,"created_at":271,"updated_at":272,"__relatedScore":273,"__relatedReasons":274,"__sharedTags":275},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.",2,[],[239],{"id":23,"name":24,"slug":25,"icon":26},"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":243,"uses_absolute_paths":27,"network_access":27},[],{"npm":245,"pip":246,"brew":247,"system":248},[],[],[],[],{"commands":250,"expected_files":251},[],[],{"asset_kind":29,"target_tools":253,"install_mode":34,"entrypoint":98,"risk_profile":254,"dependencies":256,"content_hash":240,"verification":261,"inferred":59},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":255,"uses_absolute_paths":27,"network_access":27},[],{"npm":257,"pip":258,"brew":259,"system":260},[],[],[],[],{"commands":262,"expected_files":263},[],[],{"target":32,"score":61,"status":62,"policy":63,"why":265,"asset_kind":29,"install_mode":34},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":27,"asset_signed_hash":240,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":267,"review_status":76,"signals":268},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":270,"content_hash":240,"visibility":17,"created_at":271,"updated_at":272},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fasset-0c9bea87","2026-05-11 20:36:36","2026-05-11 22:27:17",106.7156818820795,[132,133,134,135],[25,137]]