What is an AI-Skill for Framer?

An AI-Skill is a check your AI agent runs on a Framer page. It measures the page against standards you set, like your spacing scale, type sizes or WCAG level, reports every issue with the top fixes, and only changes things when you ask.

Why do AI agents need skills?

AI agents like Framer AI build fast, but they make decisions one prompt at a time. After a few weeks of edits, a site often has gaps of 23px next to 24px, three font sizes that almost match, animations with different timings and buttons without accessible names. Nobody made one big mistake. The small ones just added up, and they are hard to spot by eye.

A skill gives the agent a structured way to find them. Instead of asking "does this look right?", the agent inspects every layer, breakpoint and setting against your numbers and tells you exactly what is off, where, and what it should be.

How does an AI-Skill work?

Every Canvas Supply skill has the same three parts:

• Settings: the standards the check measures against, like a base unit of 8px, body text of 16px on mobile or a contrast ratio of 4.5:1. You edit them once to match your project. Leave a value blank and the agent infers it from the page and tells you it did.

• Instructions: what the agent checks, step by step, from spacing and breakpoints to focus states and structured data.

• Report: every item marked passed, issue found, needs manual review or not applicable, with the current value, the expected value and the top three fixes.

Skills never change your site on their own. The agent reports first, and applies a fix only when you ask for it.

Which AI-Skills are available?

Canvas Supply launches with six skills. Five are free, and the AEO Skill costs $9:

• Layout Skill (free): checks spacing, grid, sizing and breakpoints against your layout system.

• Typography Skill (free): checks text styles, type scale, fonts and readability.

• CMS Skill (free): checks collections, items, detail pages and lists for gaps and broken bindings.

• Motion Skill (free): checks animations for consistent timing, purpose, performance and reduced motion.

• Accessibility Skill (free): checks a page against WCAG 2.2 AA, citing the criterion for every issue.

• AEO Skill ($9): checks whether ChatGPT, Claude, Perplexity and Google AI Overviews can access, understand and quote your page.

What does a skill report look like?

Take the Layout Skill. For each breakpoint, it lists issues like "Feature grid, Tablet: gap is 23px, expected 24px from the spacing scale" or "Pricing card, 360px: fixed width of 400px causes horizontal scroll". It separates likely mistakes from deliberate choices, lists anything it had to assume, and ends with the three fixes that matter most. The Accessibility Skill does the same with WCAG criteria and who is affected, and the AEO Skill ends with a table of your target questions marked answered, partly answered or not answered.

How is a skill different from a prompt?

A prompt is a single instruction for a single task, like Audit my spacing. It is quick and focused on one thing. A skill is a complete, repeatable check with your own settings, covering a whole area in depth. Use a prompt for a quick pass, and a skill before launch or after a round of big changes.

How is a skill different from a template?

A template is a finished website you remix and fill with your content. Skills check that the site stays at that standard as you and your agent change it: new sections on the spacing scale, new text on your text styles, new CMS items without placeholders.

Can I run several skills on one page?

Yes. Each skill covers one area and stays inside its own scope. The Typography Skill leaves contrast to the Accessibility Skill, for example, so running several never gives you duplicate findings.

What should I do next?

Start with the free Accessibility Skill or Layout Skill on your most important page, fix the top three issues, and run it again. If you want answer engines to cite your site, add the AEO Skill.