Pages

Layers

Assets

Frame

Frame

Frame

Framer’s Layers panel showing unnamed frames and nested stacks beside empty frames on the canvas.

/

Quality

Tidy up skill

Inspect every breakpoint, rename layers, and remove hidden or unused leftovers only after confirming they have no role in the design or interactions.

Copy skill

Copied

Copy skill

Copied

# Tidy Up Organize the layers of a Framer page, section, or component. Give layers clear names and delete hidden or leftover layers that are not used in the selected area. ## Scope - Work on the selected area. If nothing is selected, use the current page. - Inspect every available breakpoint. For components, inspect variants and interactive states. - Keep the cleanup within the selected area. Do not clean the Assets panel, CMS, or other pages unless the user asks. ## Checks 1. Find vague or misleading names on layers such as sections, cards, navigation, forms, and overlays. 2. Find layers hidden across every available breakpoint and component variant. 3. Check whether an interaction or conditional rule can make a hidden layer visible. 4. Find empty text layers, empty containers, abandoned copies, temporary notes, and off-canvas material. 5. Before removing a layer, check whether it contains useful children or controls layout, links, CMS content, animation, clipping, or stacking. ## Changes - Rename unclear layers directly. Use short names that describe their role. - Delete a layer that is hidden across all available breakpoints and variants and cannot be revealed by an interaction or condition. Its original purpose does not need to be established. - Delete clearly unused empty layers and leftovers. - Remove a redundant wrapper only when its removal preserves its children’s layout and behavior. - Do not delete a layer that is visible at another breakpoint or variant, or one used for an interactive state. - Leave a layer in place only when a specific unverified use could make deletion unsafe. Name that use in the report. ## Check your work - Inspect the edited area again on desktop and phone. - If a shared component changed, inspect its variants and at least one other page where it is used. - Check visible layout, links, CMS content, and interactions where possible. Mark checks that could not be completed as unverified. ## Output Start with the page, section, or component reviewed. ## Renamed Give layer names before and after. Group routine renames briefly. ## Deleted Name every deleted layer and state why it qualified for removal. ## Kept Name hidden or apparently unused layers kept because of a specific breakpoint, variant, interaction, condition, or dependency. ## Unverified Name any breakpoints, variants, interactions, component uses, or visual checks the Agent could not complete. Do not report a fully hidden layer as merely a review candidate when the checks above establish that it cannot appear or serve another purpose.

How to apply skills to your project
  1. 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.

  2. /skills

    Turn these instructions into

    a reusable skill:

    GPT 6 Sol

    2. Add it in agent chat

    Type /skills in your agent chat and paste the skill, or add it in Settings / Skills.

  3. 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.

  4. 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 with maxWidth="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.

次のアイデアを、
かたちにしよう。

GPT 6 Sol

ポートフォリオをつくる

スタートアップのサイトをつくる

LPをつくる

企業ブログを始める

Framer UI showing Pages, Layers and Assets panels titles
Framer UI showing Pages, Layers and Assets panels titles