Make Your AI Coding Agent a Froala Expert

Meet Froala Agent Skills, an open set of skills that gives your AI coding agent accurate, up-to-date knowledge of Froala.

If you’ve asked an AI coding agent to help with Froala, you’ve probably seen it happily write code that looks right but isn’t. Some mistakes fail silently: a toolbar button never shows up, or your production site displays an unlicensed banner. Others are simply out of date, like Froala’s old jQuery-style initializer. Either way, you lose hours to debugging, and your app looks unfinished to your users. These skills fix that by teaching your agent how Froala works today.

For example, your AI coding agent may respond with something like this:

// What an AI agent often writes from older training data
$('#editor').froalaEditor({
  licenseKey: 'YOUR_KEY',
  toolbarButtons: ['bold', 'italic', 'insertImage'],
  events: {
    'froalaEditor.contentChanged': (e, editor) => {
      console.log(editor.html.get());
    }
  }
});

It looks reasonable. It isn’t. The jQuery-style initializer and the froalaEditor. event prefix belong to Froala v2; since v3, Froala has been framework-free and uses new FroalaEditor(). The license option is key, not licenseKey, and Froala silently ignores unknown options, so the unlicensed banner stays on your production site with no error to tell you why. And unless the image plugin is loaded, the insertImage button simply never appears.

Here’s what the same request produces with Froala Agent Skills installed:

import FroalaEditor from 'froala-editor';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/js/plugins/image.min.js';

new FroalaEditor('#editor', {
  key: process.env.FROALA_ACTIVATION_KEY, // never hardcode a production key
  toolbarButtons: ['bold', 'italic', 'insertImage'],
  events: {
    contentChanged: function () {
      console.log(this.html.get()); // `this` is the editor
    }
  }
});

No jQuery, the right license option read from an environment variable, both required stylesheets, the plugin the image button depends on, and a regular function so this points to the editor. Same prompt, working code.

Key takeaways

• AI coding agents often write outdated or silently broken Froala code.
• Froala Agent Skills is a set of seven open skills that give your agent accurate Froala knowledge, and they switch on automatically.
• One command installs them: npx skills add froala/froala-skills.
• They work in Claude Code, Cursor, Codex, GitHub Copilot and any agent that supports the SKILL.md format.

What’s inside

Froala Agent Skills is a collection of seven skills written in the open SKILL.md format, so they work in Claude Code, Cursor, Codex, GitHub Copilot and any other agent that supports it. Each skill packages what our team knows about one part of Froala: the right API names, the setup steps that are easy to miss, and the mistakes we see developers (and AI agents) make most often.

The skills are organized into four groups:

You never have to call a skill by name. Your agent always sees a short description of each one, and when your request or your code matches, it loads the full instructions on its own. Import react-froala-wysiwyg, type aiAssistRequest, or ask why a button isn’t showing, and the right skill switches on.

Install in one line

From your project folder, run:

npx skills add froala/froala-skills

This installs the skills for every compatible agent it finds in your project. Add -g to install them globally for all your projects, or -s <skill-name> to pick only the skills you want.

If you use Claude Code, you can install from the plugin marketplace instead:

/plugin marketplace add froala/froala-skills
/plugin install froala@froala-skills

Check that it worked

Run npx skills list (add -g if you installed globally) to see the installed skills. Then ask your agent: “Which option sets the Froala license key?” With the skills loaded, it should answer key and warn that licenseKey is silently ignored.

That’s the whole setup. Now let’s see what changes in practice.

Demo 1: Set up Froala in React

Prompt: “Add a Froala editor to my React app and keep the HTML in state.”

The froala-initialization-and-sdks skill activates and the agent writes:

import { useState } from 'react';
import FroalaEditorComponent from 'react-froala-wysiwyg';

import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/js/plugins.pkgd.min.js'; // registers the plugins the toolbar uses

const config = {
  key: import.meta.env.VITE_FROALA_KEY,
  heightMin: 200,
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'insertLink', 'insertImage'],
};

export default function Editor() {
  const [html, setHtml] = useState('<p>Hello from React!</p>');

  return (
    <FroalaEditorComponent
      tag="textarea"
      config={config}
      model={html}
      onModelChange={setHtml}
    />
  );
}

A few details the skill gets right that agents often miss:

• Both stylesheets. froala_editor.pkgd.min.css styles the editor itself and froala_style.min.css styles the content. Leave one out and the editor renders but looks broken.
• Plugins for every button. A toolbar button whose plugin isn’t loaded doesn’t throw an error; it just never renders. Importing plugins.pkgd.min.js covers the buttons above.
• State, not manual reads. model and onModelChange keep your React state in sync. When you need to call editor methods directly, use a ref and ref.current.getEditor().
• Next.js. On the App Router, 'use client' alone isn’t enough, because client components are still pre-rendered on the server. The agent loads the editor with next/dynamic and ssr: false to avoid the Element is not defined build error.

Demo 2: Turn on AI Assist

Prompt: “Add AI writing tools to the editor. Our backend already has an /api/ai endpoint.”

The froala-ai-assist skill activates:

new FroalaEditor('#editor', {
  aiSupplementalTermsAccepted: true,
  toolbarButtons: ['bold', 'italic', '|', 'aiAssist', 'aiShortCuts', 'aiChatAssistant'],

  aiAssistRequest: async function (data, signal) {
    const res = await fetch('/api/ai', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt: data.prompt, context: data.context, model: data.model }),
      signal, // lets Froala cancel the request
    });
    const json = await res.json();
    return json.answer; // an HTML string
  },
});

This gives your users a free-form prompt panel, one-click shortcuts for changing tone, translating and improving writing, and an AI Chat panel. Here’s what the skill makes sure of:

• The terms flag. Without aiSupplementalTermsAccepted: true, every AI button only opens a popup asking you to accept Froala’s AI Supplemental Terms, and nothing else happens. It’s the most common reason AI Assist “doesn’t work.” Review the terms before you set it.
• Your keys stay on your server. Froala doesn’t ship a model. You connect your own provider (OpenAI, Google Gemini, Anthropic, Groq or your own service), and the skill routes requests through your backend with aiAssistRequest so provider API keys never reach the browser. Treat what comes back like any other user content: sanitize the HTML on your server before you store it.
• HTML, not Markdown. Returning Markdown inserts it as plain text. The skill returns an HTML string.
• Version gates. AI Assist needs Froala 5.1.0 or later, AI Chat needs 5.4.0 or later, and AI image generation needs 5.5.0 or later.

Demo 3: Fix a toolbar button that won’t show up

Prompt: “I added trackChanges to my toolbar, but the button doesn’t appear. There’s nothing in the console.”

This is the kind of bug that eats an afternoon, because Froala doesn’t throw an error when a button can’t render. The froala-error-diagnosis skill activates and the agent goes straight to the cause: the Track Changes plugin isn’t included in the pkgd bundles, so it has to be loaded on its own.

import 'froala-editor/js/plugins/track_changes.min.js';

new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', '|', 'trackChanges', 'showChanges', 'applyAll', 'removeAll'],
});

If that isn’t the problem, the skill walks through the other usual suspects in order:

• Plugin JS not imported. Buttons for images, links, tables and video need their plugin file loaded first.
• pluginsEnabled is an allowlist. If you set it, any plugin you don’t list is turned off, even if you imported it.
• Wrong button name. Names are case-sensitive: insertImage, formatOL, fullscreen.
• Missing toolbar group. When toolbarButtons is a grouped object (moreText, moreParagraph, moreRich), a button that isn’t in any group is never rendered.

Frequently asked questions

Which AI coding agents does it work with?

Any agent that supports the open SKILL.md format, including Claude Code, Cursor, Codex and GitHub Copilot.

Do I need to call the skills myself?

No. Your agent reads a short description of each skill and loads the right one automatically when your request or code matches it.

Can I install only some of the skills?

Yes. Add -s <skill-name> to the install command to pick individual skills, for example npx skills add froala/froala-skills -s froala-ai-assist.

Do the skills send my code anywhere?

No. The skills are plain instruction files stored with your project. They don’t collect or send any data, and your agent handles your code exactly as it does today.

Is it free?

Yes. The skills are open source under the MIT license. You still need a Froala license to use the editor itself in production.

Try it, star it, and tell us what’s missing

AI coding agents are only as good as what they know. Froala Agent Skills gives them knowledge that comes straight from the team that builds the editor, so you spend less time correcting generated code and more time shipping.

Here’s how to get involved:

1. Try it. Run npx skills add froala/froala-skills in a project, then paste this into your agent: “Add a Froala editor to this page with bold, italic and image buttons.” Compare the result with what you got before.
2. Star the repo. Starring froala/froala-skills on GitHub helps other developers find it and tells us it’s worth investing in.
3. Report issues. If a skill gives guidance that’s wrong, outdated or missing, open an issue. Include the prompt you used and what the agent produced; that’s the fastest way for us to fix it.