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,…
AI-Unified-Process/marketplace/aiup-vaadin-jooq/skills/implement-hilla/SKILL.md
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.
Decision brief
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.
Compatibility matrix
| Platform | Status | Evidence | What to check |
|---|---|---|---|
| Codex | Not declared | No explicit evidence | Portability before use |
| Claude Code | Not declared | No explicit evidence | Portability before use |
| Cursor | Not declared | No explicit evidence | Portability before use |
| Gemini CLI | Not declared | No explicit evidence | Portability before use |
Installation
The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.
npx skills add https://github.com/AI-Unified-Process/marketplace --skill "aiup-vaadin-jooq/skills/implement-hilla"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
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.
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…
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…
Create test classes (use dedicated testing skills instead)
Browser-callable service — annotate a Spring service with
Permission review
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 forThe documentation includes network, browsing, or remote request actions.
.fetch(Records.mapping(PersonDto::new));Evidence record
| Signal | Value | Evidence type | Meaning |
|---|---|---|---|
| Quality score | 92/100 | Computed | Documentation, specificity, maintenance, and trust rules |
| Repository stars | 118 | Source | Repository attention, not individual Skill quality |
| Compatibility | 0 platforms | Source | Declared in the catalog source record |
| Usage guide | automated source guide | Editorial | Generated or reviewed according to the visible evidence level |
Pinned source
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.
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:
fetchInto(SomeDto.class) for projected queries — use Records.mapping(SomeDto::new) instead@BrowserCallable classdocs/use_cases/docs/entity_model.md@BrowserCallable service that delegates to the data access layer and returns DTOs.tsx file under src/main/frontend/views/, calling the
generated TypeScript client of the serviceuc-coverage sub-agent and close every gap it reports — see
Coverage Check belowcom.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.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.@vaadin/react-components):
Grid with GridColumn for listings, field components inside forms.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.@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.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.
https://mcp.vaadin.com/docs)https://jooq-mcp.martinelli.ch/mcp)https://www.javadocs.dev/mcp)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.
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.**Status:** value. Pass that suggestion on to the
user; leave the document itself alone.agents/uc-coverage.md) yourself.Frequently asked questions
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.
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.
Static rules flagged write-files, network in the source; the page lists the matching lines and excerpts.
Alternatives
UiPath/skills
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
hyperfx-ai/marketing-skills
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.
fcakyon/claude-codex-settings
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
theBGuy/GitDesktop
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