# Marko Best Practices

> Apply Marko syntax and best practices when editing `.marko` files and building Marko components. Use when this capability is needed.

- Skill: `tomevault-io/marko-best-practices` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/marko-best-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/marko-best-practices/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/marko-best-practices

---


# 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](https://markojs.com/llms.txt) 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.
- [ ] 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.

---
> Source: [marko-js/marko](https://github.com/marko-js/marko) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-18 -->