Skip to main content
framer-hello-world Create a minimal working Framer example.
Use when starting a new Framer integration, testing your setup,
or learning basic Framer API patterns.
Trigger with phrases like "framer hello world", "framer example",
"framer quick start", "simple framer code".
インストールへ移動 Skills Marketplace コミュニティが作成したAIスキルを発見・探索
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/jeremylongshore/claude-code-plugins-plus-skills --skill framer-hello-worldコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Zipをダウンロード ダウンロード中... このリポジトリの他の Skills Implement user sign-up and sign-in flows with Clerk.
Use when building authentication UI, customizing sign-in experience,
or implementing OAuth social login.
Trigger with phrases like "clerk sign-in", "clerk sign-up",
"clerk login flow", "clerk OAuth", "clerk social login".
Implement session management and middleware with Clerk.
Use when managing user sessions, configuring route protection,
or implementing token refresh and custom JWT templates.
Trigger with phrases like "clerk session", "clerk middleware",
"clerk route protection", "clerk token", "clerk JWT".
Configure enterprise SSO, role-based access control, and organization management.
Use when implementing SSO integration, configuring role-based permissions,
or setting up organization-level controls.
Trigger with phrases like "clerk SSO", "clerk RBAC",
"clerk enterprise", "clerk roles", "clerk permissions", "clerk organizations".
jeremylongshore
jeremylongshore/claude-code-plugins-plus-skills
GitHub リポジトリを開く name framer-hello-world description Create a minimal working Framer example.
Use when starting a new Framer integration, testing your setup,
or learning basic Framer API patterns.
Trigger with phrases like "framer hello world", "framer example",
"framer quick start", "simple framer code".
allowed-tools Read, Write, Edit, Bash(npm:*), Bash(npx:*) version 1.5.0 license MIT author Jeremy Longshore <jeremy@intentsolutions.io> tags ["saas","framer"] compatibility Designed for Claude Code
Framer Hello World
Overview Build a minimal Framer plugin that inserts a styled text layer onto the canvas, and a code component that renders inside Framer sites. Both use the framer-plugin SDK which provides the framer global for editor interaction.
Prerequisites
Completed framer-install-auth setup
Framer editor open with a project
Plugin dev server running (npm run dev)
Instructions
Step 1: Hello World Plugin
import { framer } from 'framer-plugin' ;
framer.showUI ({ width : 300 , height : 200 , title : 'Hello World Plugin' });
export function App (const insertText = async (await framer.addText ('Hello from my plugin!' , {
position : { x : 100 , y : 100 },
style : { fontSize : 24 , color : '#333' },
});
framer.notify ('Text inserted on canvas!' );
};
const insertImage = async (await framer.addImage ({
url : 'https://picsum.photos/400/300' ,
position : { x : 100 , y : 200 },
});
};
return (
<div style ={{ padding: 16 , display: 'flex ', flexDirection: 'column ', gap: 8 }}>
<h2 > Hello World</h2 >
<button onClick ={insertText} > Insert Text</button >
<button onClick ={insertImage} > Insert Image</button >
</div >
Step 2: Hello World Code Component
import { addPropertyControls, ControlType } from 'framer' ;
interface Props {
text : string ;
color : string ;
}
export default function HelloComponent ({ text, color }: Props ) {
return (
<div style ={{
display: 'flex ',
alignItems: 'center ',
justifyContent: 'center ',
height: '100 %',
fontSize: 24 ,
fontWeight: 600 ,
color ,
background: 'linear-gradient (135deg , #667eea 0 %, #764ba2 100 %)',
borderRadius: 12 ,
padding: 20 ,
}}>
{text}
</div > addPropertyControls (HelloComponent , {
text : { type : ControlType .String , title : 'Text' , defaultValue : 'Hello Framer!' },
color : { type : ControlType .Color , title : 'Color' , defaultValue : '#ffffff' },
});
Step 3: Hello World Code Override
import { Override } from 'framer' ;
export function FadeInOnScroll (Override {
return {
initial : { opacity : 0 , y : 20 },
whileInView : { opacity : 1 , y : 0 },
transition : { duration : 0.6 , ease : 'easeOut' },
viewport : { once : true },
};
}
export function HoverScale (Override {
return {
whileHover : { scale : 1.05 },
whileTap : { scale : 0.95 },
transition : { type : 'spring' , stiffness : 400 , damping : 17 },
};
}
Step 4: Server API Hello World
import { framer } from 'framer-api' ;
async function main (const client = await framer.connect ({
apiKey : process.env .FRAMER_API_KEY !,
siteId : process.env .FRAMER_SITE_ID !,
});
const pages = await client.getPages ();
console .log ('Pages:' , pages.map (p =>name ));
const collections = await client.getCollections ();
for (const col of collections) {
const items = await col.getItems ();
console .log (`Collection "${col.name} ": ${items.length} items` );
}
}
main ().catch (console .error );
Output
Working plugin that inserts text and images onto the Framer canvas
Code component with property controls
Code overrides for animation behaviors
Server API script listing pages and CMS collections
Error Handling Error Cause Solution framer is not definedRunning outside editor Plugin code only works in Framer editor iframe Component not rendering Missing export default Code components must use export default Override not applying Wrong export name Each override must be a named export function Server API timeout Invalid site ID Check FRAMER_SITE_ID in site settings
Resources
Next Steps Proceed to framer-local-dev-loop for development workflow.
