Framer Skill

Overview

Quick Install

curl -sSL https://canifi.com/skills/framer/install.sh | bash

cp -r skills/framer ~/.canifi/skills/

Setup

# First, ensure canifi-env is installed:
# curl -sSL https://canifi.com/install.sh | bash

canifi-env set FRAMER_EMAIL "your-email@example.com"
canifi-env set FRAMER_PASSWORD "your-password"

Privacy & Authentication

Option 1: Manual Browser Login (Recommended)

1. Complete the Browser Automation Setup using CDP mode
2. Login to the service manually in the Playwright-controlled Chrome window
3. Claude will use your authenticated session without ever seeing your password

Option 2: Environment Variables

canifi-env set SERVICE_EMAIL "your-email"
canifi-env set SERVICE_PASSWORD "your-password"

Capabilities

• Create and edit website pages
• Manage design components
• Configure site settings and SEO
• View and respond to form submissions
• Publish sites to live URLs
• Access analytics and performance data

Usage Examples

Example 1: Update Page Content

User: "Update the homepage hero text on my Framer site"
Claude: I'll update your hero section.
1. Opening Framer via Playwright MCP
2. Navigating to your project
3. Selecting the homepage
4. Editing the hero text component
5. Publishing the changes

Example 2: Check Form Submissions

User: "Show me recent contact form submissions"
Claude: I'll retrieve your form data.
1. Opening your Framer project
2. Navigating to forms section
3. Accessing contact form submissions
4. Listing recent entries with details

Example 3: Publish Site Updates

User: "Publish my site changes to production"
Claude: I'll publish your updates.
1. Opening the Framer project
2. Reviewing pending changes
3. Clicking publish button
4. Confirming deployment
5. Verifying live site is updated

Authentication Flow

1. Navigate to framer.com via Playwright MCP
2. Click "Log in" and enter email
3. Enter password
4. Handle SSO if configured
5. Complete 2FA if required (via iMessage)

Error Handling

• Login Failed: Retry up to 3 times, notify via iMessage
• Session Expired: Re-authenticate automatically
• Rate Limited: Implement exponential backoff
• 2FA Required: Send iMessage notification
• Publish Failed: Check for errors and retry
• Component Error: Debug and fix before publish

Self-Improvement Instructions

1. Document new design capabilities
2. Update component creation workflows
3. Track publishing process changes
4. Log new integration features

Notes

• Framer combines design and development
• Code components use React
• Custom domains require paid plans
• CMS features available for dynamic content
• Sites can be exported as code