Source profileQuality 92/100

AI-Unified-Process/marketplace/aiup-vaadin-jooq/skills/implement-hilla/SKILL.md

implement-hilla

Implements use cases by creating Hilla views — React/TypeScript views with file-based routing calling @BrowserCallable Java services — and jOOQ queries for the data access layer. Use when the user asks to "implement with Hilla", "create a Hilla view", "build a React view for Vaadin", "create a @BrowserCallable endpoint", or mentions Hilla, client-side Vaadin views, file-based routing, TSX views, or React + jOOQ.

Source repository stars
118
Declared platforms
0
Static risk flags
2
Last source update
2026-08-24
Source checked
2026-08-28

Decision brief

What it does: where it fits

Implements use cases by creating Hilla views — React/TypeScript views with file-based routing calling @BrowserCallable Java services — and jOOQ queries for the data access layer.

Best for

  • Use when the user asks to "implement with Hilla", "create a Hilla view", "build a React view for Vaadin", "create a @BrowserCallable endpoint", or mentions Hilla, client-side Vaadin views, file-based routing, TSX views,…

Not for

  • Tasks that require unconfirmed production actions or broad system permissions.
  • Environments where the pinned source and install steps cannot be inspected.

Compatibility matrix

Platform support, with evidence labels

PlatformStatusEvidenceWhat to check
CodexNot declaredNo explicit evidencePortability before use
Claude CodeNot declaredNo explicit evidencePortability before use
CursorNot declaredNo explicit evidencePortability before use
Gemini CLINot declaredNo explicit evidencePortability before use
Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource
npx skills add https://github.com/AI-Unified-Process/marketplace --skill "aiup-vaadin-jooq/skills/implement-hilla"
Safe inspection promptEditorial

Inspect the Agent Skill "implement-hilla" from https://github.com/AI-Unified-Process/marketplace/blob/f6d063ef36d4f42defbd41eebcd3b25896bdd8ef/aiup-vaadin-jooq/skills/implement-hilla/SKILL.md at commit f6d063ef36d4f42defbd41eebcd3b25896bdd8ef. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

  1. 01

    Instructions

    Implement the use case $ARGUMENTS using Hilla (React) for the UI layer and jOOQ for data access. Don't create tests – there are dedicated testing skills for that.

    Implement the use case $ARGUMENTS using Hilla (React) for the UI layer and jOOQ for data access. Don't create tests – there are dedicated testing skills for that.If the Vaadin and jOOQ MCP servers are configured, check them for guidance; otherwise rely on your own knowledge and the documentation links below.
  2. 02

    If an Implementation Already Exists

    A diff of the specification change may follow the file path in the arguments. When it is there, it is the definitive list of what changed — work through it change by change. A removed line is an instruction to delete the behaviour it described: the remaining specification is alr…

    Read the existing code end to end and compare it against the current specChange only what the spec now requires — added or renamed fields, changed validation rules,Edit the existing files in place; never create a second view, service, repository, or DTO for
  3. 03

    Workflow

    1. Read the use case specification from docs/usecases/ 2. Read the entity model from docs/entitymodel.md 3. Check existing code for patterns and conventions, and determine whether the use case is already implemented — if so, follow "If an Implementation Already Exists" above and…

    Read the use case specification from docs/usecases/Read the entity model from docs/entitymodel.mdCheck existing code for patterns and conventions, and determine whether the use case is
  4. 04

    DO NOT

    Create test classes (use dedicated testing skills instead)

    Create test classes (use dedicated testing skills instead)Use fetchInto(SomeDto.class) for projected queries — use Records.mapping(SomeDto::new) insteadHand-write TypeScript clients or REST controllers — Hilla generates the TypeScript client from
  5. 05

    Hilla specifics

    Browser-callable service — annotate a Spring service with

    Browser-callable service — annotate a Spring service withFile-based routing — the view's route derives from its location underComponents — build the view with the Vaadin React components (@vaadin/react-components):

Permission review

Static risk signals and limitations

Writes files

medium · line 30

The documentation asks the agent to create, modify, or delete local files.

Edit the existing files in place; never create a second view, service, repository, or DTO for

Network access

medium · line 94

The documentation includes network, browsing, or remote request actions.

.fetch(Records.mapping(PersonDto::new));

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial
SignalValueEvidence typeMeaning
Quality score92/100ComputedDocumentation, specificity, maintenance, and trust rules
Repository stars118SourceRepository attention, not individual Skill quality
Compatibility0 platformsSourceDeclared in the catalog source record
Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository
AI-Unified-Process/marketplace
Skill path
aiup-vaadin-jooq/skills/implement-hilla/SKILL.md
Commit
f6d063ef36d4f42defbd41eebcd3b25896bdd8ef
License
Apache-2.0
Collected
2026-08-28
Default branch
main
View the original SKILL.md

Implement Use Case (Hilla)

Instructions

Implement the use case $ARGUMENTS using Hilla (React) for the UI layer and jOOQ for data access. Don't create tests – there are dedicated testing skills for that.

If the Vaadin and jOOQ MCP servers are configured, check them for guidance; otherwise rely on your own knowledge and the documentation links below.

If an Implementation Already Exists

A diff of the specification change may follow the file path in the arguments. When it is there, it is the definitive list of what changed — work through it change by change. A removed line is an instruction to delete the behaviour it described: the remaining specification is already satisfied by the existing code, so a removal is invisible unless you compare code to spec in both directions.

Before writing any code, check whether this use case is already implemented — search for the view, service, repository, and DTO names the spec implies, and for existing UC-XXX references. If an implementation exists, reconcile it with the specification instead of building a parallel one:

  • Read the existing code end to end and compare it against the current spec
  • Change only what the spec now requires — added or renamed fields, changed validation rules, new alternative flows, different labels or messages
  • Edit the existing files in place; never create a second view, service, repository, or DTO for the same use case
  • Remove code the spec no longer calls for (dropped fields, removed flows, obsolete queries)
  • Leave everything the spec does not touch alone — no incidental refactoring, renaming, or restyling
  • Check what the class-level comments attribute to this use case: behaviour they describe that the spec no longer mentions is dropped behaviour to remove, not decoration to keep
  • Report at the end which files changed and which spec change drove each one

DO NOT

  • Create test classes (use dedicated testing skills instead)
  • Use fetchInto(SomeDto.class) for projected queries — use Records.mapping(SomeDto::new) instead
  • Hand-write TypeScript clients or REST controllers — Hilla generates the TypeScript client from the @BrowserCallable class

Workflow

  1. Read the use case specification from docs/use_cases/
  2. Read the entity model from docs/entity_model.md
  3. Check existing code for patterns and conventions, and determine whether the use case is already implemented — if so, follow "If an Implementation Already Exists" above and update those files rather than creating new ones
  4. Implement the data access layer using jOOQ
  5. Verify the data access layer compiles and follows existing patterns
  6. Implement a @BrowserCallable service that delegates to the data access layer and returns DTOs
  7. Implement the React view as a .tsx file under src/main/frontend/views/, calling the generated TypeScript client of the service
  8. Verify the full implementation compiles successfully (Java and frontend)
  9. Hand the use case to the uc-coverage sub-agent and close every gap it reports — see Coverage Check below

Hilla specifics

  • Browser-callable service — annotate a Spring service with com.vaadin.hilla.BrowserCallable; secure it with @AnonymousAllowed, @PermitAll, or @RolesAllowed following the conventions of the existing services. Hilla generates a type-safe TypeScript client for it — call that client from the view, never fetch directly.
  • File-based routing — the view's route derives from its location under src/main/frontend/views/ (views/persons.tsx/persons). Export a ViewConfig (export const config: ViewConfig = { ... }) for the title and menu entry when the existing views do.
  • Components — build the view with the Vaadin React components (@vaadin/react-components): Grid with GridColumn for listings, field components inside forms.
  • Forms — use useForm from @vaadin/hilla-react-form with the generated model class (e.g. PersonDtoModel) so validation rules flow from the Java annotations into the browser.
  • Nullability — annotate DTO fields with @NonNull or Jakarta validation annotations such as @NotNull/@NotBlank where the entity model requires a value, so the generated TypeScript types are non-optional and forms validate consistently on both sides.

jOOQ result mapping

When a query projects columns into a DTO, Java record, or any immutable class, map the result with org.jooq.Records.mapping(...) and a constructor reference. Do not use fetchInto(Dto.class) — it uses reflection and is not checked against the projection at compile time.

import org.jooq.Records;

// List
List<PersonDto> persons = ctx
    .select(PERSON.ID, PERSON.FIRST_NAME, PERSON.LAST_NAME, PERSON.EMAIL)
    .from(PERSON)
    .fetch(Records.mapping(PersonDto::new));

// Single (optional) row
Optional<PersonDto> person = ctx
    .select(PERSON.ID, PERSON.FIRST_NAME, PERSON.LAST_NAME, PERSON.EMAIL)
    .from(PERSON)
    .where(PERSON.ID.eq(id))
    .fetchOptional(Records.mapping(PersonDto::new));

// Stream
try (Stream<PersonDto> stream = ctx
        .select(PERSON.ID, PERSON.FIRST_NAME, PERSON.LAST_NAME, PERSON.EMAIL)
        .from(PERSON)
        .fetchStream()
        .map(Records.mapping(PersonDto::new))) {
    ...
}

The order of the projected columns must match the constructor parameter order of the target type — the compiler will enforce this.

Exception: when fetching a generated table record without projection (ctx.selectFrom(PERSON).fetchInto(Person.class) using the generator-produced POJO), the generated into mapper is fine.

Resources

  • If configured, use the Vaadin MCP server for component documentation, including the React component APIs (https://mcp.vaadin.com/docs)
  • If configured, use the jOOQ MCP server for query DSL reference (https://jooq-mcp.martinelli.ch/mcp)
  • If configured, use the JavaDocs MCP server for API documentation (https://www.javadocs.dev/mcp)
  • See the MCP setup rule to configure these optional servers

Coverage Check

Before you report the use case as implemented, hand it to the read-only uc-coverage sub-agent of this plugin (it may appear as aiup-vaadin-jooq:uc-coverage). It re-reads the specification and reports which main success scenario steps, alternative flows, business rules, preconditions, and postconditions have no code behind them — and which code has no specification behind it.

  • Delegate the use case id together with the mode, for example UC-001 implementation. Add "work in progress" to check a large use case mid-way — after the data access layer, before the UI — so it reports remaining work instead of defects.
  • The agent never edits files. Closing the gaps it reports, and running it again afterwards, is your job.
  • It also suggests the specification's next **Status:** value. Pass that suggestion on to the user; leave the document itself alone.
  • If the host does not support sub-agents, work through the checklist in the agent definition (agents/uc-coverage.md) yourself.

Frequently asked questions

What to verify before installation and use

What does the implement-hilla source document cover?

Implements use cases by creating Hilla views — React/TypeScript views with file-based routing calling @BrowserCallable Java services — and jOOQ queries for the data access layer.

How do I install implement-hilla?

The source record exposes this install command: npx skills add https://github.com/AI-Unified-Process/marketplace --skill "aiup-vaadin-jooq/skills/implement-hilla". Inspect the command and pinned source before running it.

Which permission-related actions were detected?

Static rules flagged write-files, network in the source; the page lists the matching lines and excerpts.

Alternatives

Compare before choosing

Computed 97150

UiPath/skills

uipath-coded-apps

UiPath Coded Apps — scaffold, build, run, and deploy Coded Web Apps and Coded Action Apps: React/TypeScript apps that call UiPath Cloud APIs via the `@uipath/uipath-typescript` SDK and ship to Automation Cloud (push/pull to Studio Web, pack, publish, deploy, OAuth-PKCE). Also generates live analytics & governance dashboards from a plain-language request, wired to tenant data via the Insights real-time API, with edit and deploy flows. For RPA→uipath-rpa, Python agents→uipath-agents, Maestro flows

Computed 9777

hyperfx-ai/marketing-skills

slack

Slack messaging, file sharing, Block Kit formatting, and channel management. Use when the user wants to send Slack messages, post rich Block Kit layouts, share files, react, or manage channels and members.

Computed 961,113

fcakyon/claude-codex-settings

vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view

Computed 96207

theBGuy/GitDesktop

vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view