Page metadata skill
Write titles and descriptions that tell visitors what each page covers. Check search visibility, CMS detail pages, and social images, then report what changed.
# Page metadata Use this skill to write and update page titles and meta descriptions in Framer. Make each one accurate, distinct, and useful to someone deciding whether to open the page. ## Before you start - Confirm whether the task covers one page, a group of pages, or the whole site. Work only within that scope. - Read each target page and its current metadata. Identify the page’s topic, audience, and purpose. - Page copy may live inside components or layout templates. Check those, or inspect a screenshot, before describing the page. - Check the site’s default title and description, search visibility, and most common brand format. - For CMS detail pages, inspect the collection fields and several real items before choosing dynamic values. ## Steps 1. Check search visibility. Pages hidden from search can still have useful metadata, so complete the requested metadata work for them. Flag a hidden Home, Pricing, or other important public page as a possible mistake; do not change its visibility. 2. Write a title that identifies the page’s specific topic. Put the most useful words first. Follow the most common existing brand format. Flag inconsistencies, but only rewrite an otherwise accurate title for brand format if the user asks. 3. Write a description that explains what visitors will find or do on the page. Use concrete details the page supports. 4. Update titles and descriptions in Framer’s Page Settings where the Agent has access. If a setting is unavailable, provide the exact text and page path for manual entry. 5. For CMS detail pages, connect the description to an appropriate item field. If the page title cannot be linked to a field, do not claim it was; provide a title pattern and sample item titles for manual setup. Check several items, including one with missing or unusually long content. 6. If the site has multiple locales, draft titles and descriptions for the languages covered by the task and tell the user to enter them in Framer’s Localization view. Mark them as drafted, not applied. 7. Compare the finished metadata across the pages in scope and fix accidental duplicates. 8. Check whether a social preview image is set for each page in scope. For CMS detail pages, check whether it uses an item image field. Report missing images without changing them. 9. Report the results in a table with the page path, field, previous value, new value, and whether the change was applied or drafted. Include search visibility and social image status. Mark anything the Agent could not inspect as unverified. ## Rules - Aim for roughly 50–60 characters for titles and 120–160 for descriptions. These are editing guides, not limits. Put the essential information first so the text still makes sense if a search result shortens it; don’t add filler to reach a target. - Do not add keywords, dates, numbers, or benefits that the page does not support. - Preserve existing metadata that is already accurate and specific. - Do not change social preview images, search visibility, or publish the site unless the user asks. - Never claim a setting was checked or updated if the Agent could not access it.
How to apply skills to your project
Keep new pages consistent with your project’s typography, colors, spacing, and components.
Skill copied
# Design system
Use this skill when you add pages or sections to a site that already has a look. You extend the system the team built. You don’t invent a new one.
## Before you start
- Open the home page and two pages close to the new one.1. Copy the skill
Use the Copy button above the skill to copy this skill’s instructions to your clipboard.
/skills
Turn these instructions into
a reusable skill:
GPT 6 Sol
2. Add it in agent chat
Type
/skillsin your agent chat and paste the skill, or add it in Settings / Skills.Use
/design-system
to build a new
Careers page. Include a couple job openings and a form.
GPT 6 Sol
3. Use it in chat
Type the skill’s command, such as
/design-system, in your agent to use it.Title
design-system
Description
Use components, styles, spacing, and layouts to create new
Content
Design system
Use dark color scheme. Reuse existing styles and components; never invent new colors or text styles.
Pages
Apply the Base layout template to every new page.
Set a meta title and meta description on every new page.
Sections fill the screen width (
1fr) and contain an inner wrapper withmaxWidth="1200px"that holds the content.
Colors
Container backgrounds: Color/Black.
Text:
Primary headings: Color/White
Secondary/body text: Color/White 60
Accent: Color/Red is the only accent. Use it very sparingly (one highlight per section at most).
Borders and dividers: Color/Border Solid or Color/Border Transparent.
Typography
Always use these text styles, never inline type styles:
Set Text Balance to Yes for text layers.
Use sentence case; do not use all caps.
Do not use eyebrow text (small text above a heading).
In heroes, use Text/Body L for supporting text.
For every paragraph, adjust its text-box width to produce 50–75 characters per line, targeting 65. Round the width up to the nearest 5 or 10 pixels. If that width is wider than the parent container, set the text box to Fill. Verify at every breakpoint before finishing.
Text/H0: jumbo headings and hero treatments
Text/H1: blog post titles and secondary page titles
Text/H2, Text/H3, Text/H4, Text/H5, Text/H6: all other headings, in hierarchy order
Text/Body L: sub heads
Text/Body: main body text
Text/Body M: small supporting text
Text/Button: button labels only
4. Edit your skill
Open Settings / Skills whenever you want to make changes.


