Harmony Create Simple App

Use this skill when you need to recreate the Optum Harmony healthcare demo site with the same shell, page structure, and mock data patterns used in the working reference app.

Source Of Truth

These templates were copied directly from the local working demo:

<path-to-your-harmony-app>

Do not redesign, paraphrase, or invent alternate page structures when the goal is to recreate this site. Use the templates in ./templates/ as the baseline implementation and adapt only where the target app requires different labels, routes, or data.

Required Stack

• @uhg-harmony/react
• @uhg-harmony/foundations
• @uhg-harmony/icons-react
• styled-components
• React function components with local useState / useRef

For Harmony compatibility, prefer styled-components@^5.3.11.

Site Layout

This site is a small healthcare operations workspace with a persistent Harmony masthead, an official Harmony Sidebar, and a scrollable main content area.

The app is composed from these major assets:

• App.jsx
  • wraps the app in <Harmony appId="harmony-healthcare-demo" spacing>
  • mounts the custom app shell
• package.json
  • defines the Vite/React app baseline
  • includes @uhg-harmony/foundations
  • includes @uhg-harmony/react
  • includes @uhg-harmony/icons-react
  • includes styled-components@^5.3.11
• AppShell.jsx
  • owns Harmony Masthead composition
  • owns Harmony Sidebar state
  • switches between Dashboard, Eligibility, Claims, and Remittance views
  • constrains the workspace height and main-area scrolling
• mockData.js
  • provides dashboard stats
  • provides recent activity records
  • provides claims and remittance datasets
  • provides select options for coverage, plans, claim types, and statuses
• index.css
  • sets global box-sizing
  • ensures html, body, and #root fill the viewport
  • gives the shell ownership of scrolling with body { overflow: hidden; }
  • removes Harmony container width constraints
• DashboardPage.jsx
  • Harmony Card KPI summaries
  • Harmony Card quick-action tiles
  • Harmony Panel recent activity feed
• EligibilityPage.jsx
  • member lookup form
  • Harmony InlineNotification
  • Harmony Panel section containers
  • Harmony ReadOnlyFieldValueList eligibility summary
• ClaimsPage.jsx
  • Harmony Panel filter section
  • Harmony Table claims queue
  • Harmony ReadOnlyFieldValueList detail summaries
  • Harmony InlineNotification denial messaging
  • claim DetailPane
  • denial rationale Modal
• RemittancePage.jsx
  • Harmony Panel filter section
  • Harmony Table remittance queue
  • remittance DetailPane
  • Harmony ReadOnlyFieldValueList payment and adjustment summaries
  • Harmony InlineNotification adjustment messaging
  • Harmony Table line items inside the detail pane
  • adjustment detail Modal

Copy Map

Copy the templates into the target app using these destination paths:

• ./templates/app.jsx -> src/App.jsx
• ./templates/app-shell.jsx -> src/AppShell.jsx
• ./templates/index.css -> src/index.css
• ./templates/package.json -> package.json
• ./templates/dashboard-page.jsx -> src/pages/DashboardPage.jsx
• ./templates/eligibility-page.jsx -> src/pages/EligibilityPage.jsx
• ./templates/claims-page.jsx -> src/pages/ClaimsPage.jsx
• ./templates/remittance-page.jsx -> src/pages/RemittancePage.jsx
• ./templates/mock-data.js -> src/data/mockData.js

Template Variants

App Bootstrap (./templates/app.jsx)

Use when: You need the top-level Harmony wrapper and a minimal app entry that mounts the custom shell.

Best for: Recreating the app root exactly as the reference demo does.

App Shell (./templates/app-shell.jsx)

Use when: You need the full workspace shell with Harmony Masthead, official Harmony Sidebar, page switching, and bounded scrolling behavior.

Best for: Internal healthcare workspace apps that need a branded shell without adding router complexity.

Global CSS (./templates/index.css)

Use when: You need the same viewport sizing, container width overrides, and shell scrolling behavior as the reference app.

Best for: Preventing clipped pages, body-level scroll conflicts, and partial-width Harmony containers.

Package Baseline (./templates/package.json)

Use when: You need a known-good Harmony demo dependency baseline before copying the app templates.

Best for: Greenfield React/Vite app setup and avoiding missing-package issues during the initial demo bootstrap.

Dashboard (./templates/dashboard-page.jsx)

Use when: You need a landing page with Harmony Card KPI tiles, Harmony Card quick actions, and a Harmony Panel activity feed.

Best for: Overview pages and first-screen healthcare operations dashboards.

Eligibility (./templates/eligibility-page.jsx)

Use when: You need a structured Harmony form with a success notification, Harmony Panel containers, and a structured read-only eligibility response.

Best for: Coverage verification, benefits checks, and member-lookup flows.

Claims (./templates/claims-page.jsx)

Use when: You need a searchable claims work queue with Harmony Table, Harmony ReadOnlyFieldValueList summaries, a side detail experience, and a denial modal.

Best for: Claim-review demos, adjudication workflows, and healthcare queue experiences.

Remittance (./templates/remittance-page.jsx)

Use when: You need a searchable ERA/remittance queue with Harmony Table, Harmony ReadOnlyFieldValueList summaries, a detail pane, a Harmony Table line-item section, and an adjustment modal.

Best for: Payment-posting demos, ERA review flows, and remittance adjustment inspection.

Mock Data (./templates/mock-data.js)

Use when: You need realistic healthcare demo data to drive all pages consistently.

Best for: End-to-end demos where dashboard, forms, tables, and detail panes need shared sample data.

Rebuild Instructions

1. Copy the templates into the target app paths listed above.
2. If the target app does not already exist, start with ./templates/package.json so a valid dependency baseline is present.
3. Keep the component structure intact before making cosmetic changes.
4. Install the required Harmony and styled-components dependencies.
5. Verify the shell layout first:
   • masthead visible
   • Harmony Sidebar visible
   • main content scrolls independently
   • src/index.css is loaded so root sizing and overflow rules are active
6. Verify each page flow:
   • Dashboard quick actions navigate correctly
   • Eligibility form shows InlineNotification and result card
   • Claims table opens DetailPane and denial Modal
   • Remittance table opens DetailPane and adjustment Modal
7. Preserve the mock data contract unless you also update all page consumers.

Usage Rules

• Use these templates directly when the task is to recreate this site.
• Do not replace the Harmony Sidebar shell with a custom navigation pattern unless the user explicitly asks for a redesign.
• Do not remove DetailPane or Modal workflows from Claims or Remittance if the goal is parity with the demo.
• Do not replace Harmony Table with native HTML tables unless the user explicitly asks for a lower-level custom implementation.
• Keep the page copy and data shape close to the reference app unless the user requests domain changes.
• If you need to rename files in the target app, keep the component internals and relative import structure equivalent.

Templates

• ./templates/app.jsx
• ./templates/app-shell.jsx
• ./templates/index.css
• ./templates/package.json
• ./templates/dashboard-page.jsx
• ./templates/eligibility-page.jsx
• ./templates/claims-page.jsx
• ./templates/remittance-page.jsx
• ./templates/mock-data.js

Related Harmony Assets

Use these alongside this skill when you need deeper Harmony guidance:

• harmony-app-layout-pattern
• harmony-form-pattern
• harmony-modal-pattern
• harmony-version-management
• node-npm-install

Common Gotchas

• Notification is not exported from @uhg-harmony/react; use InlineNotification.
• Harmony works best here with styled-components@^5.3.11.
• The known-good demo dependency baseline also includes @uhg-harmony/foundations; keep it in the app when aiming for parity with the current reference demo.
• AppShell should own the viewport height and main scrolling to avoid clipped results or hidden page content.
• Harmony Panel default border treatment may read like top/bottom rules; if you need a full card outline, override the container border while keeping the component.
• When using Harmony Table, prefer explicit action cells like View or Details instead of assuming row-click behavior.
• For claim and remittance detail summaries, prefer Harmony ReadOnlyFieldValueList over custom label/value blocks.
• For denial or adjustment explanations, prefer Harmony InlineNotification over custom alert boxes.