design-webapp

Name: design-webapp
Author: fusengine

21stars3forks

How to install design-webapp?

fusengine/agents/design-webapp

$npx -y skills add fusengine/agents --skill design-webapp

Installs into the current project.

Summary

Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register product: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz f

Files · 1

View on GitHub

SKILL.md

1	## Design Webapp — Dashboards, Density, States
2
3	### When
4	After `design-system` tokens exist and `design-method`'s Gate 0 has locked register
5	`product` (dense, predictable, motion stays discreet). Read `design-method`'s routing
6	table first — if the surface is a marketing/landing page instead, use `design-web`.
7
8	### Input
9	- `design-system.md` — OKLCH palette, typography, spacing density, the 3 dials.
10	- `design-method/references/register/product.md` — the Domain-Specificity Floor and the
11	Product Furniture table (generic KPI ribbon, marketing triad reused in-app, cookie-cutter
12	empty state, undifferentiated settings list, generic nav vocabulary).
13	- The specific page/pattern being built (dashboard, auth, settings, data table, etc.).
14
15	### Steps
16
17	1. Register `product` ≠ marketing register. No hero, no scroll-reveal, no CTA-tricks —
18	this register optimizes for glance-speed, not first impression. Density is a feature:
19	Enterprise Dense / Standard spacing profile (`design-system/references/spacing-density.md`),
20	`MOTION_INTENSITY ≤ 4` by default (`design-motion/references/motion-performance.md`).
21	The Focal-Block Floor and Signature Dominance from `design-web` do not apply here
22	(`register/product.md` §4) — several equal-weight blocks in one viewport is correct, not
23	a defect.
24
25	2. Pick the page pattern from `references/layouts/pages/` — dashboard, auth-login,
26	auth-register, onboarding, profile, settings, error-pages. Each is a starting structure,
27	not a template to copy verbatim — adapt density from `design-system.md`, and run the
28	Domain-Specificity Floor test on it: would this page's copy/icons/grouping look native
29	dropped unedited into an unrelated product in the same category? If yes, it's furniture
30	— name the product's real entities instead (`register/product.md` §2-3).
31
32	3. Pick the interaction pattern(s) from `references/layouts/patterns/` — data-table,
33	command-palette, modal-dialog, toast-notifications, empty-state. Apps lean on these far
34	more than marketing sites do.
35
36	4. Cover every state explicitly — empty, loading, error, populated. Never a blank or
37	silent default:
38	- Loading — skeleton rows/cards, never spinner-only (`layouts/patterns/data-table.md`
39	— NNG: skeletons perceived 9-12% faster than spinners).
40	- Empty — name the actual object type and the actual first action ("No invoices yet
41	— create one from a quote" beats "No data yet", `register/product.md` §3 Cookie-cutter
42	empty state).
43	- Error — actionable message + retry affordance, never a raw stack trace or generic
44	"Something went wrong."
45	- For data tables specifically, this extends to sorting/filtering/pagination states.
46
47	5. Tables (hard rules, `layouts/patterns/data-table.md`): first column is a readable
48	identifier (not a raw ID/UUID), numeric columns right-aligned, header sticky on scroll,
49	wrap content rather than truncate where legibility matters, density is a first-class
50	mode (standard 48dp row / dense 36dp row — Material 3 baseline), mobile falls back to
51	horizontal scroll with a sticky first column.
52
53	6. Dataviz: prefer bar/line charts over pie — preattentive processing reads
54	magnitude/trend faster than angle/area. Color encodes data, never decorates; keep
55	category → color mapping consistent across every chart on the same surface
56	(`layouts/pages/dashboard.md` — F-pattern placement for the North Star metric still
57	applies).
58
59	7. Forms: one column, label above the field, inline validation — reuse
60	`../design-web/references/forms-guide.md` rather than duplicating form rules here; this
61	skill only adds the product-register defaults (single column over multi-column, no
62	marketing-style floating labels).
63
64	8. Command palette (if present): keyboard shortcuts are optional and revealed only
65	after the user has triggered the action manually at least once — never taught upfront
66	as a required interaction (`layouts/patterns/command-palette.md`).
67
68	9. Apply the responsive shell from `references/responsive-dashboard.md` — sidebar
69	behavior across breakpoints (full at desktop, icon-rail at tablet, hamburger at mobile).
70
71	10. Reuse general component guides from `design-web` (buttons, cards, grids, icons)
72	rather than

People who liked this also viewed

6 picks

Type

design-webapp

21stars3forks

View on GitHub

How to install design-webapp?

fusengine/agents/design-webapp

$npx -y skills add fusengine/agents --skill design-webapp

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	## Design Webapp — Dashboards, Density, States
2
3	### When
4	After `design-system` tokens exist and `design-method`'s Gate 0 has locked register
5	`product` (dense, predictable, motion stays discreet). Read `design-method`'s routing
6	table first — if the surface is a marketing/landing page instead, use `design-web`.
7
8	### Input
9	- `design-system.md` — OKLCH palette, typography, spacing density, the 3 dials.
10	- `design-method/references/register/product.md` — the Domain-Specificity Floor and the
11	Product Furniture table (generic KPI ribbon, marketing triad reused in-app, cookie-cutter
12	empty state, undifferentiated settings list, generic nav vocabulary).
13	- The specific page/pattern being built (dashboard, auth, settings, data table, etc.).
14
15	### Steps
16
17	1. Register `product` ≠ marketing register. No hero, no scroll-reveal, no CTA-tricks —
18	this register optimizes for glance-speed, not first impression. Density is a feature:
19	Enterprise Dense / Standard spacing profile (`design-system/references/spacing-density.md`),
20	`MOTION_INTENSITY ≤ 4` by default (`design-motion/references/motion-performance.md`).
21	The Focal-Block Floor and Signature Dominance from `design-web` do not apply here
22	(`register/product.md` §4) — several equal-weight blocks in one viewport is correct, not
23	a defect.
24
25	2. Pick the page pattern from `references/layouts/pages/` — dashboard, auth-login,
26	auth-register, onboarding, profile, settings, error-pages. Each is a starting structure,
27	not a template to copy verbatim — adapt density from `design-system.md`, and run the
28	Domain-Specificity Floor test on it: would this page's copy/icons/grouping look native
29	dropped unedited into an unrelated product in the same category? If yes, it's furniture
30	— name the product's real entities instead (`register/product.md` §2-3).
31
32	3. Pick the interaction pattern(s) from `references/layouts/patterns/` — data-table,
33	command-palette, modal-dialog, toast-notifications, empty-state. Apps lean on these far
34	more than marketing sites do.
35
36	4. Cover every state explicitly — empty, loading, error, populated. Never a blank or
37	silent default:
38	- Loading — skeleton rows/cards, never spinner-only (`layouts/patterns/data-table.md`
39	— NNG: skeletons perceived 9-12% faster than spinners).
40	- Empty — name the actual object type and the actual first action ("No invoices yet
41	— create one from a quote" beats "No data yet", `register/product.md` §3 Cookie-cutter
42	empty state).
43	- Error — actionable message + retry affordance, never a raw stack trace or generic
44	"Something went wrong."
45	- For data tables specifically, this extends to sorting/filtering/pagination states.
46
47	5. Tables (hard rules, `layouts/patterns/data-table.md`): first column is a readable
48	identifier (not a raw ID/UUID), numeric columns right-aligned, header sticky on scroll,
49	wrap content rather than truncate where legibility matters, density is a first-class
50	mode (standard 48dp row / dense 36dp row — Material 3 baseline), mobile falls back to
51	horizontal scroll with a sticky first column.
52
53	6. Dataviz: prefer bar/line charts over pie — preattentive processing reads
54	magnitude/trend faster than angle/area. Color encodes data, never decorates; keep
55	category → color mapping consistent across every chart on the same surface
56	(`layouts/pages/dashboard.md` — F-pattern placement for the North Star metric still
57	applies).
58
59	7. Forms: one column, label above the field, inline validation — reuse
60	`../design-web/references/forms-guide.md` rather than duplicating form rules here; this
61	skill only adds the product-register defaults (single column over multi-column, no
62	marketing-style floating labels).
63
64	8. Command palette (if present): keyboard shortcuts are optional and revealed only
65	after the user has triggered the action manually at least once — never taught upfront
66	as a required interaction (`layouts/patterns/command-palette.md`).
67
68	9. Apply the responsive shell from `references/responsive-dashboard.md` — sidebar
69	behavior across breakpoints (full at desktop, icon-rail at tablet, hamburger at mobile).
70
71	10. Reuse general component guides from `design-web` (buttons, cards, grids, icons)
72	rather than

People who liked this also viewed

6 picks

Type