Rylai Dashboard Creator

Build the working dashboard as the primary experience. Optimize for scanning, comparison, and repeated use.

Establish The Metric Contract

For each metric, determine:

• exact definition and unit;
• source and refresh time;
• aggregation level and time window;
• comparison baseline;
• whether higher or lower is desirable;
• states for missing, delayed, partial, and invalid data.

Do not invent values to make a screen look complete. Clearly label sample data when a prototype requires it.

Build Workflow

1. Inspect the target

   • Reuse the repository's framework, components, tokens, and data-access patterns.
   • For a standalone deliverable, choose the smallest format that supports the required interaction.

2. Create the information hierarchy

   • Put global filters and freshness near the top.
   • Show a small set of decision-critical KPIs first.
   • Follow with trends, comparisons, breakdowns, and detailed records.
   • Keep related controls beside the view they affect.

3. Choose visual forms

   • Line: change over ordered time.
   • Bar: comparison across categories.
   • Scatter: relationship or outliers.
   • Distribution: spread and concentration.
   • Table: exact values, dense comparison, or operational action.
   • Progress: bounded completion against a known target.

4. Implement states

   • Loading, empty, error, stale, and permission-limited states must preserve layout.
   • Filters must have visible active values and a clear reset path.
   • Tooltips must add detail, not carry essential meaning.

5. Verify

   • Test realistic long labels, zero values, negative values, and missing values.
   • Check desktop and mobile widths.
   • Confirm keyboard access, focus visibility, contrast, and non-color status cues.
   • Validate calculations against the source data.
   • Inspect the rendered dashboard for clipping, overlap, and layout shift.

Presentation Rules

• Use restrained surfaces and compact spacing appropriate to operational software.
• Keep cards for individual metrics or repeated records; do not wrap every section in a card.
• Use consistent scales across charts that users will compare.
• Start numeric axes at zero for bars unless a different baseline is explicitly justified.
• Show units in labels or values, not only in explanatory text.
• Avoid decorative graphics that compete with the data.
• Keep table headers visible and align numbers for comparison.

Delivery

Provide:

• the runnable dashboard or edited application;
• the data assumptions and metric definitions;
• the preview path or local URL;
• the viewport and interaction checks performed;
• any unavailable live data or unresolved integration requirement.

Runtime Notes

• Resolve files from the active workspace and keep generated assets local.
• Use installed icon and chart libraries when the existing project already depends on them.
• For a standalone dashboard, avoid unnecessary network dependencies.
• Preserve compatibility with both Codex, Hermes, and Claude by checking available tools before invoking runtime-specific features.