Skills and recipes

Skills are Markdown instructions that explain a workflow to your AI agent. They supplement the MCP tool descriptions: a recipe can tell the agent what to read first, which changes to make and what to verify afterward.

Typeroll’s recipes are ordinary files. Clients differ in how they discover and load skills. You can install them into a client-supported location, adapt them to its conventions or ask the agent to read a specific file. Using MCP does not require automatic skill loading or a particular AI provider.

For a versioned local project, Agent workspace provides optional recipes with hash-based updates that preserve your edits. For online work, use MCP discovery and load only the relevant recipe.

Install the bundled recipes

npx @typeroll/mcp-server install-skills ./typeroll-skills

The command copies the bundled files without contacting your portal. It does not need an API key. Existing files are skipped; add --force only when you want to replace them. Keep custom instructions in separate files to preserve them when updating the bundled recipes.

Choose a workflow

Every recipe the MCP server ships has a page here, generated from the same file the server gives agents through read_skill.

Workflow	Skill	When an agent uses it
Edit a site	tr-edit-site	Edit or create Typeroll pages with a person’s usual AI assistant. Confirm one site, find the right page, handle everyday requests (page links, images, menus, site-wide changes, settings, analytics, structured data), preview changes and save with permission.
New site	tr-new-site	Use when the user wants to create a new Typeroll site from scratch, set up the initial design, or bootstrap a blank site with working header/footer, brand colors, and a homepage. Also triggers on “start a new site”, “set up a site for”, or “build a website for [company]”.
Starter design	tr-starter-design	Reference for the default design new Typeroll sites start with — CSS variables, spacing, radii, container width, header and footer skeletons. Read it when a site is blank or clearly follows these conventions and you need new markup or CSS to fit in; skip it for sites with their own design.
Branding	tr-brand	Use when the user asks to create a brand identity, design system, or visual style for a site. Triggers on “create a brand”, “design the look”, “choose colors”, “pick fonts”, “make it look like [reference]”, or “rebrand the site”. Produces a cohesive palette, typography scale, and CSS custom properties applied to an existing site.
Header and footer	tr-header-footer	Build accessible native header and footer partials with the site logo, semantic navigation, responsive disclosure, and optional native cookie consent.
Responsive layouts	tr-responsive	Use when a layout must behave differently at different screen sizes — different grid columns per breakpoint, an icon-box that’s icon-on-top on mobile but icon-left on tablet, hiding a block on small screens, fluid type. Triggers on “responsive”, “mobile/tablet/desktop layout”, “stack on mobile”, “X columns on desktop and Y on mobile”, “olika på mobil/surfplatta”, “responsivt”.
Design review	tr-design-review	Use to review a deployed/previewed Typeroll page like a designer — a MEASURED multi-dimension pass (responsive, a11y, functional, content, SEO, performance) that emits a per-dimension scorecard and an explicit OK verdict. Run it before telling the user a design is approved; it’s the “how” for tr-redesign-branch’s approval round.
Redesign on a branch	tr-redesign-branch	Use when the user asks to redesign, modernize, or restructure a Typeroll site (or a section of it). Forces branch-isolated work so the live site stays untouched until the redesign is approved.
Upgrade rendering	tr-upgrade-rendering	Use when a site’s platform render version is behind the latest (read_site_settings → render.version < render.latest), or the user asks to “upgrade rendering”, “get the new block styles” or why a platform improvement doesn’t show. Compares every page at the current and target version with screenshots, reports the differences and upgrades only with approval.
Write content	tr-content-write	Use when the user asks to write, draft, or rewrite a page on a Typeroll site. Loads the site’s design conventions before writing so the new content matches the existing voice and style.
Images	tr-images	Use when the user asks for an image, hero, illustration, or logo to be created and embedded in a Typeroll page. Covers the two-step signed-URL upload flow so the agent doesn’t try to POST bytes through the CMS API (it can’t).
Generate images	tr-imagegen	Use when the user wants to generate images for a Typeroll site with AI models (Gemini, OpenAI, Higgsfield) — hero images, illustrations, section backgrounds, og-images. Triggers on “generera bilder”, “generate images”, “skapa en hero-bild”, “AI-bilder”, “bildgenerering”, or when a brief calls for imagery that doesn’t exist in assets/. Covers the local lab loop (generate → review → pick) and uploading winners to the Typeroll media library.
Blog	tr-blog	Set up a blog, news section or dated article series using Pages, a content type, shared templates and a dynamic listing.
Forms	tr-forms	Use when the user wants to add a contact form, newsletter signup, booking form, or other web form to a Typeroll site.
Site block types	tr-custom-blocks	Use when a Typeroll site needs a block the core library does not have (an icon list, cards, steps, a team strip), so the user wants a reusable block type with its own fields.
Page templates	tr-page-template	Create or edit a reusable Page template for articles, checklists, products, directory entries or other Pages that share a layout.
SEO	tr-seo	Use before a site’s first launch and whenever the user asks to improve SEO, fix titles or meta descriptions, set a share image, add structured data, check the sitemap or robots.txt, control AI crawlers, or audit search visibility. Triggers on “launch”, “go live”, “SEO”, “meta descriptions”, “share image”, “Google ranking”, “structured data”, “JSON-LD”, “sitemap”, “llms.txt”, “AI crawlers”, “sökoptimering”, or “hjälp mig synas på Google”.
Migration evidence	tr-migration-evidence	Choose text and design/image preservation independently, map standard and custom blocks, preserve old URLs, and verify content, design and behavior before migration acceptance.
Migrate from WordPress	tr-migrate-wp	Use when the user asks to migrate a WordPress site to Typeroll, mentions wp-json, or names a WP source URL. Walks the WP REST API, preserves cleaned HTML and shared references, transfers media, sets redirects, and leaves everything as drafts for human review. Typeroll does not convert HTML into blocks.
Migrate a multisite	tr-migrate-multisite	Use when migrating SEVERAL sites at once — a WordPress multisite network, a group of country/language sites on different top-level domains, or any batch of related sites moving to Typeroll together. Triggers on “multisite”, “network of sites”, “10 sites”, “our .se/.de/.co.uk sites”, “language versions”, “migrate all our sites”. For a single WordPress site use tr-migrate-wp; for a single non-WP source use tr-import-url.
Migrate from Astro	tr-migrate-astro	Migrate an existing Astro site, including Astro Content Collections, to native Typeroll Pages and Content types while preserving routes, design and media.
Import from URL	tr-import-url	Use when the user wants to import or migrate content from a non-WordPress website — a Squarespace site, a Wix site, a static HTML site, a Webflow export, or any URL the user points at. Also triggers on “copy content from”, “rebuild this site”, “import from Squarespace/Wix/Webflow”, or “make it look like this site”. For WordPress sources use tr-migrate-wp instead.

A recipe is guidance, not a permission grant. Your agent still needs an API or MCP connection, and its key limits which sites and actions it can access. Review changes before saving and deploying.