marko-js/marko

marko-best-practices

Apply Marko syntax and best practices when editing .marko files and building Marko components.

소스 보기

사용 방법

  1. 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
  2. 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
  3. 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/marko-js/marko --skill marko-best-practices

시작 전 확인

  • 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
  • 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

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.