@pugi/cli 1.0.0-alpha.25 → 1.0.0-alpha.250

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.
Files changed (206) hide show
  1. package/README.md +1 -1
  2. package/THIRD_PARTY_NOTICES.md +39 -0
  3. package/bin/pugi +19 -5
  4. package/models.json +1 -0
  5. package/package.json +22 -6
  6. package/release.json +8 -0
  7. package/skills/a11y/SKILL.md +27 -0
  8. package/skills/ab-test-analysis/SKILL.md +15 -0
  9. package/skills/ai-sdk/SKILL.md +27 -0
  10. package/skills/api-integration/SKILL.md +27 -0
  11. package/skills/architecture-review/SKILL.md +19 -0
  12. package/skills/brand-voice/SKILL.md +27 -0
  13. package/skills/ci-cd-pipeline/SKILL.md +15 -0
  14. package/skills/code-review/SKILL.md +27 -0
  15. package/skills/competitor-analysis/SKILL.md +27 -0
  16. package/skills/content-design/SKILL.md +35 -0
  17. package/skills/css-tailwind/SKILL.md +39 -0
  18. package/skills/css-tailwind/quirks.md +86 -0
  19. package/skills/db-vector/SKILL.md +27 -0
  20. package/skills/design-radix/SKILL.md +35 -0
  21. package/skills/design-system/SKILL.md +35 -0
  22. package/skills/detecting-data-anomalies/SKILL.md +15 -0
  23. package/skills/docker-deploy/SKILL.md +15 -0
  24. package/skills/edge-case-finder/SKILL.md +27 -0
  25. package/skills/fonts/SKILL.md +34 -0
  26. package/skills/framework-grammy/SKILL.md +27 -0
  27. package/skills/framework-mastra/SKILL.md +27 -0
  28. package/skills/framework-nestjs/SKILL.md +27 -0
  29. package/skills/framework-prisma/SKILL.md +27 -0
  30. package/skills/funnel-optimization/SKILL.md +19 -0
  31. package/skills/ha-prototype-web/LICENSE-APACHE-2.0 +201 -0
  32. package/skills/ha-prototype-web/NOTICE.md +126 -0
  33. package/skills/ha-prototype-web/SKILL.md +25 -0
  34. package/skills/icons/SKILL.md +34 -0
  35. package/skills/landing-templates/SKILL.md +35 -0
  36. package/skills/market-research/SKILL.md +27 -0
  37. package/skills/metrics-dashboard/SKILL.md +19 -0
  38. package/skills/monitoring-setup/SKILL.md +15 -0
  39. package/skills/motion/SKILL.md +27 -0
  40. package/skills/nestjs-api/SKILL.md +38 -0
  41. package/skills/nestjs-api/quirks.md +36 -0
  42. package/skills/nextjs-page/SKILL.md +27 -0
  43. package/skills/od-blog-post/LICENSE-APACHE-2.0 +201 -0
  44. package/skills/od-blog-post/NOTICE.md +126 -0
  45. package/skills/od-blog-post/SKILL.md +81 -0
  46. package/skills/od-contact-widget/LICENSE-APACHE-2.0 +201 -0
  47. package/skills/od-contact-widget/NOTICE.md +126 -0
  48. package/skills/od-contact-widget/SKILL.md +132 -0
  49. package/skills/od-craft/LICENSE-APACHE-2.0 +201 -0
  50. package/skills/od-craft/NOTICE.md +126 -0
  51. package/skills/od-craft/SKILL.md +58 -0
  52. package/skills/od-craft/references/README.md +108 -0
  53. package/skills/od-craft/references/accessibility-baseline.md +203 -0
  54. package/skills/od-craft/references/animation-discipline.md +156 -0
  55. package/skills/od-craft/references/anti-ai-slop.md +86 -0
  56. package/skills/od-craft/references/color.md +90 -0
  57. package/skills/od-craft/references/form-validation.md +223 -0
  58. package/skills/od-craft/references/laws-of-ux.md +298 -0
  59. package/skills/od-craft/references/rtl-and-bidi.md +188 -0
  60. package/skills/od-craft/references/state-coverage.md +136 -0
  61. package/skills/od-craft/references/typography-hierarchy-editorial.md +184 -0
  62. package/skills/od-craft/references/typography-hierarchy.md +167 -0
  63. package/skills/od-craft/references/typography.md +124 -0
  64. package/skills/od-critique/LICENSE-APACHE-2.0 +201 -0
  65. package/skills/od-critique/NOTICE.md +126 -0
  66. package/skills/od-critique/SKILL.md +259 -0
  67. package/skills/od-dashboard/LICENSE-APACHE-2.0 +201 -0
  68. package/skills/od-dashboard/NOTICE.md +126 -0
  69. package/skills/od-dashboard/SKILL.md +77 -0
  70. package/skills/od-design-brief/LICENSE-APACHE-2.0 +201 -0
  71. package/skills/od-design-brief/NOTICE.md +126 -0
  72. package/skills/od-design-brief/SKILL.md +260 -0
  73. package/skills/od-docs-page/LICENSE-APACHE-2.0 +201 -0
  74. package/skills/od-docs-page/NOTICE.md +126 -0
  75. package/skills/od-docs-page/SKILL.md +81 -0
  76. package/skills/od-email-marketing/LICENSE-APACHE-2.0 +201 -0
  77. package/skills/od-email-marketing/NOTICE.md +126 -0
  78. package/skills/od-email-marketing/SKILL.md +85 -0
  79. package/skills/od-eng-runbook/LICENSE-APACHE-2.0 +201 -0
  80. package/skills/od-eng-runbook/NOTICE.md +126 -0
  81. package/skills/od-eng-runbook/SKILL.md +52 -0
  82. package/skills/od-faq-page/LICENSE-APACHE-2.0 +201 -0
  83. package/skills/od-faq-page/NOTICE.md +126 -0
  84. package/skills/od-faq-page/SKILL.md +113 -0
  85. package/skills/od-finance-report/LICENSE-APACHE-2.0 +201 -0
  86. package/skills/od-finance-report/NOTICE.md +126 -0
  87. package/skills/od-finance-report/SKILL.md +62 -0
  88. package/skills/od-frontend-design/LICENSE-APACHE-2.0 +201 -0
  89. package/skills/od-frontend-design/LICENSE.txt +177 -0
  90. package/skills/od-frontend-design/NOTICE.md +126 -0
  91. package/skills/od-frontend-design/SKILL.md +86 -0
  92. package/skills/od-hr-onboarding/LICENSE-APACHE-2.0 +201 -0
  93. package/skills/od-hr-onboarding/NOTICE.md +126 -0
  94. package/skills/od-hr-onboarding/SKILL.md +53 -0
  95. package/skills/od-invoice/LICENSE-APACHE-2.0 +201 -0
  96. package/skills/od-invoice/NOTICE.md +126 -0
  97. package/skills/od-invoice/SKILL.md +49 -0
  98. package/skills/od-kanban-board/LICENSE-APACHE-2.0 +201 -0
  99. package/skills/od-kanban-board/NOTICE.md +126 -0
  100. package/skills/od-kanban-board/SKILL.md +51 -0
  101. package/skills/od-login-flow/LICENSE-APACHE-2.0 +201 -0
  102. package/skills/od-login-flow/NOTICE.md +126 -0
  103. package/skills/od-login-flow/SKILL.md +49 -0
  104. package/skills/od-login-flow/references/checklist.md +19 -0
  105. package/skills/od-magazine-poster/LICENSE-APACHE-2.0 +201 -0
  106. package/skills/od-magazine-poster/NOTICE.md +126 -0
  107. package/skills/od-magazine-poster/SKILL.md +90 -0
  108. package/skills/od-meeting-notes/LICENSE-APACHE-2.0 +201 -0
  109. package/skills/od-meeting-notes/NOTICE.md +126 -0
  110. package/skills/od-meeting-notes/SKILL.md +48 -0
  111. package/skills/od-mobile-app/LICENSE-APACHE-2.0 +201 -0
  112. package/skills/od-mobile-app/NOTICE.md +126 -0
  113. package/skills/od-mobile-app/SKILL.md +103 -0
  114. package/skills/od-mobile-app/assets/template.html +442 -0
  115. package/skills/od-mobile-app/references/checklist.md +46 -0
  116. package/skills/od-mobile-app/references/layouts.md +312 -0
  117. package/skills/od-mobile-onboarding/LICENSE-APACHE-2.0 +201 -0
  118. package/skills/od-mobile-onboarding/NOTICE.md +126 -0
  119. package/skills/od-mobile-onboarding/SKILL.md +54 -0
  120. package/skills/od-pm-spec/LICENSE-APACHE-2.0 +201 -0
  121. package/skills/od-pm-spec/NOTICE.md +126 -0
  122. package/skills/od-pm-spec/SKILL.md +53 -0
  123. package/skills/od-pricing-page/LICENSE-APACHE-2.0 +201 -0
  124. package/skills/od-pricing-page/NOTICE.md +126 -0
  125. package/skills/od-pricing-page/SKILL.md +80 -0
  126. package/skills/od-redesign-skill/LICENSE +21 -0
  127. package/skills/od-redesign-skill/LICENSE-APACHE-2.0 +201 -0
  128. package/skills/od-redesign-skill/NOTICE.md +126 -0
  129. package/skills/od-redesign-skill/SKILL.md +205 -0
  130. package/skills/od-reference-design-contract/LICENSE-APACHE-2.0 +201 -0
  131. package/skills/od-reference-design-contract/NOTICE.md +126 -0
  132. package/skills/od-reference-design-contract/SKILL.md +131 -0
  133. package/skills/od-reference-design-contract/references/checklist.md +26 -0
  134. package/skills/od-saas-landing/LICENSE-APACHE-2.0 +201 -0
  135. package/skills/od-saas-landing/NOTICE.md +126 -0
  136. package/skills/od-saas-landing/SKILL.md +125 -0
  137. package/skills/od-social-carousel/LICENSE-APACHE-2.0 +201 -0
  138. package/skills/od-social-carousel/NOTICE.md +126 -0
  139. package/skills/od-social-carousel/SKILL.md +92 -0
  140. package/skills/od-team-okrs/LICENSE-APACHE-2.0 +201 -0
  141. package/skills/od-team-okrs/NOTICE.md +126 -0
  142. package/skills/od-team-okrs/SKILL.md +48 -0
  143. package/skills/od-waitlist-page/LICENSE-APACHE-2.0 +201 -0
  144. package/skills/od-waitlist-page/NOTICE.md +126 -0
  145. package/skills/od-waitlist-page/SKILL.md +229 -0
  146. package/skills/od-waitlist-page/assets/template.html +457 -0
  147. package/skills/od-waitlist-page/references/checklist.md +42 -0
  148. package/skills/od-web-design-guidelines/LICENSE +21 -0
  149. package/skills/od-web-design-guidelines/LICENSE-APACHE-2.0 +201 -0
  150. package/skills/od-web-design-guidelines/NOTICE.md +126 -0
  151. package/skills/od-web-design-guidelines/SKILL.md +66 -0
  152. package/skills/od-web-design-guidelines/references/guidelines.md +133 -0
  153. package/skills/od-web-prototype/LICENSE-APACHE-2.0 +201 -0
  154. package/skills/od-web-prototype/NOTICE.md +126 -0
  155. package/skills/od-web-prototype/SKILL.md +102 -0
  156. package/skills/od-web-prototype/assets/template.html +348 -0
  157. package/skills/od-web-prototype/references/checklist.md +47 -0
  158. package/skills/od-web-prototype/references/layouts.md +247 -0
  159. package/skills/od-web-prototype-taste-brutalist/LICENSE-APACHE-2.0 +201 -0
  160. package/skills/od-web-prototype-taste-brutalist/LICENSE-MIT-Leonxlnx +21 -0
  161. package/skills/od-web-prototype-taste-brutalist/NOTICE.md +126 -0
  162. package/skills/od-web-prototype-taste-brutalist/SKILL.md +64 -0
  163. package/skills/od-web-prototype-taste-editorial/LICENSE-APACHE-2.0 +201 -0
  164. package/skills/od-web-prototype-taste-editorial/LICENSE-MIT-Leonxlnx +21 -0
  165. package/skills/od-web-prototype-taste-editorial/NOTICE.md +126 -0
  166. package/skills/od-web-prototype-taste-editorial/SKILL.md +61 -0
  167. package/skills/od-web-prototype-taste-soft/LICENSE-APACHE-2.0 +201 -0
  168. package/skills/od-web-prototype-taste-soft/LICENSE-MIT-Leonxlnx +21 -0
  169. package/skills/od-web-prototype-taste-soft/NOTICE.md +126 -0
  170. package/skills/od-web-prototype-taste-soft/SKILL.md +64 -0
  171. package/skills/od-webgl-experience/LICENSE-APACHE-2.0 +201 -0
  172. package/skills/od-webgl-experience/NOTICE.md +126 -0
  173. package/skills/od-webgl-experience/SKILL.md +81 -0
  174. package/skills/od-wireframe-annotated/LICENSE-APACHE-2.0 +201 -0
  175. package/skills/od-wireframe-annotated/NOTICE.md +126 -0
  176. package/skills/od-wireframe-annotated/SKILL.md +90 -0
  177. package/skills/od-wireframe-greybox/LICENSE-APACHE-2.0 +201 -0
  178. package/skills/od-wireframe-greybox/NOTICE.md +126 -0
  179. package/skills/od-wireframe-greybox/SKILL.md +90 -0
  180. package/skills/od-wireframe-mobile-flow/LICENSE-APACHE-2.0 +201 -0
  181. package/skills/od-wireframe-mobile-flow/NOTICE.md +126 -0
  182. package/skills/od-wireframe-mobile-flow/SKILL.md +96 -0
  183. package/skills/od-wireframe-sketch/LICENSE-APACHE-2.0 +201 -0
  184. package/skills/od-wireframe-sketch/NOTICE.md +126 -0
  185. package/skills/od-wireframe-sketch/SKILL.md +98 -0
  186. package/skills/orchestrating-multi-agent-systems/SKILL.md +19 -0
  187. package/skills/preprocessing-data/SKILL.md +15 -0
  188. package/skills/project-memory-keeper/SKILL.md +19 -0
  189. package/skills/public-apis/SKILL.md +27 -0
  190. package/skills/pugi-patterns/SKILL.md +19 -0
  191. package/skills/react-component/SKILL.md +27 -0
  192. package/skills/sprint-planning/SKILL.md +19 -0
  193. package/skills/stack-selection/SKILL.md +15 -0
  194. package/skills/standup-summary/SKILL.md +15 -0
  195. package/skills/task-decomposition/SKILL.md +19 -0
  196. package/skills/team-routing/SKILL.md +15 -0
  197. package/skills/tech-survey/SKILL.md +15 -0
  198. package/skills/test-plan/SKILL.md +15 -0
  199. package/skills/typescript-refactor/SKILL.md +15 -0
  200. package/skills/ui-components/SKILL.md +35 -0
  201. package/skills/ux-patterns/SKILL.md +35 -0
  202. package/skills/web-platform/SKILL.md +27 -0
  203. package/skills/web-scrape/SKILL.md +27 -0
  204. package/skills/web-search/SKILL.md +15 -0
  205. package/skills/webapp-testing/SKILL.md +37 -0
  206. package/skills/webapp-testing/quirks.md +26 -0
package/skills/od-mobile-app/assets/template.html ADDED
@@ -0,0 +1,442 @@
1
+ <!doctype html>
2
+ <!--
3
+ OD mobile-app seed.
4
+
5
+ A pixel-accurate iPhone 15 Pro frame (390 × 844) with Dynamic Island,
6
+ status-bar SVG icons, and home indicator — drawn entirely in HTML/SVG, no
7
+ external image. The screen content lives inside `<main class="screen">`;
8
+ paste in one of the layouts from `references/layouts.md`.
9
+
10
+ Tokens at the top of `<style>` mirror the web-prototype seed so a single
11
+ DESIGN.md flows into both. Mobile spacing is tighter (~25%) and type sizes
12
+ drop one step from desktop — all pre-applied here.
13
+ -->
14
+ <html lang="en">
15
+ <head>
16
+ <meta charset="utf-8" />
17
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
18
+ <title>[REPLACE] Screen name · brand</title>
19
+ <style>
20
+ :root {
21
+ --bg: #fafaf7;
22
+ --surface: #ffffff;
23
+ --fg: #1a1916;
24
+ --muted: #6b6964;
25
+ --border: #e8e5df;
26
+ --accent: #c96442;
27
+
28
+ --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
29
+ --fg-soft: color-mix(in oklch, var(--fg) 6%, transparent);
30
+
31
+ --font-display: 'Iowan Old Style', 'Charter', Georgia, serif;
32
+ --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
33
+ --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
34
+
35
+ /* mobile type — one step down from web-prototype defaults */
36
+ --fs-h1: 26px;
37
+ --fs-h2: 20px;
38
+ --fs-h3: 16px;
39
+ --fs-body: 15px;
40
+ --fs-meta: 12px;
41
+
42
+ --radius-card: 18px;
43
+ --radius-pill: 999px;
44
+ }
45
+
46
+ *, *::before, *::after { box-sizing: border-box; }
47
+ html, body { margin: 0; padding: 0; height: 100%; }
48
+ body {
49
+ background:
50
+ radial-gradient(60% 80% at 50% 0%, color-mix(in oklch, var(--accent) 6%, var(--bg)) 0%, var(--bg) 60%);
51
+ color: var(--fg);
52
+ font-family: var(--font-body);
53
+ font-size: var(--fs-body);
54
+ line-height: 1.4;
55
+ -webkit-font-smoothing: antialiased;
56
+ display: grid;
57
+ place-items: center;
58
+ padding: 32px;
59
+ }
60
+
61
+ /* ─── caption above the device ──────────────────────────────────── */
62
+ .stage {
63
+ display: flex;
64
+ flex-direction: column;
65
+ align-items: center;
66
+ gap: 24px;
67
+ }
68
+ .caption {
69
+ font-family: var(--font-mono);
70
+ font-size: 12px;
71
+ letter-spacing: 0.08em;
72
+ text-transform: uppercase;
73
+ color: var(--muted);
74
+ }
75
+ .caption strong { color: var(--fg); font-weight: 500; }
76
+
77
+ /* ─── device frame ──────────────────────────────────────────────── */
78
+ .device {
79
+ position: relative;
80
+ width: 390px;
81
+ height: 844px;
82
+ border-radius: 56px;
83
+ padding: 12px;
84
+ background:
85
+ linear-gradient(160deg, #2a2a2c 0%, #1a1a1c 50%, #0e0e10 100%);
86
+ box-shadow:
87
+ 0 0 0 1px rgba(255,255,255,0.04) inset,
88
+ 0 0 0 2px #000 inset,
89
+ 0 28px 60px -12px rgba(0,0,0,0.45),
90
+ 0 8px 20px -8px rgba(0,0,0,0.35);
91
+ isolation: isolate;
92
+ }
93
+ /* metallic side rails */
94
+ .device::before, .device::after {
95
+ content: '';
96
+ position: absolute;
97
+ width: 3px;
98
+ background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.06) 8%, transparent 16%, transparent 84%, rgba(255,255,255,0.04) 92%, transparent 100%);
99
+ top: 100px;
100
+ bottom: 100px;
101
+ pointer-events: none;
102
+ }
103
+ .device::before { left: -1px; }
104
+ .device::after { right: -1px; }
105
+
106
+ /* Dynamic Island */
107
+ .island {
108
+ position: absolute;
109
+ top: 22px;
110
+ left: 50%;
111
+ transform: translateX(-50%);
112
+ width: 124px;
113
+ height: 36px;
114
+ background: #000;
115
+ border-radius: 999px;
116
+ z-index: 5;
117
+ }
118
+
119
+ /* hardware buttons (subtle) */
120
+ .btn-rail {
121
+ position: absolute;
122
+ width: 4px;
123
+ background: #0a0a0c;
124
+ border-radius: 2px;
125
+ }
126
+ .btn-rail.left-1 { left: -3px; top: 174px; height: 32px; } /* silent */
127
+ .btn-rail.left-2 { left: -3px; top: 220px; height: 60px; } /* vol+ */
128
+ .btn-rail.left-3 { left: -3px; top: 290px; height: 60px; } /* vol- */
129
+ .btn-rail.right-1 { right: -3px; top: 250px; height: 100px; } /* power */
130
+
131
+ /* ─── screen surface ────────────────────────────────────────────── */
132
+ .screen {
133
+ position: relative;
134
+ width: 100%; height: 100%;
135
+ background: var(--bg);
136
+ border-radius: 44px;
137
+ overflow: hidden;
138
+ display: flex;
139
+ flex-direction: column;
140
+ }
141
+
142
+ /* Status bar — 47px to clear the island. SF-style time, signal/wifi/battery SVG. */
143
+ .statusbar {
144
+ flex: 0 0 47px;
145
+ padding: 18px 26px 0;
146
+ display: flex;
147
+ align-items: flex-start;
148
+ justify-content: space-between;
149
+ font-family: var(--font-body);
150
+ font-size: 15px;
151
+ font-weight: 600;
152
+ color: var(--fg);
153
+ letter-spacing: -0.01em;
154
+ }
155
+ .statusbar .right { display: inline-flex; align-items: center; gap: 6px; }
156
+ .statusbar svg { width: 17px; height: 11px; fill: var(--fg); }
157
+ .statusbar .battery { width: 25px; }
158
+
159
+ /* Content region — owns its scroll, frame stays still */
160
+ .content {
161
+ flex: 1 1 auto;
162
+ overflow-y: auto;
163
+ overflow-x: hidden;
164
+ -webkit-overflow-scrolling: touch;
165
+ padding: 8px 0 28px;
166
+ }
167
+ .content::-webkit-scrollbar { display: none; }
168
+
169
+ /* Home indicator (must always be the last visible thing) */
170
+ .home-indicator {
171
+ flex: 0 0 28px;
172
+ position: relative;
173
+ }
174
+ .home-indicator::after {
175
+ content: '';
176
+ position: absolute;
177
+ left: 50%; bottom: 8px;
178
+ transform: translateX(-50%);
179
+ width: 134px; height: 5px;
180
+ background: var(--fg);
181
+ border-radius: 999px;
182
+ opacity: 0.85;
183
+ }
184
+
185
+ /* ─── screen primitives — used by layouts.md ────────────────────── */
186
+ .pad { padding-inline: 20px; }
187
+ .stack { display: flex; flex-direction: column; gap: 16px; }
188
+ .row { display: flex; align-items: center; gap: 12px; }
189
+ .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
190
+ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
191
+ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
192
+
193
+ .header {
194
+ padding: 8px 20px 12px;
195
+ display: flex; align-items: center; justify-content: space-between; gap: 12px;
196
+ }
197
+ .header h1 {
198
+ font-family: var(--font-display);
199
+ font-size: var(--fs-h1);
200
+ letter-spacing: -0.02em;
201
+ line-height: 1.1;
202
+ margin: 0;
203
+ }
204
+ .header .icon-btn {
205
+ width: 36px; height: 36px;
206
+ border-radius: 999px;
207
+ background: var(--surface);
208
+ border: 1px solid var(--border);
209
+ display: grid; place-items: center;
210
+ color: var(--fg);
211
+ }
212
+ .header .icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
213
+
214
+ .greeting {
215
+ font-family: var(--font-mono);
216
+ font-size: 11px;
217
+ letter-spacing: 0.08em;
218
+ text-transform: uppercase;
219
+ color: var(--muted);
220
+ margin: 0 0 4px;
221
+ }
222
+
223
+ .h2 { font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: -0.015em; line-height: 1.2; margin: 0; }
224
+ .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; margin: 0; }
225
+ .meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
226
+ .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
227
+
228
+ /* card */
229
+ .card {
230
+ background: var(--surface);
231
+ border: 1px solid var(--border);
232
+ border-radius: var(--radius-card);
233
+ padding: 16px;
234
+ }
235
+ .card.accent {
236
+ background: var(--accent);
237
+ color: #fff;
238
+ border-color: transparent;
239
+ }
240
+ .card.accent .meta { color: rgba(255,255,255,0.72); }
241
+ .card.flat { background: transparent; border: 0; padding: 12px 0; border-top: 1px solid var(--border); border-radius: 0; }
242
+ .card.flat:first-child { border-top: 0; padding-top: 0; }
243
+
244
+ /* list row */
245
+ .list-row {
246
+ display: grid;
247
+ grid-template-columns: 40px 1fr auto;
248
+ align-items: center;
249
+ gap: 12px;
250
+ padding: 12px 0;
251
+ border-top: 1px solid var(--border);
252
+ }
253
+ .list-row:first-child { border-top: 0; }
254
+ .list-row .avatar {
255
+ width: 40px; height: 40px;
256
+ border-radius: 50%;
257
+ background:
258
+ linear-gradient(135deg, var(--accent-soft), var(--fg-soft)),
259
+ var(--surface);
260
+ border: 1px solid var(--border);
261
+ }
262
+ .list-row .body .title { font-size: 15px; font-weight: 500; line-height: 1.25; }
263
+ .list-row .body .sub { color: var(--muted); font-size: 13px; line-height: 1.3; margin-top: 2px; }
264
+
265
+ /* tab bar */
266
+ .tabbar {
267
+ flex: 0 0 auto;
268
+ display: grid;
269
+ grid-template-columns: repeat(var(--tabs, 4), 1fr);
270
+ padding: 8px 8px 0;
271
+ border-top: 1px solid var(--border);
272
+ background: color-mix(in oklch, var(--surface) 92%, transparent);
273
+ backdrop-filter: blur(20px);
274
+ }
275
+ .tab {
276
+ display: flex; flex-direction: column; align-items: center; gap: 2px;
277
+ padding: 8px 0;
278
+ color: var(--muted);
279
+ font-size: 10px;
280
+ letter-spacing: 0.02em;
281
+ }
282
+ .tab.active { color: var(--accent); }
283
+ .tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
284
+ .tab.active svg { stroke-width: 2; }
285
+
286
+ /* primary button — full-width, 48px tap target */
287
+ .btn-primary {
288
+ display: flex; align-items: center; justify-content: center;
289
+ width: 100%;
290
+ min-height: 48px;
291
+ padding: 14px 20px;
292
+ background: var(--accent);
293
+ color: #fff;
294
+ border: 0;
295
+ border-radius: 14px;
296
+ font: inherit;
297
+ font-size: 15px;
298
+ font-weight: 600;
299
+ letter-spacing: -0.005em;
300
+ cursor: pointer;
301
+ }
302
+ .btn-secondary {
303
+ display: flex; align-items: center; justify-content: center;
304
+ width: 100%;
305
+ min-height: 48px;
306
+ padding: 14px 20px;
307
+ background: transparent;
308
+ color: var(--fg);
309
+ border: 1px solid var(--border);
310
+ border-radius: 14px;
311
+ font: inherit;
312
+ font-size: 15px;
313
+ font-weight: 500;
314
+ }
315
+
316
+ /* image placeholder */
317
+ .ph-img {
318
+ background:
319
+ linear-gradient(135deg, var(--accent-soft), var(--fg-soft)),
320
+ var(--surface);
321
+ border: 1px solid var(--border);
322
+ border-radius: 14px;
323
+ aspect-ratio: 4 / 3;
324
+ display: grid; place-items: center;
325
+ color: var(--muted);
326
+ font-family: var(--font-mono);
327
+ font-size: 11px;
328
+ letter-spacing: 0.04em;
329
+ }
330
+ .ph-img.square { aspect-ratio: 1 / 1; }
331
+ .ph-img.wide { aspect-ratio: 16 / 9; }
332
+
333
+ /* pill / tag */
334
+ .pill {
335
+ display: inline-flex; align-items: center; gap: 4px;
336
+ padding: 4px 10px;
337
+ background: var(--accent-soft);
338
+ color: var(--accent);
339
+ border-radius: 999px;
340
+ font-family: var(--font-mono);
341
+ font-size: 10px;
342
+ letter-spacing: 0.06em;
343
+ text-transform: uppercase;
344
+ }
345
+ .tag {
346
+ display: inline-flex;
347
+ padding: 3px 9px;
348
+ background: transparent;
349
+ color: var(--muted);
350
+ border: 1px solid var(--border);
351
+ border-radius: 999px;
352
+ font-size: 11px;
353
+ }
354
+
355
+ /* progress */
356
+ .progress { height: 6px; background: rgba(255,255,255,0.25); border-radius: 999px; overflow: hidden; }
357
+ .progress > span { display: block; height: 100%; background: #fff; }
358
+ </style>
359
+ </head>
360
+ <body>
361
+ <div class="stage">
362
+ <div class="caption"><strong>[REPLACE] App</strong> · [REPLACE] Screen name</div>
363
+
364
+ <div class="device" data-od-id="device">
365
+ <span class="btn-rail left-1" aria-hidden></span>
366
+ <span class="btn-rail left-2" aria-hidden></span>
367
+ <span class="btn-rail left-3" aria-hidden></span>
368
+ <span class="btn-rail right-1" aria-hidden></span>
369
+ <span class="island" aria-hidden></span>
370
+
371
+ <div class="screen">
372
+ <!-- ─── Status bar ─── -->
373
+ <div class="statusbar">
374
+ <span class="num">9:41</span>
375
+ <span class="right">
376
+ <!-- signal -->
377
+ <svg viewBox="0 0 17 11" aria-hidden>
378
+ <rect x="0" y="7" width="3" height="4" rx="0.6"/>
379
+ <rect x="4" y="5" width="3" height="6" rx="0.6"/>
380
+ <rect x="8" y="3" width="3" height="8" rx="0.6"/>
381
+ <rect x="12" y="0" width="3" height="11" rx="0.6"/>
382
+ </svg>
383
+ <!-- wifi -->
384
+ <svg viewBox="0 0 17 11" aria-hidden>
385
+ <path d="M8.5 1.5C5.5 1.5 2.7 2.6 0.5 4.6L2 6.1C3.8 4.5 6.1 3.6 8.5 3.6c2.4 0 4.7 0.9 6.5 2.5l1.5-1.5c-2.2-2-5-3.1-8-3.1zM3.5 7.6L5 9.1c1-0.9 2.2-1.4 3.5-1.4 1.3 0 2.5 0.5 3.5 1.4l1.5-1.5c-1.4-1.3-3.1-2-5-2-1.9 0-3.6 0.7-5 2zM6.5 10.6l2 2 2-2c-0.5-0.5-1.2-0.8-2-0.8s-1.5 0.3-2 0.8z"/>
386
+ </svg>
387
+ <!-- battery -->
388
+ <svg class="battery" viewBox="0 0 25 11" aria-hidden>
389
+ <rect x="0.5" y="0.5" width="21" height="10" rx="2.5" fill="none" stroke="currentColor" stroke-opacity="0.45"/>
390
+ <rect x="22" y="3.5" width="1.5" height="4" rx="0.4" fill="currentColor" fill-opacity="0.45"/>
391
+ <rect x="2" y="2" width="18" height="7" rx="1.4"/>
392
+ </svg>
393
+ </span>
394
+ </div>
395
+
396
+ <!-- ─── Scrollable content (paste a layout from references/layouts.md HERE) ─── -->
397
+ <main class="content" data-od-id="content">
398
+ <div class="header" data-od-id="header">
399
+ <div>
400
+ <p class="greeting">Tuesday · April 22</p>
401
+ <h1>[REPLACE] Hi there.</h1>
402
+ </div>
403
+ <button class="icon-btn" aria-label="Settings">
404
+ <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>
405
+ </button>
406
+ </div>
407
+
408
+ <div class="pad stack" data-od-id="empty-slot">
409
+ <div class="card" style="text-align: center; padding: 28px 20px;">
410
+ <p class="meta" style="margin: 0 0 6px;">PASTE A LAYOUT FROM</p>
411
+ <p class="h3" style="margin: 0 0 6px;">references/layouts.md</p>
412
+ <p style="margin: 0; color: var(--muted); font-size: 13px;">into <code style="font-family: var(--font-mono);">&lt;main class="content"&gt;</code></p>
413
+ </div>
414
+ </div>
415
+ </main>
416
+
417
+ <!-- ─── Tab bar (drop if the screen kind doesn't have one) ─── -->
418
+ <nav class="tabbar" style="--tabs: 4;" data-od-id="tabbar">
419
+ <a class="tab active">
420
+ <svg viewBox="0 0 24 24"><path d="M3 12 12 3l9 9"/><path d="M5 10v10h14V10"/></svg>
421
+ Home
422
+ </a>
423
+ <a class="tab">
424
+ <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
425
+ Search
426
+ </a>
427
+ <a class="tab">
428
+ <svg viewBox="0 0 24 24"><path d="M22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10z"/><path d="M12 6v6l4 2"/></svg>
429
+ Activity
430
+ </a>
431
+ <a class="tab">
432
+ <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>
433
+ Profile
434
+ </a>
435
+ </nav>
436
+
437
+ <div class="home-indicator" aria-hidden></div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </body>
442
+ </html>
package/skills/od-mobile-app/references/checklist.md ADDED
@@ -0,0 +1,46 @@
1
+ # Mobile app checklist
2
+
3
+ Run this before emitting `<artifact>`. P0 must pass.
4
+
5
+ ## P0 — must pass
6
+
7
+ - [ ] **Frame looks like a phone, not a generic card.** Dynamic Island visible, status bar SVG icons present (signal/wifi/battery), home indicator at bottom. The seed already does this — verify you didn't accidentally delete the island/rails/indicator markup.
8
+ - [ ] **Status bar shows real glyphs**, not text like `· · · 5G · 100%`. Use the SVG icons from the seed.
9
+ - [ ] **Home indicator is the last visible thing.** Anything below it (e.g. extra padding, accidental `<div>`) breaks the illusion.
10
+ - [ ] **Content scrolls, frame doesn't.** `<main class="content">` has `overflow-y: auto`; the surrounding `.device` does not. The page background never moves.
11
+ - [ ] **Tap targets ≥ 44px tall.** The seed's `.btn-primary` (48px), `.tab` (~50px), `.icon-btn` (36px ≥ touch with padding), `.list-row` (≥48px with padding) all pass. Don't ship a button under 44px.
12
+ - [ ] **Body text ≥ 14px.** `--fs-body: 15px` already enforces this on most copy. List-row sub text uses 13px max — that's the floor.
13
+ - [ ] **One accent, used at most twice on the screen.** Typically: one active tab + one CTA, OR one accent card + one tab. Never three.
14
+ - [ ] **No external image URLs.** Use the `.ph-img` placeholder class. External CDN images break the OD preview iframe and look fake when they 404.
15
+ - [ ] **Tab bar matches the screen kind.** Onboarding / detail / checkout: drop the `<nav class="tabbar">` entirely. Feed / focus / profile: keep it.
16
+ - [ ] **Display headlines use `var(--font-display)` (serif).** The seed binds this via `.h1`, `.h2`, `.header h1`. Don't override headings to system-sans — it instantly looks like a stock template.
17
+ - [ ] **No emoji icons in the UI.** SVG monoline only. Emoji in copy is fine ("9:41 ☀️ Tuesday" is not, but "Sunny day in Berlin" is).
18
+ - [ ] **`data-od-id` on the device, content, header, and any major sections.**
19
+
20
+ ## P1 — should pass
21
+
22
+ - [ ] **One screen, one job.** A profile screen does profile things. Don't graft a checkout form onto a feed.
23
+ - [ ] **Caption above the device** names the screen (e.g. "FILEBASE · INBOX"). The seed already has the slot — fill it.
24
+ - [ ] **Status bar time is `9:41`** (Apple convention) unless the brief asks otherwise.
25
+ - [ ] **Mono font for numerics** — counts, prices, durations, dates. The seed's `.num` class binds this.
26
+ - [ ] **Real, specific copy.** "Mira Hassan · CTO" beats "User Name". "$1,920" beats "$X,XXX".
27
+ - [ ] **First-screen content fits inside the 844px frame** without requiring scroll for the primary action. If the CTA is below the fold, it's the wrong layout.
28
+
29
+ ## P2 — nice to have
30
+
31
+ - [ ] **Subtle accent radial gradient on the page background** (already in seed). Removing it makes the device feel pasted onto a flat sheet.
32
+ - [ ] **Backdrop-blurred tab bar** (already in seed via `backdrop-filter`).
33
+ - [ ] **At most one image placeholder per screen.** Two placeholders on a small canvas competes for attention.
34
+ - [ ] **Subtle metallic side rails on the bezel** (already in seed via `::before`/`::after`).
35
+
36
+ ## Anti-fake-device checklist
37
+
38
+ If any of these are true, the screen looks like a *card pretending to be a phone* rather than a phone:
39
+
40
+ - The device's outer corners aren't visibly more rounded (~56px) than the inner screen (~44px).
41
+ - There's no Dynamic Island gap at the top centre.
42
+ - The status bar text is grey or low-opacity (it should be `var(--fg)` at full strength).
43
+ - The home indicator is missing.
44
+ - The bottom tab bar has no top border or no backdrop blur.
45
+
46
+ The seed prevents all of these — the most common regression is the agent rewriting the frame with `border-radius: 24px` and losing the depth.