@reqvire-org/ads 0.0.0-stage → 0.2.9

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 (145) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +284 -2
  3. package/dist/assets.mjs +52 -0
  4. package/dist/bootstrap-ds/ADS.md +203 -0
  5. package/dist/bootstrap-ds/README.md +98 -0
  6. package/dist/bootstrap-ds/biome.css.json +21 -0
  7. package/dist/bootstrap-ds/design-system/assets/brand/README.md +28 -0
  8. package/dist/bootstrap-ds/design-system/assets/fonts/.gitkeep +0 -0
  9. package/dist/bootstrap-ds/design-system/components/.gitkeep +0 -0
  10. package/dist/bootstrap-ds/design-system/composition/.gitkeep +0 -0
  11. package/dist/bootstrap-ds/design-system/index.ts +5 -0
  12. package/dist/bootstrap-ds/design-system/patterns/.gitkeep +0 -0
  13. package/dist/bootstrap-ds/design-system/showcase/mcp/index.html +1 -0
  14. package/dist/bootstrap-ds/design-system/showcase/mcp/main.tsx +8 -0
  15. package/dist/bootstrap-ds/design-system/styles.css +5 -0
  16. package/dist/bootstrap-ds/design-system/tokens/Foundation.fixture.ts +47 -0
  17. package/dist/bootstrap-ds/design-system/tokens/Foundation.scenario.tsx +14 -0
  18. package/dist/bootstrap-ds/design-system/tokens/base.css +27 -0
  19. package/dist/bootstrap-ds/design-system/tokens/colors.css +29 -0
  20. package/dist/bootstrap-ds/design-system/tokens/elevation.css +15 -0
  21. package/dist/bootstrap-ds/design-system/tokens/spacing.css +15 -0
  22. package/dist/bootstrap-ds/design-system/tokens/typography.css +13 -0
  23. package/dist/bootstrap-ds/ds.config.json +13 -0
  24. package/dist/bootstrap-ds/gitignore.template +8 -0
  25. package/dist/bootstrap-ds/package-lock.json +4660 -0
  26. package/dist/bootstrap-ds/package.json +41 -0
  27. package/dist/bootstrap-ds/scripts/build-mcp-previews.mjs +33 -0
  28. package/dist/bootstrap-ds/src/vite-env.d.ts +7 -0
  29. package/dist/bootstrap-ds/tsconfig.build.json +12 -0
  30. package/dist/bootstrap-ds/tsconfig.json +20 -0
  31. package/dist/bootstrap-ds/vite.config.ts +21 -0
  32. package/dist/boundaries.mjs +130 -0
  33. package/dist/brand-assets.mjs +82 -0
  34. package/dist/check.mjs +222 -0
  35. package/dist/cli.mjs +106 -0
  36. package/dist/config.mjs +181 -0
  37. package/dist/contracts/tokens.json +52 -0
  38. package/dist/html.mjs +30 -0
  39. package/dist/index.mjs +9 -0
  40. package/dist/init.mjs +194 -0
  41. package/dist/lint-config.mjs +40 -0
  42. package/dist/mcp/THIRD_PARTY_NOTICES.md +786 -0
  43. package/dist/mcp/apps.mjs +53 -0
  44. package/dist/mcp/build-status.mjs +164 -0
  45. package/dist/mcp/catalog.mjs +65 -0
  46. package/dist/mcp/context.mjs +69 -0
  47. package/dist/mcp/mutations.mjs +301 -0
  48. package/dist/mcp/patch.mjs +114 -0
  49. package/dist/mcp/preview-watch.mjs +169 -0
  50. package/dist/mcp/preview-widget.bundle.js +113 -0
  51. package/dist/mcp/project-widget.bundle.js +113 -0
  52. package/dist/mcp/prompts.mjs +28 -0
  53. package/dist/mcp/resource-loader.js +138 -0
  54. package/dist/mcp/sandbox-host.mjs +22 -0
  55. package/dist/mcp/server.mjs +377 -0
  56. package/dist/mcp/showcase-host.mjs +68 -0
  57. package/dist/mcp/skills.mjs +77 -0
  58. package/dist/mcp/widget.bundle.js +150 -0
  59. package/dist/oxlint.mjs +81 -0
  60. package/dist/preview-resources.mjs +198 -0
  61. package/dist/project-documents.mjs +27 -0
  62. package/dist/public-props.mjs +74 -0
  63. package/dist/scenarios-compiler.mjs +287 -0
  64. package/dist/scenarios-vite.d.mts +3 -0
  65. package/dist/scenarios-vite.mjs +71 -0
  66. package/dist/scenarios.mjs +212 -0
  67. package/dist/showcase/client.bundle.js +127 -0
  68. package/dist/showcase/index.html +17 -0
  69. package/dist/showcase/sandbox.js +30 -0
  70. package/dist/showcase/style.css +7 -0
  71. package/dist/showcase-coverage.mjs +118 -0
  72. package/dist/showcase.mjs +77 -0
  73. package/dist/skills/README.md +68 -0
  74. package/dist/skills/ads-assimilate/SKILL.md +292 -0
  75. package/dist/skills/ads-assimilate/agents/openai.yaml +4 -0
  76. package/dist/skills/ads-assimilate/references/cli.md +111 -0
  77. package/dist/skills/ads-assimilate/references/lint-and-docs.md +87 -0
  78. package/dist/skills/ads-assimilate/references/native-implementation.md +98 -0
  79. package/dist/skills/ads-assimilate/references/testing.md +107 -0
  80. package/dist/skills/ads-break-ui/LICENSE.upstream +21 -0
  81. package/dist/skills/ads-break-ui/README.md +16 -0
  82. package/dist/skills/ads-break-ui/SKILL.md +235 -0
  83. package/dist/skills/ads-break-ui/agents/openai.yaml +4 -0
  84. package/dist/skills/ads-break-ui/references/catalog.md +135 -0
  85. package/dist/skills/ads-break-ui/references/verification.md +48 -0
  86. package/dist/skills/ads-designer/LICENSE.upstream +21 -0
  87. package/dist/skills/ads-designer/README.md +19 -0
  88. package/dist/skills/ads-designer/SKILL.md +400 -0
  89. package/dist/skills/ads-designer/agents/openai.yaml +4 -0
  90. package/dist/skills/ads-designer/assets/bootstrap-ds/ADS.md +203 -0
  91. package/dist/skills/ads-designer/assets/bootstrap-ds/README.md +98 -0
  92. package/dist/skills/ads-designer/assets/bootstrap-ds/biome.css.json +21 -0
  93. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/assets/brand/README.md +28 -0
  94. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/assets/fonts/.gitkeep +0 -0
  95. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/components/.gitkeep +0 -0
  96. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/composition/.gitkeep +0 -0
  97. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/index.ts +5 -0
  98. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/patterns/.gitkeep +0 -0
  99. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/showcase/mcp/index.html +1 -0
  100. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/showcase/mcp/main.tsx +8 -0
  101. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/styles.css +5 -0
  102. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/Foundation.fixture.ts +47 -0
  103. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/Foundation.scenario.tsx +14 -0
  104. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/base.css +27 -0
  105. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/colors.css +29 -0
  106. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/elevation.css +15 -0
  107. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/spacing.css +15 -0
  108. package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/typography.css +13 -0
  109. package/dist/skills/ads-designer/assets/bootstrap-ds/ds.config.json +13 -0
  110. package/dist/skills/ads-designer/assets/bootstrap-ds/gitignore.template +8 -0
  111. package/dist/skills/ads-designer/assets/bootstrap-ds/package-lock.json +4660 -0
  112. package/dist/skills/ads-designer/assets/bootstrap-ds/package.json +41 -0
  113. package/dist/skills/ads-designer/assets/bootstrap-ds/scripts/build-mcp-previews.mjs +33 -0
  114. package/dist/skills/ads-designer/assets/bootstrap-ds/src/vite-env.d.ts +7 -0
  115. package/dist/skills/ads-designer/assets/bootstrap-ds/tsconfig.build.json +12 -0
  116. package/dist/skills/ads-designer/assets/bootstrap-ds/tsconfig.json +20 -0
  117. package/dist/skills/ads-designer/assets/bootstrap-ds/vite.config.ts +21 -0
  118. package/dist/skills/ads-designer/references/cli.md +111 -0
  119. package/dist/skills/ads-designer/references/design-craft.md +65 -0
  120. package/dist/skills/ads-designer/references/mobile.md +73 -0
  121. package/dist/skills/ads-import/SKILL.md +335 -0
  122. package/dist/skills/ads-import/agents/openai.yaml +4 -0
  123. package/dist/skills/ads-import/references/branding.md +44 -0
  124. package/dist/skills/ads-import/references/cli.md +111 -0
  125. package/dist/skills/ads-import/references/implementation.md +111 -0
  126. package/dist/skills/ads-import/references/tokens.md +96 -0
  127. package/dist/skills/ads-motion/LICENSE.upstream +21 -0
  128. package/dist/skills/ads-motion/README.md +22 -0
  129. package/dist/skills/ads-motion/SKILL.md +217 -0
  130. package/dist/skills/ads-motion/agents/openai.yaml +4 -0
  131. package/dist/skills/ads-motion/references/audit.md +44 -0
  132. package/dist/skills/ads-motion/references/build.md +81 -0
  133. package/dist/skills/ads-motion/references/performance.md +55 -0
  134. package/dist/skills/ads-motion/references/review.md +35 -0
  135. package/dist/skills/ads-motion/references/verification.md +39 -0
  136. package/dist/token-policy.mjs +10 -0
  137. package/dist/tokens.mjs +142 -0
  138. package/dist/ui-framework.mjs +59 -0
  139. package/dist/units.mjs +168 -0
  140. package/docs/ADS.md +310 -0
  141. package/docs/ARCHITECTURE.md +311 -0
  142. package/docs/CHANGELOG.md +106 -0
  143. package/docs/GUIDE.md +722 -0
  144. package/docs/MCP.md +690 -0
  145. package/package.json +107 -4
@@ -0,0 +1,235 @@
1
+ ---
2
+ name: ads-break-ui
3
+ description: Stress-test a project's local design-system components or patterns with extreme realistic content, empty and failure states, narrow containers, and accessibility settings. Build development fixtures, report layout failures, and fix them when requested.
4
+ ---
5
+
6
+ Exercise the real component through its public API. Accept an item name, screen,
7
+ file, or local project path; discover the relevant exports and usage when the
8
+ request already identifies the target.
9
+
10
+ ## Discover the target
11
+
12
+ When ADS MCP is connected, `ads_status`/`ads_catalog` identify public UI, guides and
13
+ addressable scenarios. Registered Apps use project-built fixtures; verify the
14
+ actual interactive view, not merely HTML delivery. Use the normal showcase for
15
+ unsupported Apps features or required viewport/keyboard tests. Resolve served
16
+ skill references relative to this `SKILL.md` URI and load them lazily; reading
17
+ instructions does not establish native activation.
18
+ Use the returned `projectRoot` and `project.commands`; the connected ADS may be
19
+ inside a different or nested repository. Inspect the selected public API, owning
20
+ source/available guides and relevant tokens, then mount its discovered scenario.
21
+ Metadata and source reads do not prove rendered behavior.
22
+
23
+ When `ads_status.mutations.enabled`, discover the owner with `ads_units`, read
24
+ relevant ranges with `ads_read_file` and send only a Git unified diff through
25
+ `ads_apply_patch({ unit, patch, dryRun })`. A unit includes its own implementation,
26
+ scenarios and fixtures; imported peers remain separate. `tokens` is the token
27
+ foundation unit. Unit discovery and file ownership are distinct from preview IDs.
28
+ Include only that owner's required re-exports in the public entry. Use
29
+ `dryRun: true` to inspect validation; applying re-runs the gates. Fix rejected
30
+ patches in their owner. Shared styles/helpers use `foundation`, root guides use
31
+ `documentation`, and branding/fonts use their discovered `assets/*` unit.
32
+ Intentional configuration, rule exceptions, registered guard code and compiler
33
+ changes use `configuration`; validate the proposed settings and keep mandatory
34
+ ADS gates. For binary/large assets, generate `git diff --binary --full-index` into
35
+ `.ds/patches/<name>.patch` and send `patchFile` instead of inline `patch`, so bytes
36
+ stay out of model context. Binary changes require Git. When editing is disabled,
37
+ use the client's normal source-editing tools.
38
+
39
+ Before trusting a preview after edits, check `ads_status.build` or
40
+ `ads://project/build`. Fix build diagnostics in owned source; an older view or
41
+ unreported freshness is not evidence of current code. Notifications may not
42
+ reach the agent.
43
+
44
+ Read `docs/ARCHITECTURE.md` when present (or the existing architecture guide), the project's ADS guide, public barrel, item README, existing showcase/test
45
+ harness, and package scripts. ADS is tooling; the project owns components,
46
+ patterns, and token values. An empty ADS has no components to stress-test. Report
47
+ that gap rather than installing a UI library or importing a catalogue.
48
+
49
+ Identify the actual layout constraints and supported input domain. Separate a
50
+ component defect from invalid application data, missing application validation,
51
+ or a caller violating the documented API. Never change production data or
52
+ backend validation just to create a stress case.
53
+
54
+ React and native Preact are supported. Preserve the target runtime in both
55
+ production and scenario builds; never alias React to Preact just to shrink a
56
+ preview. Native Preact uses its own JSX transform, hooks and DOM events (live
57
+ text updates use `onInput`). Native SVG uses DOM names such as `stroke-width`,
58
+ not React presentation aliases. Keep Linaria extraction and the same public APIs.
59
+ The shipped empty starter uses React; the tool repository's working example
60
+ uses Preact. Neither is a component dependency of the receiving project.
61
+
62
+ ## Choose the work
63
+
64
+ - Default: create or reuse development fixtures, exercise them, and report.
65
+ - `data only`: provide fixtures for the requested data shape without editing UI.
66
+ - `+fix`, or a request to fix: implement relevant findings in their owning layer
67
+ and rerun the failing cases. Existing authorization to fix is sufficient.
68
+
69
+ Read [references/catalog.md](references/catalog.md) for the relevant categories;
70
+ select plausible extremes rather than applying the whole catalogue to every
71
+ control. Its failure notes are diagnostic prompts; the local API and domain
72
+ contract determine the expected behavior. Use local data shapes and realistic locales.
73
+ Keep baseline, worst-case,
74
+ empty, and boundary cases distinct so the cause of a failure stays visible.
75
+
76
+ ## Exercise and diagnose
77
+
78
+ Use the project showcase as the shared review surface for agents and humans.
79
+ Scenarios import the same public ADS components/patterns and foundation
80
+ styles as the app. Use the built-in client and the project compiler.
81
+ An isolated harness is useful for diagnosis; retain useful regression cases in
82
+ the project showcase. A static HTML imitation cannot verify the component.
83
+ Keep fixture switches and test data out of production runtime exports. If useful,
84
+ let the development harness select a fixture through a query parameter so a
85
+ failure is reproducible.
86
+
87
+ Scenarios own sample data and example selection. Missing reusable UI belongs in the
88
+ ADS implementation and public exports, not in a scenario-only control. The tool supplies the neutral client shell; reusable scenario review layouts
89
+ are public project ADS entities.
90
+ Showcase/scenario files define no CSS, custom classes, or widget markup. Change
91
+ the owning ADS frame pattern when a necessary layout is missing. Run shared ADS/project guards for its build and the app
92
+ build, then give a full running URL or exact run command for human review.
93
+
94
+ The showcase is a minimal shell plus an MCP client and Apps host, supplied by ADS
95
+ tooling. It discovers Tokens/Components/Patterns/Composition entries through MCP
96
+ tools and renders their scenarios in the preview App. Navigation, theme and
97
+ pane/header visibility belong to the tool client. Do not create page files,
98
+ copy its shell into the project or assemble a second catalogue/rendering pipeline.
99
+
100
+ When MCP is connected, open the running URL from `ads_status`. Otherwise run the
101
+ installed `ads showcase` or the project's `dev:showcase` script. Do not launch a
102
+ second runtime/compiler for the same connected project. A configured project
103
+ preview watcher publishes a shared graph on first demand and after source
104
+ changes. The built-in client refreshes discovery and the active scenario in the
105
+ same App after a successful build. Shared runtime, foundation CSS, fonts and
106
+ selected scenario modules load through MCP
107
+ resources inside the sandboxed App. Never inject project styles/runtime into
108
+ the outer host. Keep the configured framework, compiler and mount/unmount adapter
109
+ consistent; scenario teardown must release owned timers, portals and workers.
110
+ The host shows errors and marks retained output as stale. Other hosts may need an
111
+ explicit preview-tool invocation. Compilation remains project-owned and required
112
+ for TSX/Linaria; it is automatic, not eliminated.
113
+
114
+ Reusable review layouts belong in public project ADS patterns, while scenario
115
+ files define no CSS, custom classes or widget replicas. Keep real presentation in
116
+ its component/pattern owner. The tooling shell's CSS is outside that project
117
+ contract. Legacy custom showcase pages may be retained during migration; new
118
+ projects require no TokensPage/ComponentsPage/PatternsPage/CompositionPage files.
119
+
120
+ Colocate `Scenario.tsx` and `fixture.ts` with tokens and each component/pattern; flat owners
121
+ may use `<Owner>.scenario.tsx` and `<Owner>.fixture.ts`. Put larger entries under
122
+ `composition/<Name>/Scenario.tsx` with their own `fixture.ts`. Export a default
123
+ zero-input mountable view and literal metadata, for example
124
+ `export const scenario = { title: "Button states", covers: ["Button"] };`.
125
+ Import the real UI from the public ADS alias. Keep fixture inputs, simulated
126
+ services and initial state/callback adapters beside the scenario. Empty fixtures
127
+ are valid for an entry with no inputs. Extra development helpers use a
128
+ `scenario/` or `fixtures/` subfolder, or `<Owner>.scenario-adapter.ts`, so guards
129
+ recognize their role even beside runtime code. Never require a page, router or store to
130
+ initialize the entry. Several contextual public parts may share one scenario.
131
+
132
+ IDs derive from ADS-relative filenames: both `components/core/Button/Scenario.tsx`
133
+ and `components/core/Button.scenario.tsx` identify `components/core/Button`.
134
+ Use one form, no duplicate IDs or hand-maintained registry. Renames change IDs.
135
+ The showcase and external hosts mount the same discovered entry. The Vite
136
+ adapter uses `previewEntriesPlugin` and `createPreviewResources` with
137
+ `runScenarioCompiler` to publish the shared graph. Its framework mount adapter
138
+ returns cleanup; the project owns rendering and Linaria extraction. The older
139
+ `scenarioRegistryPlugin` is only for retained legacy browsers. MCP discovers
140
+ metadata without importing executable TSX. Existing apps need an explicitly
141
+ integrated compiler; init alone adds no compiler or extraction setup.
142
+ Use `ads_scenarios` (query/kind/limit) and `ads_show_scenario({id})` to open an exact
143
+ entry. Check its build freshness; HTML delivery is not browser verification.
144
+ If Apps or resource forwarding are unavailable, open that scenario in the real
145
+ showcase, using the tool result's URL. Do not build a preview-only replica.
146
+
147
+ For a production screen, find and render the application's public screen pattern.
148
+ Its owner supplies structure, controls, layout and presentation. Scenario fixtures
149
+ supply data/state/callbacks. Move shared presentation into a pattern if needed,
150
+ preserving existing behavior and lazy imports, workers, caching and cancellation.
151
+ Do not reassemble an alternative screen or substitute placeholder content.
152
+ Screen reuse remains skill guidance, not a dedicated screen-parity lint.
153
+
154
+ Resolve `scenario-contract`, `scenario-render` and `scenario-coverage` findings
155
+ with meaningful entries. Every public renderable component and pattern needs an
156
+ addressable scenario, including unused exports; types/constants/utilities do not.
157
+ Only public render references reachable from the default entry count. Tests and
158
+ unused imports/functions do not. Static reachability does not prove successful
159
+ mounting, correct content, every branch/state or visual parity: open each affected
160
+ entry independently and verify real behavior at narrow/wide sizes in both themes.
161
+ The older `showcase-coverage` policy separately checks application references.
162
+
163
+ Token previews use that same scenario pipeline. Colocate a token scenario and
164
+ fixture under the configured token directory. Use static metadata
165
+ `{ title: "Typography", covers: ["TokenSamples"], tokens: fixture.tokens }` with
166
+ literal const fixture fields; names/sample text are fixture data, values come
167
+ from the real foundation CSS. Reuse a public project review pattern for styled
168
+ samples. The minimal starter's foundation value scenario can have `covers: []`.
169
+ Every declared token needs reachable scenario coverage; adding/removing a token
170
+ requires fixture updates. Fix `token-scenario-reference`, `token-scenario-render`
171
+ and `token-scenario-coverage` findings. Metadata and unused fixture fields do not
172
+ count. Discover exact token IDs with `ads_scenarios({kind:"tokens"})`; mount them
173
+ with `ads_show_scenario({id})` or `ads_show_tokens({category:id})`. With the shared
174
+ resource compiler, omitting category opens the first project token scenario.
175
+ Legacy compilers retain the generic definition inspector. Use `ads_tokens` for
176
+ source definitions and values; inspecting definitions does not prove UI parity.
177
+ The tool keeps the shared naming contract; sample templates and their token
178
+ lists belong to the project.
179
+
180
+ Scenarios, colocated fixtures and helpers are development-only. Never export them
181
+ from the runtime barrel or import them in production, including through aliases,
182
+ re-exports or dynamic imports. They may not import application stores, routers,
183
+ providers or HTTP clients. Live business data is application-owned; UI uses typed
184
+ inputs or injected services/callbacks. Direct global fetch/XHR/WebSocket/EventSource
185
+ is rejected; custom clients and computed access require review/project guards.
186
+ Use local simulated services in fixtures. Tests may import fixtures; load real
187
+ foundation CSS rather than assigning shared token values in JavaScript. Keep
188
+ full-app integration harnesses and workflow coverage in application test support.
189
+
190
+
191
+
192
+ Register component/project Oxlint plugins and rules in `ds.config.json`. Use
193
+ scoped `oxlint.overrides` for justified file-specific settings; never edit
194
+ `.ds/oxlintrc.json`. These overrides configure Oxlint, not the independent
195
+ architecture checks in `ads check`. Measured renderer properties and documented
196
+ non-state hooks use explicit `boundaries`; shared token writes and primitive
197
+ state overrides cannot be allowlisted. Add generic architectural protections to
198
+ ADS core and keep domain/component-specific rules registered in project setup.
199
+
200
+ Read [references/verification.md](references/verification.md) for viewport,
201
+ interaction, and build checks. Inspect both the item alone and its real pattern
202
+ or application container. A wide viewport can hide a narrow-sidebar defect.
203
+
204
+ For each finding, give the triggering value/state, actual container conditions,
205
+ visible failure, owning file/line, likely cause, and proposed fix. Distinguish:
206
+
207
+ | Severity | Meaning |
208
+ |----------|---------|
209
+ | Broken | Content or an action is inaccessible, controls overlap, or layout cannot be used |
210
+ | Ugly | The UI remains usable but spacing, wrapping, or alignment visibly fails |
211
+ | Fragile | A demonstrated boundary leaves little room for plausible content changes |
212
+
213
+ Report observed failures separately from untested risks. Include tested cases
214
+ that passed when that helps define the coverage. Screenshots alone do not prove
215
+ keyboard, focus, scrolling, or gesture behavior.
216
+
217
+ ## Fix in the owner
218
+
219
+ Components own reusable sizing, wrapping, state visuals, and interaction;
220
+ patterns own reusable composition; the app owns data and domain constraints.
221
+ Use typed variants and documented tokens. Do not dress component internals from
222
+ showcase CSS or introduce raw visual constants outside token declarations.
223
+
224
+ Choose wrapping, truncation, scrolling, or limits from the content's purpose.
225
+ For example, a visually truncated identifier may need a way to retrieve its full
226
+ value. Preserve documented states, accessibility, and source credits.
227
+
228
+ Keep useful regression fixtures. Add tests for demonstrated behavior defects
229
+ where they give lasting coverage. A component-local Oxlint rule is appropriate
230
+ only when it can statically establish a concrete public-API misuse; document
231
+ accepted/rejected examples and false-positive limits. Layout quality remains a
232
+ rendered check.
233
+
234
+ Source credits and retained MIT terms: [README.md](README.md) and
235
+ [LICENSE.upstream](LICENSE.upstream).
@@ -0,0 +1,4 @@
1
+ interface:
2
+ display_name: "ADS Break UI"
3
+ short_description: "Stress-test local ADS components with realistic extremes"
4
+ default_prompt: "Use $ads-break-ui to stress-test a component through this project’s real design-system API."
@@ -0,0 +1,135 @@
1
+ # Worst-Case Catalog
2
+
3
+ Realistic values that break UI, grouped by what kind of value the component renders. Use the rows that apply to its actual rendered fields and supported input domain. Each value is something a real user could produce; the note says what it tends to break.
4
+
5
+ Use `example.com`, `example.org`, or `.test` domains for emails and URLs, so the fixture never points at a real inbox or site.
6
+
7
+ ---
8
+
9
+ ## People and names
10
+
11
+ | Value | Breaks |
12
+ | --- | --- |
13
+ | `Aleksandra Wiśniewska-Kowalczyk` | Long, hyphenated, diacritics; wraps to two lines, and the hyphen is a line-break point |
14
+ | `Christopher Alexander Montgomery III` | Long with a suffix; naive first + last initials give `CI` |
15
+ | `Konstantin Oberhauser-Wettstein` | Long and compound; overflows single-line rows |
16
+ | `Jo` | Two letters; leaves the name column mostly empty, and naive initials give `J` |
17
+ | `J` | One letter; single-character initials, very short click target if the name is the link |
18
+ | `Ólafur Darri Ólafsson` | Leading accented capital; uppercase/sort logic, initials `ÓÓ` |
19
+ | `Đặng Thị Ngọc Hân` | Stacked Vietnamese diacritics; clipped by tight `line-height` + `overflow: hidden` |
20
+ | `王秀英` | CJK, no spaces; "first + last word" initials logic finds one word, and CJK breaks anywhere |
21
+ | `نور الهدى عبد الرحمن` | RTL; punctuation and icons land on the wrong side without `dir="auto"` |
22
+ | `Seán O'Brien-Ó Súilleabháin` | Apostrophe and accents; escaping, initials, search |
23
+ | `María José de la Cruz y Fernández` | Lowercase particles; initials `Md` or `MF`, sorting by "last name" |
24
+ | `dana` | All lowercase; initials should still be uppercase |
25
+ | `🦊 Fox` | Emoji first; `.charAt(0)` returns half a surrogate pair (`�`) |
26
+ | `👩🏽‍💻 Priya` | ZWJ emoji sequence; `.length` is 7+, slicing breaks it into pieces |
27
+ | ` Sam Lee ` | Leading, trailing, and repeated spaces; initials from empty words, odd gaps |
28
+ | *(missing)* | No name at all, only an email; the UI must fall back to something |
29
+
30
+ ## Emails, URLs, identifiers
31
+
32
+ Unbreakable strings: they have no spaces, so the browser has nowhere to wrap them.
33
+
34
+ | Value | Breaks |
35
+ | --- | --- |
36
+ | `bartholomew.fitzgerald@northwind-industries-holdings.example.com` | The classic. Pushes every sibling off the row without `overflow-wrap: anywhere` |
37
+ | `a@b.co` | Shortest realistic; layout that assumed a long email looks empty |
38
+ | `first.last+billing-notifications@example.com` | Plus-addressing; validation that rejects `+`, display that truncates the meaningful part |
39
+ | `ops@sub.department.region.example.co.uk` | Many subdomains, two-part TLD; "domain" extraction logic |
40
+ | `https://example.com/workspaces/acme/projects/q3-launch/docs/9f8e7d6c5b4a?tab=comments&filter=unresolved` | Long URL; overflow, and end-truncation hides the part that differs |
41
+ | `9f8e7d6c-5b4a-4c3d-8e2f-1a0b9c8d7e6f` | UUID; monospace width, middle-truncation candidate |
42
+ | `Q3 Board Deck — FINAL (revised) v12 [approved by legal].pdf` | File name; end-truncation hides the version and extension, brackets and dashes in paths |
43
+ | `IMG_20250914_183022_HDR_portrait_edited_edited.HEIC` | Camera file name; unbreakable, uppercase extension |
44
+ | `@a` / `@thisisaverylongusernamethatisallowed` | Handle extremes |
45
+
46
+ ## Labels, titles, and copy from data
47
+
48
+ | Value | Breaks |
49
+ | --- | --- |
50
+ | `Senior Product Design Engineer, Platform Infrastructure` | Long job title; wraps to three lines in a secondary slot |
51
+ | `Invitation expired 12 days ago` | Long status badge; badge wraps or squeezes the name column |
52
+ | `Benachrichtigungseinstellungen` | German compound (30 chars, no spaces); label overflow, unbreakable |
53
+ | `Paramètres de confidentialité et de sécurité` | French expansion of "Privacy & security"; UI copy runs ~30% longer in translation |
54
+ | Twelve tags on one item: `design`, `frontend`, `q3`, `urgent`, `needs-review`, … | Tag rows that wrap into a wall; needs a `+8` overflow |
55
+ | A tag named `customer-feedback-from-enterprise-onboarding` | One tag wider than its container |
56
+ | `Untitled` / empty string / ` ` | Title missing; collapsed heading, zero-height row |
57
+ | `<script>alert(1)</script>` / `&amp;` / `**bold**` | Escaping; must render as literal text |
58
+ | `Line one` + newline + `Line two` | Newline in a single-line field; doubles row height or is silently dropped |
59
+ | A 2,000-character pasted description | Clamps, "show more", and textarea growth |
60
+
61
+ ## Numbers and money
62
+
63
+ | Value | Breaks |
64
+ | --- | --- |
65
+ | `0` | Zero states: "0 members", empty progress bar, division by zero in percentages |
66
+ | `1` | Plurals: "1 members", "1 days ago" |
67
+ | `1284` | Needs a thousands separator: `1,284` |
68
+ | `1000000` | Width of the count badge; consider compact form `1M` where precision doesn't matter |
69
+ | `12345678.9` as currency | `$12,345,678.90`; overflows totals columns |
70
+ | `-42.5` | Negative sign, red color logic, parentheses in accounting formats |
71
+ | `0.1 + 0.2` | `0.30000000000000004` rendered raw |
72
+ | `142%` / `-3%` | Progress bars and meters past their bounds |
73
+ | `null` / `undefined` / `NaN` | Rendered literally |
74
+ | `1.284` in `de-DE` vs `1,284` in `en-US` | Locale formatting; hardcoded separators are wrong for half the world |
75
+ | A value that changes live (`99` → `100`) | Width jump and jitter without `tabular-nums` |
76
+
77
+ ## Collections
78
+
79
+ | Value | Breaks |
80
+ | --- | --- |
81
+ | 0 items | The empty state, and whether one exists at all |
82
+ | 1 item | Grids that look broken with one card; "1 of 1" |
83
+ | Exactly page size, and page size + 1 | Off-by-one in "Showing 40 of 40", pagination that shows an empty page 2 |
84
+ | 1,000+ items, unpaginated | Scroll performance, render time, memory; also "Showing 40 of 1,284" copy |
85
+ | One item 10× the size of the others | Masonry and grid rows stretching to the tallest item |
86
+ | Items with identical names | Lists where the name is the only distinguishing field |
87
+
88
+ ## Time
89
+
90
+ | Value | Breaks |
91
+ | --- | --- |
92
+ | Now | "0 seconds ago" instead of "just now" |
93
+ | 12 days ago, 11 months ago, 3 years ago | Relative-time thresholds; switch to an absolute date after a week or so |
94
+ | A future date | "in 3 days" vs "-3 days ago" |
95
+ | `1970-01-01` | A zero timestamp shown as a real date |
96
+ | `2025-12-31T23:30:00-08:00` | Shows as a different day in UTC and the user's timezone |
97
+ | Very long duration (`1,284 hours`) | Duration formatting that never rolls up to days |
98
+
99
+ Use `Intl.RelativeTimeFormat` and `Intl.DateTimeFormat`, not hand-built strings.
100
+
101
+ ## Images and media
102
+
103
+ | Value | Breaks |
104
+ | --- | --- |
105
+ | Avatar URL that 404s | Broken-image icon instead of the initials fallback |
106
+ | No avatar at all | The fallback itself: initials, color, size parity with real avatars |
107
+ | 4000×200 panorama as avatar or cover | Distortion without `object-fit: cover` |
108
+ | 200×4000 tall image | Same, other axis; can also blow out a card's height |
109
+ | Transparent PNG logo, dark logo on dark mode | Invisible on the background |
110
+ | Slow-loading image | Layout shift without fixed dimensions or `aspect-ratio` |
111
+
112
+ ## States
113
+
114
+ | Value | Breaks |
115
+ | --- | --- |
116
+ | Loading | Skeletons that don't match final layout, spinners that shift content |
117
+ | Error from the API | No error state, or a raw error message (`TypeError: Cannot read properties of undefined`) |
118
+ | Partial data | Some optional fields filled, others not, in the same list; misaligned rows |
119
+ | Every status at once | All enum values in one list (`active`, `invited`, `expired`, `suspended`); badge widths vary |
120
+ | No permission | Disabled actions; does the row still lay out the same? |
121
+ | The current user in the list | "You" labels, actions that shouldn't apply to yourself |
122
+
123
+ ## Environment
124
+
125
+ Not data, but checked the same way: flip to the worst case, then change these.
126
+
127
+ | Condition | Breaks |
128
+ | --- | --- |
129
+ | Container at 320px | Every overflow above, at once |
130
+ | Narrow sidebar placement | Components designed full-width, reused in a 280px column |
131
+ | 2560px wide | Lines too long to read, content stranded on one side |
132
+ | Browser zoom 200% / large text setting | Fixed heights that clip growing text |
133
+ | Dark mode | Hardcoded colors, invisible borders and logos |
134
+ | `dir="rtl"` | Icons, chevrons, padding, and the order of trailing actions |
135
+ | Touch device | Hover-only actions (the ••• that appears on hover) are unreachable |
@@ -0,0 +1,48 @@
1
+ # Verify stress cases
2
+
3
+ Use the project's real public API and discovered commands. Do not assume `@ds`,
4
+ a particular Toast/Button, or this tool checkout's prototype exists in another
5
+ project. Read the local component contract before inventing props or states.
6
+
7
+ ## Rendered checks
8
+
9
+ Select checks that match the item:
10
+
11
+ - Normal content, realistic long content, an unbreakable string, and absent
12
+ optional content. Test translations, CJK, or RTL when supported or requested.
13
+ - Empty, single-item, boundary-count, and large collections. Use supported
14
+ pagination/virtualization rather than accidentally creating a production DoS.
15
+ - Loading, success, failure, disabled, and partial results where exposed by the
16
+ API. Invalid numbers/dates should exercise the documented boundary, not be
17
+ passed as valid props when the API excludes them.
18
+ - The actual narrow container, a 320 CSS-pixel viewport, and 200% zoom where
19
+ practical. At larger zoom, check reflow against the project's accessibility
20
+ requirements. Also check wide layouts if stretching is relevant.
21
+ - Both supported themes, keyboard focus order and activation, accessible names,
22
+ touch/scroll interaction, and reduced motion for animated controls.
23
+
24
+ Use an isolated browser context. Preserve the user's open pages and settings.
25
+ Capture the fixture, viewport/container size, theme, zoom, and actions alongside
26
+ each failure. CSS viewport emulation is useful; it is not evidence of real
27
+ mobile keyboard, browser chrome, or assistive-technology behavior.
28
+
29
+ For transient UI, use the actual notification/dialog/menu entry point. Check
30
+ long content, repeated additions, dismissal, and retained focus using the local
31
+ contract. Don't duplicate the component's internal markup to simplify a demo.
32
+
33
+ ## Validate fixes
34
+
35
+ Run the target's lint, typecheck, and appropriate build after implementation
36
+ changes. ADS initialization normally wires its local tooling into the project's
37
+ build; use that existing integration. An ad hoc `npx` check is not a substitute
38
+ for project build integration, and an unpublished package must not be fetched
39
+ as if it were available.
40
+
41
+ Rerun the failing scenario and a representative normal case. Test neighboring
42
+ states only when the fix could affect them. For a local rule, verify valid and
43
+ invalid usage and its registration; keep rule code out of runtime exports.
44
+
45
+ For a diagnostic-only request, report findings and reproduction steps without
46
+ silently applying production changes. Stop any temporary server started for the
47
+ check unless the user requested a running preview. Include any checks that
48
+ could not be performed and the practical limits of emulation.
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Emil Kowalski
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1,19 @@
1
+ # Credits
2
+
3
+ The bundled empty scaffold and local ADS workflow belong to this repository.
4
+ Selected craft/mobile guidance adapts [Emil Kowalski's skills](https://github.com/emilkowalski/skills)
5
+ at revision `2d228630ba1446365f614a108cb8252f1feda202`:
6
+
7
+ | Upstream source | Local reference |
8
+ |-----------------|-----------------|
9
+ | [emil-design-eng](https://github.com/emilkowalski/skills/tree/2d228630ba1446365f614a108cb8252f1feda202/skills/emil-design-eng) | [design-craft.md](references/design-craft.md): state completeness, interaction detail, layout, content, and purposeful motion |
10
+ | [mobile-native](https://github.com/emilkowalski/skills/tree/2d228630ba1446365f614a108cb8252f1feda202/skills/mobile-native) | [mobile.md](references/mobile.md): input capabilities, viewport/safe areas, forms, scrolling, and device verification |
11
+
12
+ The adaptations preserve project-owned token values and styles, public APIs,
13
+ component/pattern ownership, and application responsibility for document-level
14
+ setup. They do not impose upstream numeric/brand defaults or native app tooling.
15
+
16
+ [LICENSE.upstream](LICENSE.upstream) retains the complete MIT license and
17
+ Copyright (c) 2026 Emil Kowalski for copied/adapted upstream guidance. Retain it
18
+ on redistribution of that material. It does not declare a license for unrelated
19
+ project source or the bundled scaffold.