Sync Styles

Recreate the source codebase's reusable design assets as closely as Framer supports. Preserve appearance, light/dark behavior, and editability. Follow the user's requested subset when they only want colors, typography, or icons.

Establish the source and destination

• Use the current codebase unless the user names another source. Start with global CSS, directly referenced theme/token files, font declarations, and the project's icon library or shared icon wrapper. Follow relevant definitions.
• Connect to the intended Framer project using the official framer skill and its current setup instructions. Read the refreshed project context and inspect existing color styles, text styles, fonts, and icon sets.
• Resolve unclear source or destination identity before writing.

Match the existing project

• Reuse clearly matching assets and update them in place, preserving their IDs, names, folders, and references. Match by name/path and source meaning, not just equal values. Map CSS names naturally, for example --background to background.
• Create missing assets using the destination's naming conventions. In a blank project, use the source's names, removing CSS syntax such as the leading --.
• Leave assets without a clear source counterpart unchanged, including template-specific mockup, shadow, and logo styles. Never delete, merge, or rename assets merely to make the libraries match.
• When a match is ambiguous, leave that item unchanged and report it; continue with clear matches. Read back uncertain write outcomes before retrying so retries do not create duplicates.