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 Local Dev Loop

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

Configure Framer local development with hot reload and testing.

MITAuto-check passed

Install Framer Local Dev Loop

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-local-dev-loop -a claude-code

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

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace framer-local-dev-loop --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-local-dev-loop .claude/skills/framer-local-dev-loop && 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-local-dev-loop
GitHub stars
2.8k
Token cost
~1.3k tokens
SKILL.md length
204 words
Files
1
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

Configure Framer local development with hot reload and testing.

  • Works in 5 steps: Plugin Dev Environment → Connect to Framer Editor → Testing Plugin Logic → …
  • Setting up a development environment
  • SKILL.md covers Examples, Overview, Prerequisites and Instructions, plus 4 more sections
  • Calls npm and npx; needs FRAMER_API_KEY

What it does

Framer Local Dev Loop is an agent skill from jeremylongshore/tons-of-skills-marketplace. Configure Framer local development with hot reload and testing. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with Framer. Trigger with phrases like "framer dev setup", "framer local development", "framer dev environment", "develop with framer".

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 works with Vite. 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

  • Setting up a development environment
  • Configuring test workflows
  • Establishing a fast iteration cycle with Framer
  • With phrases like framer dev setup

Example prompts

  • “framer dev setup”
  • “framer local development”
  • “framer dev environment”
  • “/framer-local-dev-loop”

Requirements

  • Node.js
  • 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(pnpm:*), Grep

Workflow steps

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

  1. Plugin Dev Environment
  2. Connect to Framer Editor
  3. Testing Plugin Logic
  4. Code Component Development
  5. Server API Development

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(pnpm:*)
    • Grep

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • npx

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

  • Network

    Links to these hosts (documentation or services it may open):

    • framer.com
    • vitest.dev

    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 Local Dev Loop loads about 1.3k tokens when it runs. Until then it costs about 84 tokens; SKILL.md has 204 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~84
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). 204 words, ~1,313 tokens.

Download SKILL.mdSave it as .claude/skills/framer-local-dev-loop/SKILL.md (or your agent's skills folder).
name
framer-local-dev-loop
description
Configure Framer local development with hot reload and testing. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with Framer. Trigger with phrases like "framer dev setup", "framer local development", "framer dev environment", "develop with framer".
allowed-tools
Read, Write, Edit, Bash(npm:*), Bash(pnpm:*), Grep
compatibility
Designed for Claude Code
version
1.5.0
license
MIT
author
Jeremy Longshore <jeremy@intentsolutions.io>
tags
saas, framer

Framer Local Dev Loop

Examples

Use fictional pages, CMS records, and form submissions in local tests. Confirm the workflow runs without production credentials, redacts logs, and removes temporary artifacts after the staging validation is complete.

Overview

Set up a fast development workflow for Framer plugins and code components with Vite hot-reload, TypeScript, and testing.

Prerequisites

  • Completed framer-install-auth setup
  • Node.js 18+ with npm
  • Framer editor open

Instructions

Step 1: Plugin Dev Environment
bash
npx create-framer-plugin@latest my-plugin
cd my-plugin
npm install
npm run dev  # Starts Vite dev server — hot-reloads into Framer editor

Project structure:

my-plugin/
├── src/
│   ├── App.tsx           # Plugin UI (React)
│   ├── main.tsx          # Entry point
│   └── framer.d.ts       # Type definitions
├── package.json
├── vite.config.ts        # Vite config with framer-plugin
└── tsconfig.json
Step 2: Connect to Framer Editor
  1. Open Framer, go to your project
  2. Click Plugins > Development in the toolbar
  3. Select your local dev plugin
  4. Changes in src/App.tsx hot-reload instantly
Step 3: Testing Plugin Logic
typescript
// tests/sync.test.ts — test data transformation outside Framer
import { describe, it, expect } from 'vitest';

// Extract pure functions for testability
function transformPosts(posts: any[]) {
  return posts.map(p => ({
    fieldData: {
      title: p.title,
      body: `<p>${p.body}</p>`,
      slug: p.title.toLowerCase().replace(/[^a-z0-9]+/g, '-').slice(0, 50),
    },
  }));
}

describe('CMS Sync', () => {
  it('should transform posts into CMS items', () => {
    const posts = [{ title: 'Hello World', body: 'Content here', userId: 1 }];
    const items = transformPosts(posts);
    expect(items[0].fieldData.title).toBe('Hello World');
    expect(items[0].fieldData.slug).toBe('hello-world');
    expect(items[0].fieldData.body).toContain('<p>');
  });

  it('should handle slugs with special characters', () => {
    const posts = [{ title: 'What\'s New in 2025?', body: 'test', userId: 1 }];
    const items = transformPosts(posts);
    expect(items[0].fieldData.slug).toBe('what-s-new-in-2025-');
  });
});
Step 4: Code Component Development
bash
# Code components are edited directly in Framer editor
# For local development of shared component libraries:
mkdir framer-components && cd framer-components
npm init -y
npm install react framer typescript @types/react
tsx
// components/Button.tsx — develop locally, paste into Framer
import { addPropertyControls, ControlType } from 'framer';

export default function Button({ label = 'Click me', variant = 'primary' }) {
  const styles = {
    primary: { background: '#000', color: '#fff' },
    secondary: { background: '#eee', color: '#000' },
  };
  return <button style={{ ...styles[variant], padding: '12px 24px', border: 'none', borderRadius: 8, fontSize: 16, cursor: 'pointer' }}>{label}</button>;
}

addPropertyControls(Button, {
  label: { type: ControlType.String, title: 'Label', defaultValue: 'Click me' },
  variant: { type: ControlType.Enum, title: 'Variant', options: ['primary', 'secondary'], defaultValue: 'primary' },
});
Step 5: Server API Development
typescript
// server-dev.ts — develop Server API integrations locally
import { framer } from 'framer-api';
import 'dotenv/config';

async function dev() {
  const client = await framer.connect({
    apiKey: process.env.FRAMER_API_KEY!,
    siteId: process.env.FRAMER_SITE_ID!,
  });

  // Test CMS operations
  const collections = await client.getCollections();
  console.log('Collections:', collections.map(c => `${c.name} (${c.type})`));
}

dev().catch(console.error);

Output

  • Vite-powered plugin with hot-reload into Framer editor
  • Testable data transformation functions
  • Local component development workflow
  • Server API development setup

Error Handling

ErrorCauseSolution
Plugin not showingDev server not runningRun npm run dev
Hot-reload not workingWrong Vite configEnsure framer-plugin Vite plugin is configured
framer undefined in testsEditor-only APIMock framer or extract pure functions
Component type errorsMissing Framer typesInstall @types/framer or use framer.d.ts

Resources

Next Steps

See framer-sdk-patterns for production-ready patterns.

© 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-local-dev-loop of jeremylongshore/tons-of-skills-marketplace.

Open the folder on GitHubat commit cfae287

Compare with similar skills

Framer Local Dev Loop 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 Local Dev Loop compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Framer Local Dev Loop this skilljeremylongshore/tons-of-skills-marketplace2.8k—~1.3kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
Chakra UI v3 Builderchakra-ui/chakra-ui41k—~3.1kAutomated safety check: PassMIT
Vuetify Playgroundvuetifyjs/vuetify41k—~730Automated safety check: PassCustom licence
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Vuetify Playground

    vuetifyjs/vuetify

    Maintains the Vuetify repo's local Playground.vue so contributors get a realistic reproduction and a short demo they can paste into a pull request description.

    41k GitHub stars~730 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 7 mo ago
    Frontend & DesignAuto-check: notes

  • Vitest

    supabase/supabase

    Official

    Vitest API and config reference (Jest-compatible) — mocking with vi., spies, fake timers, coverage configuration, fixtures, snapshots, and test filtering.

    111k GitHub starsUsed in 12 repos~1.1k tokens
    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

Works with

Questions about Framer Local Dev Loop

What does Framer Local Dev Loop do?

Configure Framer local development with hot reload and testing. Framer Local Dev Loop is an agent skill from jeremylongshore/tons-of-skills-marketplace. Configure Framer local development with hot reload and testing.

When should I use Framer Local Dev Loop?

Framer Local Dev Loop fits situations like: setting up a development environment; configuring test workflows; establishing a fast iteration cycle with Framer; with phrases like framer dev setup.

How do I install Framer Local Dev Loop in Claude Code?

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

How do I install Framer Local Dev Loop in Codex?

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

Can I use Framer Local Dev Loop 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-local-dev-loop -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-local-dev-loop, .gemini/skills/framer-local-dev-loop, .github/skills/framer-local-dev-loop and .opencode/skills/framer-local-dev-loop in your project.

What does Framer Local Dev Loop need to run?

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

Does Framer Local Dev Loop access the network?

SKILL.md names 2 domains. As links in the text: framer.com and vitest.dev. This is read from the text; nothing was executed.

Is Framer Local Dev Loop 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 Local Dev Loop use?

Framer Local Dev Loop 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 Local Dev Loop 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 Local Dev Loop?

Skills that share tags, products or a category with Framer Local Dev Loop: Web Artifacts Builder (anthropics/skills, 180k stars), React Router Development (remix-run/react-router, 57k stars), Chakra UI v3 Builder (chakra-ui/chakra-ui, 41k stars) and Vuetify Playground (vuetifyjs/vuetify, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Framer Local Dev Loop?

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.