@reqvire-org/ads 0.0.0-stage → 0.3.0
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/LICENSE +21 -0
- package/README.md +284 -2
- package/dist/assets.mjs +52 -0
- package/dist/bootstrap-ds/ADS.md +203 -0
- package/dist/bootstrap-ds/README.md +98 -0
- package/dist/bootstrap-ds/biome.css.json +21 -0
- package/dist/bootstrap-ds/design-system/assets/brand/README.md +28 -0
- package/dist/bootstrap-ds/design-system/assets/fonts/.gitkeep +0 -0
- package/dist/bootstrap-ds/design-system/components/.gitkeep +0 -0
- package/dist/bootstrap-ds/design-system/composition/.gitkeep +0 -0
- package/dist/bootstrap-ds/design-system/index.ts +5 -0
- package/dist/bootstrap-ds/design-system/patterns/.gitkeep +0 -0
- package/dist/bootstrap-ds/design-system/showcase/mcp/index.html +1 -0
- package/dist/bootstrap-ds/design-system/showcase/mcp/main.tsx +8 -0
- package/dist/bootstrap-ds/design-system/styles.css +5 -0
- package/dist/bootstrap-ds/design-system/tokens/Foundation.fixture.ts +47 -0
- package/dist/bootstrap-ds/design-system/tokens/Foundation.scenario.tsx +14 -0
- package/dist/bootstrap-ds/design-system/tokens/base.css +27 -0
- package/dist/bootstrap-ds/design-system/tokens/colors.css +29 -0
- package/dist/bootstrap-ds/design-system/tokens/elevation.css +15 -0
- package/dist/bootstrap-ds/design-system/tokens/spacing.css +15 -0
- package/dist/bootstrap-ds/design-system/tokens/typography.css +13 -0
- package/dist/bootstrap-ds/ds.config.json +13 -0
- package/dist/bootstrap-ds/gitignore.template +8 -0
- package/dist/bootstrap-ds/package-lock.json +4660 -0
- package/dist/bootstrap-ds/package.json +41 -0
- package/dist/bootstrap-ds/scripts/build-mcp-previews.mjs +33 -0
- package/dist/bootstrap-ds/src/vite-env.d.ts +7 -0
- package/dist/bootstrap-ds/tsconfig.build.json +12 -0
- package/dist/bootstrap-ds/tsconfig.json +20 -0
- package/dist/bootstrap-ds/vite.config.ts +21 -0
- package/dist/boundaries.mjs +130 -0
- package/dist/brand-assets.mjs +82 -0
- package/dist/check.mjs +222 -0
- package/dist/cli.mjs +106 -0
- package/dist/config.mjs +181 -0
- package/dist/contracts/tokens.json +52 -0
- package/dist/html.mjs +30 -0
- package/dist/index.mjs +9 -0
- package/dist/init.mjs +194 -0
- package/dist/lint-config.mjs +40 -0
- package/dist/mcp/THIRD_PARTY_NOTICES.md +786 -0
- package/dist/mcp/apps.mjs +53 -0
- package/dist/mcp/build-status.mjs +164 -0
- package/dist/mcp/catalog.mjs +65 -0
- package/dist/mcp/context.mjs +69 -0
- package/dist/mcp/mutations.mjs +301 -0
- package/dist/mcp/patch.mjs +114 -0
- package/dist/mcp/preview-watch.mjs +169 -0
- package/dist/mcp/preview-widget.bundle.js +113 -0
- package/dist/mcp/project-widget.bundle.js +113 -0
- package/dist/mcp/prompts.mjs +28 -0
- package/dist/mcp/resource-loader.js +138 -0
- package/dist/mcp/sandbox-host.mjs +22 -0
- package/dist/mcp/server.mjs +377 -0
- package/dist/mcp/showcase-host.mjs +68 -0
- package/dist/mcp/skills.mjs +77 -0
- package/dist/mcp/widget.bundle.js +150 -0
- package/dist/oxlint.mjs +81 -0
- package/dist/preview-resources.mjs +198 -0
- package/dist/project-documents.mjs +27 -0
- package/dist/public-props.mjs +74 -0
- package/dist/scenarios-compiler.mjs +287 -0
- package/dist/scenarios-vite.d.mts +3 -0
- package/dist/scenarios-vite.mjs +71 -0
- package/dist/scenarios.mjs +212 -0
- package/dist/showcase/client.bundle.js +127 -0
- package/dist/showcase/index.html +17 -0
- package/dist/showcase/sandbox.js +30 -0
- package/dist/showcase/style.css +7 -0
- package/dist/showcase-coverage.mjs +118 -0
- package/dist/showcase.mjs +77 -0
- package/dist/skills/README.md +68 -0
- package/dist/skills/ads-assimilate/SKILL.md +292 -0
- package/dist/skills/ads-assimilate/agents/openai.yaml +4 -0
- package/dist/skills/ads-assimilate/references/cli.md +111 -0
- package/dist/skills/ads-assimilate/references/lint-and-docs.md +87 -0
- package/dist/skills/ads-assimilate/references/native-implementation.md +98 -0
- package/dist/skills/ads-assimilate/references/testing.md +107 -0
- package/dist/skills/ads-break-ui/LICENSE.upstream +21 -0
- package/dist/skills/ads-break-ui/README.md +16 -0
- package/dist/skills/ads-break-ui/SKILL.md +235 -0
- package/dist/skills/ads-break-ui/agents/openai.yaml +4 -0
- package/dist/skills/ads-break-ui/references/catalog.md +135 -0
- package/dist/skills/ads-break-ui/references/verification.md +48 -0
- package/dist/skills/ads-designer/LICENSE.upstream +21 -0
- package/dist/skills/ads-designer/README.md +19 -0
- package/dist/skills/ads-designer/SKILL.md +400 -0
- package/dist/skills/ads-designer/agents/openai.yaml +4 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/ADS.md +203 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/README.md +98 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/biome.css.json +21 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/assets/brand/README.md +28 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/assets/fonts/.gitkeep +0 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/components/.gitkeep +0 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/composition/.gitkeep +0 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/index.ts +5 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/patterns/.gitkeep +0 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/showcase/mcp/index.html +1 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/showcase/mcp/main.tsx +8 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/styles.css +5 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/Foundation.fixture.ts +47 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/Foundation.scenario.tsx +14 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/base.css +27 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/colors.css +29 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/elevation.css +15 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/spacing.css +15 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/design-system/tokens/typography.css +13 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/ds.config.json +13 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/gitignore.template +8 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/package-lock.json +4660 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/package.json +41 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/scripts/build-mcp-previews.mjs +33 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/src/vite-env.d.ts +7 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/tsconfig.build.json +12 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/tsconfig.json +20 -0
- package/dist/skills/ads-designer/assets/bootstrap-ds/vite.config.ts +21 -0
- package/dist/skills/ads-designer/references/cli.md +111 -0
- package/dist/skills/ads-designer/references/design-craft.md +65 -0
- package/dist/skills/ads-designer/references/mobile.md +73 -0
- package/dist/skills/ads-import/SKILL.md +335 -0
- package/dist/skills/ads-import/agents/openai.yaml +4 -0
- package/dist/skills/ads-import/references/branding.md +44 -0
- package/dist/skills/ads-import/references/cli.md +111 -0
- package/dist/skills/ads-import/references/implementation.md +111 -0
- package/dist/skills/ads-import/references/tokens.md +96 -0
- package/dist/skills/ads-motion/LICENSE.upstream +21 -0
- package/dist/skills/ads-motion/README.md +22 -0
- package/dist/skills/ads-motion/SKILL.md +217 -0
- package/dist/skills/ads-motion/agents/openai.yaml +4 -0
- package/dist/skills/ads-motion/references/audit.md +44 -0
- package/dist/skills/ads-motion/references/build.md +81 -0
- package/dist/skills/ads-motion/references/performance.md +55 -0
- package/dist/skills/ads-motion/references/review.md +35 -0
- package/dist/skills/ads-motion/references/verification.md +39 -0
- package/dist/token-policy.mjs +10 -0
- package/dist/tokens.mjs +142 -0
- package/dist/ui-framework.mjs +59 -0
- package/dist/units.mjs +168 -0
- package/docs/ADS.md +310 -0
- package/docs/ARCHITECTURE.md +311 -0
- package/docs/CHANGELOG.md +106 -0
- package/docs/GUIDE.md +722 -0
- package/docs/MCP.md +690 -0
- package/package.json +107 -4
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Ilija Ljubicic
|
|
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.
|
package/README.md
CHANGED
|
@@ -1,3 +1,285 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ADS — Agentic Design System
|
|
2
|
+
|
|
3
|
+
**A design system your agent can see and shape. Your components. Your look. Your code.**
|
|
4
|
+
|
|
5
|
+
ADS gives coding agents MCP tools and skills to build and maintain a design system
|
|
6
|
+
inside your project. Agents can inspect components, tokens and patterns, render
|
|
7
|
+
live previews, and submit guarded patches validated before they land.
|
|
8
|
+
|
|
9
|
+
Humans and agents review the same real UI. ADS supplies architectural rules and
|
|
10
|
+
build checks; your project owns the implementation, visual design and branding.
|
|
11
|
+
|
|
12
|
+
**Inspired by any library. Bound to none. Owned by your project.**
|
|
13
|
+
|
|
14
|
+
ADS requires Linaria for component and pattern styling; your project chooses its
|
|
15
|
+
UI framework and visual design. The [architecture](docs/ARCHITECTURE.md) explains
|
|
16
|
+
Data, UX, Skin, and the performance reasons behind that choice.
|
|
17
|
+
|
|
18
|
+
ADS supports **React and native Preact** with the same architecture guards and
|
|
19
|
+
MCP preview flow. The empty starter uses React; this repository’s working example
|
|
20
|
+
uses Preact. See [implementation support](docs/GUIDE.md#implementation-support).
|
|
21
|
+
|
|
22
|
+
## Set up your project
|
|
23
|
+
|
|
24
|
+
Run **inside your project**, where `package.json` lives. Requires Node 22.12 or newer.
|
|
25
|
+
|
|
26
|
+
```sh
|
|
27
|
+
npx @reqvire-org/ads init --framework react
|
|
28
|
+
npm install
|
|
29
|
+
npm run build
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Use `--framework preact` for native Preact. Init saves the choice in
|
|
33
|
+
`ds.config.json`; later runs can use plain `ads init`. A copied starter that
|
|
34
|
+
already declares its framework can also omit the flag.
|
|
35
|
+
|
|
36
|
+
For a Bun project, run the same `init` command, then:
|
|
37
|
+
|
|
38
|
+
```sh
|
|
39
|
+
bun install
|
|
40
|
+
bun run build
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
`init` detects npm or Bun from your project. It adds ADS and Oxlint as development
|
|
44
|
+
dependencies, sets up an empty local ADS if needed, and adds ADS checks before your
|
|
45
|
+
existing build. The default layout is root `design-system/`, alongside `src/`.
|
|
46
|
+
It keeps your app, token values, scripts, and lockfile. Each build
|
|
47
|
+
refreshes lint configuration and checks tokens, styles, imports, renderer
|
|
48
|
+
boundaries, asset ownership, and registered component rules, then generates
|
|
49
|
+
configured brand icons. Commit the updated
|
|
50
|
+
lockfile; generated `.ds/` files are ignored. Init does not install or configure
|
|
51
|
+
Linaria; integrate its extraction with your build as described in the
|
|
52
|
+
[guide](docs/GUIDE.md#linaria-integration).
|
|
53
|
+
|
|
54
|
+
## Commands
|
|
55
|
+
|
|
56
|
+
| Command | Use |
|
|
57
|
+
|---------|-----|
|
|
58
|
+
| `ads init --framework react` | Set up ADS in the current project; also accepts `preact`; saved choices can omit the flag |
|
|
59
|
+
| `ads check` | Check tokens, styles, imports, and ADS ownership |
|
|
60
|
+
| `ads tokens` | Inspect token values and themes |
|
|
61
|
+
| `ads assets` | Generate standard web icons from the project's SVG |
|
|
62
|
+
| `ads lint-config` | Generate lint config; normally called by the build |
|
|
63
|
+
| `ads mcp` | Start the stdio MCP server and its local showcase |
|
|
64
|
+
| `ads showcase` | Start the same MCP runtime for browser-only inspection |
|
|
65
|
+
|
|
66
|
+
Run commands from the project root; they read `ds.config.json` there.
|
|
67
|
+
Use `ads --help` for options. Inspection commands support `--json`; `mcp` reserves
|
|
68
|
+
stdout for JSON-RPC.
|
|
69
|
+
See the [setup guide](docs/GUIDE.md) for other layouts, alias setup, and component rules.
|
|
70
|
+
|
|
71
|
+
## Connect your agent
|
|
72
|
+
|
|
73
|
+
Run inside your project. For **Codex**:
|
|
74
|
+
|
|
75
|
+
```sh
|
|
76
|
+
codex mcp add ads -- npx -y @reqvire-org/ads mcp
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
For **Claude Code**:
|
|
80
|
+
|
|
81
|
+
```sh
|
|
82
|
+
claude mcp add --transport stdio --scope project ads -- npx -y @reqvire-org/ads mcp
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Restart your client in that project. `npx` uses its installed ADS version or
|
|
86
|
+
downloads the published package. See the [MCP guide](docs/MCP.md#connect-codex-or-claude)
|
|
87
|
+
for config files and Claude Desktop setup.
|
|
88
|
+
|
|
89
|
+
To let the agent edit the ADS through enforced checks, append `--mutations` to
|
|
90
|
+
the MCP command. It accepts a Git patch for one ADS unit, including its owned scenarios and
|
|
91
|
+
fixtures, and runs the guards before applying it. Foundation styles, original
|
|
92
|
+
assets, guides and project configuration/guard extensions have editable units too. See [guarded editing](docs/MCP.md#guarded-editing).
|
|
93
|
+
|
|
94
|
+
The server exposes public components/patterns, token values,
|
|
95
|
+
source guides, architecture checks, workflow prompts, and packaged ADS skills.
|
|
96
|
+
It supports older MCP clients and the newer Skills protocol.
|
|
97
|
+
|
|
98
|
+
Experimental MCP Apps show an interactive token inspector and project-built
|
|
99
|
+
token, component, pattern and composition scenarios. They use the same public implementations and fixtures
|
|
100
|
+
as the showcase. Text and resource access remain available without Apps support.
|
|
101
|
+
Configure a project preview watcher in `ds.config.json` and MCP manages its
|
|
102
|
+
startup, rebuilds and shutdown; the client launches only `ads mcp`.
|
|
103
|
+
Build status and diagnostics remain readable through tools/resources, with
|
|
104
|
+
notifications for subscribed clients and explicit errors from preview tools.
|
|
105
|
+
See the [MCP guide](docs/MCP.md) for Codex/Claude setup, preview builds, prompts,
|
|
106
|
+
notifications, skill discovery, and the client compatibility limits.
|
|
107
|
+
|
|
108
|
+
To inspect an existing component through MCP:
|
|
109
|
+
|
|
110
|
+
1. `ads_status` identifies the project, public API, commands and preview build state.
|
|
111
|
+
2. `ads_catalog` finds the component and links its owning source, available guides
|
|
112
|
+
and preview IDs. `ads_tokens` explains the values it uses.
|
|
113
|
+
3. `ads_scenarios` finds a preview; `ads_show_scenario` opens the real entry with its
|
|
114
|
+
colocated fixtures. Use `ads_show_tokens` for project-owned token samples.
|
|
115
|
+
4. After a change, check build freshness, run `ads_check` and project checks, then
|
|
116
|
+
verify the refreshed preview and exercise its relevant states.
|
|
117
|
+
|
|
118
|
+
This is what makes ADS useful through MCP: small, structured discovery leads to
|
|
119
|
+
the exact source and real UI. Humans and agents review the same implementation,
|
|
120
|
+
and build reports distinguish current previews from stale or failed output.
|
|
121
|
+
Clients without Apps can inspect text/resources and use the regular showcase.
|
|
122
|
+
|
|
123
|
+
## Showcase
|
|
124
|
+
|
|
125
|
+
The showcase is **a minimal shell plus an MCP client and Apps host**. It ships
|
|
126
|
+
with ADS tooling. Tokens, Components, Patterns and Composition share its header,
|
|
127
|
+
collapsible left menu, theme switch and preview area. Lists come from MCP results;
|
|
128
|
+
selecting an entry renders its real scenario inside one reusable MCP App. The
|
|
129
|
+
App loads shared runtime, CSS, fonts and selected modules through MCP resources.
|
|
130
|
+
All project code and styles stay inside its sandbox; the shell stays neutral.
|
|
131
|
+
The project owns the implementations and colocated scenarios/fixtures.
|
|
132
|
+
|
|
133
|
+
Starting `ads mcp` also starts the local showcase. Open the URL returned by
|
|
134
|
+
`ads_status`; use that existing runtime when an agent is already connected.
|
|
135
|
+
For browser-only use, run inside the project:
|
|
136
|
+
|
|
137
|
+
```sh
|
|
138
|
+
npx @reqvire-org/ads showcase
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
Or use the installed tool through your project script:
|
|
142
|
+
|
|
143
|
+
```sh
|
|
144
|
+
npm run dev:showcase
|
|
145
|
+
# or: bun run dev:showcase
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
For MCP and the showcase together in this checkout, use either command:
|
|
149
|
+
|
|
150
|
+
```sh
|
|
151
|
+
npm run ads-mcp -- --port 4191 # guarded editing enabled
|
|
152
|
+
npm run ads-read-mcp -- --port 4191 # read-only; run one at a time
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
Open **http://127.0.0.1:4191/**. Both commands build the local tool first and
|
|
156
|
+
start stdio MCP, the showcase and the managed preview compiler.
|
|
157
|
+
`dev:showcase` starts the browser-only runtime and also builds the local tool.
|
|
158
|
+
Open the printed URL when choosing another port.
|
|
159
|
+
`--port 4185` chooses a fixed port; the default chooses an available port.
|
|
160
|
+
The title and left pane align; the title toggle hides/restores both. Minimize the
|
|
161
|
+
header for a full preview, then refresh to restore it.
|
|
162
|
+
|
|
163
|
+
A configured project compiler builds a shared scenario graph on first demand
|
|
164
|
+
and watches code, styles, fixtures and assets. The App loads only the selected
|
|
165
|
+
scenario and its dependencies. Notifications update menus and refresh the active
|
|
166
|
+
scenario after a successful build. Failures show diagnostics and identify stale
|
|
167
|
+
output. `ads_tokens` inspects definitions independently of preview builds. Compilation still
|
|
168
|
+
happens automatically; no separate project showcase rebuild is needed.
|
|
169
|
+
|
|
170
|
+
For an existing app, `init` adds the showcase launch script; it does not install
|
|
171
|
+
a preview compiler. Integrate the [starter compiler and mount adapter](docs/GUIDE.md#showcase)
|
|
172
|
+
with your build. The copied empty starter already includes that setup.
|
|
173
|
+
|
|
174
|
+
There are no required showcase page files. Add a colocated scenario and fixture
|
|
175
|
+
for tokens and each public UI owner; larger entries live under `composition/`.
|
|
176
|
+
ADS rejects invented token names, tokens without reachable scenarios, and public
|
|
177
|
+
components/patterns without real render coverage. Development inputs stay out
|
|
178
|
+
of production. Full-app harnesses belong in application tests. See the
|
|
179
|
+
[architecture](docs/ARCHITECTURE.md#the-showcase-is-the-shared-design-workspace),
|
|
180
|
+
[contract](docs/ADS.md#showcase-contract) and [setup guide](docs/GUIDE.md#showcase).
|
|
181
|
+
|
|
182
|
+
## Branding
|
|
183
|
+
|
|
184
|
+
Change values in `design-system/tokens/`, keeping the
|
|
185
|
+
[shared token names](docs/ADS.md#shared-token-contract), such as `--accent` and
|
|
186
|
+
`--font-sans`.
|
|
187
|
+
|
|
188
|
+
Keep original artwork and its usage/credits in `design-system/assets/brand/`.
|
|
189
|
+
To generate web icons, add this to `ds.config.json`:
|
|
190
|
+
|
|
191
|
+
```json
|
|
192
|
+
{ "assets": { "iconSource": "assets/brand/app-icon.svg" } }
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
After init, your normal build generates favicon SVG/ICO, an Apple touch icon,
|
|
196
|
+
and 192/512px icons in ignored `.ds/assets/`. Mount that directory using your
|
|
197
|
+
app's bundler. With no icon source, generation is skipped. See the
|
|
198
|
+
[branding guide](docs/GUIDE.md#branding) for outputs and build order.
|
|
199
|
+
|
|
200
|
+
## Import and design with skills
|
|
201
|
+
|
|
202
|
+
Install skills with `npx skills`:
|
|
203
|
+
|
|
204
|
+
```sh
|
|
205
|
+
npx skills add reqvire-org/ads --skill ads-designer --skill ads-import --skill ads-assimilate --skill ads-break-ui --skill ads-motion
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
For local development, install from this checkout:
|
|
209
|
+
|
|
210
|
+
```sh
|
|
211
|
+
npx skills add ./skills --skill ads-designer --skill ads-import --skill ads-assimilate --skill ads-break-ui --skill ads-motion
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
Acknowledgments: `ads-designer`'s craft/mobile guidance, `ads-break-ui`, and
|
|
215
|
+
`ads-motion` adapt [Emil Kowalski's MIT-licensed skills](https://github.com/emilkowalski/skills).
|
|
216
|
+
Their local [designer](skills/ads-designer/README.md),
|
|
217
|
+
[break-ui](skills/ads-break-ui/README.md), and [motion](skills/ads-motion/README.md)
|
|
218
|
+
credits record the sources and revision. Each skill keeps the upstream MIT
|
|
219
|
+
notice beside its files.
|
|
220
|
+
|
|
221
|
+
- [ads-designer](skills/ads-designer/SKILL.md): start an ADS or build UI with your local ADS.
|
|
222
|
+
- [ads-import](skills/ads-import/SKILL.md): import external components, patterns, styles, token values, or brand artwork.
|
|
223
|
+
- [ads-assimilate](skills/ads-assimilate/SKILL.md): implement a native component inspired by an external library.
|
|
224
|
+
- [ads-break-ui](skills/ads-break-ui/SKILL.md): stress-test real components and patterns with difficult content.
|
|
225
|
+
- [ads-motion](skills/ads-motion/SKILL.md): implement, review, audit, or profile component animation.
|
|
226
|
+
|
|
227
|
+
See the [skill guide](skills/README.md) for examples and source credits.
|
|
228
|
+
|
|
229
|
+
**There is no CLI `ads import` command yet.** Import uses the skill:
|
|
230
|
+
|
|
231
|
+
```text
|
|
232
|
+
$ads-import /path/to/source-repo component Toast
|
|
233
|
+
$ads-import /path/to/source-repo tokens
|
|
234
|
+
$ads-import /path/to/source-repo brand
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
## Development and references
|
|
238
|
+
|
|
239
|
+
To develop ADS itself against another project, use the
|
|
240
|
+
[npm link workflow](docs/GUIDE.md#develop-ads-locally). Consumer setup above uses the
|
|
241
|
+
published package; local development uses your linked checkout.
|
|
242
|
+
|
|
243
|
+
To try the ADS MCP tools and experimental widgets locally:
|
|
244
|
+
|
|
245
|
+
```sh
|
|
246
|
+
npm run dev:mcp-explorer
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
Open **http://127.0.0.1:4190/**. It connects automatically and lets you render
|
|
250
|
+
real token/component/pattern/composition Apps, switch themes, inspect build errors, and
|
|
251
|
+
try tools, resources, prompts and skills. See the
|
|
252
|
+
[MCP explorer guide](mcp-explorer/README.md) for the small test flow.
|
|
253
|
+
|
|
254
|
+
This repository uses its own local ADS to try ideas and verify the complete flow.
|
|
255
|
+
The showcase is the visual/interaction review surface; automated tests also
|
|
256
|
+
check tool behavior and the example build:
|
|
257
|
+
|
|
258
|
+
```sh
|
|
259
|
+
npm test # Tool guards and packed npm install/build tests
|
|
260
|
+
npm run build:project # ADS guards, type checking, example build and showcase
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
Set `ADS_TEST_BUN=1` when running `npm test` to include packed Bun install/build
|
|
264
|
+
tests.
|
|
265
|
+
|
|
266
|
+
Tool source lives in `src/`; tests and the dummy project live in `tests/`.
|
|
267
|
+
|
|
268
|
+
See the [tooling contract](docs/ADS.md) and [tool guide](docs/GUIDE.md) for enforcement
|
|
269
|
+
and setup.
|
|
270
|
+
The [dummy project](tests/fixtures/guard-project/README.md) tests the generic guards with passing and failing cases.
|
|
271
|
+
|
|
272
|
+
There are two different starting points in this checkout:
|
|
273
|
+
|
|
274
|
+
- [bootstrap-ds/](bootstrap-ds/README.md) is an empty React application starter:
|
|
275
|
+
token defaults, build setup, empty component/pattern folders, and a project preview compiler adapter. It is bundled with `ads-designer` so an agent can copy it when starting
|
|
276
|
+
from zero. `ads init` uses its empty foundation files when a project has no ADS.
|
|
277
|
+
- [design-system/](design-system/README.md) is this repository's working example,
|
|
278
|
+
with real components, patterns, and scenarios inspected through the built-in showcase. It demonstrates the architecture
|
|
279
|
+
and helps us develop the tooling. Its UI source is excluded from the npm package
|
|
280
|
+
and is not automatically copied into projects.
|
|
281
|
+
|
|
282
|
+
Licensed under [MIT](LICENSE). Adapted third-party material retains its upstream
|
|
283
|
+
notices.
|
|
284
|
+
|
|
2
285
|
|
|
3
|
-
This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
|
package/dist/assets.mjs
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { existsSync, lstatSync, readdirSync } from "node:fs";
|
|
2
|
+
import { spawnSync } from "node:child_process";
|
|
3
|
+
import path from "node:path";
|
|
4
|
+
import { isInside } from "./config.mjs";
|
|
5
|
+
import { brandFiles, brandSourceDiagnostic } from "./brand-assets.mjs";
|
|
6
|
+
|
|
7
|
+
function assetFiles(directory, prefix = "") {
|
|
8
|
+
const stat = lstatSync(directory, { throwIfNoEntry: false });
|
|
9
|
+
if (!stat || stat.isSymbolicLink() || !stat.isDirectory()) return [];
|
|
10
|
+
const files = [];
|
|
11
|
+
for (const entry of readdirSync(directory, { withFileTypes: true })) {
|
|
12
|
+
if (entry.isSymbolicLink()) continue;
|
|
13
|
+
const relative = prefix ? `${prefix}/${entry.name}` : entry.name;
|
|
14
|
+
if (entry.isDirectory()) files.push(...assetFiles(path.join(directory, entry.name), relative));
|
|
15
|
+
else if (entry.isFile()) files.push(relative);
|
|
16
|
+
}
|
|
17
|
+
return files.sort();
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export function inspectAssets({ root, dsRoot, config, trackingRoot = root }) {
|
|
21
|
+
const diagnostics = [];
|
|
22
|
+
const sourceDiagnostic = brandSourceDiagnostic({ root, dsRoot, config });
|
|
23
|
+
if (sourceDiagnostic) diagnostics.push(sourceDiagnostic);
|
|
24
|
+
function report(rule, file, message) { diagnostics.push({ rule, file: path.relative(root, file).replaceAll("\\", "/") || ".", line: 1, column: 1, message }); }
|
|
25
|
+
const assetRoot = path.join(dsRoot, "assets");
|
|
26
|
+
// Every mount is compared with the canonical ADS assets. Public mounts are
|
|
27
|
+
// independent consumers and may legitimately share a filename with each other.
|
|
28
|
+
const owned = new Set(assetFiles(assetRoot));
|
|
29
|
+
const mounts = [...new Set([path.join(dsRoot, "showcase/public/assets"), ...config.assets.publicDirs.map((directory) => path.resolve(root, directory))])].filter((directory) => directory !== assetRoot);
|
|
30
|
+
for (const directory of [assetRoot, ...mounts]) {
|
|
31
|
+
for (const file of assetFiles(directory)) {
|
|
32
|
+
if (config.assets.generatedFiles.includes(file)) report("asset-generated", path.join(directory, file), "Generated assets must be produced by the build, not kept in source asset directories.");
|
|
33
|
+
if (config.assets.iconSource && brandFiles.includes(file)) report("asset-collision", path.join(directory, file), `Asset ${file} conflicts with a generated brand output. Keep this mount's source in assets/brand/ and generate the variant.`);
|
|
34
|
+
if (directory !== assetRoot && owned.has(file)) report("asset-collision", path.join(directory, file), `Asset ${file} also exists in ${path.relative(root, assetRoot)}. Keep one source owner for this mount.`);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
const tracked = spawnSync("git", ["ls-files", "-z", "--", "."], { cwd: trackingRoot, encoding: "utf8" });
|
|
38
|
+
if (tracked.status !== 0) {
|
|
39
|
+
// Let Git decide its discovery boundary: a .git above a mount point is
|
|
40
|
+
// not necessarily this project's repository. Non-Git projects have no
|
|
41
|
+
// tracked output to inspect; actual inspection failures remain errors.
|
|
42
|
+
if (tracked.status === 128 && /not a git repository/i.test(tracked.stderr ?? "")) return diagnostics;
|
|
43
|
+
report("asset-inspection", root, `Cannot inspect tracked build outputs: ${tracked.error?.message ?? tracked.stderr.trim()}`);
|
|
44
|
+
return diagnostics;
|
|
45
|
+
}
|
|
46
|
+
const generated = [...config.assets.generatedPaths.map((entry) => path.resolve(root, entry)), path.join(root, ".ds"), path.join(dsRoot, "dist-kit"), path.join(dsRoot, "dist-showcase")];
|
|
47
|
+
for (const file of tracked.stdout.split("\0").filter(Boolean)) {
|
|
48
|
+
const absolute = path.resolve(root, file);
|
|
49
|
+
if ((existsSync(absolute) || trackingRoot !== root && existsSync(path.resolve(trackingRoot, file))) && generated.some((directory) => isInside(directory, absolute))) report("tracked-generated", absolute, "Generated build output is tracked as source. Ignore the configured generated path.");
|
|
50
|
+
}
|
|
51
|
+
return diagnostics;
|
|
52
|
+
}
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
# Design-system contract
|
|
2
|
+
|
|
3
|
+
This is the local contract for the copied starter. The project owns its source,
|
|
4
|
+
token values, and branding. Tool updates preserve those values and customized
|
|
5
|
+
code; source and theme imports are explicit operations.
|
|
6
|
+
|
|
7
|
+
For the architectural rationale, see the
|
|
8
|
+
[ADS architecture](https://github.com/reqvire-org/ads/blob/main/docs/ARCHITECTURE.md).
|
|
9
|
+
The rules and commands needed to use this starter are included locally.
|
|
10
|
+
|
|
11
|
+
## Ownership
|
|
12
|
+
|
|
13
|
+
| Layer | Owns | Location |
|
|
14
|
+
|-------|------|----------|
|
|
15
|
+
| Tokens | Colors, typography, spacing, radii, motion, elevation | `tokens/` |
|
|
16
|
+
| Primitives | Generic controls, states, interaction and accessibility | `components/` |
|
|
17
|
+
| Patterns | Reusable layout and composition | `patterns/` |
|
|
18
|
+
| Scenarios | Colocated development entries and inputs | Beside their owner; larger entries in `composition/` |
|
|
19
|
+
| Showcase host | Navigation and MCP client | Packaged ADS tooling |
|
|
20
|
+
| Preview compiler adapter | Framework mount/unmount and foundation imports | `showcase/mcp/` |
|
|
21
|
+
| Application | Domain data, routing, effects and callbacks | Consuming application |
|
|
22
|
+
|
|
23
|
+
The starter declares React in `ds.config.json`. Keep that choice, JSX, runtime
|
|
24
|
+
dependencies and the preview mount adapter consistent. Init records a choice for
|
|
25
|
+
an unconfigured project; it does not convert copied React source to Preact.
|
|
26
|
+
|
|
27
|
+
The starter has no components or patterns yet. Add only what the product needs.
|
|
28
|
+
Keep the ADS in root `design-system/`, beside application `src/`.
|
|
29
|
+
Keep public exports in `design-system/index.ts`; consumers use its `@ds` alias.
|
|
30
|
+
`styles.css` is the foundation CSS entry and contains token imports only.
|
|
31
|
+
|
|
32
|
+
## Visual and interaction policy
|
|
33
|
+
|
|
34
|
+
Use semantic CSS tokens for visual values. Raw values belong in the token files.
|
|
35
|
+
Projects sharing this ADS use the same token names, meanings, and value types;
|
|
36
|
+
their concrete values and theme overrides can differ. Reuse existing local values
|
|
37
|
+
when importing components/patterns, add missing shared definitions, and import
|
|
38
|
+
source token values only when adopting that theme is requested.
|
|
39
|
+
Token names and prefixes are fixed by ADS architecture; foreign brand prefixes
|
|
40
|
+
are rejected. Shared assignments belong in token files. Components own
|
|
41
|
+
`--ds-*`, patterns `--ux-*`, and the showcase `--showcase-*`; token files cannot
|
|
42
|
+
assign those local variables or override component state.
|
|
43
|
+
Own primitive markup, focus, hover, selected, disabled, loading, and motion in
|
|
44
|
+
the primitive. Use typed props for variations. Keep reusable structure and skin
|
|
45
|
+
in colocated Linaria blocks using `css` and `cx` from `@linaria/atomic`.
|
|
46
|
+
Linaria is required for component and pattern styling. This starter already
|
|
47
|
+
configures extraction in both builds; `ads init` does not install or configure it.
|
|
48
|
+
|
|
49
|
+
Use `ads-*` classes and `--ds-*` variables for primitives, and `ux-*` for patterns,
|
|
50
|
+
including the ADS-owned frame. Scenario files define no CSS or custom
|
|
51
|
+
class names and must not target component internals. Avoid inline visual styles and arbitrary visual
|
|
52
|
+
string props. Omit `style` from inherited DOM prop types. Document narrow measured
|
|
53
|
+
geometry exceptions if a component needs them.
|
|
54
|
+
|
|
55
|
+
Use semantic HTML and test relevant keyboard/focus behavior. Motion should
|
|
56
|
+
consume duration/easing tokens and respect reduced motion. Brand changes belong
|
|
57
|
+
in tokens or documented component hooks. The starter uses system fonts and has
|
|
58
|
+
no icon component; add a shared icon primitive when it is needed.
|
|
59
|
+
|
|
60
|
+
## Showcase
|
|
61
|
+
|
|
62
|
+
The showcase is a minimal shell plus an MCP client and Apps host, shipped with
|
|
63
|
+
ADS tooling. It discovers token/component/pattern/composition
|
|
64
|
+
scenarios from MCP tool results, invokes preview tools and responds to resource
|
|
65
|
+
notifications. The project does not author a second catalogue or browser app.
|
|
66
|
+
|
|
67
|
+
`ads mcp` starts the loopback website alongside stdio. Open the URL returned by
|
|
68
|
+
`ads_status`. Without an agent connection, `ads showcase` starts the same runtime
|
|
69
|
+
for browser use. Both transports share one configured preview compiler.
|
|
70
|
+
|
|
71
|
+
The shell owns section tabs, collapsible navigation, theme controls and the App
|
|
72
|
+
slot. Components, patterns, token values, scenarios, fixtures and their Linaria
|
|
73
|
+
styles remain project-owned. Only the sandboxed App loads and applies project
|
|
74
|
+
runtime, CSS and fonts, through MCP resources. App presentation comes from the
|
|
75
|
+
selected compiled scenario; reusable review layouts live in public ADS patterns. Do not recreate
|
|
76
|
+
production widgets inside the client or scenario.
|
|
77
|
+
|
|
78
|
+
There are four sections: Tokens, Components, Patterns and Composition. There are
|
|
79
|
+
no required `TokensPage`/`ComponentsPage`/`PatternsPage`/`CompositionPage` files.
|
|
80
|
+
Legacy custom browsing pages remain checked when present, but new projects use
|
|
81
|
+
the built-in client. Its tooling CSS is separate from the project style contract.
|
|
82
|
+
|
|
83
|
+
The shared resource compiler builds one graph for all discovered scenarios on
|
|
84
|
+
first demand. Selections reuse the App and load their dependency closure. The
|
|
85
|
+
project's `mountScenario(Scenario, container)` adapter returns an unmount callback
|
|
86
|
+
that releases owned roots, listeners, timers, portals and workers. Switching or
|
|
87
|
+
rebuilding a scenario resets its state while retaining unchanged shared modules.
|
|
88
|
+
Host context selects the project theme; it does not replace the project's skin.
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
Colocate development entries and fixture inputs:
|
|
92
|
+
|
|
93
|
+
```text
|
|
94
|
+
design-system/
|
|
95
|
+
tokens/
|
|
96
|
+
typography.css
|
|
97
|
+
Typography.scenario.tsx
|
|
98
|
+
Typography.fixture.ts
|
|
99
|
+
components/core/Button/
|
|
100
|
+
Button.tsx
|
|
101
|
+
Scenario.tsx
|
|
102
|
+
fixture.ts
|
|
103
|
+
patterns/Editor/
|
|
104
|
+
Editor.tsx
|
|
105
|
+
Scenario.tsx
|
|
106
|
+
fixture.ts
|
|
107
|
+
composition/Workspace/
|
|
108
|
+
Scenario.tsx
|
|
109
|
+
fixture.ts
|
|
110
|
+
showcase/mcp/ Project compiler adapter
|
|
111
|
+
main.tsx
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Flat owners may use `Button.scenario.tsx` and `Button.fixture.ts` instead.
|
|
115
|
+
`Scenario.tsx` exports a default independently mountable view and literal metadata
|
|
116
|
+
`export const scenario = { title: "Button states", covers: ["Button"] };`.
|
|
117
|
+
Token entries under the configured token directory also declare `tokens`:
|
|
118
|
+
`export const scenario = { title: "Typography", covers: ["TokenSamples"], tokens: fixture.tokens };`.
|
|
119
|
+
Metadata may read literal const fixture fields; it cannot run expressions,
|
|
120
|
+
functions, wildcard lists or token discovery. The same fixture list must be
|
|
121
|
+
consumed by the default entry. `covers: []` is valid for a minimal token value
|
|
122
|
+
inspection entry without public UI; styled samples use a real public review
|
|
123
|
+
pattern. Names and sample text belong to the fixture, values to foundation CSS.
|
|
124
|
+
It imports real public UI through `@ds` and its local fixture. The adapter supplies
|
|
125
|
+
initial state, callbacks and simulated services. The default entry needs no
|
|
126
|
+
mandatory caller inputs or prior page initialization. Related parts may share a
|
|
127
|
+
scenario containing their required public parent. Larger composition scenarios
|
|
128
|
+
reuse production screen patterns; that screen reuse remains skill guidance.
|
|
129
|
+
|
|
130
|
+
IDs derive from the ADS-relative path: `components/core/Button/Scenario.tsx` and
|
|
131
|
+
`components/core/Button.scenario.tsx` both identify `components/core/Button`.
|
|
132
|
+
Use one form per owner. Renaming moves the ID. No manually assigned ID or parallel
|
|
133
|
+
registry is maintained. Fixture files use `fixture.ts`/`<Owner>.fixture.ts`; JS,
|
|
134
|
+
TSX or JSON equivalents are supported. An empty fixture is valid without inputs. Extra development helpers use
|
|
135
|
+
`scenario/` or `fixtures/` subfolders, or `<Owner>.scenario-adapter.ts`.
|
|
136
|
+
|
|
137
|
+
`scenario-contract`, `scenario-render` and `scenario-coverage` checks require valid
|
|
138
|
+
entries and reachable public render references for every public renderable
|
|
139
|
+
component/pattern, including unused exports and Linaria styled exports. Types, constants and utility functions
|
|
140
|
+
are excluded. Coverage is a static source policy; it does not prove runtime
|
|
141
|
+
mounting, correct props, every branch/state or visual parity. The older
|
|
142
|
+
`showcase-coverage` policy also checks application render references.
|
|
143
|
+
|
|
144
|
+
`token-scenario-reference` rejects undeclared token names in metadata and reachable
|
|
145
|
+
inputs. `token-scenario-render` rejects claimed tokens with no reachable input
|
|
146
|
+
reference; `token-scenario-coverage` requires every discovered foundation token
|
|
147
|
+
to have coverage. A new or removed token therefore needs a scenario/fixture
|
|
148
|
+
update. All three are errors in `ads check`, run by `lint:ds` and the build.
|
|
149
|
+
Coverage is static reachability, not proof that every branch actually renders
|
|
150
|
+
or applies the right CSS property. Browser review still verifies the samples.
|
|
151
|
+
|
|
152
|
+
Scenarios and fixture helpers are development-only wherever colocated. Runtime
|
|
153
|
+
source and the public barrel cannot import or re-export them. Showcase/scenario
|
|
154
|
+
code defines no CSS, custom classes or native controls; use public ADS APIs.
|
|
155
|
+
Neither ADS implementations nor scenarios import application code. Live business
|
|
156
|
+
data belongs to application adapters; ADS receives inputs or injected callbacks.
|
|
157
|
+
Direct global `fetch`, XHR, WebSocket and EventSource use is rejected. Renderer
|
|
158
|
+
workers, lazy imports and injected services remain supported; custom HTTP clients
|
|
159
|
+
and computed API access need project checks and review.
|
|
160
|
+
|
|
161
|
+
Tests may import local fixtures. Load real foundation CSS in DOM/browser tests
|
|
162
|
+
instead of assigning shared tokens in JavaScript. Full application harnesses
|
|
163
|
+
belong in application test support. Run ADS/project checks before application,
|
|
164
|
+
preview builds; review meaningful states in both themes and sizes.
|
|
165
|
+
|
|
166
|
+
## Branding
|
|
167
|
+
|
|
168
|
+
Keep original artwork, variants, usage, credits, and licenses in
|
|
169
|
+
`design-system/assets/brand/`. This starter has only guidance there, no artwork.
|
|
170
|
+
Font assets belong in `assets/fonts/`; add optional `tokens/fonts.css` first in
|
|
171
|
+
the import-only foundation entry. The fixed import order is fonts (when
|
|
172
|
+
present), colors, typography, spacing, elevation, base.
|
|
173
|
+
|
|
174
|
+
Select an SVG with `assets.iconSource` in `ds.config.json`, relative to the ADS
|
|
175
|
+
folder. Initialized builds run checks and Oxlint, then `ads assets`, then existing
|
|
176
|
+
build steps. Standard icons go into ignored `.ds/assets/`; integrate that
|
|
177
|
+
directory with the application's asset mount and reject duplicate paths.
|
|
178
|
+
Application metadata and custom platform exports remain project-owned. See
|
|
179
|
+
[brand guidance](design-system/assets/brand/README.md).
|
|
180
|
+
|
|
181
|
+
## Component guides and rules
|
|
182
|
+
|
|
183
|
+
Keep detailed API, examples, interactions, token hooks, tests, and source credits
|
|
184
|
+
in a README beside the component. When adapting another library, record its
|
|
185
|
+
version, author, links, concrete influences, and agreed differences. Shared
|
|
186
|
+
architecture belongs here rather than duplicating each component contract.
|
|
187
|
+
|
|
188
|
+
General Oxlint and Biome CSS checks are included. They do not enforce the entire
|
|
189
|
+
ownership or token contract. Add component-local lint only for concrete,
|
|
190
|
+
statically provable misuse; register tooling centrally and keep it outside the
|
|
191
|
+
runtime barrel. Core checks must work without any particular component library.
|
|
192
|
+
Use configured token and ownership guards as the system grows; bring applicable
|
|
193
|
+
component-specific rules with an external item and register them in project
|
|
194
|
+
tooling. Configure project plugins, rules, and scoped `oxlint.overrides` in
|
|
195
|
+
`ds.config.json`. Overrides configure Oxlint, not independent `ads check` policies.
|
|
196
|
+
Use explicit `boundaries` for documented renderer properties and non-state hooks.
|
|
197
|
+
|
|
198
|
+
## Verification
|
|
199
|
+
|
|
200
|
+
Run `npm run build` after adding or changing components. Add meaningful tests
|
|
201
|
+
for stateful behavior, accessibility, gestures, or async lifecycle where needed.
|
|
202
|
+
Run `npm run dev` to inspect the real showcase. A screenshot alone does not
|
|
203
|
+
verify interaction or animation. Generated output and dependencies are not source.
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# Empty native design system
|
|
2
|
+
|
|
3
|
+
This private React/TypeScript workspace contains semantic CSS tokens, an empty
|
|
4
|
+
public barrel, Linaria extraction and a project preview compiler adapter. It has
|
|
5
|
+
no components, patterns, icons, fonts or example screens. The minimal showcase
|
|
6
|
+
shell and MCP client come from ADS tooling.
|
|
7
|
+
|
|
8
|
+
Read the local [contract](ADS.md) and the
|
|
9
|
+
[architecture](https://github.com/reqvire-org/ads/blob/main/docs/ARCHITECTURE.md).
|
|
10
|
+
|
|
11
|
+
## Start
|
|
12
|
+
|
|
13
|
+
Copy the contents of `bootstrap-ds/`, including dotfiles, into a new project.
|
|
14
|
+
The installed `ads-designer` skill contains the same files in
|
|
15
|
+
`assets/bootstrap-ds/`. Set the project name in `package.json`. Use Node 22.12 or
|
|
16
|
+
newer and ADS 0.3 or later for the shared-resource preview compiler.
|
|
17
|
+
|
|
18
|
+
```sh
|
|
19
|
+
npx @reqvire-org/ads init --framework react
|
|
20
|
+
npm install
|
|
21
|
+
npm run build
|
|
22
|
+
npm run dev:showcase
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
For unreleased tooling, run init using the real local package:
|
|
26
|
+
|
|
27
|
+
```sh
|
|
28
|
+
ads_tool_package="/absolute/path/to/reqvire-org-ads-0.3.0.tgz"
|
|
29
|
+
npx --yes --package "$ads_tool_package" ads init --framework react --tool-package "$ads_tool_package"
|
|
30
|
+
npm install
|
|
31
|
+
npm run build
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
For a new Bun workspace, declare Bun in `packageManager`, omit the copied npm
|
|
35
|
+
lockfile and translate nested npm scripts to `bun run`. Init detects existing
|
|
36
|
+
Bun projects and preserves their scripts/lockfiles. Use `bun install` and
|
|
37
|
+
`bun run build`/`bun run dev:showcase`. The supplied preview watcher launches Node
|
|
38
|
+
directly and runs the project's installed checks.
|
|
39
|
+
|
|
40
|
+
For an existing application, merge only the ADS source and required extraction,
|
|
41
|
+
aliases and preview adapter. Preserve its framework, entry points and build.
|
|
42
|
+
The starter declares `"framework": "react"` in `ds.config.json`. For an existing
|
|
43
|
+
native Preact app without a saved ADS framework, use `ads init --framework preact`.
|
|
44
|
+
Init records that choice and generates native hook imports without migrating the
|
|
45
|
+
app or rewriting its compiler. Subsequent init runs reuse the saved choice.
|
|
46
|
+
Init adds missing foundation files and connects architectural checks; it does
|
|
47
|
+
not configure Linaria or generate component source. Generated `.ds/` files are
|
|
48
|
+
ignored; original artwork and provenance belong in `assets/brand/`.
|
|
49
|
+
|
|
50
|
+
## Inspect and add UI
|
|
51
|
+
|
|
52
|
+
When an agent already runs `ads mcp`, open its `ads_status.showcaseUrl`. MCP starts
|
|
53
|
+
the website automatically. Otherwise `npm run dev:showcase` runs `ads showcase`.
|
|
54
|
+
Its shell is minimal: tabs, collapsible left menu, theme switch and App slot.
|
|
55
|
+
Its MCP client discovers entries, invokes preview tools and follows notifications.
|
|
56
|
+
There are no required TokensPage/ComponentsPage/PatternsPage/CompositionPage
|
|
57
|
+
files, and no separate project browser app to implement or rebuild.
|
|
58
|
+
|
|
59
|
+
The existing `tokens/Foundation.scenario.tsx` and colocated fixture inspect all
|
|
60
|
+
starter token values. Add/remove fixture names alongside token definitions;
|
|
61
|
+
`ads check` rejects missing coverage and invented names. Styled token samples
|
|
62
|
+
belong to your public review patterns and mount through the same scenario pipeline.
|
|
63
|
+
|
|
64
|
+
Create a component under `design-system/components/`, export it through `@ds`,
|
|
65
|
+
and colocate `Scenario.tsx` plus `fixture.ts` (or `<Owner>.scenario.tsx` and
|
|
66
|
+
`<Owner>.fixture.ts`). Reusable compositions belong under `patterns/`; larger
|
|
67
|
+
scenarios live under `composition/`. Each entry mounts independently with its
|
|
68
|
+
fixture inputs and state/callback adapter. Use public ADS APIs and owned Linaria
|
|
69
|
+
styles, keeping business data/services in the application.
|
|
70
|
+
|
|
71
|
+
`ds.config.json` configures the supplied Vite watcher. It builds all discovered
|
|
72
|
+
scenarios into one shared resource graph on first demand and watches owner code,
|
|
73
|
+
styles, fixtures and assets. The App loads the selected dependency closure and
|
|
74
|
+
reuses unchanged runtime/CSS/font resources across selections. The MCP client
|
|
75
|
+
refreshes successful revisions inside that App; failures show diagnostics and
|
|
76
|
+
stale retained output. Switching or rebuilding a scenario unmounts its previous
|
|
77
|
+
state. `showcase/mcp/main.tsx` exports `mountScenario(Scenario, container)` and
|
|
78
|
+
returns an unmount callback; it is not the shell. Keep the saved `framework`,
|
|
79
|
+
compiler and mount adapter consistent.
|
|
80
|
+
|
|
81
|
+
The application and previews use the same foundation CSS and Linaria pipeline.
|
|
82
|
+
The source barrel loads the foundation once. The private `build:lib` script uses
|
|
83
|
+
Vite library mode plus declarations as a source compile check; this is not a
|
|
84
|
+
published UI library. General CSS checks use pinned Biome; architectural and
|
|
85
|
+
registered component checks come from initialized ADS tooling.
|
|
86
|
+
|
|
87
|
+
Detailed public API, behavior, tokens, tests, credits and notices belong in each
|
|
88
|
+
owner's local README. The starter values and system fonts are defaults; the
|
|
89
|
+
receiving project owns their identity. Import/adapt additional source explicitly
|
|
90
|
+
from a user-selected external repository, preserving revisions and licenses.
|
|
91
|
+
|
|
92
|
+
## Validation
|
|
93
|
+
|
|
94
|
+
`npm run build` runs lint, type checking and the public-source compile check.
|
|
95
|
+
`npm run build:showcase` optionally prebuilds the shared preview graph; normal
|
|
96
|
+
inspection builds it automatically, then loads selected entries. Browser review
|
|
97
|
+
still checks layout, accessibility, keyboard/focus, states, themes and motion. A clean
|
|
98
|
+
build or delivered HTML alone does not establish those behaviors.
|