skills.rest
HeliosSoftware
HeliosSoftwareOFFICIAL
Explore all skills by this author →
WebsiteGitHub

work-with-ui

Develop the server-rendered htmx web UI for the Helios FHIR Server.

51|19|Updated Jan 4, 2025
Search Tags:#rust#playwright#htmx#web ui#fhir#axum#askama
One-click install
npx skills add https://github.com/HeliosSoftware/hfs --skill work-with-ui-heliossoftware
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: work-with-ui
Source: https://github.com/HeliosSoftware/hfs/tree/main/.claude/skills/work-with-ui
Command: npx skills add https://github.com/HeliosSoftware/hfs --skill work-with-ui-heliossoftware

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Working on the HFS web UI requires knowing a strict architecture: Askama templates, htmx fragments, vendored assets, no SPA frameworks, and enforced design rules. This Skill gives an AI the operational knowledge to modify the helios-ui crate correctly without violating its conventions. ## Core Features & Use Cases - Route and handler guidance: Documents every /ui route, the full-page vs htmx-fragment pattern, and how handlers stay thin by delegating to helios-rest and helios-persistence. - Design system rules: Explains the layered app.css vocabulary, canonical component classes, and the Playwright/axe-core test gates that fail on undefined classes or accessibility violations. - Testing workflow: Covers the inner Rust test ring (cargo test -p helios-ui) and the outer Playwright e2e ring, including the no-JS and WCAG 2.2 AA requirements. - Use Case: Ask the AI to add a new htmx-driven page to the FHIR server UI; it will scaffold the template from _scaffold.html, register the route, reuse canonical CSS classes, and add the route to the e2e route list. ## Quick Start Use the work-with-ui skill to add a new htmx-powered page to the HFS web UI following its template and CSS conventions.

Frequently Asked Questions about work-with-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new page to the HFS web UI?▼

Start from templates/pages/_scaffold.html, register the route in crates/ui/src/lib.rs, and add the route to e2e/pages/routes.ts so cross-page design guards cover it. Handlers should return a full page on hard navigation and an HTML fragment on HX-Request.

How does htmx fragment rendering work in an Axum Rust server?▼

Handlers use the axum-htmx HxRequest extractor to detect htmx requests and return a partial template fragment instead of a full page. AutoVaryLayer emits Vary: HX-Request automatically so caches never serve a fragment for a hard navigation.

Can I use React or npm packages in the helios-ui crate?▼

No. The UI forbids React, Vue, Svelte, Alpine, jQuery, and any bundler or build step. The single exception is a vendored prebuilt CodeMirror 6 bundle updated via a documented manual ritual, never run by cargo build or CI.

Why do my asset or template changes not appear after editing files?▼

rust-embed embeds assets and templates into the binary even in debug builds, so edits under assets/ or templates/ require a rebuild to take effect. Do not work around stale assets with cache-busting query strings.

How do I run the Playwright e2e tests for the UI?▼

Build helios-hfs with the ui feature, then run npm ci and npx playwright install chromium inside crates/ui/e2e, followed by npx playwright test. The axe gate fails on any WCAG 2.2 AA violation in both light and dark themes.

Why does /ui return 404 when the server is running?▼

The UI is absent when built without the ui feature or when HFS_UI_ENABLED=false is set. In that case ui_absent_routes returns 404 with an OperationOutcome explaining the UI is disabled.

Related Skills

Explore More Software Engineering Skills→
truefoundrytruefoundry
1

truefoundry-notebooks

Launch Jupyter Notebooks on TrueFoundry with GPU support and persistent storage via UI, CLI, or REST API.

Official
Advanced
charleshall888charleshall888
1

ui-a11y

Run axe-core accessibility audits via Playwright against a dev server.

Community
Advanced
aehrcaehrc
133

fhir-api

Implement FHIR RESTful API servers and clients per HL7 FHIR specifications.

Official
Advanced
markhamsquareventuresmarkhamsquareventures

inertia

Integrate Link and Form components for React-based Laravel Inertia navigation and handling.

Official
Intermediate