marko-best-practices — marko-js/marko Agent Skill

使用方法

复制安装命令，在自己的智能体环境安装前先检查源码包。
从原始文档核对所需工具、凭据和支持的宿主。
说明输入材料与期望交付物，并对照来源检查输出。

npx skills add https://github.com/marko-js/marko --skill marko-best-practices

开始前需了解

安装不包含模型订阅、API 额度或访问文件的权限。
仓库星数和安装量反映活跃情况，不等于独立质量或安全测试。

仓库原始内容

按源仓库内容呈现，保留标题、案例、代码、表格、链接以及原文引用的演示图片。

Marko Best Practices

Marko is a modern UI framework for building web applications. It features a declarative component-based syntax, fine-grained reactivity, and a highly optimized compiler. Marko is designed for both server-rendered and interactive client-side experiences with a focus on streaming, partial hydration, and shipping the smallest possible amount of JavaScript to each page.

Marko Documentation

The Marko documentation is the source of truth for all Marko-related information. Always refer to the official docs for information about syntax and behavior. Marko changes over time, so prefer fetching current docs over relying on training data.

The docs index lists every available page with its URL and a short description.

All Marko docs pages can be fetched as markdown by appending .md to the URL (<https://markojs.com/docs/introduction/getting-started.md>)

Marko 6 Syntax

Documentation and this skill target Marko 6. Do not use Marko 5 syntax.

Checklist for New or Edited .marko Files

[ ] Uses Marko 6 syntax only (no scriptlets, old event syntax, or Marko 5 blocks).
[ ] <script> is never used when state (<let> or <const>) could accomplish the same behavior.
[ ] Event handlers use function form: onClick() { ... } or a reference, not string names.
[ ] <show=cond> for toggled content that should keep its state; <if> destroys and rebuilds.
[ ] Component stays small and readable; consider splitting large templates.
[ ] No unnecessary client-side JS; prefer built-in browser APIs and HTML/CSS features over scripts.
[ ] Props are declared with an exported Input interface, and templates are type checked with mtc (@marko/type-check) — tsc skips .marko files and reports nothing.