MDN Code Examples Practices
Application skill for MDN Web Docs code style hub (archived awesome-guidelines capsules). For application JS/HTML/CSS, load javascript-coding-practices and frontend-markup-practices. For repo Markdown structure, load markdown-writing-practices.
Core Principle
MDN example quality is copy-paste-safe teaching code, short vanilla snippets, Prettier-formatted, Baseline-modern, with correct fence languages and MDN-specific DOM/CSS rules.
When to Use / NOT
- MDN articles, reference pages, live samples, Mozilla doc porting aligned with MDN guides.
- Reviewing
js/html/css blocks before mdn/content PR.
NOT when:
- Full application codebase, stack-specific practice skills.
- Prose/voice only, MDN Writing style guide +
mailchimp-content-practices-adjacent tone docs.
- Shell session transcripts, MDN shell prompt guide (separate).
Workflow
- Principles, size, vanilla, fences, Prettier (
mdn-style-examples-principles.md).
- JavaScript, const/let, loops, DOM, comments (
mdn-style-javascript-examples.md).
- HTML, doctype, attrs, casing (
mdn-style-html-examples.md).
- CSS, vanilla, selectors, color/media (
mdn-style-css-examples.md).
- Verify, Prettier MDN config; correct fence language;
example-good/example-bad when contrasting.
Red Flags
- Framework/BEM/Bootstrap classes in generic examples
- Wrong ```language fence (similar-but-wrong language)
- Invalid JS/CSS (bare
… in JS, non-well-formed css blocks)
- Snippet >25 lines without external full-example link
var, loose ==, for...in on arrays- Unbraced one-line control flow
innerHTML for plain textalert() in examples; wrong console usage in live vs static- Vendor prefixes when Baseline unprefixed
- Sass/Less/BEM in CSS examples
!important without strong reason- camelCase HTML classes
- Unquoted HTML attributes in teaching markup
- Deprecated
document.write / presentation HTML shortcuts
- Browser version lists in code comments
- Non-inclusive placeholder names/text
Verification
- Prettier with MDN project config on changed examples
- Fence language matches block content (
plain for pseudocode)
- Line-count and horizontal-scroll check
- Capsule probes on new JS DOM insertion and CSS validity
- Optional: MDN yari/build or repo lint scripts if present in target repo
References
awesome-guidelines/references/mdn-style-learning-note.mdawesome-guidelines/references/mdn-style-examples-principles.mdawesome-guidelines/references/mdn-style-javascript-examples.mdawesome-guidelines/references/mdn-style-html-examples.mdawesome-guidelines/references/mdn-style-css-examples.md
Related skills
javascript-coding-practices, app JS stylefrontend-markup-practices, semantic HTML/CSS in appsmarkdown-writing-practices, doc Markdown mechanics
1---2name: mdn-code-examples-practices3description: Use when authoring MDN/Mozilla doc code examples, Prettier, 15–25 line vanilla snippets, JS const/let/textContent, HTML5 lowercase kebab markup, modern vanilla CSS, and example-good/bad fences.4---56# MDN Code Examples Practices78Application skill for MDN Web Docs code style hub (archived `awesome-guidelines` capsules). For application JS/HTML/CSS, load `javascript-coding-practices` and `frontend-markup-practices`. For repo Markdown structure, load `markdown-writing-practices`.910## Core Principle1112MDN example quality is **copy-paste-safe teaching code**, short vanilla snippets, Prettier-formatted, Baseline-modern, with correct fence languages and MDN-specific DOM/CSS rules.1314## When to Use / NOT1516- MDN articles, reference pages, live samples, Mozilla doc porting aligned with MDN guides.17- Reviewing ```js/html/css``` blocks before mdn/content PR.1819**NOT when:**2021- Full application codebase, stack-specific practice skills.22- Prose/voice only, MDN Writing style guide + `mailchimp-content-practices`-adjacent tone docs.23- Shell session transcripts, MDN shell prompt guide (separate).2425## Workflow26271. **Principles**, size, vanilla, fences, Prettier (`mdn-style-examples-principles.md`).282. **JavaScript**, const/let, loops, DOM, comments (`mdn-style-javascript-examples.md`).293. **HTML**, doctype, attrs, casing (`mdn-style-html-examples.md`).304. **CSS**, vanilla, selectors, color/media (`mdn-style-css-examples.md`).315. **Verify**, Prettier MDN config; correct fence language; `example-good`/`example-bad` when contrasting.3233## Red Flags3435- Framework/BEM/Bootstrap classes in generic examples36- Wrong ```language fence (similar-but-wrong language)37- Invalid JS/CSS (bare `…` in JS, non-well-formed css blocks)38- Snippet >25 lines without external full-example link39- `var`, loose `==`, `for...in` on arrays40- Unbraced one-line control flow41- `innerHTML` for plain text42- `alert()` in examples; wrong console usage in live vs static43- Vendor prefixes when Baseline unprefixed44- Sass/Less/BEM in CSS examples45- `!important` without strong reason46- camelCase HTML classes47- Unquoted HTML attributes in teaching markup48- Deprecated `document.write` / presentation HTML shortcuts49- Browser version lists in code comments50- Non-inclusive placeholder names/text5152## Verification5354- Prettier with MDN project config on changed examples55- Fence language matches block content (`plain` for pseudocode)56- Line-count and horizontal-scroll check57- Capsule probes on new JS DOM insertion and CSS validity58- Optional: MDN yari/build or repo lint scripts if present in target repo596061## References6263- `awesome-guidelines/references/mdn-style-learning-note.md`64- `awesome-guidelines/references/mdn-style-examples-principles.md`65- `awesome-guidelines/references/mdn-style-javascript-examples.md`66- `awesome-guidelines/references/mdn-style-html-examples.md`67- `awesome-guidelines/references/mdn-style-css-examples.md`6869## Related skills7071- `javascript-coding-practices`, app JS style72- `frontend-markup-practices`, semantic HTML/CSS in apps73- `markdown-writing-practices`, doc Markdown mechanics
ryan-brosas