How to install AI-Skills in Framer AI

Get the skill from Canvas Supply, add it to your AI agent, and edit the Settings block to match your project. Then ask the agent to run the check on a page. You get a report with every issue and the top three fixes, and the agent changes nothing until you ask. Setup takes about ten minutes.

What do I need before I start?

• A Framer project you want to check.

• An AI agent that can read and edit Framer projects, such as Framer AI.

• At least one AI-Skill. Five of the six are free, so the Layout Skill or Accessibility Skill is a good way to try the process.

Step 1: How do I get the skill?

Open the skill's page on Canvas Supply and get it. Every skill, free or paid, arrives in your confirmation email as Markdown text, ready to paste into Framer.

Step 2: How do I add the skill to Framer?

Open your project in Framer and go to Settings, then Skills. Add a new skill and paste the Markdown text from your confirmation email. Skills are added per project, so repeat this for every project you want to check.

Step 3: How do I set up the Settings block?

Every skill starts with a Settings block: the standards the check measures against. Edit the values to match your project before the first run. For example:

• Layout Skill: base unit, spacing scale, section padding, content max width, grid and breakpoints.

• Typography Skill: font families, allowed weights, heading sizes per breakpoint, line heights and minimum text size.

• Accessibility Skill: WCAG level, target size, focus indicator and whether a skip link is required.

• AEO Skill: your brand name, a one-sentence description and the questions each page should answer.

You can leave a value blank. The agent then infers it from the page and lists it as an assumption in the report, so you can confirm or correct it.

Step 4: How do I run a check?

Select a page and ask your agent to run the skill, for example "Run the Layout Check on this page" or "Run the Accessibility Check on the pricing page". The agent inspects every breakpoint, layer and setting, and does not change anything while it checks.

Step 5: How do I read the report?

Every item is marked passed, issue found, needs manual review or not applicable. Each issue shows the layer or location, the breakpoint, the current value, the expected value from your Settings and the recommended next step. The report ends with the top three fixes by impact and the settings the agent had to assume.

Items marked needs manual review are things an agent cannot verify on its own, like a keyboard-only pass or testing your questions in ChatGPT. Do those yourself before you mark them as done.

Step 6: How do I apply fixes?

Ask the agent to fix specific issues from the report, for example "Fix the top three issues" or "Fix all spacing issues on Tablet". Skills tell the agent to change only the values named in the report and to recheck every breakpoint afterwards. Run the check again to confirm the page passes.

Which skill should I run first?

• Layout Skill if pages break between breakpoints or spacing feels inconsistent.

• Typography Skill if text sizes and styles have drifted.

• CMS Skill before publishing a new collection or a batch of items.

• Motion Skill if the site feels busy or slow to load.

• Accessibility Skill as a baseline for every launch.

• AEO Skill if you want ChatGPT, Claude and Perplexity to cite your pages.