dme-agent 7.4.2 → 9.69.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -4
- package/assets/agent/AGENTS.md +365 -50
- package/assets/agent/DME-Agent-v7.4-SYSTEM.md +29 -98
- package/assets/agent/DME-Agent-v9.69-SYSTEM.md +208 -0
- package/assets/agent/PROMPT-COMPACT.md +21 -9
- package/assets/agent/dme-v9.69.md +43 -0
- package/assets/manifesto/DME-Agent-v9.69.md +514 -0
- package/assets/references/icon-doctrine.md +122 -0
- package/assets/references/motion-bible.md +262 -0
- package/assets/references/palette-intake.md +159 -0
- package/assets/skills/dme-app-shell/SKILL.md +77 -0
- package/assets/skills/dme-critique/SKILL.md +105 -6
- package/assets/skills/dme-dashboard/SKILL.md +108 -35
- package/assets/skills/dme-design/SKILL.md +138 -11
- package/assets/skills/dme-icons/SKILL.md +89 -0
- package/assets/skills/dme-landing/SKILL.md +98 -23
- package/assets/skills/dme-motion/SKILL.md +111 -0
- package/assets/skills/dme-research/SKILL.md +134 -6
- package/assets/skills/dme-shadcn/SKILL.md +128 -6
- package/assets/skills/dme-ux/SKILL.md +110 -27
- package/assets/skills/dme-welcome/SKILL.md +87 -0
- package/bin/dme.mjs +31 -14
- package/package.json +7 -3
- package/src/install.mjs +101 -57
- package/src/postinstall-hint.mjs +2 -2
- package/src/ui.mjs +3 -3
|
@@ -1,56 +1,129 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: dme-dashboard
|
|
3
3
|
description: >
|
|
4
|
-
|
|
5
|
-
tables/queues,
|
|
6
|
-
|
|
4
|
+
DME 9.69 peaceful dense operational dashboards: gray palette, work object first,
|
|
5
|
+
metric strip, tables/queues, soft motion. Triggers: /dme-dashboard, dashboard,
|
|
6
|
+
admin panel, backoffice, ops UI, command center, metrics table, work queue.
|
|
7
7
|
---
|
|
8
8
|
|
|
9
|
-
# DME Dashboard —
|
|
9
|
+
# DME Dashboard 9.69 — Peaceful Dense Ops
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
**Work surface, not poster.** Someone decides something in 10 seconds.
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
2. Work object? (orders, students, tickets…)
|
|
15
|
-
3. 10-second decision?
|
|
16
|
-
4. Top 3 actions?
|
|
13
|
+
## Intake (if not locked)
|
|
17
14
|
|
|
18
|
-
|
|
15
|
+
1. **Work object** — orders, tickets, students, invoices…
|
|
16
|
+
2. **Who decides what** — role + primary action
|
|
17
|
+
3. **Platform** — web calm vs app rich
|
|
18
|
+
4. **Palette** — default **peace gray/white** unless brand given
|
|
19
|
+
|
|
20
|
+
## Shell (always)
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
sidebar
|
|
24
|
+
· search / filters / primary CTA
|
|
25
|
+
· status strip (optional: live, sync, env)
|
|
26
|
+
· metric strip (numbers only)
|
|
27
|
+
· table | queue | list
|
|
28
|
+
· detail Sheet | Dialog
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
shadcn: `sidebar` `table` `badge` `tabs` `sheet` `dialog` `select` `command` `skeleton` `pagination` `progress` `dropdown-menu` · Card **thin** for KPIs only if needed.
|
|
32
|
+
|
|
33
|
+
## Metric strip
|
|
19
34
|
|
|
20
35
|
```
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
metric strip: 3–5 BIG numbers, labels 1–3 words, NO paragraphs
|
|
24
|
-
main: table or queue of the work object
|
|
25
|
-
detail: Sheet/Dialog on row click
|
|
36
|
+
[ 128 ] [ 14 ] [ 3.2% ]
|
|
37
|
+
Pedidos Fila Falha
|
|
26
38
|
```
|
|
27
39
|
|
|
28
|
-
|
|
40
|
+
- Big number + **1–3 word** label
|
|
41
|
+
- Optional delta: `+12%` muted
|
|
42
|
+
- **No paragraphs under KPIs**
|
|
43
|
+
- Prefer bare grid over Card walls
|
|
44
|
+
- Icons: almost never (see `/dme-icons`)
|
|
45
|
+
|
|
46
|
+
## Table / queue (protagonist)
|
|
47
|
+
|
|
48
|
+
- Default sort = what ops need now (priority, SLA, newest)
|
|
49
|
+
- Row click → `Sheet` detail (don’t force full page unless deep edit)
|
|
50
|
+
- Filters: Select + search; advanced behind “Mais filtros”
|
|
51
|
+
- Bulk actions: visible only when rows selected
|
|
52
|
+
- Pagination or virtualize — don’t dump 500 DOM rows casually
|
|
53
|
+
|
|
54
|
+
### Columns
|
|
55
|
+
|
|
56
|
+
Identity · Status (Badge) · Critical date/number · Owner · Actions (DropdownMenu)
|
|
57
|
+
|
|
58
|
+
## Status strip
|
|
59
|
+
|
|
60
|
+
Soft, scannable: `● Sincronizado` · `12 online` · env badge. Not a second dashboard.
|
|
29
61
|
|
|
30
|
-
|
|
31
|
-
|---|---|
|
|
32
|
-
| Operational Index | default product home |
|
|
33
|
-
| Command Center | live ops / jobs / day-of |
|
|
34
|
-
| Human Overview | business owner “today” |
|
|
35
|
-
| Dense Analytics | many numbers, Tufte-clean |
|
|
36
|
-
| Inbox / Queue | items needing human action |
|
|
62
|
+
## Patterns (pick one)
|
|
37
63
|
|
|
38
|
-
|
|
64
|
+
| Pattern | When |
|
|
65
|
+
|---------|------|
|
|
66
|
+
| **Operational Index** | browse + act on many records |
|
|
67
|
+
| **Command Center** | few KPIs + live queue + attention items |
|
|
68
|
+
| **Human Overview** | people/schedule first, light metrics |
|
|
69
|
+
| **Dense Analytics** | tables + tight numbers; charts rare |
|
|
70
|
+
| **Inbox/Queue** | process items top-down; keyboard friendly |
|
|
39
71
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
-
|
|
43
|
-
-
|
|
44
|
-
-
|
|
45
|
-
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
72
|
+
## Peace aesthetic
|
|
73
|
+
|
|
74
|
+
- Gray/zinc surfaces, white raise, hairline borders
|
|
75
|
+
- One accent for primary CTA / critical badge
|
|
76
|
+
- Density via **8/12/16 spacing**, not smaller unreadable type
|
|
77
|
+
- Dark option: `#09090b` / `#18181b`
|
|
78
|
+
|
|
79
|
+
## Motion (dashboard = calm)
|
|
80
|
+
|
|
81
|
+
- Page: optional 150–200ms fade
|
|
82
|
+
- Rows: no enter carnival
|
|
83
|
+
- Sheet: 250–280ms peace-out
|
|
84
|
+
- Skeleton pulse soft; respect reduced motion
|
|
85
|
+
- App shell may add light route transition — content stays quiet
|
|
86
|
+
|
|
87
|
+
See `/dme-motion`.
|
|
88
|
+
|
|
89
|
+
## States
|
|
90
|
+
|
|
91
|
+
| State | UI |
|
|
92
|
+
|-------|-----|
|
|
93
|
+
| **Empty** | title + 1 line + one CTA (`Criar pedido`) |
|
|
94
|
+
| **Loading** | Skeleton matching table/metrics geometry |
|
|
95
|
+
| **Error** | what failed + retry — never stack trace |
|
|
96
|
+
| **Success** | Sonner 1 line |
|
|
97
|
+
| **Offline** | status strip + disable mutating actions |
|
|
49
98
|
|
|
50
99
|
## Copy
|
|
51
100
|
|
|
52
|
-
|
|
101
|
+
- No “Welcome to your dashboard!” inside logged-in apps
|
|
102
|
+
- Buttons = verbs: `Aprovar`, `Atribuir`, `Exportar`
|
|
103
|
+
- Filters labeled in human language
|
|
104
|
+
|
|
105
|
+
## Hard bans
|
|
106
|
+
|
|
107
|
+
- Six donut charts
|
|
108
|
+
- Feature-card grid as “home”
|
|
109
|
+
- AI purple glow, mesh background
|
|
110
|
+
- KPI essays
|
|
111
|
+
- Tour of 12 tooltips
|
|
112
|
+
- Reinvented table/sidebar
|
|
53
113
|
|
|
54
114
|
## Deliver
|
|
55
115
|
|
|
56
|
-
Brief
|
|
116
|
+
1. Brief: work object · role · platform · anchor **vercel-dens** default
|
|
117
|
+
2. Code: shell + metrics + table + sheet + states
|
|
118
|
+
3. Subtract: kill ornament, keep decisions
|
|
119
|
+
|
|
120
|
+
### Checklist
|
|
121
|
+
|
|
122
|
+
- [ ] Work object obvious in 10s
|
|
123
|
+
- [ ] Metrics are numbers not stories
|
|
124
|
+
- [ ] Table/queue is the hero
|
|
125
|
+
- [ ] Peace gray + soft motion
|
|
126
|
+
- [ ] Empty/error real
|
|
127
|
+
- [ ] shadcn composed
|
|
128
|
+
|
|
129
|
+
**Decide. Don’t decorate.**
|
|
@@ -1,18 +1,145 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: dme-design
|
|
3
3
|
description: >
|
|
4
|
-
DME
|
|
5
|
-
|
|
4
|
+
DME 9.69 Absolute Front-End master design workflow. Session intake first
|
|
5
|
+
(palette, platform, mood), then structure, shadcn, motion, icons, peace aesthetic.
|
|
6
|
+
Triggers: /dme-design, DME design, neominimal, design UI, make it premium,
|
|
7
|
+
absolute front-end, peace UI, gray palette, product surface design.
|
|
6
8
|
---
|
|
7
9
|
|
|
8
|
-
# DME Design
|
|
10
|
+
# DME Design 9.69 — Absolute Front-End
|
|
9
11
|
|
|
10
|
-
|
|
11
|
-
2. Anchor: vercel-dens | apple-editorial | fumadocs
|
|
12
|
-
3. Protagonist of first viewport
|
|
13
|
-
4. shadcn map → install → tokens
|
|
14
|
-
5. Short copy; cards only if lean
|
|
15
|
-
6. Empty/loading/error states
|
|
16
|
-
7. Deliver: brief → code → subtraction
|
|
12
|
+
Master workflow. Run this before painting pixels. Design is intake → structure → compose → subtract.
|
|
17
13
|
|
|
18
|
-
|
|
14
|
+
## 0. Session intake (mandatory unless already answered)
|
|
15
|
+
|
|
16
|
+
Ask **early**, not mid-build. One short block; do not interview forever.
|
|
17
|
+
|
|
18
|
+
| # | Question | Default if silent |
|
|
19
|
+
|---|----------|-------------------|
|
|
20
|
+
| 1 | **Platform?** `web` · `app` (Electron/Tauri/desktop) · `both` | `web` |
|
|
21
|
+
| 2 | **Palette?** brand hexes / “peace gray” / dark or light | **Peace:** gray/white, zinc neutrals, one accent max |
|
|
22
|
+
| 3 | **Mood?** calm ops · editorial · playful soft · dense tool | calm ops |
|
|
23
|
+
| 4 | **Audience?** non-dev humans default | non-dev |
|
|
24
|
+
| 5 | **Work object?** (orders, files, chats…) or landing goal | required for dashboards |
|
|
25
|
+
| 6 | **Motion budget?** web-calm · app-rich · minimal | web-calm on web, app-rich on desktop |
|
|
26
|
+
|
|
27
|
+
If he already gave colors/platform, **skip re-asking**. Lock tokens and go.
|
|
28
|
+
|
|
29
|
+
### Peace default (9.69)
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
bg: #fafafa / #ffffff (light) · #09090b (dark)
|
|
33
|
+
raise: #ffffff / #f4f4f5 · #18181b
|
|
34
|
+
border: zinc-200 / zinc-800
|
|
35
|
+
text: zinc-900 / zinc-100
|
|
36
|
+
muted: zinc-500
|
|
37
|
+
accent: one only — brand OR #0065F2 (light CTA) OR #FFDE21 (dark)
|
|
38
|
+
radius: ≤ 8px
|
|
39
|
+
shadow: overlays only
|
|
40
|
+
type: Montserrat · Playfair Display (editorial) · JetBrains Mono (data)
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
**90% neutrals / 10% accent.** Hierarchy: size → weight → space → color.
|
|
44
|
+
|
|
45
|
+
## 1. Decision brief (≤10 lines before code)
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
Task:
|
|
49
|
+
Audience:
|
|
50
|
+
Platform: web | app
|
|
51
|
+
Anchor: vercel-dens | apple-editorial | fumadocs ← pick ONE
|
|
52
|
+
Protagonist (first viewport):
|
|
53
|
+
Palette lock:
|
|
54
|
+
shadcn list:
|
|
55
|
+
Motion density: calm | rich
|
|
56
|
+
Icon policy: sparse | nav+status
|
|
57
|
+
Card policy: lean / none
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## 2. Structure before components
|
|
61
|
+
|
|
62
|
+
1. **One protagonist** per viewport — what the eye should hit first.
|
|
63
|
+
2. **Information order:** primary action → status → data → chrome.
|
|
64
|
+
3. **Shell pattern:**
|
|
65
|
+
- Web marketing → landing modules (`/dme-landing`)
|
|
66
|
+
- Web product → sidebar + work surface (`/dme-dashboard`)
|
|
67
|
+
- Desktop → titlebar-aware shell (`/dme-app-shell`)
|
|
68
|
+
4. **States planned up front:** empty · loading · success · error · offline.
|
|
69
|
+
|
|
70
|
+
## 3. Compose stack (never reinvent)
|
|
71
|
+
|
|
72
|
+
| Layer | Tool |
|
|
73
|
+
|-------|------|
|
|
74
|
+
| Primitives | **shadcn/ui** — Button, Input, Dialog, Table, Tabs, Sidebar, Sheet, Select, Form, Badge, Separator, Progress, Tooltip, Sonner, Accordion, Card, Command, DropdownMenu, Pagination, Skeleton |
|
|
75
|
+
| Motion | **framer-motion** + CSS keyframes — see `/dme-motion` |
|
|
76
|
+
| Icons | **lucide-react** — see `/dme-icons` |
|
|
77
|
+
| Layout | Tailwind; density via spacing scale, not decoration |
|
|
78
|
+
|
|
79
|
+
Install → map → compose. Hand-rolled Button/Dialog/Table = fail.
|
|
80
|
+
|
|
81
|
+
## 4. Copy & cards
|
|
82
|
+
|
|
83
|
+
- Hero lead = **1 sentence**
|
|
84
|
+
- Card body ≤ **1–2 lines**
|
|
85
|
+
- Field label ≤ 3 words · toast 1 line · modal 2–3 lines
|
|
86
|
+
- Cards only when they earn space: entity · plan · KPI number · media+meta
|
|
87
|
+
- Text-only box → `divide-y` list or table instead
|
|
88
|
+
|
|
89
|
+
### Banned AI copy
|
|
90
|
+
|
|
91
|
+
seamless · next-gen · powerful · revolutionary · unlock · supercharge · elevate · cutting-edge · robust · your journey · empower · all-in-one · delve · in today’s world
|
|
92
|
+
|
|
93
|
+
## 5. Platform motion rule
|
|
94
|
+
|
|
95
|
+
| Platform | Motion |
|
|
96
|
+
|----------|--------|
|
|
97
|
+
| **Web** | Restrained: 120–250ms, opacity/y small, functional only |
|
|
98
|
+
| **App** | Richer: springs, welcome staggers, route transitions — still peaceful, not carnival |
|
|
99
|
+
|
|
100
|
+
Always honor `prefers-reduced-motion`. Details in `/dme-motion`.
|
|
101
|
+
|
|
102
|
+
## 6. Aesthetic: peace, not carnival
|
|
103
|
+
|
|
104
|
+
**Do:** quiet gray surfaces, crisp type, soft separators, one accent hit, readable density.
|
|
105
|
+
**Don’t:** blobs, mesh gradients, neon glow, particle noise, 6 icon feature cards with essays, typing loops, autoplay chaos.
|
|
106
|
+
|
|
107
|
+
Anchors (one primary):
|
|
108
|
+
|
|
109
|
+
- **Vercel dens** — operational, tight, mono accents for data
|
|
110
|
+
- **Apple editorial** — type-led, space as luxury, few elements
|
|
111
|
+
- **Fumadocs** — doc-calm, clear nav, content first
|
|
112
|
+
|
|
113
|
+
## 7. Delivery format
|
|
114
|
+
|
|
115
|
+
1. **Brief** (intake answers locked)
|
|
116
|
+
2. **Working code** (React/Next + Tailwind + shadcn + motion + lucide as needed)
|
|
117
|
+
3. **Subtraction notes** — what you refused and why
|
|
118
|
+
|
|
119
|
+
### Exit checklist
|
|
120
|
+
|
|
121
|
+
- [ ] Palette + platform asked or inherited
|
|
122
|
+
- [ ] One protagonist, one anchor
|
|
123
|
+
- [ ] shadcn only for atoms
|
|
124
|
+
- [ ] Short copy, lean cards
|
|
125
|
+
- [ ] All five states considered
|
|
126
|
+
- [ ] Motion density matches platform
|
|
127
|
+
- [ ] Icons sparse and meaningful
|
|
128
|
+
- [ ] Subtracted once more
|
|
129
|
+
|
|
130
|
+
If it smells like generic AI SaaS → **redo**.
|
|
131
|
+
|
|
132
|
+
## Skill routing
|
|
133
|
+
|
|
134
|
+
| Need | Skill |
|
|
135
|
+
|------|-------|
|
|
136
|
+
| Primitives | `/dme-shadcn` |
|
|
137
|
+
| Motion bible | `/dme-motion` |
|
|
138
|
+
| Icons | `/dme-icons` |
|
|
139
|
+
| Ops UI | `/dme-dashboard` |
|
|
140
|
+
| Marketing | `/dme-landing` |
|
|
141
|
+
| Desktop shell | `/dme-app-shell` |
|
|
142
|
+
| Human UX / microcopy | `/dme-ux` |
|
|
143
|
+
| Onboarding craft | `/dme-welcome` |
|
|
144
|
+
| Research | `/dme-research` |
|
|
145
|
+
| Scorecard | `/dme-critique` |
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: dme-icons
|
|
3
|
+
description: >
|
|
4
|
+
DME 9.69 intelligent icon doctrine. Lucide/Phosphor/Radix with discipline —
|
|
5
|
+
recognition, nav, status — never decorative spam. Triggers: /dme-icons,
|
|
6
|
+
lucide, icon system, sidebar icons, toolbar icons, icon density.
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# DME Icons 9.69 — Intelligent, not spam
|
|
10
|
+
|
|
11
|
+
Icons are **affordance and status**, not confetti.
|
|
12
|
+
|
|
13
|
+
## Law
|
|
14
|
+
|
|
15
|
+
If removing the icon loses **no** recognition and **no** faster scan → **remove it**.
|
|
16
|
+
|
|
17
|
+
## Stack
|
|
18
|
+
|
|
19
|
+
| Default | Also OK (pick one set per product) |
|
|
20
|
+
|---|---|
|
|
21
|
+
| **lucide-react** | Phosphor, Radix Icons |
|
|
22
|
+
|
|
23
|
+
Never mix 3 icon libraries on one surface. Never emoji as product chrome.
|
|
24
|
+
|
|
25
|
+
## Size & stroke
|
|
26
|
+
|
|
27
|
+
| Context | Size | Stroke |
|
|
28
|
+
|---|---|---|
|
|
29
|
+
| Dense table / meta | 14–16 | 1.5–2 |
|
|
30
|
+
| Nav / toolbar | 18–20 | 1.5–2 |
|
|
31
|
+
| Empty / welcome glyph | 24–32 | 1.5 |
|
|
32
|
+
| Marketing feature spam | **don’t** | — |
|
|
33
|
+
|
|
34
|
+
Align to text cap-height. Optical center in hit targets ≥44px mobile.
|
|
35
|
+
|
|
36
|
+
## Strategies (pick one per surface)
|
|
37
|
+
|
|
38
|
+
| Strategy | When | Rules |
|
|
39
|
+
|---|---|---|
|
|
40
|
+
| **none** | editorial landing, manifesto | type carries hierarchy |
|
|
41
|
+
| **sparse-functional** | most product UI | icons only on actions / destructive / search / close |
|
|
42
|
+
| **system-rail** | app sidebar / Electron shell | icon rail + labels on expand; active = bg/weight not rainbow |
|
|
43
|
+
| **status-system** | dashboards | Badge + optional icon; color never sole channel |
|
|
44
|
+
| **onboarding** | welcome steps | **1–3** glyphs total for whole flow |
|
|
45
|
+
|
|
46
|
+
## Where icons earn space
|
|
47
|
+
|
|
48
|
+
- Navigation items (with labels, or tooltip if collapsed rail)
|
|
49
|
+
- Primary/secondary actions when verb is faster with symbol (Search, Settings, Close)
|
|
50
|
+
- Status: success / warning / error / offline (pair with text)
|
|
51
|
+
- Empty state: **one** quiet glyph max
|
|
52
|
+
- Input affordances: show/hide password, clear, calendar
|
|
53
|
+
|
|
54
|
+
## Where icons are crime
|
|
55
|
+
|
|
56
|
+
- Every feature card with a different colorful glyph + essay
|
|
57
|
+
- Icon beside every H2 “for polish”
|
|
58
|
+
- Random multicolor packs
|
|
59
|
+
- Icon-only mystery meat for non-universal actions
|
|
60
|
+
- Animated spinning icons for no reason
|
|
61
|
+
|
|
62
|
+
## Pairing rules
|
|
63
|
+
|
|
64
|
+
| Case | Rule |
|
|
65
|
+
|---|---|
|
|
66
|
+
| Nav | icon + label (collapsed: icon + tooltip) |
|
|
67
|
+
| Button | icon optional left of verb |
|
|
68
|
+
| Table row action | icon-only OK if universal + aria-label |
|
|
69
|
+
| Marketing | prefer zero or one mark, not six |
|
|
70
|
+
|
|
71
|
+
## Compose with shadcn
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import { Search, Plus, ChevronRight } from "lucide-react"
|
|
75
|
+
import { Button } from "@/components/ui/button"
|
|
76
|
+
// Button size icon + aria-label for icon-only
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Active nav: `bg-zinc-100 dark:bg-zinc-800` + weight — not recoloring the SVG to 5 brand hues.
|
|
80
|
+
|
|
81
|
+
## Deliver
|
|
82
|
+
|
|
83
|
+
1. Strategy name
|
|
84
|
+
2. Icon map (nav / actions / status)
|
|
85
|
+
3. Size tokens
|
|
86
|
+
4. Implement with lucide + shadcn
|
|
87
|
+
5. Run spam test: strip half — if clearer, keep stripped
|
|
88
|
+
|
|
89
|
+
Full doctrine: `assets/references/icon-doctrine.md`
|
|
@@ -1,48 +1,123 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: dme-landing
|
|
3
3
|
description: >
|
|
4
|
-
|
|
5
|
-
Triggers: /dme-landing,
|
|
4
|
+
DME 9.69 web landings: one message, proof, steps, CTA, restrained motion,
|
|
5
|
+
short copy, conversion-focused peace aesthetic. Triggers: /dme-landing,
|
|
6
|
+
landing page, marketing page, homepage, hero, pricing page, waitlist, CTA.
|
|
6
7
|
---
|
|
7
8
|
|
|
8
|
-
# DME Landing —
|
|
9
|
+
# DME Landing 9.69 — Convert Quietly
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
**3s** what/who · **10s** trust · **30s** CTA.
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
Platform = **web** → motion **calm**. Peace gray/white default unless brand palette given.
|
|
13
14
|
|
|
14
|
-
##
|
|
15
|
+
## Intake
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
- One sentence offer
|
|
18
|
+
- Audience (non-dev default)
|
|
19
|
+
- Primary CTA verb
|
|
20
|
+
- Proof available? (logo, number, quote)
|
|
21
|
+
- Palette / dark-light
|
|
22
|
+
|
|
23
|
+
## Module order (compose, don’t invent sections)
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
nav
|
|
27
|
+
hero ← one message
|
|
28
|
+
proof ← logos | number | short quote
|
|
29
|
+
≤3 steps ← how it works
|
|
30
|
+
product demo ← screenshot / UI frame (real, not abstract blobs)
|
|
31
|
+
thin benefits ← list or 3 lean items max — not essay cards
|
|
32
|
+
quote | number
|
|
33
|
+
pricing ← if needed
|
|
34
|
+
FAQ ← Accordion
|
|
35
|
+
final CTA
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Skip modules you can’t fill honestly. Empty proof > fake proof.
|
|
17
39
|
|
|
18
40
|
## Hero
|
|
19
41
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
42
|
+
```
|
|
43
|
+
eyebrow (optional, 2–4 words)
|
|
44
|
+
H1 — specific outcome, not slogan soup
|
|
45
|
+
lead — ONE sentence
|
|
46
|
+
[ Primary CTA ] [ Secondary ghost ]
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
- Lead max **one sentence**
|
|
50
|
+
- No hero icon grid
|
|
51
|
+
- No autoplay noise
|
|
52
|
+
- Product visual > abstract gradient mesh
|
|
53
|
+
|
|
54
|
+
## Copy caps
|
|
55
|
+
|
|
56
|
+
| Element | Max |
|
|
57
|
+
|---------|-----|
|
|
58
|
+
| Hero lead | 1 sentence |
|
|
59
|
+
| Step body | 1–2 lines |
|
|
60
|
+
| Benefit | 1–2 lines |
|
|
61
|
+
| FAQ answer | 2–4 lines |
|
|
62
|
+
| Button | real verb (`Começar`, `Ver preços`) |
|
|
63
|
+
|
|
64
|
+
### Banned
|
|
65
|
+
|
|
66
|
+
seamless · next-gen · powerful · revolutionary · unlock · supercharge · elevate · cutting-edge · robust · your journey · empower · all-in-one · delve · in today’s world
|
|
24
67
|
|
|
25
|
-
##
|
|
68
|
+
## Cards policy
|
|
26
69
|
|
|
27
|
-
|
|
70
|
+
- Pricing tiers: cards OK
|
|
71
|
+
- Steps: numbered list or lean cards ≤3
|
|
72
|
+
- **Banned:** 6 icon feature cards with paragraphs
|
|
28
73
|
|
|
29
|
-
|
|
74
|
+
If only text → `divide-y` or simple ol/ul.
|
|
30
75
|
|
|
31
|
-
|
|
76
|
+
## Motion (restrained)
|
|
32
77
|
|
|
33
|
-
|
|
78
|
+
- Hero: single fade-up 200–250ms ease peace-out
|
|
79
|
+
- Steps: short stagger 0.05–0.07, once in view
|
|
80
|
+
- No scroll-jacking, no parallax circus, no typing loops
|
|
81
|
+
- `prefers-reduced-motion` → opacity only
|
|
34
82
|
|
|
35
|
-
|
|
36
|
-
If cards: title ≤5 words + **one line body**. No 6 icon-card spam.
|
|
83
|
+
See `/dme-motion`.
|
|
37
84
|
|
|
38
|
-
##
|
|
85
|
+
## Visual
|
|
39
86
|
|
|
40
|
-
|
|
87
|
+
- Anchor pick one: **apple-editorial** (marketing) or **vercel-dens** (tool) or **fumadocs** (docs product)
|
|
88
|
+
- 90% neutrals / 10% accent
|
|
89
|
+
- Light CTA accent `#0065F2` or brand; dark accent `#FFDE21` if dark hero
|
|
90
|
+
- Radius ≤ 8px; shadows only on elevated UI chrome / mock
|
|
41
91
|
|
|
42
|
-
## shadcn
|
|
92
|
+
## shadcn map
|
|
43
93
|
|
|
44
|
-
|
|
94
|
+
`Button` `Accordion` (FAQ) `Badge` `Separator` · optional `NavigationMenu` · pricing with simple cards · `Sonner` if form
|
|
95
|
+
|
|
96
|
+
Forms: Label + Input + clear error. Waitlist = email + one button.
|
|
97
|
+
|
|
98
|
+
## Trust
|
|
99
|
+
|
|
100
|
+
- Real numbers over adjectives
|
|
101
|
+
- Logos muted single-color row
|
|
102
|
+
- Quote: name + role, short
|
|
103
|
+
|
|
104
|
+
## Final CTA
|
|
105
|
+
|
|
106
|
+
Repeat offer in one line + same primary verb. No new metaphor.
|
|
45
107
|
|
|
46
108
|
## Deliver
|
|
47
109
|
|
|
48
|
-
Brief
|
|
110
|
+
1. Brief: message · audience · CTA · anchor · card policy
|
|
111
|
+
2. Code: full page sections with states for form success/error
|
|
112
|
+
3. Subtract: kill feature spam, mesh, long paragraphs
|
|
113
|
+
|
|
114
|
+
### Checklist
|
|
115
|
+
|
|
116
|
+
- [ ] One hero message
|
|
117
|
+
- [ ] Proof present or section removed
|
|
118
|
+
- [ ] ≤3 steps
|
|
119
|
+
- [ ] Motion calm
|
|
120
|
+
- [ ] Copy under caps
|
|
121
|
+
- [ ] CTA obvious at 30s
|
|
122
|
+
|
|
123
|
+
**Clarity converts. Carnival confuses.**
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: dme-motion
|
|
3
|
+
description: >
|
|
4
|
+
DME 9.69 Absolute motion craft. Framer Motion, cubic-bezier graphs, springs,
|
|
5
|
+
platform density (web calm / Electron-Tauri rich), reduced-motion law.
|
|
6
|
+
Triggers: /dme-motion, framer-motion, keyframes, cubic-out, easing, spring,
|
|
7
|
+
animate UI, page transition, stagger, prefers-reduced-motion.
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# DME Motion 9.69 — Absolute
|
|
11
|
+
|
|
12
|
+
Motion is **craft**, not confetti. Peace aesthetic: soft landings, clear intent, no carnival.
|
|
13
|
+
|
|
14
|
+
## 0. Resolve density first
|
|
15
|
+
|
|
16
|
+
| Platform | Density | Allowed |
|
|
17
|
+
|---|---|---|
|
|
18
|
+
| **Web** | calmer | functional UI + **one** hero beat; light stagger 40–60ms |
|
|
19
|
+
| **Mobile web** | minimal | opacity / short crossfade; no heavy shared-element |
|
|
20
|
+
| **Electron / Tauri** | richer | welcome choreography, layoutId, spring chrome, route transitions |
|
|
21
|
+
| **prefers-reduced-motion** | hard cut | ≤80ms opacity or instant; kill travel/parallax/spring travel |
|
|
22
|
+
|
|
23
|
+
## 1. Easing graphs (abuse these — vary by intent)
|
|
24
|
+
|
|
25
|
+
| Token | cubic-bezier | Use |
|
|
26
|
+
|---|---|---|
|
|
27
|
+
| **easeOut** | `0.16, 1, 0.3, 1` | entrances (default) |
|
|
28
|
+
| **easeIn** | `0.55, 0, 1, 0.45` | exits |
|
|
29
|
+
| **easeInOut** | `0.65, 0, 0.35, 1` | reposition on-screen |
|
|
30
|
+
| **cubicOut** | `0.33, 1, 0.68, 1` | sheets, drawers, soft panels |
|
|
31
|
+
| **expoOut** | `0.16, 1, 0.3, 1` | premium hero / desktop reveal |
|
|
32
|
+
| **emphasized** | `0.2, 0, 0, 1` | settle after drag / material |
|
|
33
|
+
|
|
34
|
+
```css
|
|
35
|
+
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
36
|
+
--ease-cubic-out: cubic-bezier(0.33, 1, 0.68, 1);
|
|
37
|
+
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## 2. Springs (Framer / motion)
|
|
41
|
+
|
|
42
|
+
| Token | stiffness | damping | mass | Use |
|
|
43
|
+
|---|---|---|---|---|
|
|
44
|
+
| soft | 280 | 24 | 0.8 | press, icon toggle |
|
|
45
|
+
| snappy | 400 | 30 | 0.6 | command palette, tab indicator |
|
|
46
|
+
| gentle | 120 | 20 | 1.0 | welcome, large panels (desktop) |
|
|
47
|
+
| stiff | 500 | 40 | 0.5 | dense tools |
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
const easeOut = [0.16, 1, 0.3, 1] as const
|
|
51
|
+
const springSnappy = { type: "spring", stiffness: 400, damping: 30, mass: 0.6 }
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## 3. Duration bands
|
|
55
|
+
|
|
56
|
+
| Band | ms |
|
|
57
|
+
|---|---|
|
|
58
|
+
| feedback | 80–120 |
|
|
59
|
+
| functional | 150–250 |
|
|
60
|
+
| panel | 220–380 |
|
|
61
|
+
| page / welcome | 300–600 |
|
|
62
|
+
| hard cap | ≤800 continuous |
|
|
63
|
+
|
|
64
|
+
## 4. First-class tools
|
|
65
|
+
|
|
66
|
+
1. **framer-motion** / **motion/react** — layout, AnimatePresence, layoutId, springs
|
|
67
|
+
2. **CSS transition / @keyframes** — micro states when lighter
|
|
68
|
+
3. **WAAPI** — one-offs without React weight
|
|
69
|
+
|
|
70
|
+
## 5. Pattern recipes
|
|
71
|
+
|
|
72
|
+
**List enter (web/app)**
|
|
73
|
+
`staggerChildren: 0.05` · child `y: 8 → 0` + opacity · easeOut 200–280ms
|
|
74
|
+
|
|
75
|
+
**Sheet**
|
|
76
|
+
`y` or `x` + opacity · cubicOut 280–360ms · backdrop fade easeOut
|
|
77
|
+
|
|
78
|
+
**Dialog**
|
|
79
|
+
scale `0.98 → 1` + opacity · **no bounce**
|
|
80
|
+
|
|
81
|
+
**Tab indicator**
|
|
82
|
+
`layoutId` + spring snappy
|
|
83
|
+
|
|
84
|
+
**Button press**
|
|
85
|
+
scale `0.98` spring soft
|
|
86
|
+
|
|
87
|
+
**Welcome (desktop)**
|
|
88
|
+
2–4 beats max: mark → title → body → CTA · then **stillness**
|
|
89
|
+
|
|
90
|
+
**Route (desktop)**
|
|
91
|
+
opacity + slight y; optional shared layout title
|
|
92
|
+
|
|
93
|
+
## 6. Gray / white motion taste
|
|
94
|
+
|
|
95
|
+
- Prefer opacity + small translation (4–12px) over loud scale
|
|
96
|
+
- Shadows only on overlays; animate opacity of overlay not neon glow
|
|
97
|
+
- Gradients: soft zinc washes, slow optional desktop ambient — never mesh carnival
|
|
98
|
+
|
|
99
|
+
## 7. Banned
|
|
100
|
+
|
|
101
|
+
particles · blob morph loops · mesh storms · infinite typing hero · bounce on ops dashboards · same fade on every node · parallax fighting scroll
|
|
102
|
+
|
|
103
|
+
## 8. Deliver
|
|
104
|
+
|
|
105
|
+
1. Density label (web-calm | app-rich | reduced)
|
|
106
|
+
2. Easing map used
|
|
107
|
+
3. Framer/CSS snippets
|
|
108
|
+
4. Implement
|
|
109
|
+
5. Subtract excess motion
|
|
110
|
+
|
|
111
|
+
Full bible: package `assets/references/motion-bible.md` when present.
|