Best practices for writing skills in Framer
Learn how to write clear, useful skills that help agents make consistent decisions in Framer. Skills give agents reusable instructions for how to work in your project. Use these best practices to make each skill clear, consistent, and easy to apply.
Write clear rules
A useful skill tells the agent which instructions are required and where it can make its own decisions.
Use must for requirements that the agent cannot change.
Use prefer when you want the agent to start with one approach but allow another when needed.
Use can for choices that will not affect consistency.
Avoid instructions such as “make it better” or “use the best layout.” State what needs to improve.
When several approaches could work, name the one the agent should try first.
Write instructions that can be reused on other pages instead of describing one finished result
Add to your skill
Page creation
When creating a new section, reuse existing text styles, color styles, and components. Choose a component whose layout and controls fit the content. Create a new component only if the existing components cannot display the required content or interaction.
Copied
Add to your skill
Copy editing
When editing page copy, keep product names, prices, dates, factual claims, and link destinations unchanged. Remove repeated information and improve sentences that are difficult to scan. Do not add claims that are not supported by the existing content.
Copied
Protect existing work
When a skill changes an existing page, state what the agent can edit and what it should leave unchanged.
Say whether it can rewrite the copy or must keep it as written.
Tell it to keep existing link destinations unless the task requires new ones.
Keep component instances linked to their source components so future component updates still apply.
Keep text, images, and links connected to their current CMS fields.
Preserve hover, click, scroll, and transition effects unless the task changes those interactions.
Name the page or section it can edit when the rest of the site should remain unchanged.
Add to your skill
Exiting pages
Change only the page or section named in the task. Unless the task says otherwise, keep the existing copy, link destinations, CMS connections, component instances, and interactions unchanged.
Copied
Reference project context
Examples and project references help narrow rules that could otherwise be interpreted in different ways.
Use examples for visual or subjective instructions.
Type
@in the skill editor, then select an item from the menu. You can reference specific pages, text styles, color tokens, or components to give the agent clear examples to follow.Use clear layer names, labels, and structure when the skill refers to anything on the canvas.
Example
Use /features for typography and cards on /pricing for card styling. Match their text styles, spacing, and corner radius. Adapt the number of cards to fit the content.
Add details the agent cannot know
Include rules that are important to your team but may not be visible on the canvas.
Useful details can include:
Which components the agent should use before creating new ones.
Which CMS fields must remain connected.
Whether the agent can edit copy or only change layout.
How your team names pages, layers, components, and CMS fields.
Which breakpoints the agent must review.
Which section should act as the visual reference.
Which interactions or component properties must continue to work.
Skip background information that does not change what the agent should do.
Example
On /articles pages, keep the title, summary, author, date, cover image, and body connected to their current CMS fields. Do not replace connected content with static layers.
Add to your skill
Effects
When adding Appear effects, reuse the duration and easing already used in the project. Apply effects only to the elements named in the task. Do not add Appear effects to navigation, forms, or other controls unless requested.
Copied
Keep it organized
Make the skill easy to scan and update as your project changes.
Group related instructions under clear headings.
Keep one rule in each bullet point.
Place an exception directly after the rule it changes.
Use numbered steps when the agent must work in a specific order.
Put rules that apply to every task near the beginning.
Move page-specific instructions into their own section.
Remove instructions that repeat or contradict each other.
If two instructions ask for different results, rewrite them so the agent does not have to choose which one to follow.
Define what done means
Tell the agent how to check its work before it finishes.
Include only the checks that matter for the skill.
Name what the agent should test, such as links, CMS connections, interactions, factual accuracy, or breakpoints.
Ask the agent to fix any issues it finds and list anything it cannot fix.
Add to your skill
Launch review
Before finishing a launch review, check every published page for missing titles, descriptions, social images, and image alt text. Test navigation links, buttons, forms, and redirects. Review Desktop, Tablet, and Phone for clipped content or horizontal scrolling. List any issues you cannot fix.
Copied
Test and refine
Test the skill on real tasks and review the results.
Run the skill on at least two tasks with different content or requirements.
Check whether the agent follows each required instruction without a follow-up.
Note where the agent had to guess.
Note where it changed content, styles, connections, or behavior that it should have kept.
Remove steps that make it inspect or edit unrelated parts of the project.
Add a default when the agent repeatedly chooses the wrong approach.
Add a project reference when the result varies too much.
Add a final check when the agent misses the same problem more than once.
When a test fails, rewrite the instruction that led to the mistake. Avoid adding rules for problems that have not occurred.
Keep learning
Frequently asked questions
How specific should a skill be?
Specify constraints when a wrong choice would create rework or break consistency. Leave room for judgment when several outcomes would work. If two reasonable Agents could produce incompatible results, state the required outcome and what must remain unchanged.
When should I split one skill into multiple skills?
Split a skill when its instructions apply to different triggers, workflows, or outcomes. Keep instructions together when they share the same task, constraints, and checks. Each skill should have one clear job and a clear point at which that job is complete.
How do I test whether a skill works?
Run it on two realistic tasks. Check whether the Agent follows the hard requirements, preserves existing work, and makes acceptable choices without corrective prompts. Rewrite the instruction that caused a bad decision instead of adding rules for problems that did not occur.
What should I remove from a skill?
Remove repeated rules, vague adjectives, process narration, and examples that conflict with the instructions. Keep details that change a decision, prevent damage, or define how to verify the result.
