A shortcode is the 11ty mechanism for invoking custom rendering logic from a template. In the Rosie architecture, shortcodes are the atomic implementation units β the leaf of the skill β operation β shortcode hierarchy. Everything an operation contract describes ultimately runs as one or more shortcode invocations at build time.
There are two flavors:
- Inline:
{% shortcodeName "arg" %}β single tag, no body. Most shortcodes are inline. - Paired:
{% shortcodeName %}body{% endshortcodeName %}β wraps content; the body is passed as the first argument to the registered function.
Each shortcode is registered in _config/template-plugin.js via eleventyConfig.addShortcode(name, fn) or addPairedShortcode(name, fn). The registration function receives the arguments, runs whatever rendering logic is needed, and returns the HTML string that 11ty splices into the page.
The distinction from operation: a shortcode is the 11ty invocation; an operation is the human-readable contract about when and why to call it. For 1:1 cases the two are nearly identical; for 1:N cases (one operation, several mode-specific shortcodes) the operation layer aggregates over multiple shortcodes that share a conceptual purpose.
Each shortcode is documented as its own atomic thought with frontmatter fields for signature, parameters, examples, prompt_fragment, implementation_file, and implementation_lines. The documentation contract is what Claude Code reads to compose invocations; the JavaScript registration is what 11ty executes.