Skip to content
Start free
Every plan

Skills that teach your AI how to work on your site

Xodia's agent skills are short playbooks your AI loads before it changes your site: how to build a page, edit safely, keep your design system, check its work and publish. 39 core skills in 9 groups work on any site, and 30 stack packs add what your framework, styling, CMS and host need.

Start freeSee pricing

Free plan. 14-day Pro trial. No charge unless you choose a plan.

The Agents page in Xodia: Claude Code connected, the skill groups as filters with Design chosen, and the Design group's skills, each with what it does and the request kinds that use it.

How they load

Each request picks the right skills

When you send a request from Xodia, its kind decides which skills your AI loads first. Auto lets the request router choose.

  • Content (wording, images, links) loads 7 skills, such as Content changes and CMS content
  • Design (look and layout) loads 11 skills, such as Design system and Dark mode and themes
  • Page (new or restructured pages) loads 17 skills, such as Plan and confirm and New page
  • Fix (something is broken) loads 7 skills, such as Visual fixer and Environment and hosts
  • Claude Code and the built-in AI get them through Xodia's plugin; other MCP apps load them with the get_skill tool

The ask box under the canvas with the selected heading in it, a typed request, the request kinds with Design chosen, and Your AI as the one to send it to.

Stack packs

Starter and up

Stack packs for your framework, CMS and host

A pack adds what general skills can't know: how your framework names its pages, how your CMS stores drafts, how your host builds. Each site loads only the packs it uses.

  • Frameworks: Next.js, Astro, Vite and React, HTML sites, React Router, Gatsby, Nuxt and Vue, SvelteKit and Svelte
  • Styling: Tailwind CSS, Plain CSS, CSS Modules, Sass, CSS-in-JS
  • UI kits: shadcn/ui
  • CMS: Sanity, Contentful, Storyblok, Prismic, Git-based CMS
  • Framework and CMS: Next.js with Sanity, Astro with Sanity, Next.js with Prismic, Next.js with Contentful, Next.js with Storyblok, Astro with Storyblok, Astro with Contentful
  • Hosts: Vercel, Netlify, Cloudflare, GitHub Pages
  • Framework and styling packs come with every plan; CMS and host packs with Starter, Pro and Agency

Stack packs on the Agents page: framework, styling, UI library, content system, hosting and combination packs, with Next.js, Tailwind CSS, Sanity, Vercel and Next.js with Sanity marked On this site.

The library

Every core skill, by group

What each skill is for, in one line. The full text stays in your Xodia account, where your AI reads the current version when it signs in.

  • Plan and route3

    Understand the request and plan the work

    • Request routerWorks out what kind of change you want and hands it to the right agent, so every request gets the right approach.
    • Plan and confirmFor bigger changes, offers clear choices based on your site, shows a short plan, and waits for your yes before building.
    • Request workerPicks up the changes you ask for in Xodia and works through them one by one.

  • Build8

    New sites, pages and sections

    • Site builderBuilds a new site or redesigns an existing one from your description, page by page.
    • New pageAdds a page the way your site's framework expects, with your layout, navigation link and page title.
    • New sectionAdds a section to a page by reusing your site's existing patterns first, so it looks like it always belonged.
    • ComponentsOrganises a site into small building blocks and page sections, with clear props and slots, so people and agents can reuse and change them safely.
    • NavigationBuilds headers, menus and dropdowns that work with a keyboard, a screen reader and a thumb, with or without JavaScript.
    • FormsBuilds contact and signup forms that everyone can fill in, that work without JavaScript, stop spam and send submissions where the owner says.
    • Fonts, favicon and 404Gets the small things every site needs right: fast fonts, a favicon that shows in browsers and search, and a real not found page.
    • Languages and regionsAdds languages and regional versions of a site with their own URLs, so visitors and search engines each find the right one.

  • Edit2

    Change words, images and code without breaking anything

    • Safe editsChanges things where they really live (text, design token or component), keeps everything editable in Xodia, and leaves it for you to review.
    • Content changesUpdates wording, images and links without touching the layout or styling.

  • Design4

    Look, layout and consistency on every screen

    • Design systemKeeps typography, spacing and colour consistent through your site's own tokens, so every page looks professional on any screen.
    • Dark mode and themesAdds dark mode or a second theme by switching a few named colours, following the visitor's system, with an optional toggle that never flashes.
    • Extract design tokensCollects the colours, fonts, sizes and spacing a site actually uses into a small named set, so the Variables panel can change them everywhere.
    • AccessibilityMakes pages work for everyone: keyboard, screen readers, readable contrast, sensible headings and named buttons.

  • Motion and interactions3

    Hover, reveals, scroll effects and page transitions

    • InteractionsPlans interactions the way design tools describe them (a trigger and an effect) and picks the lightest way to build each one: CSS, Motion or GSAP.
    • CSS animationBuilds hover effects, reveals, scroll-linked motion, loops and page transitions with CSS alone, in Tailwind or plain stylesheets.
    • GSAPBuilds timelines, scroll stories, pinned sections and text effects with GSAP, cleaned up properly in React, Next.js and Astro.

  • Content and CMS2

    Text and media that live in a CMS

    • CMS contentKnows where a site's content lives (files, Sanity or another CMS), keeps content and code apart, and handles drafts and publishing safely.
    • Content in filesManages content kept as files in the repo: Astro content collections, Markdown and MDX folders, JSON data, with schemas, drafts and collection pages.

  • SEO and speed7

    Found in search, fast to load

    • SEO basicsGives every page a proper title, description, share image and canonical link, and keeps your sitemap and robots rules right.
    • Page settingsWrites each page's title, description, share image and canonical link in the shape Xodia's Page settings can read, so you can edit them yourself later.
    • Answer enginesShapes pages so AI answers and search snippets can quote them: answers first, clear questions, trust signals.
    • Agent readinessMakes your site easy for AI agents to read: an llms.txt guide, plain-text page versions and a helpful page for lost bots.
    • SpeedKeeps pages fast: measures properly, fixes the biggest causes first, and makes sure nothing hidden slows the page down.
    • Image optimiserFinds heavy images and has you shrink them in one click in the Assets panel, and gives every image the right size, alt text and loading.
    • Analytics and scriptsAdds analytics, chat widgets, pixels and embeds once, site-wide, with consent where the law asks for it, without slowing the site down.

  • Save and publish4

    Branches, pull requests and going live

    • Draft pagesKeeps pages in draft: visible in Xodia's preview, left out of the live site, until the owner publishes them.
    • Redirects and retired pagesMoves or retires pages without losing visitors or search ranking: one permanent redirect to the closest page, or an honest not found.
    • Branches and publishingTakes changes from draft to live safely: a branch to review on, a small pull request that says what changed and how it was checked, then Publish.
    • Commit messagesWrites clear, consistent save messages and pull request titles that match how your project already names changes.

  • Check and fix6

    Verify, review and repair

    • VerifyChecks every change actually works and looks right on phones and desktops before handing it back.
    • ReviewerLooks over unsaved changes before you save them and reports anything broken, inconsistent or missing.
    • GuardrailsThe safety rules every agent follows: stay in scope, never cheat a check, protect secrets and live data, and keep the site secure.
    • Visual fixerFinds out why a page is broken or looks wrong, and fixes the cause.
    • Environment and hostsFixes previews that fail because a setting or an outside service is missing, by telling you exactly what to add in Project settings.
    • Site memory (AGENTS.md)Keeps a short AGENTS.md of lasting facts about the site, so the next agent knows the stack, the tokens and what not to touch.

Commands

Start a whole job with one command

In Claude Code with Xodia's plugin, these 8 commands start a job and load its skills. Other MCP apps offer them as prompts. Set up Claude Code.

  • /xodia:buildBuild or redesign a Xodia website from a description
  • /xodia:workListen for change requests from Xodia and work through them
  • /xodia:animateAdd interactions and animation to a Xodia site: hover, reveals, scroll effects, page transitions
  • /xodia:contentAdd or change CMS content and collections on a Xodia site: posts, projects, team, drafts
  • /xodia:fixFind and fix what's broken in a Xodia preview
  • /xodia:reviewReview a Xodia project's unsaved changes before saving
  • /xodia:seoCheck and improve a Xodia site's SEO and AI search readiness
  • /xodia:speedMake a Xodia site load faster

Questions

Agent skills questions

Can I read the skills?

This page lists every skill's name and what it's for. The full text is part of your Xodia account: your AI loads it when it's signed in, so it always gets the current version.

Do skills work with any AI app?

Yes. Claude Code and the built-in AI get them through Xodia's plugin, and any other app connected over MCP loads them with the get_skill tool.

Which plans include them?

The core skills and the framework and styling packs come with every plan. CMS and host packs come with Starter, Pro and Agency. Compare plans.

Can I add my own instructions for my site?

Yes. Keep them in an AGENTS.md file in your repo. The Site memory skill reads it first and adds lasting facts about your site to it, so the next agent knows them too.

Keep exploring

Related pages

Teach your AI how your site works.

Start freeSee pricing

May we use Google Analytics to see how people find and use this site? It sets cookies only if you allow it. Cookie policy