mirror of https://github.com/nexu-io/open-design.git synced 2026-07-03 12:27:55 +08:00

Files

Mohamed Abdallah ab58b62b17 feat(craft): state-coverage module + opt-ins on dashboard, mobile-app, kanban-board (#502 )

* feat(craft): add state-coverage rules + opt-ins on dashboard, mobile-app, kanban-board

State coverage is the most reliable AI-design failure: agents ship only the
populated state. This adds craft/state-coverage.md (108 lines, matches the
existing craft format) covering the five required states (loading, empty,
error, populated, edge), three form-specific states, ARIA/focus rules, and
loading-duration thresholds.

Sources are public: WCAG 2.2, NN/g, Material Design 3, Apple HIG, Baymard.

Three skills with stateful UI opt in via od.craft.requires:
  - dashboard
  - mobile-app
  - kanban-board

Decks, ppt, image-poster and other static-output skills do not opt in.

Refs: see issue body for the broader proposal (state-coverage is module 1
of 5 behavioral craft modules).

* fix(craft): address review findings on state-coverage

Four P2 findings from #502 review addressed in one pass.

- Edge state Test matrix added under the five-states table (dashboard,
  mobile, form, search, detail-view scenarios with concrete thresholds).
- Server-driven empty pattern added as trailing note in the empty-state
  composition section.
- Retry discipline subsection added after error severity tiers
  (immediate first retry, exponential 2s/4s/8s backoff, 3-retry floor,
  Last-attempted timestamp).
- README enforcement-levels subsection added distinguishing auto-checked
  P0 rules from guidance; partial-stateful skill clarification added
  after the Files table.

No rewrites. ~30 lines added. File stays inside the 80-110-line craft
target.

* fix(craft): correct lint enforcement claim + remove duplicate threshold message

Two findings from @mrcfps review (Looper-generated against ee95b909).

- README: rewrote Enforcement-levels P0 description. Verified against
  apps/daemon/src/server.ts:1706-1727: /api/artifacts/save writes the
  file first, then calls lintArtifact, then returns findings in the
  response. Findings reach the UI (P0/P1 badges) and the agent (system
  reminder for self-correction). Persistence is not hard-blocked on P0.
  Original wording mischaracterized this as a generation gate.
- state-coverage: 30-60s duration-table bucket no longer duplicates the
  '15 s taking longer than expected' message from the loading row.
  Reworded to focus on cancel affordance and explicitly note the
  longer-than-expected notice already fired at 15 s.

Both findings non-blocking per Looper but genuine factual issues. Fixed
in one pass.

2026-05-05 16:31:05 +08:00

2.7 KiB

Raw Blame History

name, description, triggers, od

name

description

triggers

dashboard

Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a "dashboard", "admin", "analytics", or "control panel" screen.

dashboard

admin panel

analytics

control panel

后台

管理后台

mode

platform

scenario

preview

design_system

craft

prototype

desktop

operations

type	entry
html	index.html

requires

sections

true

color

typography

layout

components

requires

state-coverage

Dashboard Skill

Produce a single-screen admin / analytics dashboard.

Workflow

Read the active DESIGN.md (injected above). Colors, typography, spacing, component styling all come from it. Do not invent new tokens.
Classify what the dashboard monitors (sales, traffic, usage, incidents, ops, etc.) from the brief. Generate specific, plausible metric names and values — no "Metric A / Metric B" placeholders.
Lay out the required regions:
- Left sidebar (220–260px): brand mark at top, 6–8 nav links with icons, active state uses the DS accent.
- Top bar: page title on the left, search input + user avatar / status on the right.
- Main:
  - Row 1: 3–4 KPI cards (label + big number + delta vs. prior period).
  - Row 2: one primary chart (full width or 2/3) — render as an inline SVG line / bar / area chart drawn from real-looking numbers.
  - Row 3: one secondary chart or table (recent events, top items, etc.).
Write one self-contained HTML document:
- <!doctype html> through </html>, CSS in one inline <style> block.
- CSS Grid for the overall layout; Flexbox inside cards.
- Semantic HTML: <aside>, <header>, <main>, <section>.
- Tag each logical region with data-od-id="slug" for comment mode.
Charts: inline SVG only, no JS libraries. A line chart is ~10 lines of <polyline> with a subtle area fill. A bar chart is N <rect>s with DS-accent fill. Label axes lightly (muted text, smaller scale).
Self-check:
- Every color comes from DESIGN.md tokens.
- Accent used at most twice (sidebar active + one chart highlight).
- Sidebar + top bar are sticky; main scrolls independently.
- Density matches the DS mood — airy DSes get more padding, dense DSes (trading, crypto) tighten rows.

Output contract

Emit between <artifact> tags:

<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

2.7 KiB Raw Blame History Unescape Escape

Dashboard Skill

Workflow

Output contract

2.7 KiB

Raw Blame History