New: 97,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

Frontend Module

by exelearning in exelearning/exelearning

Change vanilla JavaScript UI modules in public/app/, including DOM state, events and localization.

AGPL-3.0Auto-check passedFrontend & Design

Install Frontend Module

skills CLI
$ npx skills add exelearning/exelearning --skill frontend-module -a claude-code

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

GitHub CLI
$ gh skill install exelearning/exelearning frontend-module --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/exelearning/exelearning.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/frontend-module .claude/skills/frontend-module && 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
frontend-module
GitHub stars
145
Token cost
~867 tokens
SKILL.md length
347 words
Files
1
Skills in repo
17
Repo updated
First seen
Licence
AGPL-3.0

At a glance

Change vanilla JavaScript UI modules in public/app/, including DOM state, events and localization.

  • Tasks that involve Internationalization
  • SKILL.md covers When to Use, Key Files, Test approach and Commands, plus 2 more sections
  • Calls bun and make

What it does

Frontend Module is an agent skill from exelearning/exelearning. Change vanilla JavaScript UI modules in public/app/, including DOM state, events and localization.

Its SKILL.md is about 870 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Internationalization. It works with JavaScript and Vitest. The repository describes itself as: eXeLearning is an AGPL-licensed free/libre tool to create and publish open educational resources. The licence is AGPL-3.0.

When your agent uses it

  • Tasks that involve Internationalization

Example prompts

  • “/frontend-module”

What it can do on your machine

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

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • bun
    • make

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

  • Network

    No URLs in SKILL.md.

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

  • Credentials

    Names no API keys, tokens, secrets or passwords.

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

Context cost

Frontend Module loads about 867 tokens when it runs. Until then it costs about 29 tokens; SKILL.md has 347 words of instructions outside code blocks.

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

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 exelearning/exelearning at commit 319b5d2, republished under its AGPL-3.0 licence (© exelearning). 347 words, ~867 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-module/SKILL.md (or your agent's skills folder).
name
frontend-module
description
Change vanilla JavaScript UI modules in public/app/, including DOM state, events and localization.

Skill: Frontend Module

Completion: verify-change.

Parent: AGENTS.md | Related: idevice, i18n

When to Use

Adding or modifying vanilla JavaScript modules in public/app/.

Key Files

  • public/app/workarea/ — main workarea UI (menus, modals, interface, project)
  • public/app/yjs/ — Yjs client-side modules (YjsDocumentManager, YjsStructureBinding, AssetManager)
  • public/app/core/ — core application logic
  • public/app/editor/ — TinyMCE editor settings
  • public/app/rest/ — REST client helpers
  • public/app/common/ — shared modules
  • public/app/locate/ — localization helpers
  • public/app/utils/ — utility helpers
  • vitest.config.mts — test runner config (happy-dom environment)

Test approach

Use the nearest .test.js and its Vitest/happy-dom harness. Set up only the required DOM; restore fake timers, spies, event listeners and global state after each test. Assert a user-visible state change or a real dependency call rather than creating an unconnected mock just to assert its call count. For role-dependent UI, test owner and collaborator states; hidden UI does not replace server authorization. Follow the existing lifecycle and dispose handlers when a module is recreated or the editor closes.

Commands

bash
bun x vitest run public/app/path/file.test.js             # Run single test
bun x vitest run public/app/path/file.test.js --coverage   # With coverage
bun x vitest run public/app/path/file.test.js -t "name"    # Specific test
make test-frontend                                        # All frontend tests
make fix                                                  # Lint

Gotchas

  • bun test will fail on frontend files — always use bun x vitest run. Frontend needs happy-dom (configured in vitest.config.mts). "window is not defined" means you used the wrong runner.
  • JavaScript type coercion — never subtract strings (e.g., dateA - dateB on ISO strings returns NaN). Always convert explicitly: new Date(dateA).getTime() - new Date(dateB).getTime().
  • Use SCSS for persistent presentation under assets/styles/; preserve existing measured geometry/runtime positioning instead of blindly rewriting every style assignment.
  • All strings must be translated — use _() for GUI, c_() for content. No hardcoded English (see i18n skill).
  • Every .js must have a .test.js — CI coverage gate will fail without it.
  • Never call /api/v1/* — internal frontend uses Yjs + WebSocket. v1 is for external integrations only.
  • Deferred execution in collaborative mode — if the user is actively editing an iDevice, defer page reloads until the editor closes. Use the _deferredPageReload pattern from YjsProjectBridge. Example: PR #1540.
  • Filename decoding — always wrap decodeURIComponent() in try/catch with a fallback to the raw string.

Done When

  • .test.js created alongside .js file
  • bun x vitest run <test-file> passes at 80%+ coverage
  • All user-facing strings wrapped in _() or c_()
  • Persistent presentation in SCSS; runtime positioning follows existing lifecycle
  • Type conversions are explicit (no implicit coercion)
  • make fix passes clean

© exelearning, AGPL-3.0. 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 .agents/skills/frontend-module of exelearning/exelearning.

Open the folder on GitHubat commit 319b5d2

Compare with similar skills

Frontend Module 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.

Frontend Module compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Module this skillexelearning/exelearning145—~867Automated safety check: PassAGPL-3.0
Lingui Best PracticesB0und/WikiSpeedrun1332 repos~4.2kAutomated safety check: PassMIT
I18nerupts/erupt-web115—~706Automated safety check: PassApache-2.0
Translatetagspaces/tagspaces5.3k—~2.2kAutomated safety check: PassAGPL-3.0
Add UI Stringopenfootmanager/openfootmanager1.1k—~2.6kAutomated safety check: PassGPL-3.0
Frappe Core TranslationImpertio-Studio/Frappe_Claude_Skill_Package187—~1.9kAutomated safety check: PassMIT

Similar skills

  • Lingui Best Practices

    B0und/WikiSpeedrun

    Implement internationalization with Lingui in React and JavaScript applications.

    133 GitHub starsUsed in 2 repos~4.2k tokens
    Frontend & DesignAuto-check passed

  • I18n

    erupts/erupt-web

    i18n — add multilingual translations. An agent skill from erupts/erupt-web.

    115 GitHub stars~706 tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Translate

    tagspaces/tagspaces

    Translate new or untranslated i18n strings from the English locale files (core.json + peri.json) into all other locales, maintaining consistency with each language's existing translations.

    5.3k GitHub stars~2.2k tokensUpdated yesterday
    Writing & ContentAuto-check passed

  • Add UI String

    openfootmanager/openfootmanager

    Add or change any text a player can see, in every locale the game ships in.

    1.1k GitHub stars~2.6k tokensUpdated today
    Testing & QAAuto-check passed

  • Frappe Core Translation

    Impertio-Studio/Frappe_Claude_Skill_Package

    A skill your agent uses when implementing translations/i18n in Frappe v14-v16 apps.

    187 GitHub stars~1.9k tokensUpdated 20 days ago
    Writing & ContentAuto-check passed

  • Fantasia Arbor

    vishiri/fantasia-archive

    Project Arbor MCP code graph: callers/callees, impact, map, file graph.

    409 GitHub stars~528 tokensUpdated 6 days ago
    Testing & QAAuto-check passed

More from exelearning/exelearning

All 17 skills in this repo

  • E2E Test

    exelearning/exelearning

    Write or debug repository Playwright specs, including isolated projects, preview frames and multi-user fixtures.

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

  • I18n

    exelearning/exelearning

    Add or change source-level localized strings using (), c() or the Nunjucks trans filter; not catalog extraction.

    145 GitHub stars~812 tokensUpdated today
    Auto-check passed

  • Idevice

    exelearning/exelearning

    Create or modify an eXeLearning iDevice, including edition/export data, legacy compatibility, assets, TypeScript bundles and teardown.

    145 GitHub stars~1.7k tokensUpdated today
    Auto-check passed

  • Verify Change

    exelearning/exelearning

    Choose and run the appropriate eXeLearning checks for a diff, including the final code gates or guidance-only validation.

    145 GitHub stars~676 tokensUpdated today
    Auto-check passed

  • Websocket Yjs

    exelearning/exelearning

    Change eXeLearning shared document mutations, WebSocket rooms, snapshots, reconnects or concurrent editing behavior.

    145 GitHub stars~759 tokensUpdated today
    Auto-check passed

  • API V1

    exelearning/exelearning

    Add or change external REST API v1 endpoints and their documented authentication/authorization contracts.

    145 GitHub stars~427 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Frontend Module

What does Frontend Module do?

Change vanilla JavaScript UI modules in public/app/, including DOM state, events and localization. Frontend Module is an agent skill from exelearning/exelearning. Change vanilla JavaScript UI modules in public/app/, including DOM state, events and localization.

When should I use Frontend Module?

Frontend Module fits situations like: tasks that involve Internationalization.

How do I install Frontend Module in Claude Code?

Run `npx skills add exelearning/exelearning --skill frontend-module -a claude-code`. Or copy the skill folder (.agents/skills/frontend-module in exelearning/exelearning) into .claude/skills/frontend-module in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Module in Codex?

Run `npx skills add exelearning/exelearning --skill frontend-module -a codex`. Or copy the skill folder (.agents/skills/frontend-module in exelearning/exelearning) into .agents/skills/frontend-module in your project. Codex loads it when a task matches its description.

Can I use Frontend Module 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 exelearning/exelearning --skill frontend-module -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-module, .gemini/skills/frontend-module, .github/skills/frontend-module and .opencode/skills/frontend-module in your project.

What does Frontend Module need to run?

Going by SKILL.md and its folder, Frontend Module needs the command-line tools its instructions call (bun and make).

Does Frontend Module access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Frontend Module 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 Frontend Module use?

Frontend Module is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Module use?

About 867 tokens (SKILL.md is roughly 3.5k 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 Frontend Module?

Skills that share tags, products or a category with Frontend Module: Lingui Best Practices (B0und/WikiSpeedrun, 133 stars), I18n (erupts/erupt-web, 115 stars), Translate (tagspaces/tagspaces, 5.3k stars) and Add UI String (openfootmanager/openfootmanager, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Module?

exelearning (a GitHub organization) maintains it in exelearning/exelearning, which has 145 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 7, 2026.

Source: exelearning/exelearning on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.