Agent skill

Writing Extension Devui

by quarkusio in quarkusio/quarkus

How to add a Dev UI page to a Quarkus extension: deployment processors, runtime-dev JSON-RPC services, and Lit web components.

Apache-2.0Auto-check passedDevOps & Cloud

Install Writing Extension Devui

skills CLI
$ npx skills add quarkusio/quarkus --skill writing-extension-devui -a claude-code

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

GitHub CLI
$ gh skill install quarkusio/quarkus writing-extension-devui --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/quarkusio/quarkus.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/writing-extension-devui .claude/skills/writing-extension-devui && 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
writing-extension-devui
GitHub stars
16k
Token cost
~1.8k tokens
SKILL.md length
426 words
Files
1
Skills in repo
12
Repo updated
First seen
Licence
Apache-2.0

At a glance

How to add a Dev UI page to a Quarkus extension: deployment processors, runtime-dev JSON-RPC services, and Lit web components.

  • Tasks that involve Deployment
  • SKILL.md covers Directory Layout, Deployment Processor, Runtime JSON-RPC Service and Frontend Web Components, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Writing Extension Devui is an agent skill from quarkusio/quarkus. How to add a Dev UI page to a Quarkus extension: deployment processors, runtime-dev JSON-RPC services, and Lit web components.

Its SKILL.md is about 1.8k 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 DevOps & Cloud, covering Deployment. It works with Java. The repository describes itself as: Quarkus: Supersonic Subatomic Java. The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Deployment

Example prompts

  • “/writing-extension-devui”

What it can do on your machine

Read from SKILL.md and the folder at commit 31ef64b. 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

    No scripts in the folder and no shell commands in SKILL.md (its code samples are java, xml and javascript).

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

    • quarkus.io

    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

Writing Extension Devui loads about 1.8k tokens when it runs. Until then it costs about 38 tokens; SKILL.md has 426 words of instructions outside code blocks.

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

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 quarkusio/quarkus at commit 31ef64b, republished under its Apache-2.0 licence (© quarkusio). 426 words, ~1,818 tokens.

Download SKILL.mdSave it as .claude/skills/writing-extension-devui/SKILL.md (or your agent's skills folder).
name
writing-extension-devui
description
How to add a Dev UI page to a Quarkus extension: deployment processors, runtime-dev JSON-RPC services, and Lit web components.

Writing a Dev UI for a Quarkus Extension

Dev UI is the interactive dashboard at /q/dev-ui during quarkus:dev. Extensions add pages via build items, runtime JSON-RPC services, and Lit web components. See the Dev UI guide for full documentation.

Directory Layout

my-extension/
  deployment/src/main/java/.../deployment/devui/
    MyFeatureDevUIProcessor.java          # Build steps
  deployment/src/main/resources/dev-ui/
    qwc-myfeature-dashboard.js            # Lit web components
  runtime-dev/src/main/java/.../runtime/dev/ui/
    MyFeatureJsonRpcService.java          # JSON-RPC service
  • JS naming: qwc-<extensionname>-<pagename>.js
  • JSON-RPC services go in runtime-dev/, not runtime/. Register as a conditional dev dependency — see the classloading-and-runtime-dev skill.

Deployment Processor

Gate all Dev UI build steps with @BuildStep(onlyIf = IsDevelopment.class) or use @BuildSteps(onlyIf = IsLocalDevelopment.class) at the class level.

java
import io.quarkus.devui.spi.page.CardPageBuildItem;
import io.quarkus.devui.spi.page.Page;

@BuildStep(onlyIf = IsDevelopment.class)
CardPageBuildItem devUI() {
    CardPageBuildItem card = new CardPageBuildItem();

    card.addPage(Page.webComponentPageBuilder()
            .title("Dashboard")
            .componentLink("qwc-myfeature-dashboard.js")
            .icon("font-awesome-solid:robot"));

    // Build-time data — available in JS via: import { items } from 'build-time-data';
    card.addBuildTimeData("items", someList);

    return card;
}

Register the JSON-RPC provider in a separate build step. This one must not be gated: it is also used to discover valid usages of execution model affecting annotations, which happens outside dev mode.

java
import io.quarkus.devjsonrpc.spi.JsonRPCProvidersBuildItem;

@BuildStep
JsonRPCProvidersBuildItem jsonRpcProvider() {
    return new JsonRPCProvidersBuildItem(MyFeatureJsonRpcService.class);
}

Maven dependency for the deployment module:

xml
<dependency>
    <groupId>io.quarkus</groupId>
    <artifactId>quarkus-devui-deployment-spi</artifactId>
</dependency>

That brings in quarkus-devjsonrpc-deployment-spi transitively, which is where JsonRPCProvidersBuildItem lives.

Runtime JSON-RPC Service

A plain class in runtime-dev. Every public method becomes a JSON-RPC endpoint automatically — registration happens via JsonRPCProvidersBuildItem.

java
public class MyFeatureJsonRpcService {
    @Inject
    SomeBean bean;

    public List<Item> getItems() { return bean.listAll(); }
    public boolean doAction(String id) { return bean.execute(id); }
}
  • Use @Inject for CDI; @PostConstruct for initialization.
  • Return JSON-serializable data, not HTML.
  • For streaming, return Multi<JsonObject> (Smallrye Mutiny).

Frontend Web Components

Components extend QwcHotReloadElement (not LitElement directly) and use Vaadin Web Components for consistent styling.

javascript
import { QwcHotReloadElement, html, css } from 'qwc-hot-reload-element';
import { JsonRpc } from 'jsonrpc';
import { items } from 'build-time-data';

export class QwcMyfeatureDashboard extends QwcHotReloadElement {
    jsonRpc = new JsonRpc(this);
    static properties = { _items: { state: true } };

    constructor() {
        super();
        this._items = items;
    }

    connectedCallback() {
        super.connectedCallback();
        this.hotReload();
    }

    hotReload() {
        this.jsonRpc.getItems().then(r => { this._items = r.result; });
    }

    render() {
        if (!this._items)
            return html`<vaadin-progress-bar indeterminate></vaadin-progress-bar>`;
        return html`<vaadin-grid .items="${this._items}" theme="row-stripes">
            <vaadin-grid-column path="name" header="Name"></vaadin-grid-column>
        </vaadin-grid>`;
    }
}
customElements.define('qwc-myfeature-dashboard', QwcMyfeatureDashboard);
  • build-time-data keys must match what was passed to card.addBuildTimeData(key, value).
  • JsonRpc method names must match the Java service method names exactly.
  • Access results via response.result.
  • For state updates, use spread: this._items = [...this._items, newItem].
  • Unsubscribe streaming observers in disconnectedCallback().
Show full SKILL.md (204 more words)Show less

Observability Dashboard

An extension that captures a telemetry signal (traces, logs, events) can offer its page as a card on the core Observability dashboard, on top of its own extension card. Produce an ObservabilitySignalBuildItem (io.quarkus.devui.spi.observability, in quarkus-devui-deployment-spi) next to the page it refers to:

java
signals.produce(new ObservabilitySignalBuildItem(
        "traces",                                  // unique key, identifies the stored card
        "OpenTelemetry Traces",                    // title (name the backend, not just the signal)
        "font-awesome-solid:diagram-project",      // icon
        "quarkus-opentelemetry/traces",            // page id: <namespace>/<dashed-title>, or null
        "spanCount"));                             // JSON-RPC live count, or null

The dashboard imports that page's web component and renders it inline in a card, so size the component against its host (height: 100% or a flex column), not against the viewport. A null page id advertises the signal without contributing a card, which is what metrics does - meters are picked individually instead.

Meters need no build item: everything registered with Micrometer or the OpenTelemetry SDK is offered in the dashboard's picker automatically. Only a new metrics backend (one that samples into MetricsTimeSeriesStore) produces a MetricsBackendBuildItem.

Full documentation: docs/src/main/asciidoc/dev-ui.adoc, "Observability dashboard".

Testing

Extend DevUIJsonRPCTest (io.quarkus.devui.tests). Pass the extension namespace to the super constructor, then call executeJsonRPCMethod():

java
public class MyFeatureDevUITest extends DevUIJsonRPCTest {
    @RegisterExtension
    static final QuarkusDevModeTest config = new QuarkusDevModeTest()
            .withApplicationRoot((jar) -> jar.addClass(MyBean.class));

    public MyFeatureDevUITest() { super("quarkus-myfeature"); }

    @Test
    public void testGetItems() throws Exception {
        JsonNode result = super.executeJsonRPCMethod("getItems");
        assertNotNull(result);
    }
}

Key Rules

  • Correct imports: CardPageBuildItem is in io.quarkus.devui.spi.page (quarkus-devui-deployment-spi), JsonRPCProvidersBuildItem is in io.quarkus.devjsonrpc.spi (quarkus-devjsonrpc-deployment-spi).
  • JSON-RPC services belong in runtime-dev/, never in runtime/.
  • JS files go in deployment/src/main/resources/dev-ui/.
  • Extend QwcHotReloadElement, not LitElement — it provides the hotReload() hook that re-runs on dev-mode restarts.
  • Return JSON from services, not HTML. Use Page.externalPageBuilder() for external content like Swagger UI.

© quarkusio, Apache-2.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/writing-extension-devui of quarkusio/quarkus.

Open the folder on GitHubat commit 31ef64b

Compare with similar skills

Writing Extension Devui 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.

Writing Extension Devui compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Writing Extension Devui this skillquarkusio/quarkus16k—~1.8kAutomated safety check: PassApache-2.0
Release A2aa2aproject/a2a-java504—~2.3kAutomated safety check: PassApache-2.0
Oci Functions Deployoracle/skills873—~4.6kAutomated safety check: PassUPL-1.0
057 Design Feature Togglesjabrena/plinth446—~1.1kAutomated safety check: PassApache-2.0
Azure Sre AgentMicrosoftDocs/Agent-Skills777—~2.7kAutomated safety check: PassCC-BY-4.0
TrueLicense Maven Central Releasechristian-schlichtherle/truelicense400—~846Automated safety check: PassApache-2.0

Similar skills

  • Release A2a

    a2aproject/a2a-java

    Guide maintainers through the multi-step release process — version bump, CI verification, tagging, Maven Central deployment, SNAPSHOT bump, and versioned documentation.

    504 GitHub stars~2.3k tokensUpdated 2 days ago
    DevOps & CloudAuto-check passed
  • Official

    Build, configure, scaffold, and deploy OCI Functions from a local machine using a dependency-first, Fn-context-guided flow with argv-safe mutation execution, nonce-scoped confirmations, and a…

    873 GitHub stars~4.6k tokensUpdated 2 days ago
    DevOps & CloudAuto-check passed
  • A skill your agent uses when designing, implementing, reviewing, testing, or cleaning up feature toggles, feature flags, kill switches, runtime configuration gates, canary controls, staged rollouts…

    446 GitHub stars~1.1k tokensUpdated yesterday
    DevOps & CloudAuto-check passed
  • Azure Sre Agent

    MicrosoftDocs/Agent-Skills

    Official

    Expert knowledge for Azure Sre Agent development including troubleshooting, best practices, decision making, architecture & design patterns, security, configuration, integrations & coding patterns…

    777 GitHub stars~2.7k tokensUpdated 2 days ago
    DevOps & CloudAuto-check passed
  • TrueLicense Maven Central Release

    christian-schlichtherle/truelicense

    Documents how TrueLicense is published to Maven Central from a version tag, the plugin constraints behind it and how to rehearse a release locally.

    400 GitHub stars~846 tokensUpdated 1 mo ago
    DevelopmentAuto-check passed
  • Kubeshark Installer

    kubeshark/kubeshark

    Installs and configures Kubeshark on a Kubernetes cluster, choosing between the quick CLI path and a Helm install with custom values.

    12k GitHub stars~3.6k tokensUpdated yesterday
    DevOps & CloudAuto-check: notes

More from quarkusio/quarkus

All 12 skills in this repo
  • Manage Deprecations

    quarkusio/quarkus

    Maintain @Deprecated code in the Quarkus codebase: remove code that has been deprecated for more than 12 months, add the @Deprecated annotations that were missed when a related element was…

    16k GitHub stars~2.8k tokensUpdated today
    Auto-check passed
  • Building And Testing

    quarkusio/quarkus

    How to build and test Quarkus: Maven commands, build flags, incremental builds, justfile aliases, and important build rules.

    16k GitHub stars~615 tokensUpdated today
    Auto-check passed
  • Building Docs

    quarkusio/quarkus

    How to build, preview, and verify Quarkus documentation locally: root Maven build, docs rebuild, Roq dev server preview.

    16k GitHub stars~1.8k tokensUpdated today
    Auto-check passed
  • Quarkus split classloading model, runtime-dev module wiring, conditional dependencies, and common classloading mistakes.

    16k GitHub stars~635 tokensUpdated today
    Auto-check passed
  • Step-by-step guide for converting Quarkus extensions from the legacy @Record/@Recorder pattern to the ServiceRegistrar service system.

    16k GitHub stars~4.6k tokensUpdated today
    Auto-check passed
  • Creating Extensions

    quarkusio/quarkus

    How to create a new Quarkus extension: full module layout, package naming, artifact naming, dependency rules, and Dev UI setup.

    16k GitHub stars~929 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Writing Extension Devui

What does Writing Extension Devui do?

How to add a Dev UI page to a Quarkus extension: deployment processors, runtime-dev JSON-RPC services, and Lit web components. Writing Extension Devui is an agent skill from quarkusio/quarkus. How to add a Dev UI page to a Quarkus extension: deployment processors, runtime-dev JSON-RPC services, and Lit web components.

When should I use Writing Extension Devui?

Writing Extension Devui fits situations like: tasks that involve Deployment.

How do I install Writing Extension Devui in Claude Code?

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

How do I install Writing Extension Devui in Codex?

Run `npx skills add quarkusio/quarkus --skill writing-extension-devui -a codex`. Or copy the skill folder (.agents/skills/writing-extension-devui in quarkusio/quarkus) into .agents/skills/writing-extension-devui in your project. Codex loads it when a task matches its description.

Can I use Writing Extension Devui 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 quarkusio/quarkus --skill writing-extension-devui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/writing-extension-devui, .gemini/skills/writing-extension-devui, .github/skills/writing-extension-devui and .opencode/skills/writing-extension-devui in your project.

What does Writing Extension Devui need to run?

SKILL.md names no scripts, command-line tools or credentials: Writing Extension Devui is instructions for the agent only.

Does Writing Extension Devui access the network?

SKILL.md names 1 domain. As links in the text: quarkus.io. This is read from the text; nothing was executed.

Is Writing Extension Devui 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 Writing Extension Devui use?

Writing Extension Devui is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Writing Extension Devui use?

About 1.8k tokens (SKILL.md is roughly 7.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 Writing Extension Devui?

Skills that share tags, products or a category with Writing Extension Devui: Release A2a (a2aproject/a2a-java, 504 stars), Oci Functions Deploy (oracle/skills, 873 stars), 057 Design Feature Toggles (jabrena/plinth, 446 stars) and Azure Sre Agent (MicrosoftDocs/Agent-Skills, 777 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Writing Extension Devui?

quarkusio (a GitHub organization) maintains it in quarkusio/quarkus, which has 15,931 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on October 7, 2026.

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