Agent skill · software engineering · jeremylongshore
framer-hello-world
Create a minimal working Framer example.
Why this skill is useful
Provides specific Framer API patterns and commands that the AI wouldn't reliably generate on its own.
What it needs
Requires npm installed locally. Requires framer account access. About 3k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
Framer Hello World Examples Create a disposable staging page with fictional content, publish it only to the approved test domain, verify no credential or visitor data appears in output, then remove the test artifact through the approved process. 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 Step 2: Hello World Code Component Step 3: Hello World Code Override Step 4: Server API Hello World 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 defined Running 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 FRAMERSITEID in site settings Resources Framer Plugin Introduction Code Components Code Overrides Server API Next Steps Proceed to framer-local-dev-loop for development workflow.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/framer-hello-world