@ai.all/ds7 0.0.0-stage → 2.0.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/01-architecture/ATOMIC-DESIGN.md +68 -0
- package/01-architecture/COMPONENT-ANATOMY.md +101 -0
- package/01-architecture/MODIFIER-SYSTEM.md +90 -0
- package/02-design-system/BRANDBOOK-SANDBOX.md +52 -0
- package/02-design-system/NAMING-CONVENTIONS.md +45 -0
- package/02-design-system/TOKENS-SPEC.md +102 -0
- package/03-performance-web-vitals/ASSETS-PIPELINE.md +62 -0
- package/03-performance-web-vitals/CRITICAL-CSS.md +39 -0
- package/03-performance-web-vitals/FONTS-ZERO-CLS.md +59 -0
- package/03-performance-web-vitals/HYDRATION-STRATEGY.md +68 -0
- package/04-seo-ai-optimization/AEO-GEO-AI-SEARCH.md +53 -0
- package/04-seo-ai-optimization/GOOGLE-LOCAL-EEAT.md +36 -0
- package/04-seo-ai-optimization/STRUCTURED-DATA.md +95 -0
- package/05-internationalization/I18N-ARCHITECTURE.md +59 -0
- package/05-internationalization/LOCALE-TEMPLATE.json +33 -0
- package/06-business-conversion/B2C-B2B-MODELS.md +37 -0
- package/06-business-conversion/CONTEXTUAL-LEADS.md +45 -0
- package/06-business-conversion/EV-SOLAR-ECOSYSTEM.md +38 -0
- package/07-testing/TESTING-STRATEGY.md +95 -0
- package/08-token-optimization/TOKEN-STRATEGY.md +100 -0
- package/ALL.md +232 -0
- package/CHANGELOG.md +27 -0
- package/LICENSE +21 -0
- package/README.md +118 -2
- package/SPEC.md +102 -0
- package/bin/ds7.js +224 -0
- package/package.json +61 -4
- package/templates/component.vue +116 -0
- package/templates/nuxt.config.ts +64 -0
- package/templates/theme.css +55 -0
package/ALL.md
ADDED
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
# ALL.md — Agent Rules for DS7 Projects
|
|
2
|
+
|
|
3
|
+
> **How it fits with AI-ALL.** [AI-ALL](https://github.com/ai-all-ai/aiall) (`@ai.all/aiall`) creates the agent entrypoints and the routing file, and keeps them in sync. This document is delivered to agents as the `ds7` pack of AI-ALL. AI-ALL works without DS7; for web projects, install both.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
> Single source of truth for every AI agent working in a DS7 project (Claude, Gemini, Codex, Copilot, Cursor, Windsurf, ChatGPT).
|
|
7
|
+
> Read this file completely before changing anything. Other files in `ds7/` explain *why* a rule exists; this file says *what to do*.
|
|
8
|
+
> Project-specific rules live in the root `ALL.md`, below the AI-ALL packs block (`<!-- aiall:begin packs -->` to `<!-- aiall:end packs -->`). AI-ALL keeps that text on sync. Where project rules and this file disagree, the project rules win for that project and the disagreement is recorded in `docs/DECISIONS.md`.
|
|
9
|
+
> This file is the `ds7` pack of AI-ALL. The root `ALL.md` lists it in the packs block. Every entrypoint (`AGENTS.md`, `CLAUDE.md`, `GEMINI.md`, `.cursor/rules/*`, `.windsurf/rules/*`, `.github/copilot-instructions.md`) points to the root `ALL.md`. Sync them with `npx @ai.all/aiall sync`.
|
|
10
|
+
|
|
11
|
+
**Version:** 1.1.0 · **Stack:** Nuxt 4, Vue 3 `<script setup lang="ts">`, Tailwind CSS v4, `@nuxtjs/i18n`, static generation.
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## 0. Ground rules (apply to everything below)
|
|
16
|
+
|
|
17
|
+
1. **Read before writing.** Read the file you change and its direct callers. Do not read whole folders.
|
|
18
|
+
2. **Smallest correct change.** Fix the cause in one place. Do not refactor around a bug you were not asked to fix.
|
|
19
|
+
3. **Describe reality.** Docs, comments, tests and UI copy state what the code does today. No marketing claims, no unmeasured numbers presented as facts.
|
|
20
|
+
4. **No junk in the repo.** No scratch files, debug logs, screenshots, backups or generated reports in tracked folders. Temporary work goes to a scratch directory outside the repo.
|
|
21
|
+
5. **Ask only when it changes the outcome.** Otherwise pick the most reasonable option, do it, and say what you chose.
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## 0.1 Build order: brand first, then components
|
|
26
|
+
|
|
27
|
+
New projects and new sections are built **top-down from the brand**, never by styling pages one by one:
|
|
28
|
+
|
|
29
|
+
1. **Foundations** (`theme.css`): colour, type scale, spacing, radius, shadow, breakpoints, z-index. Written as named tokens, with the W3C Design Tokens format (`$value`, `$type`) as the interchange shape if tools need it.
|
|
30
|
+
2. **Brandbook** (`/ui` sandbox): every foundation token shown, then the base atoms (`BTN-01`, `BTN-02`, `CTL-01`, `COUNTER-01`, `PRICE-01`) with their modifiers, states and contrast on light and dark backgrounds.
|
|
31
|
+
3. **Atoms and molecules** built from the brandbook only. A component that is not in the sandbox is not finished.
|
|
32
|
+
4. **Organisms and sections** composed from molecules.
|
|
33
|
+
5. **Pages** assembled from sections, with data from `app/data/`.
|
|
34
|
+
|
|
35
|
+
Rules that follow from this order:
|
|
36
|
+
|
|
37
|
+
- A new colour, size or spacing value is added to the foundations first. Components never introduce a raw value.
|
|
38
|
+
- A new pattern is added to the brandbook first, then used. If a page needs something that does not exist, add it to the brandbook, then use it.
|
|
39
|
+
- Changing a token changes the brandbook, which is the visual regression reference.
|
|
40
|
+
- The brandbook is the shared vocabulary: people and agents refer to `CARD-01 -top` instead of describing it again.
|
|
41
|
+
|
|
42
|
+
This approach is established practice, not an invention of DS7. Related references: the [W3C Design Tokens Format Module (2025.10)](https://www.w3.org/community/reports/design-tokens/CG-FINAL-format-20251028/) defines the token file format; [Brad Frost's Atomic Design](https://atomicdesign.bradfrost.com/chapter-2/) defines the component levels; design systems such as Salesforce Lightning and Material Design publish foundations and component guidance before components are used in product pages. Token pipelines such as Style Dictionary turn one token file into CSS, iOS and Android values.
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## 1. Languages
|
|
47
|
+
|
|
48
|
+
- **Code, comments, identifiers, commit messages, docs in `ds7/` and `docs/`:** English.
|
|
49
|
+
- **Conversation with the project owner:** the owner's language (unless the owner says otherwise).
|
|
50
|
+
- **Customer-facing text:** only through the i18n layer (`i18n/locales/`). Never hard-code a user-visible string in a component or page.
|
|
51
|
+
- **Business data** (`app/data/`) is separate from UI strings (`i18n/`). Missing translations must fail the build.
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## 2. Components (Atomic Design)
|
|
56
|
+
|
|
57
|
+
Full model: `01-architecture/ATOMIC-DESIGN.md`.
|
|
58
|
+
|
|
59
|
+
| Level | Location | Rule |
|
|
60
|
+
|---|---|---|
|
|
61
|
+
| Atoms | `components/ui/` | No knowledge of pages or business state. Typed props only. |
|
|
62
|
+
| Molecules | `components/ui/` | Built from atoms. Props and slots only. No side effects. |
|
|
63
|
+
| Organisms | `components/ui/`, `components/sections/`, `components/site/` | Own their local state. Work through slots. |
|
|
64
|
+
| Sections / templates | `components/sections/` | Compose organisms. No hard-coded page content. |
|
|
65
|
+
| Pages | `pages/` | Only: fetch data from `app/data/`, set SEO, pass props. **No inline cards, grids or sliders.** |
|
|
66
|
+
|
|
67
|
+
- **Never copy a component for a page.** Vary it with modifiers or with the page class on `<body>`.
|
|
68
|
+
- **Every block works anywhere** (page, sidebar, modal, nested). It must not depend on its parent.
|
|
69
|
+
- **Every reusable pattern has a stable ID** (`CARD-01`, `BTN-01`, …) listed in `02-design-system/BRANDBOOK-SANDBOX.md`. A new pattern without an ID and a sandbox entry is unfinished.
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## 3. CSS naming and modifiers
|
|
74
|
+
|
|
75
|
+
Full rules: `02-design-system/NAMING-CONVENTIONS.md` and `01-architecture/MODIFIER-SYSTEM.md`.
|
|
76
|
+
|
|
77
|
+
- **Base name:** short kebab-case: `.p-card`, `.btn`, `.field`.
|
|
78
|
+
- **Element:** double underscore: `.p-card__title`.
|
|
79
|
+
- **Modifier:** a **separate** class starting with a dash: `.-top`, `.-compact`, `.-lg`. Combine freely: `class="p-card -top -compact"`.
|
|
80
|
+
- **Forbidden:** appending a word to a base name (`.btn-lg`, `.card-big`, `.hero-active`). Use `.btn.-lg`.
|
|
81
|
+
- **State:** `is-` prefix: `.is-open`, `.is-active`, `.is-loading`.
|
|
82
|
+
- **Page context:** `body.page-<slug>` set by `usePageSeo`. Override shared components through that class or through CSS custom properties. Never through a new file.
|
|
83
|
+
- **Colour in components:** tokens only (`var(--color-…)`). No raw hex or `rgb()` in component CSS.
|
|
84
|
+
- **Yellow accent (`--color-sun`) is never text.** It is a fill, a badge background or a marker.
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
## 4. Responsive layout
|
|
89
|
+
|
|
90
|
+
- **Components** size themselves with `container-type: inline-size` and `@container`, so they work in any slot.
|
|
91
|
+
- **Pages** use the breakpoints defined in `theme.css` (`--bp-*`). Do not invent new ones.
|
|
92
|
+
- **Grids** that cannot fit on a phone switch to two columns below 900 px, or to one column below 480 px. Check at 390, 820 and 1440 px.
|
|
93
|
+
- **No horizontal scroll** on any page at 390 px. Side gutter is 16 px on phones.
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## 5. Images and fonts
|
|
98
|
+
|
|
99
|
+
Full rules: `03-performance-web-vitals/ASSETS-PIPELINE.md`, `FONTS-ZERO-CLS.md`.
|
|
100
|
+
|
|
101
|
+
- **Every image from `public/` goes through the responsive image component** (`UiImg` in the reference project). Raw `<img src="/…">` is allowed only when the component wraps it.
|
|
102
|
+
- **Explicit `width` and `height`** (or an `aspect-ratio` box) on every image. This gives CLS 0.
|
|
103
|
+
- **Lazy by default.** The single LCP image above the fold is `eager` with `fetchpriority="high"`.
|
|
104
|
+
- **Tight trim:** remove transparent padding before export. Ship WebP (and AVIF where it helps). Generate 1x and 2x variants with the asset script; commit the generated manifest.
|
|
105
|
+
- **One preloaded font weight** on the first screen. Fallback font metrics (`size-adjust`, `ascent-override`, …) so swapping fonts moves nothing.
|
|
106
|
+
- **Missing asset = build error.** Check every `/images/…` and `/fonts/…` reference against `public/` in the QA gate.
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
## 6. Browser behaviour
|
|
111
|
+
|
|
112
|
+
- **Media with sound never starts silently on its own.** Autostart only after a real user activation (`pointerdown`, `keydown`, `touchend`) and only if the visitor did not switch it off. Store the visitor's choice explicitly. Probe on reload whether the browser allows playback.
|
|
113
|
+
- **Browser storage is listed** in `docs/ARCHITECTURE.md` (key, value shape, owner). Every read and write is wrapped in `try/catch`. The page must still render when storage is blocked.
|
|
114
|
+
- **Consent** is stored under one key, documented, and respected by every third-party script.
|
|
115
|
+
- **Section navigation** counts only visible sections (`offsetParent !== null`) and recalculates on resize.
|
|
116
|
+
- **Non-critical widgets** (chat, cookie banner, sound, modals) hydrate on idle or on visibility, not on load.
|
|
117
|
+
- **Floating controls** never overlap each other on phones. Offsets come from one variable.
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
## 7. Internationalisation
|
|
122
|
+
|
|
123
|
+
Full rules: `05-internationalization/I18N-ARCHITECTURE.md`.
|
|
124
|
+
|
|
125
|
+
- One hub: `i18n/locales/<code>.ts`. Every locale has the same keys. `i18n-check --strict` must pass.
|
|
126
|
+
- Adding a language = one file plus one entry in the locale list. Nothing else changes.
|
|
127
|
+
- Keys are grouped by component or section (`businessScreens.night.title`). No keys named after pixels or colours.
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
## 8. Accessibility
|
|
132
|
+
|
|
133
|
+
Full rules: `07-testing/TESTING-STRATEGY.md`.
|
|
134
|
+
|
|
135
|
+
- **Target:** WCAG 2.2 AA. Axe reports **0 violations** at 390, 820 and 1440 px on every page.
|
|
136
|
+
- **Text contrast:** at least 4.5:1 for body text, 3:1 for large text and UI borders.
|
|
137
|
+
- **Every interactive element** is reachable by keyboard, has a visible focus style and a name.
|
|
138
|
+
- **Icons-only buttons** have an accessible name. Decorative images have `alt=""`.
|
|
139
|
+
- **Contrast is measured**, not estimated, when a palette changes.
|
|
140
|
+
|
|
141
|
+
---
|
|
142
|
+
|
|
143
|
+
## 9. SEO and AI search
|
|
144
|
+
|
|
145
|
+
Full rules: `04-seo-ai-optimization/`.
|
|
146
|
+
|
|
147
|
+
- Each page: one `<h1>`, a unique title and description, canonical URL, `hreflang` for every locale.
|
|
148
|
+
- Explanatory sections open with a **direct answer block** (40–50 words, factual).
|
|
149
|
+
- Structured data is a single `@graph` (`Organization`, `WebSite`, `Product`, `FAQPage`, `BreadcrumbList` as relevant).
|
|
150
|
+
- **Name, address and phone** in structured data match the business profile exactly. Use placeholders in the standard itself; never real contact data in `ds7/`.
|
|
151
|
+
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
## 10. Quality gates and metrics
|
|
155
|
+
|
|
156
|
+
- **Gates** are commands that must pass before a commit is called done: unit tests, type check, i18n parity, asset references, HTML validity, console errors, axe.
|
|
157
|
+
- **Performance and Web Vitals numbers** in `SPEC.md` are **targets**.
|
|
158
|
+
- **Measured values** go to a dated reference (`docs/METRICS.md`) with the machine, browser and build used. Sandbox or CI numbers are not evidence for LCP or INP. Measure those on a real device.
|
|
159
|
+
- Never write "Lighthouse 100/100" or similar as a fact in code, docs or UI.
|
|
160
|
+
|
|
161
|
+
---
|
|
162
|
+
|
|
163
|
+
## 11. Git and releases
|
|
164
|
+
|
|
165
|
+
- **Commit only when the owner asks, or when the task is explicitly "commit".** Never push unless the owner asks for it.
|
|
166
|
+
- **Small commits**, one concern each. Subject in imperative mood, under 72 characters. Body explains *why*.
|
|
167
|
+
- **Trailers:** commit trailers (for example `Co-Authored-By`) come from the project owner's instructions. If none are given, add none.
|
|
168
|
+
- **Do not commit** generated files unless the project lists them as tracked artifacts. Do not commit `node_modules/`, `.nuxt/`, `.output/`, logs or screenshots.
|
|
169
|
+
- **Semantic versioning** for this package:
|
|
170
|
+
- `PATCH` (1.1.x): fixes and wording, no change to what the CLI copies.
|
|
171
|
+
- `MINOR` (1.x.0): new rules, new docs, new template options. Existing projects keep working.
|
|
172
|
+
- `MAJOR` (x.0.0): renamed IDs, removed rules, changed file layout, changed CLI behaviour.
|
|
173
|
+
- **Every user-visible change adds a line to `CHANGELOG.md`** under `Unreleased`, in Keep a Changelog format. Release = move the section to a version, bump `package.json`, commit, tag `vX.Y.Z`.
|
|
174
|
+
- **Publishing** to npm is done by the maintainer only.
|
|
175
|
+
|
|
176
|
+
---
|
|
177
|
+
|
|
178
|
+
## 12. Dependencies and environments
|
|
179
|
+
|
|
180
|
+
- **Do not install packages into the owner's working copy** just to check something. Use an isolated copy, or ask.
|
|
181
|
+
- **Platform-specific binaries** (native modules) break when `node_modules` is shared between macOS and Linux. Build in a separate copy with its own `node_modules`.
|
|
182
|
+
- **Pin major versions** of framework modules that break easily (for example `@nuxtjs/i18n`). Do not accept a lockfile change that moves them without a reason in the commit message.
|
|
183
|
+
- **Never edit `node_modules`.**
|
|
184
|
+
|
|
185
|
+
---
|
|
186
|
+
|
|
187
|
+
## 13. Testing
|
|
188
|
+
|
|
189
|
+
Full rules: `07-testing/TESTING-STRATEGY.md`.
|
|
190
|
+
|
|
191
|
+
- Test names state the behaviour: `it('caps savings at the full bill')`, not `it('works')`.
|
|
192
|
+
- Test domain logic and composables. Do not unit-test static data, copy or CSS.
|
|
193
|
+
- During a task run **one targeted test**. Run the full suite once at the end.
|
|
194
|
+
- A test that is skipped or disabled must say why, in the same line.
|
|
195
|
+
|
|
196
|
+
---
|
|
197
|
+
|
|
198
|
+
## 14. Documentation
|
|
199
|
+
|
|
200
|
+
- Each rule has one home. Do not repeat a rule in several files; link to the home.
|
|
201
|
+
- Docs describe the current state. Decisions and their reasons go to `docs/DECISIONS.md` with a date.
|
|
202
|
+
- When behaviour changes, update the doc in the same commit.
|
|
203
|
+
|
|
204
|
+
---
|
|
205
|
+
|
|
206
|
+
## 15. Token economy (for agents)
|
|
207
|
+
|
|
208
|
+
Full strategy: `08-token-optimization/TOKEN-STRATEGY.md`.
|
|
209
|
+
|
|
210
|
+
1. Read `ALL.md`, then `docs/ARCHITECTURE.md` (the layer map), then only the files on the call chain of the task.
|
|
211
|
+
2. Use the component IDs and the sandbox (`/ui`) instead of long descriptions.
|
|
212
|
+
3. Put one-line file summaries at the top of non-trivial files.
|
|
213
|
+
4. Do not re-read a file you just edited unless the edit tool failed.
|
|
214
|
+
5. Do not start long processes in the background unless the task needs them.
|
|
215
|
+
|
|
216
|
+
---
|
|
217
|
+
|
|
218
|
+
## 16. Quick reference
|
|
219
|
+
|
|
220
|
+
| ID | Pattern | Where |
|
|
221
|
+
|---|---|---|
|
|
222
|
+
| `BTN-01` | Primary button (sun fill) | `02-design-system/BRANDBOOK-SANDBOX.md` |
|
|
223
|
+
| `BTN-02` | Outline button | same |
|
|
224
|
+
| `CTL-01` | Segmented switch | same |
|
|
225
|
+
| `COUNTER-01` | Bounded numeric counter with − / + | same |
|
|
226
|
+
| `PRICE-01` | Formatted price | same |
|
|
227
|
+
| `CARD-01` | Product card | same |
|
|
228
|
+
| `CARD-02` | Plan / tariff card | same |
|
|
229
|
+
| `SLD-01` | Card slider with scroll-snap | same |
|
|
230
|
+
| `HOOK-01` | Overlap hook under the cover | same |
|
|
231
|
+
|
|
232
|
+
**Before you finish any task, check:** no hard-coded UI text · no raw colours · no copied component · every image sized and routed through the image component · i18n keys in all locales · axe clean at 390 / 820 / 1440 · CHANGELOG line added · no junk left in the repo.
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to DS7 are recorded here. Format: [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). Versions follow [Semantic Versioning](https://semver.org/).
|
|
4
|
+
|
|
5
|
+
## [2.0.0] — 2026-11-14
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
- DS7 is the `ds7` pack of AI-ALL. `init` and `update` enable and refresh it.
|
|
9
|
+
- Integration test against AI-ALL, `.editorconfig`, one shared `.gitignore`.
|
|
10
|
+
- Brand-first build order and English-only documents.
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
- The root `ALL.md` belongs to AI-ALL. DS7 rules live in `ds7/ALL.md`.
|
|
14
|
+
- The CLI runs the pinned `@ai.all/aiall` 0.3.0.
|
|
15
|
+
- Performance figures are labelled as targets.
|
|
16
|
+
|
|
17
|
+
### Removed
|
|
18
|
+
- `ALL.project.md`. Project values go in the root `ALL.md`, below the packs block.
|
|
19
|
+
- `ff.md` and `ANDALUSIA.md`, kept in git history.
|
|
20
|
+
|
|
21
|
+
### Notes
|
|
22
|
+
- 1.1.0 was never published; its changes are part of 2.0.0. Upgrade steps: README, "Upgrading from DS7 1.x".
|
|
23
|
+
|
|
24
|
+
## [1.0.0] — 2026-11-10
|
|
25
|
+
|
|
26
|
+
### Added
|
|
27
|
+
- Initial standard: `ALL.md`, `SPEC.md`, `README.md`, folders `01` to `08`, templates, and the `ds7` CLI with `init`, `sync` and `update`.
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 ai-all-ai
|
|
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,119 @@
|
|
|
1
|
-
#
|
|
1
|
+
# DS7
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@ai.all/ds7)
|
|
4
|
+
[](LICENSE)
|
|
5
|
+
[](https://github.com/ai-all-ai/ds7)
|
|
6
|
+
|
|
7
|
+
> **Brand first, then components, then pages.** A web architecture standard that AI agents can follow without long briefings.
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npx @ai.all/ds7
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
DS7 is a set of rules, templates and reference documents for fast, multilingual Nuxt 4 / Vue 3 sites. Agents read the rules in `ALL.md` first.
|
|
14
|
+
|
|
15
|
+
## Related
|
|
16
|
+
|
|
17
|
+
- **npm:** [@ai.all/ds7](https://www.npmjs.com/package/@ai.all/ds7)
|
|
18
|
+
- **GitHub:** [ai-all-ai/ds7](https://github.com/ai-all-ai/ds7)
|
|
19
|
+
- **Delivered by:** [AI-ALL](https://github.com/ai-all-ai/aiall) (`@ai.all/aiall`) as the `ds7` pack. See [Packs](https://github.com/ai-all-ai/aiall#packs).
|
|
20
|
+
|
|
21
|
+
## Quick start
|
|
22
|
+
|
|
23
|
+
**New project**
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npx @ai.all/ds7
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
**Sync agent entrypoints only**
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npx @ai.all/ds7 sync
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
**Update to the installed version**
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm i -D @ai.all/ds7@latest
|
|
39
|
+
npx @ai.all/ds7 update
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Commands
|
|
43
|
+
|
|
44
|
+
| Command | What it does |
|
|
45
|
+
|---|---|
|
|
46
|
+
| `npx @ai.all/ds7` | Copy the standard to `ds7/`, write `ds7/aiall-pack.json`, run `aiall init`, enable the `ds7` pack |
|
|
47
|
+
| `npx @ai.all/ds7 sync` | Run `aiall sync`; restores missing entrypoints, keeps existing files |
|
|
48
|
+
| `npx @ai.all/ds7 update` | Overwrite `ds7/` and `ds7/aiall-pack.json` with this version, then run `aiall sync`. Project text in the root `ALL.md` is kept |
|
|
49
|
+
| `npx @ai.all/ds7 --version` | Print the version |
|
|
50
|
+
| `npx @ai.all/ds7 --help` | Print usage |
|
|
51
|
+
|
|
52
|
+
## Files
|
|
53
|
+
|
|
54
|
+
| File | Owner | `init` | `update` |
|
|
55
|
+
|---|---|---|---|
|
|
56
|
+
| `ds7/**` | the standard | copies, keeps existing | overwrites |
|
|
57
|
+
| `ds7/aiall-pack.json` | the CLI, generated from its version | creates | overwrites |
|
|
58
|
+
| `ds7/VERSION` | the CLI | writes | writes |
|
|
59
|
+
| `ALL.md` (root) | AI-ALL; the text below the packs block is yours | created by AI-ALL | not changed by DS7 |
|
|
60
|
+
| `AGENTS.md`, `CLAUDE.md`, `GEMINI.md`, ... | AI-ALL | created by AI-ALL | not changed by DS7 |
|
|
61
|
+
|
|
62
|
+
Put project values in the root `ALL.md`, below the AI-ALL packs block. Edits to `ds7/` are lost on `update`; propose a change to the standard instead.
|
|
63
|
+
|
|
64
|
+
## Upgrading from DS7 1.x
|
|
65
|
+
|
|
66
|
+
DS7 1.x wrote `ALL.md` and `ALL.project.md` to the project root. From this version the standard is the `ds7` pack of AI-ALL. `update` does not delete or rewrite your files, and it prints a warning for each one that needs a manual step:
|
|
67
|
+
|
|
68
|
+
1. Move the project values from `ALL.project.md` into the root `ALL.md`, below the packs block.
|
|
69
|
+
2. Delete `ALL.project.md`.
|
|
70
|
+
3. In the root `ALL.md`, remove the copied DS7 rules and keep the packs block.
|
|
71
|
+
4. Run `npx @ai.all/ds7 update` and then `npx @ai.all/aiall check`.
|
|
72
|
+
|
|
73
|
+
## Build order
|
|
74
|
+
|
|
75
|
+
1. **Foundations:** tokens in `theme.css`.
|
|
76
|
+
2. **Brandbook:** every token and base atom on `/ui`.
|
|
77
|
+
3. **Atoms and molecules,** built from the brandbook.
|
|
78
|
+
4. **Sections and pages,** built from components.
|
|
79
|
+
|
|
80
|
+
A value that is not a token does not appear in a component. A pattern that is not in the brandbook is not finished.
|
|
81
|
+
|
|
82
|
+
## What you get
|
|
83
|
+
|
|
84
|
+
| Folder | Purpose |
|
|
85
|
+
|---|---|
|
|
86
|
+
| `ALL.md` | Agent contract: rules, build order, checklist, quick reference of component IDs |
|
|
87
|
+
| `SPEC.md` | Technical baseline: stack, directory layout, naming, quality gates |
|
|
88
|
+
| `01-architecture/` | Atomic Design levels, modifier system, component anatomy |
|
|
89
|
+
| `02-design-system/` | Tokens, naming, brandbook sandbox with stable component IDs |
|
|
90
|
+
| `03-performance-web-vitals/` | Assets pipeline, critical CSS, font metrics, hydration |
|
|
91
|
+
| `04-seo-ai-optimization/` | Answer blocks for AI search, structured data, local search |
|
|
92
|
+
| `05-internationalization/` | One locale hub, adding a language |
|
|
93
|
+
| `06-business-conversion/` | Commercial patterns for solar and EV projects (examples) |
|
|
94
|
+
| `07-testing/` | Targeted testing, accessibility gate |
|
|
95
|
+
| `08-token-optimization/` | Working efficiently with AI context |
|
|
96
|
+
| `templates/` | Starter component, tokens, Nuxt config |
|
|
97
|
+
|
|
98
|
+
## Release
|
|
99
|
+
|
|
100
|
+
Versioning, release steps and rules: [docs/RELEASE.md](docs/RELEASE.md). The change history is in [CHANGELOG.md](CHANGELOG.md).
|
|
101
|
+
|
|
102
|
+
## Language
|
|
103
|
+
|
|
104
|
+
All documents are in English. The owner may converse in any language; code and docs stay in English, UI copy goes through the i18n files.
|
|
105
|
+
|
|
106
|
+
## Note on examples
|
|
107
|
+
|
|
108
|
+
`06-business-conversion/` and the example values in `04-seo-ai-optimization/` describe a Spanish solar company. They show structure, not facts to reuse. Replace contact details, legal names and prices with your own.
|
|
109
|
+
|
|
110
|
+
## Prior art
|
|
111
|
+
|
|
112
|
+
- Atomic Design by Brad Frost: component levels.
|
|
113
|
+
- W3C Design Tokens Community Group: token file format.
|
|
114
|
+
- Style Dictionary: one token source, many platform outputs.
|
|
115
|
+
- Storybook and public design systems (GOV.UK, Material, Salesforce Lightning): foundations documented before components.
|
|
116
|
+
|
|
117
|
+
## License
|
|
118
|
+
|
|
119
|
+
MIT. See [LICENSE](LICENSE).
|
package/SPEC.md
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# DS7 Technical Specification
|
|
2
|
+
|
|
3
|
+
> **How it fits with AI-ALL.** [AI-ALL](https://github.com/ai-all-ai/aiall) (`@ai.all/aiall`) creates the agent entrypoints and the routing file, and keeps them in sync. This document is delivered to agents as the `ds7` pack of AI-ALL. AI-ALL works without DS7; for web projects, install both.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
Version 1.1.0. This document is the technical baseline. Rules for agents are in `ALL.md`; this file describes the stack, the layout and the quality gates.
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## 1. Stack
|
|
11
|
+
|
|
12
|
+
- **Framework:** Nuxt 4, Vue 3.5+, Composition API with `<script setup lang="ts">`.
|
|
13
|
+
- **Styling:** Tailwind CSS v4 and CSS custom properties defined in `theme.css`.
|
|
14
|
+
- **Rendering:** static generation (`nuxt generate`), prerendered routes, `sitemap.xml`, `robots.txt`.
|
|
15
|
+
- **i18n:** `@nuxtjs/i18n`, prefix-except-default strategy, one locale hub in `i18n/locales/`.
|
|
16
|
+
- **Types:** strict TypeScript.
|
|
17
|
+
- **Tests:** Vitest for unit and composable tests; Playwright for flows and browser checks; axe for accessibility.
|
|
18
|
+
- **Quality tooling:** a single `qa` script runs the gates listed in section 5.
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## 2. Directory layout
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
project-root/
|
|
26
|
+
├── app/
|
|
27
|
+
│ ├── app.vue
|
|
28
|
+
│ ├── assets/css/
|
|
29
|
+
│ │ ├── main.css # entry point for styles
|
|
30
|
+
│ │ ├── theme.css # foundations: tokens
|
|
31
|
+
│ │ ├── base.css # reset and element defaults
|
|
32
|
+
│ │ └── components.css # base classes and modifiers
|
|
33
|
+
│ ├── components/
|
|
34
|
+
│ │ ├── ui/ # atoms and molecules
|
|
35
|
+
│ │ ├── sections/ # sections and organisms
|
|
36
|
+
│ │ └── site/ # site shell: header, footer, modal host
|
|
37
|
+
│ ├── composables/ # reusable logic
|
|
38
|
+
│ ├── data/ # business data and schemas
|
|
39
|
+
│ ├── domain/ # pure business maths, no Vue imports
|
|
40
|
+
│ └── pages/ # routes: data in, sections out
|
|
41
|
+
├── i18n/
|
|
42
|
+
│ └── locales/ # one file per language, same keys
|
|
43
|
+
├── public/ # static assets: images, fonts, favicon
|
|
44
|
+
├── docs/ # project documentation
|
|
45
|
+
│ ├── ARCHITECTURE.md # layer map and browser storage keys
|
|
46
|
+
│ ├── DECISIONS.md # dated decisions and reasons
|
|
47
|
+
│ └── METRICS.md # dated measurements, with machine and build
|
|
48
|
+
└── nuxt.config.ts
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## 3. Class naming
|
|
54
|
+
|
|
55
|
+
| Role | Format | Example |
|
|
56
|
+
|---|---|---|
|
|
57
|
+
| Base component | short kebab-case | `.p-card`, `.btn`, `.field` |
|
|
58
|
+
| Element | double underscore | `.p-card__title` |
|
|
59
|
+
| Modifier | separate class with a leading dash | `.-top`, `.-compact`, `.-lg` |
|
|
60
|
+
| State | `is-` prefix | `.is-open`, `.is-active` |
|
|
61
|
+
| Page context | class on `<body>` | `body.page-home` |
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## 4. Targets
|
|
66
|
+
|
|
67
|
+
These are design targets for a finished page on a mid-range phone over a 4G connection. They are not measured results. Measure them on the target device and record the results in `docs/METRICS.md`.
|
|
68
|
+
|
|
69
|
+
| Metric | Target |
|
|
70
|
+
|---|---|
|
|
71
|
+
| Lighthouse Performance | ≥ 95 |
|
|
72
|
+
| Lighthouse Accessibility | ≥ 95 |
|
|
73
|
+
| Lighthouse Best Practices | ≥ 95 |
|
|
74
|
+
| Lighthouse SEO | 100 |
|
|
75
|
+
| First Contentful Paint | ≤ 1.0 s |
|
|
76
|
+
| Largest Contentful Paint | ≤ 2.5 s |
|
|
77
|
+
| Cumulative Layout Shift | ≤ 0.01 (CLS 0 is the aim) |
|
|
78
|
+
| Total Blocking Time | ≤ 200 ms |
|
|
79
|
+
| Interaction to Next Paint | ≤ 200 ms |
|
|
80
|
+
|
|
81
|
+
Lab tools in CI or in a sandbox do not produce reliable LCP or INP values. Use them for regressions only, not as proof.
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## 5. Quality gates
|
|
86
|
+
|
|
87
|
+
A change is done when these pass:
|
|
88
|
+
|
|
89
|
+
1. Unit and composable tests.
|
|
90
|
+
2. Type check.
|
|
91
|
+
3. Locale parity: every key exists in every locale.
|
|
92
|
+
4. Asset references: every `/images/…` and `/fonts/…` path exists in `public/`.
|
|
93
|
+
5. HTML check: valid markup on every generated page.
|
|
94
|
+
6. Console check: no errors or warnings on load.
|
|
95
|
+
7. Accessibility: axe reports 0 violations at 390, 820 and 1440 px.
|
|
96
|
+
8. Build: `nuxt generate` completes.
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## 6. Versioning and release
|
|
101
|
+
|
|
102
|
+
See `ALL.md` section 11 and `README.md`. Summary: semantic versions, one changelog entry per user-visible change, tag `vX.Y.Z` on release, publish by the maintainer.
|