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

Calcpad Web Frontend Developer

by imartincei in imartincei/CalcpadCE

Expert developer for Calcpad.Web/frontend - the TypeScript/Vue 3 frontend monorepo.

MITAuto-check: notesFrontend & Design

Install Calcpad Web Frontend Developer

skills CLI
$ npx skills add imartincei/CalcpadCE --skill calcpad-web-frontend-developer -a claude-code

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

GitHub CLI
$ gh skill install imartincei/CalcpadCE calcpad-web-frontend-developer --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/imartincei/CalcpadCE.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/calcpad-web-frontend-developer .claude/skills/calcpad-web-frontend-developer && 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
calcpad-web-frontend-developer
GitHub stars
110
Token cost
~1.1k tokens
SKILL.md length
401 words
Files
5
Skills in repo
6
Repo updated
First seen
Licence
MIT

At a glance

Expert developer for Calcpad.Web/frontend - the TypeScript/Vue 3 frontend monorepo.

  • Works in 4 steps: Add to CalcpadApiClient… → Add types to… → Export from calcpad-frontend/src/index.ts → …
  • Working on the shared library (calcpad-frontend)
  • SKILL.md covers Core Capabilities, Reference Files, Solution Context and Adding Features, plus 1 more section
  • Calls npm

What it does

Calcpad Web Frontend Developer is an agent skill from imartincei/CalcpadCE. Expert developer for Calcpad.Web/frontend - the TypeScript/Vue 3 frontend monorepo. Use when working on the shared library (calcpad-frontend), web editor (calcpad-web with Monaco), Tauri desktop app (calcpad-desktop), or VS Code extension (vscode-calcpad).

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files (for example `reference/shared-library.md`, `reference/structure-and-build.md` and `reference/vscode-extension.md`).

It sits in Frontend & Design, covering Frontend development and Monorepo tooling. It works with Visual Studio Code, Vue.js, Tauri and TypeScript. The repository describes itself as: Calcpad Community Edition. The licence is MIT.

When your agent uses it

  • Working on the shared library (calcpad-frontend)
  • Web editor (calcpad-web with Monaco)
  • Tauri desktop app (calcpad-desktop)
  • VS Code extension (vscode-calcpad)

Example prompts

  • “/calcpad-web-frontend-developer”

Requirements

  • Pre-approved tools (allowed-tools): Read, Write, Edit, Glob, Grep, Bash

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Add to CalcpadApiClient (calcpad-frontend/src/api/client.ts)
  2. Add types to calcpad-frontend/src/types/api.ts
  3. Export from calcpad-frontend/src/index.ts
  4. Add backend endpoint in CalcpadController

What it can do on your machine

Read from SKILL.md and the folder at commit 0b20dba. 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
    • Glob
    • Grep
    • Bash

    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

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    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

Calcpad Web Frontend Developer loads about 1.1k tokens when it runs. Until then it costs about 72 tokens; SKILL.md has 401 words of instructions outside code blocks.

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

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Write, Edit, Glob, Grep, Bash

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 imartincei/CalcpadCE at commit 0b20dba, republished under its MIT licence (© imartincei). 401 words, ~1,099 tokens.

Download SKILL.mdSave it as .claude/skills/calcpad-web-frontend-developer/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
calcpad-web-frontend-developer
description
Expert developer for Calcpad.Web/frontend - the TypeScript/Vue 3 frontend monorepo. Use when working on the shared library (calcpad-frontend), web editor (calcpad-web with Monaco), Tauri desktop app (calcpad-desktop), or VS Code extension (vscode-calcpad).
allowed-tools
Read, Write, Edit, Glob, Grep, Bash

Calcpad Web Frontend Developer

Expert agent for developing Calcpad.Web/frontend - a TypeScript/Vue 3 monorepo containing the shared frontend library, web editor, Tauri desktop app, and VS Code extension.

You are an expert TypeScript developer specializing in Vue 3, Monaco Editor, VS Code extensions, and Vite. You understand the calcpad-frontend shared library architecture, the Monaco integration in calcpad-web, the Tauri desktop wrapper, and the VS Code extension. You write idiomatic TypeScript following the existing patterns.

Core Capabilities

  • Extend the CalcpadApiClient with new API methods
  • Add new services to the shared calcpad-frontend library
  • Implement Monaco Editor features (completions, diagnostics, semantic tokens, themes)
  • Build Vue 3 components for the web editor UI
  • Add VS Code extension features (commands, providers, settings)
  • Configure Tauri desktop app features (Rust menu, sidecar spawn, plugin capabilities)
  • Implement text processing (auto-indent, operator replacement, quick-type)
  • Add TypeScript types for API request/response contracts

Reference Files

Load the reference file for the sub-project you're working on — don't read all of them up front.

When working on...Read
Shared library (API client, types, services, text processing)reference/shared-library.md
Web editor (Monaco integration, App.vue, Vite/Tauri build)reference/web-editor.md
VS Code extension (providers, commands, settings)reference/vscode-extension.md
Directory tree, build commands, external dependenciesreference/structure-and-build.md

Solution Context

Project Dependency Graph
calcpad-web (Web Editor)          <- Vite + Vue 3 + Monaco
├── calcpad-frontend (Shared Lib) <- YOU ARE HERE (shared across all frontends)
└── monaco-editor

calcpad-desktop (Desktop App)     <- Tauri (Rust shell + Vue frontend + .NET sidecar)
├── calcpad-web (built into src-tauri/target via tauri.conf.json)
└── calcpad-frontend

vscode-calcpad (VS Code Ext)     <- Rollup + Vue webview
└── calcpad-frontend
ProjectPurposeIntegration Notes
Calcpad.Web/backendASP.NET Core APIAll frontends call this via CalcpadApiClient
Calcpad.HighlighterServer-side tokenizer/linterAPI responses use Highlighter types
Calcpad.CoreMath engineBackend uses this; frontend receives computed HTML

The shared library calcpad-frontend is the core dependency for all three frontends. If you change it, rebuild it before testing consumers.

Show full SKILL.md (146 more words)Show less

Adding Features

Adding a New API Method
  1. Add to CalcpadApiClient (calcpad-frontend/src/api/client.ts):
typescript
public async newMethod(content: string): Promise<NewResponse | null> {
    const request: NewRequest = { content };
    return this.post<NewResponse>('/api/calcpad/new-endpoint', request, 'NewMethod');
}
  1. Add types to calcpad-frontend/src/types/api.ts
  2. Export from calcpad-frontend/src/index.ts
  3. Add backend endpoint in CalcpadController
Adding a Shared Service
  1. Create in calcpad-frontend/src/services/new-service.ts
  2. Export from calcpad-frontend/src/index.ts
  3. Use in any frontend (web, VS Code, desktop)

For Monaco editor features and VS Code commands, see the recipes in reference/web-editor.md and reference/vscode-extension.md.

Workflow

  1. Understand the feature - Which frontend(s) does it affect?
  2. Check if shared - Should logic live in calcpad-frontend or a specific frontend?
  3. Load the relevant reference file for that sub-project (see table above)
  4. Follow existing patterns - Match code style and architecture
  5. Implement - Start with types, then service/client, then UI
  6. Build shared lib first - If you changed calcpad-frontend, rebuild it before testing consumers
  7. Test - Run npm run dev for the web editor, or launch the VS Code extension

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

Files

SKILL.md and 4 other files in .claude/skills/calcpad-web-frontend-developer of imartincei/CalcpadCE.

  • SKILL.md
  • reference/shared-library.md
  • reference/structure-and-build.md
  • reference/vscode-extension.md
  • reference/web-editor.md

Open the folder on GitHubat commit 0b20dba

Compare with similar skills

Calcpad Web Frontend Developer 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.

Calcpad Web Frontend Developer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Calcpad Web Frontend Developer this skillimartincei/CalcpadCE110—~1.1kAutomated safety check: NotesMIT
Wagmi Feature Developmentwevm/wagmi6.8k—~3.8kAutomated safety check: PassMIT
Create Docsvictorgarciaesgi/nuxt-typed-router4132 repos~2.8kAutomated safety check: PassMIT
QR Codes with qrcode.vuescopewu/qrcode.vue827—~1.3kAutomated safety check: PassMIT
Cross Platform Tauri UIifer47/markeron1.2k—~2kAutomated safety check: PassMIT
Tauri Config Ipcifer47/markeron1.2k—~1kAutomated safety check: PassMIT

Similar skills

  • Wagmi Feature Development

    wevm/wagmi

    Walks through adding a Wagmi feature across its layers: a Viem-based core action, TanStack Query options, and React and Vue bindings.

    6.8k GitHub stars~3.8k tokensUpdated 8 days ago
    DevelopmentAuto-check passed

  • Create Docs

    victorgarciaesgi/nuxt-typed-router

    Create complete documentation sites for projects. An agent skill from victorgarciaesgi/nuxt-typed-router.

    413 GitHub starsUsed in 2 repos~2.8k tokens
    Frontend & DesignAuto-check passed

  • QR Codes with qrcode.vue

    scopewu/qrcode.vue

    Renders, styles and downloads QR codes in Vue 3 apps with the qrcode.vue component, covering canvas versus SVG output, embedded logos, gradients and rounded modules.

    827 GitHub stars~1.3k tokensUpdated 24 days ago
    Frontend & DesignAuto-check passed

  • Cross Platform Tauri UI

    ifer47/markeron

    Cross-platform UI styling for MarkerOn Tauri app (macOS WKWebView vs Windows WebView2).

    1.2k GitHub stars~2k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Tauri Config Ipc

    ifer47/markeron

    Extend MarkerOn settings, persisted config, or Tauri IPC commands.

    1.2k GitHub stars~1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Creating Docs Code Examples

    handsontable/handsontable

    Sets the rules for writing Handsontable documentation examples in JavaScript, TypeScript, React, Angular and Vue, with the imports, registration and licence key each needs.

    22k GitHub stars~2.2k tokensUpdated today
    DevelopmentAuto-check passed

More from imartincei/CalcpadCE

  • Calcpad API Developer

    imartincei/CalcpadCE

    Expert developer for PyCalcpad (Calcpad.Api) - the programmatic API wrapper for Calcpad.

    110 GitHub stars~1.1k tokensUpdated yesterday
    Auto-check: notes

  • Calcpad Core Developer

    imartincei/CalcpadCE

    Expert developer for Calcpad.Core - the mathematical parsing and calculation engine.

    110 GitHub stars~840 tokensUpdated yesterday
    Auto-check: notes

  • Calcpad Highlighter Developer

    imartincei/CalcpadCE

    Expert developer for Calcpad.Highlighter - tokenization, linting, content resolution, and language tooling.

    110 GitHub stars~1k tokensUpdated yesterday
    Auto-check: notes

  • Calcpad Web Backend Developer

    imartincei/CalcpadCE

    Expert developer for Calcpad.Web/backend - the ASP.NET Core 10 Web API server.

    110 GitHub stars~1.4k tokensUpdated yesterday
    Auto-check: notes

  • Calcpad Generator

    imartincei/CalcpadCE

    Generate Calcpad (.cpd) files for mathematical and engineering calculations.

    110 GitHub stars~656 tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Calcpad Web Frontend Developer

What does Calcpad Web Frontend Developer do?

Expert developer for Calcpad.Web/frontend - the TypeScript/Vue 3 frontend monorepo. Calcpad Web Frontend Developer is an agent skill from imartincei/CalcpadCE.Web/frontend - the TypeScript/Vue 3 frontend monorepo.

When should I use Calcpad Web Frontend Developer?

Calcpad Web Frontend Developer fits situations like: working on the shared library (calcpad-frontend); web editor (calcpad-web with Monaco); tauri desktop app (calcpad-desktop); VS Code extension (vscode-calcpad).

How do I install Calcpad Web Frontend Developer in Claude Code?

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

How do I install Calcpad Web Frontend Developer in Codex?

Run `npx skills add imartincei/CalcpadCE --skill calcpad-web-frontend-developer -a codex`. Or copy the skill folder (.claude/skills/calcpad-web-frontend-developer in imartincei/CalcpadCE) into .agents/skills/calcpad-web-frontend-developer in your project. Codex loads it when a task matches its description.

Can I use Calcpad Web Frontend Developer 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 imartincei/CalcpadCE --skill calcpad-web-frontend-developer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/calcpad-web-frontend-developer, .gemini/skills/calcpad-web-frontend-developer, .github/skills/calcpad-web-frontend-developer and .opencode/skills/calcpad-web-frontend-developer in your project.

What does Calcpad Web Frontend Developer need to run?

Going by SKILL.md and its folder, Calcpad Web Frontend Developer needs the command-line tools its instructions call (npm). Its frontmatter pre-approves these tools: Read, Write, Edit, Glob, Grep, Bash.

Does Calcpad Web Frontend Developer access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Calcpad Web Frontend Developer safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Calcpad Web Frontend Developer use?

Calcpad Web Frontend Developer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Calcpad Web Frontend Developer use?

About 1.1k tokens (SKILL.md is roughly 4.4k 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 Calcpad Web Frontend Developer?

Skills that share tags, products or a category with Calcpad Web Frontend Developer: Wagmi Feature Development (wevm/wagmi, 6.8k stars), Create Docs (victorgarciaesgi/nuxt-typed-router, 413 stars), QR Codes with qrcode.vue (scopewu/qrcode.vue, 827 stars) and Cross Platform Tauri UI (ifer47/markeron, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Calcpad Web Frontend Developer?

imartincei (a GitHub user) maintains it in imartincei/CalcpadCE, which has 110 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 8, 2026.

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