Audit, recommendations · Klarhimmel UI

Install

npx shadcn add @klarhimmel/report-audit-recommendations

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import ReportAuditRecommendations from '@/components/klarhimmel/blocks/report-audit-recommendations';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <ReportAuditRecommendations props={{
          "eyebrow": "Next moves",
          "title": "Fix these first",
          "description": "An ordered shortlist. Confirm each finding before changing the site.",
          "items": [
            {
              "title": "Give every service page a canonical URL",
              "impact": "High impact",
              "effort": "Small effort",
              "scope": "Page-level",
              "reason": "Two sampled service pages do not declare their preferred URL.",
              "next": "Add self-referencing canonical tags, then check the rendered HTML.",
              "pages": [
                {
                  "label": "Service page",
                  "href": "https://example.com/services"
                }
              ],
              "action": {
                "label": "Open implementation notes",
                "href": "https://example.com/notes"
              }
            },
            {
              "title": "Describe the organization consistently",
              "impact": "Medium impact",
              "effort": "Small effort",
              "scope": "Site-wide",
              "reason": "Organization details differ between the homepage and service pages.",
              "next": "Use one set of organization details and validate the structured data.",
              "pages": [],
              "action": {
                "label": "",
                "href": ""
              }
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/report-audit-recommendations';

Also called

report/audit-recommendations

Category: A document for a reader: key figures, decisions with a recommended default, long-cell tables, timelines, callouts, sources and prose. Rendered to one HTML file by kh-report.

Notes

When to use it

Turn audit findings into a short ordered work list with a reason and a concrete next change. Use report-decisions when the reader must choose between alternatives rather than implement fixes.

Writing for it

- Write the next field as an action someone can verify, such as checking rendered canonical tags after deployment. Keep the reason separate so evidence and proposed work do not blur together. - Supply impact, effort and scope as explicit labels. Link affected pages with meaningful names and keep the recommendation order aligned with the priorities your service calculated.

Watch out for

This list does not validate findings or estimate their business value. The host supplies the ordering and labels; empty action labels remove their links instead of showing an unnamed control.

Pairs well with

Usage

The block in a page, with its default content (long lists shortened). Every prop is in the table below.

section.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import ReportAuditRecommendations from '@/components/klarhimmel/blocks/report-audit-recommendations';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <ReportAuditRecommendations props={{
          "eyebrow": "Next moves",
          "title": "Fix these first",
          "description": "An ordered shortlist. Confirm each finding before changing the site.",
          "items": [
            {
              "title": "Give every service page a canonical URL",
              "impact": "High impact",
              "effort": "Small effort",
              "scope": "Page-level",
              "reason": "Two sampled service pages do not declare their preferred URL.",
              "next": "Add self-referencing canonical tags, then check the rendered HTML.",
              "pages": [
                {
                  "label": "Service page",
                  "href": "https://example.com/services"
                }
              ],
              "action": {
                "label": "Open implementation notes",
                "href": "https://example.com/notes"
              }
            },
            {
              "title": "Describe the organization consistently",
              "impact": "Medium impact",
              "effort": "Small effort",
              "scope": "Site-wide",
              "reason": "Organization details differ between the homepage and service pages.",
              "next": "Use one set of organization details and validate the structured data.",
              "pages": [],
              "action": {
                "label": "",
                "href": ""
              }
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}

Props

The type, default and text limit of every prop. On a real page, over-limit text is kept and checkSections flags it (Installation, Check a page before you ship); this live preview shows the default until it fits. The panel above edits all props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Next moves'`	Text, up to 60 characters.
`title`	`string`	`'Fix these first'`	Text, up to 120 characters.
`description`	`string`	`'An ordered shortlist. Confirm each …'`	Text, up to 300 characters.
`items`	`{ title, impact, effort, scope, reason, next, pages, action }[]`	`2 items`	List of 1 to 8. Each item: title, impact, effort, scope, reason, next, pages, action.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.