New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Framer Hello World

by jeremylongshore in jeremylongshore/tons-of-skills-marketplace

Create a minimal working Framer example. An agent skill from jeremylongshore/tons-of-skills-marketplace.

MITAuto-check passedTesting & QA

Install Framer Hello World

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-hello-world -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace framer-hello-world --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/framer-hello-world .claude/skills/framer-hello-world && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
framer-hello-world
GitHub stars
2.8k
Token cost
~1.3k tokens
SKILL.md length
221 words
Files
1
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

Create a minimal working Framer example. An agent skill from jeremylongshore/tons-of-skills-marketplace.

  • Works in 4 steps: Hello World Plugin → Hello World Code Component → Hello World Code Override → …
  • Starting a new Framer integration
  • SKILL.md covers Examples, Overview, Prerequisites and Instructions, plus 4 more sections
  • Calls npm; reaches picsum.photos; needs FRAMER_API_KEY

What it does

Framer Hello World is an agent skill from jeremylongshore/tons-of-skills-marketplace. 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".

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Designed for Claude Code

It sits in Testing & QA, covering Integration testing. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • Starting a new Framer integration
  • Testing your setup
  • Learning basic Framer API patterns
  • With phrases like framer hello world

Example prompts

  • “framer hello world”
  • “framer example”
  • “framer quick start”
  • “/framer-hello-world”

Requirements

  • A credential in FRAMER_API_KEY
  • Compatibility (from SKILL.md): Designed for Claude Code
  • Pre-approved tools (allowed-tools): Read, Write, Edit, Bash(npm:*), Bash(npx:*)

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Hello World Plugin
  2. Hello World Code Component
  3. Hello World Code Override
  4. Server API Hello World

What it can do on your machine

Read from SKILL.md and the folder at commit cfae287. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Bash(npm:*)
    • Bash(npx:*)

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • picsum.photos

    Also links to:

    • framer.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • FRAMER_API_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Designed for Claude Code

    From compatibility in the SKILL.md frontmatter.

Context cost

Framer Hello World loads about 1.3k tokens when it runs. Until then it costs about 68 tokens; SKILL.md has 221 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~68
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 221 words, ~1,330 tokens.

Download SKILL.mdSave it as .claude/skills/framer-hello-world/SKILL.md (or your agent's skills folder).
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:*)
compatibility
Designed for Claude Code
version
1.5.0
license
MIT
author
Jeremy Longshore <jeremy@intentsolutions.io>
tags
saas, framer

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
tsx
// src/App.tsx — Plugin UI that runs inside Framer editor
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
tsx
// Code component — renders inside Framer sites (not a plugin)
// Create via: Framer editor > Assets > Code > New 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
tsx
// Code override — modifies existing layer behavior
// Create via: Framer editor > Assets > Code > New 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
typescript
// server-hello.ts — headless access without opening Framer
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!,
  });

  // List all pages
  const pages = await client.getPages();
  console.log('Pages:', pages.map(p => p.name));

  // List CMS collections
  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

ErrorCauseSolution
framer is not definedRunning outside editorPlugin code only works in Framer editor iframe
Component not renderingMissing export defaultCode components must use export default
Override not applyingWrong export nameEach override must be a named export function
Server API timeoutInvalid site IDCheck FRAMER_SITE_ID in site settings

Resources

Next Steps

Proceed to framer-local-dev-loop for development workflow.

© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/.curated/framer-hello-world of jeremylongshore/tons-of-skills-marketplace.

Open the folder on GitHubat commit cfae287

Compare with similar skills

Framer Hello World next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Framer Hello World compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Framer Hello World this skilljeremylongshore/tons-of-skills-marketplace2.8k—~1.3kAutomated safety check: PassMIT
Plugin Testingpolyipseity/obsidian-terminal951—~828Automated safety check: PassAGPL-3.0
Create Modulecartography-cncf/cartography4.1k—~2.5kAutomated safety check: PassApache-2.0
Td Integration Testmarcus/td251—~1.2kAutomated safety check: PassMIT
Integration E2E Testingshinpr/claude-code-workflows694—~3.5kAutomated safety check: PassMIT
JS-in-HTML Testingliaohch3/claude-tap3.3k—~924Automated safety check: PassMIT

Similar skills

  • Plugin Testing

    polyipseity/obsidian-terminal

    Skill for testing Obsidian plugin features in this repository.

    951 GitHub stars~828 tokensUpdated 7 days ago
    Testing & QAAuto-check passed

  • Create Module

    cartography-cncf/cartography

    Author a new Cartography intel module end-to-end (entry point, sync GET/TRANSFORM/LOAD/CLEANUP, declarative data model, integration test, schema docs).

    4.1k GitHub stars~2.5k tokensUpdated today
    Testing & QAAuto-check passed

  • Td Integration Test

    marcus/td

    Write integration tests for the td-sync admin API using the TestHarness in internal/api/testharnesstest.go.

    251 GitHub stars~1.2k tokensUpdated 10 days ago
    Testing & QAAuto-check passed

  • Integration E2E Testing

    shinpr/claude-code-workflows

    Integration and E2E test design principles, ROI calculation, test skeleton specification, and review criteria.

    694 GitHub stars~3.5k tokensUpdated 9 days ago
    Testing & QAAuto-check passed

  • JS-in-HTML Testing

    liaohch3/claude-tap

    Tests JavaScript embedded in an HTML file in two layers: pytest checks of the logic ported to Python, and Playwright runs in a real browser for the DOM.

    3.3k GitHub stars~924 tokensUpdated yesterday
    Testing & QAAuto-check passed

  • Add Acceptance Test

    talkincode/toughradius

    Write CI-executable acceptance/integration tests for protocol or end-to-end changes (TR-F022).

    691 GitHub stars~827 tokensUpdated 2 days ago
    Testing & QAAuto-check passed

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo

  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes

  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated today
    Auto-check passed

  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated today
    Auto-check passed

Categories

Questions about Framer Hello World

What does Framer Hello World do?

Create a minimal working Framer example. An agent skill from jeremylongshore/tons-of-skills-marketplace. Framer Hello World is an agent skill from jeremylongshore/tons-of-skills-marketplace. Create a minimal working Framer example.

When should I use Framer Hello World?

Framer Hello World fits situations like: starting a new Framer integration; testing your setup; learning basic Framer API patterns; with phrases like framer hello world.

How do I install Framer Hello World in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-hello-world -a claude-code`. Or copy the skill folder (skills/.curated/framer-hello-world in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/framer-hello-world in your project. Claude Code loads it when a task matches its description.

How do I install Framer Hello World in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-hello-world -a codex`. Or copy the skill folder (skills/.curated/framer-hello-world in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/framer-hello-world in your project. Codex loads it when a task matches its description.

Can I use Framer Hello World in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-hello-world -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/framer-hello-world, .gemini/skills/framer-hello-world, .github/skills/framer-hello-world and .opencode/skills/framer-hello-world in your project.

What does Framer Hello World need to run?

Going by SKILL.md and its folder, Framer Hello World needs the command-line tools its instructions call (npm) and credentials named FRAMER_API_KEY. Our summary lists: A credential in FRAMER_API_KEY. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash(npm:*), Bash(npx:*). Compatibility (from SKILL.md): Designed for Claude Code.

Does Framer Hello World access the network?

SKILL.md names 2 domains. In commands or code: picsum.photos; the agent is likely to contact it when it follows the instructions. As links in the text: framer.com. This is read from the text; nothing was executed.

Is Framer Hello World safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Framer Hello World use?

Framer Hello World is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Framer Hello World use?

About 1.3k tokens (SKILL.md is roughly 5.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Framer Hello World?

Skills that share tags, products or a category with Framer Hello World: Plugin Testing (polyipseity/obsidian-terminal, 951 stars), Create Module (cartography-cncf/cartography, 4.1k stars), Td Integration Test (marcus/td, 251 stars) and Integration E2E Testing (shinpr/claude-code-workflows, 694 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Framer Hello World?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,827 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 10, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.