@ai.all/ds7 1.0.0 → 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/ALL.md CHANGED
@@ -1,81 +1,232 @@
1
- # AI Agent Standard & Single Source of Truth
1
+ # ALL.md — Agent Rules for DS7 Projects
2
2
 
3
- > This document is the absolute single source of truth for any AI agent (Claude, Gemini, Codex, Copilot, Cursor, Windsurf, ChatGPT) working on this codebase. Read and follow these rules strictly before editing or creating files.
4
- > All agent entrypoints are managed and kept synchronized using [`@ai.all/aiall`](https://www.npmjs.com/package/@ai.all/aiall) (`npx @ai.all/aiall`).
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.
5
43
 
6
44
  ---
7
45
 
8
- ## 1. General Engineering & Language Rules
46
+ ## 1. Languages
9
47
 
10
- - **Agent Entrypoints Management:** All platform-specific entrypoints (`AGENTS.md`, `CLAUDE.md`, `GEMINI.md`, `.cursor/rules/*`, `.windsurf/rules/*`, `.github/copilot-instructions.md`) must point directly to `ALL.md`. Run `npx @ai.all/aiall` to initialize, sync, and validate entrypoints.
11
- - **Git Commits:** Plain, clear, professional English. Never include co-author trailers (`Co-authored-by:`).
12
- - **Code & Comments:** All TypeScript/Vue code, variables, functions, and inline code comments must be in standard English.
13
- - **Documentation & User Communication:** Guides, architecture docs, and conversational responses to the project owner must be in Russian.
14
- - **Customer Facing Content:** Strictly localized via the project's i18n layer (`es`, `en`, `uk`, etc.).
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.
15
52
 
16
53
  ---
17
54
 
18
- ## 2. Component Architecture: Atomic Design & Composability
55
+ ## 2. Components (Atomic Design)
19
56
 
20
- - **Strict Atomic Hierarchy:**
21
- - `Atoms` (in `components/ui/`): Indivisible elements (`UiButton`, `UiPrice`, `UiIcon`, `UiBadge`, `UiField`). Zero dependencies on business or page state.
22
- - `Molecules` (in `components/ui/`): Composable element groups (`UiProductCard`, `UiPlanCard`, `UiHeading`, `UiSliderNav`). Driven strictly by typed props and slots.
23
- - `Organisms` (in `components/ui/`, `sections/`): Self-contained functional widgets (`UiCardSlider`, `UiFeatureGrid`, `UiHeroHook`, `UiFaq`, `CalcPanel`). Manages local state (scrolling, active tabs).
24
- - `Templates / Sections`: Composed structures with zero hardcoded page content.
25
- - `Pages` (in `pages/`): Responsible **only** for data retrieval, setting page SEO metadata, and feeding props into sections. **Never inline product cards or raw grids directly in page files.**
26
- - **Autonomous & Nested:** Every block must be able to live on any page, inside a sidebar, inside a modal, or nested inside another component without knowing its parent context.
27
- - **Zero Component Duplication:** Never create page-specific copies of existing components. Use modifiers and parent ancestry styling.
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.
28
70
 
29
71
  ---
30
72
 
31
- ## 3. Modifier Syntax & Class Naming Standard
73
+ ## 3. CSS naming and modifiers
32
74
 
33
- - **Minimalist, semantic class names:**
34
- Base class + separate modifier classes prefixed with a dash:
35
- ```html
36
- <article class="p-card -top -new -compact">
37
- ```
38
- - **CSS Cascading from Modifiers:**
39
- Modifiers on the root element must cascade down to internal elements:
40
- ```css
41
- .p-card { /* base styles */ }
42
- .p-card.-top { /* modifier styles */ }
43
- .p-card.-top .p-card__title { font-weight: 700; }
44
- ```
45
- - **Page Context via Ancestry:**
46
- Customizing a shared component for a specific page must be achieved through the parent class on `<body>` (e.g. `body.page-hogares .hero-hook`) or CSS custom properties, never by creating a new component file.
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.
47
85
 
48
86
  ---
49
87
 
50
- ## 4. Performance & Core Web Vitals (Target: Lighthouse 95–100)
88
+ ## 4. Responsive layout
51
89
 
52
- - **Critical CSS:** Enforce above-the-fold inline CSS (`experimental.inlineSSRStyles: true` in Nuxt 4) for First Contentful Paint < 0.4s.
53
- - **Zero Layout Shift (CLS = 0.000):** Explicit `aspect-ratio`, `width`, and `height` on all media/containers. Preload critical fonts and use `@nuxtjs/fontaine` fallback metric matching.
54
- - **LCP < 1.2s:** Top hero images must use `fetchpriority="high"` and `loading="eager"`. All lower images must have `loading="lazy"` and `decoding="async"`.
55
- - **Deferred Hydration:** Non-critical widgets (chat widgets, complex modals, cookie banners) must not hydrate on initial load; defer via `requestIdleCallback`.
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.
56
94
 
57
95
  ---
58
96
 
59
- ## 5. Assets Pipeline: Tight Trim & Multi-Device Sizing
97
+ ## 5. Images and fonts
98
+
99
+ Full rules: `03-performance-web-vitals/ASSETS-PIPELINE.md`, `FONTS-ZERO-CLS.md`.
60
100
 
61
- - Never include raw oversized images with excess transparent padding.
62
- - Trim transparent padding tightly around graphics (tight trim).
63
- - Export optimized modern formats (WebP and AVIF).
64
- - Provide responsive sizing (`srcset` and `<picture>`) for mobile (1x) and retina (2x) viewports.
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.
65
107
 
66
108
  ---
67
109
 
68
- ## 6. Internationalization (i18n Single Hub)
110
+ ## 6. Browser behaviour
69
111
 
70
- - All interface strings must reside in the centralized `i18n/locales/` directory.
71
- - Adding a new locale must only require adding its ISO code (`de`, `fr`, `it`) and a translation file.
72
- - Strictly separate UI strings (in `i18n/`) from business data (in `app/data/`).
73
- - Validate data schemas so missing translations break build time, not production.
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.
74
118
 
75
119
  ---
76
120
 
77
- ## 7. AI Search & Semantic SEO (AEO / GEO)
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
+ ---
78
217
 
79
- - Structure explanatory sections with **Direct Answer Blocks** (40–50 words concise factual answer under `H2/H3`).
80
- - Use rich markdown/HTML data tables for specs and comparisons (AI crawlers prioritize structured tables).
81
- - Provide full Schema.org JSON-LD graphs (`Product`, `LocalBusiness`, `FAQPage`, `BreadcrumbList`).
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/README.md CHANGED
@@ -1,124 +1,119 @@
1
- # DS7 · AI-Ready Web Architecture Standard
1
+ # DS7
2
2
 
3
- [![npm](https://img.shields.io/npm/v/@ai-all-ai/ds7)](https://www.npmjs.com/package/@ai-all-ai/ds7)
3
+ [![npm](https://img.shields.io/npm/v/@ai.all/ds7)](https://www.npmjs.com/package/@ai.all/ds7)
4
4
  [![license](https://img.shields.io/badge/license-MIT-green)](LICENSE)
5
5
  [![repo](https://img.shields.io/badge/github-ai--all--ai%2Fds7-blue)](https://github.com/ai-all-ai/ds7)
6
6
 
7
- > **One command. Full architecture standard. All AI agents in sync.**
7
+ > **Brand first, then components, then pages.** A web architecture standard that AI agents can follow without long briefings.
8
8
 
9
9
  ```bash
10
- npx @ai-all-ai/ds7
10
+ npx @ai.all/ds7
11
11
  ```
12
12
 
13
- Это единственная команда, которая нужна для старта нового проекта:
14
- копирует стандарт DS7, создаёт `ALL.md` и синхронизирует все AI-агенты через `@ai.all/aiall`.
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.
15
14
 
16
- ---
15
+ ## Related
17
16
 
18
- > *Универсальная портативная методология для создания сверхбыстрых, масштабируемых веб-приложений на Vue 3 / Nuxt 4 с полной поддержкой AI-агентов, Atomic Design и Core Web Vitals 100/100.*
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).
19
20
 
20
- Код и структура выстроены так, чтобы любой разработчик или ИИ-агент, заглянув внутрь, увидел безупречный порядок и захотел взять эту методологию за основу в своих проектах.
21
+ ## Quick start
21
22
 
22
- ---
23
+ **New project**
23
24
 
24
- ## 🎯 Главные принципы системы
25
+ ```bash
26
+ npx @ai.all/ds7
27
+ ```
25
28
 
26
- 1. **Atomic Design & Полная автономность компонентов:**
27
- Каждый UI-блок — самостоятельный кирпичик. Он ничего не знает о конкретной странице и одинаково идеально работает на главной, в узком сайдбаре, модалке или будучи вложенным «внутрь чего-то ещё и ещё глубже».
28
- 2. **Единая точка входа для всех ИИ-агентов через `@ai.all/aiall`:**
29
- Централизованный файл `ALL.md` объединяет правила для Claude, Gemini, Cursor, Windsurf, Copilot и Codex. Синхронизация и валидация всех entrypoint-файлов автоматизирована через официальный npm-пакет [`@ai.all/aiall`](https://www.npmjs.com/package/@ai.all/aiall) (`npx @ai.all/aiall`).
30
- 3. **Короткие семантические модификаторы:**
31
- Никаких дублирующих компонентов под разные страницы. Все варианты оформляются отдельными короткими классами-модификаторами (`-top`, `-new`, `-compact`, `-dark`), а контекст страниц задается от предка (`body.page-*`).
32
- 4. **Единое место переводов (i18n Single Hub):**
33
- Все локали собраны в единой структуре. Добавление нового языка (`de`, `fr`, `it`, `pl`) занимает 2 минуты через добавление двухбуквенного кода и файла переводов.
34
- 5. **Бескомпромиссная скорость (Lighthouse 100/100):**
35
- Critical CSS inlining, предварительная загрузка LCP-графики, нулевой сдвиг макета (CLS = 0.000) через локальные fallback-шрифты (Fontaine) и жесткие aspect-ratio.
36
- 6. **Умный конвейер графики (Smart Assets Pipeline):**
37
- Исходные картинки не вставляются с запасом. Избыточные прозрачные поля обрезаются по контуру (tight-trim), формируются оптимизированные WebP/AVIF форматы для мобильных (1x) и ретина-экранов (2x).
38
- 7. **Оптимизация под ИИ-поисковики (AEO / GEO):**
39
- Прямые ответы на вопросы (Direct Answer Blocks), плотные таблицы данных, микроразметка Schema.org Graph — готовая база знаний для SearchGPT, Perplexity и Google Gemini Overviews.
40
- 8. **Брендбук и библиотека материалов как язык общения:**
41
- Страница `/ui` — интерактивная песочница (Storybook) со стабильными идентификаторами компонентов (`CARD-01`, `CTL-01`, `PRICE-01`). В диалогах и задачах используются короткие метки без длинных описаний.
29
+ **Sync agent entrypoints only**
42
30
 
43
- ---
31
+ ```bash
32
+ npx @ai.all/ds7 sync
33
+ ```
44
34
 
45
- ## 📁 Структура каталога `ds7/`
35
+ **Update to the installed version**
46
36
 
47
- ```
48
- ds7/
49
- ├── README.md # Главный манифест и руководство (вы здесь)
50
- ├── SPEC.md # Полная техническая спецификация
51
- ├── ALL.md # Универсальная инструкция для AI-агентов (Single Source of Truth)
52
- │
53
- ├── 01-architecture/ # Архитектура и компонентная модель
54
- │ ├── ATOMIC-DESIGN.md # Иерархия: Атомы → Молекулы → Организмы → Шаблоны → Страницы
55
- │ ├── MODIFIER-SYSTEM.md # Синтаксис коротких классов (-top, -dark) и управление от предка
56
- │ └── COMPONENT-ANATOMY.md # Эталонная структура Vue 3 SFC (props, slots, container queries)
57
- │
58
- ├── 02-design-system/ # Дизайн-система и токены
59
- │ ├── TOKENS-SPEC.md # Цвета, отступы, тени, типографика (CSS Variables)
60
- │ ├── BRANDBOOK-SANDBOX.md # Интерактивная песочница /ui и стабильные ID (CARD-01, CTL-01)
61
- │ └── NAMING-CONVENTIONS.md # Ультра-короткие, понятные имена классов и минификация
62
- │
63
- ├── 03-performance-web-vitals/ # Скорость загрузки и Core Web Vitals
64
- │ ├── CRITICAL-CSS.md # Настройка Critical CSS inlining (FCP < 0.4s)
65
- │ ├── FONTS-ZERO-CLS.md # Fontaine, preload шрифтов и нулевой сдвиг (CLS = 0)
66
- │ ├── ASSETS-PIPELINE.md # Оптимизация картинок, обрезка полей, srcset, WebP/AVIF
67
- │ └── HYDRATION-STRATEGY.md # Ленивая гидратация некритичных виджетов (requestIdleCallback)
68
- │
69
- ├── 04-seo-ai-optimization/ # Продвижение без покупки ссылок и подготовка под ИИ
70
- │ ├── AEO-GEO-AI-SEARCH.md # Answer Engine Optimization (SearchGPT, Perplexity, Gemini)
71
- │ ├── STRUCTURED-DATA.md # Schema.org JSON-LD (Product, LocalBusiness, FAQPage)
72
- │ └── GOOGLE-LOCAL-EEAT.md # Google Local Pack (Карты), E-E-A-T и поведенческие факторы
73
- │
74
- ├── 05-internationalization/ # Умная локализация
75
- │ ├── I18N-ARCHITECTURE.md # Архитектура единого хранилища и быстрое добавление языков
76
- │ └── LOCALE-TEMPLATE.json # Эталонный шаблон структуры словаря
77
- │
78
- ├── 06-business-conversion/ # Коммерческие механики и лидогенерация
79
- │ ├── EV-SOLAR-ECOSYSTEM.md # V2C Trydan, V2H (машина как батарея), Plan MOVES III (скидки 70-80%)
80
- │ ├── B2C-B2B-MODELS.md # Виртуальная батарея (счет 0€), PPA (0€ инвестиций), навесы
81
- │ └── CONTEXTUAL-LEADS.md # Умный WhatsApp Deep-Link, PDF-сметы, оффлайн-очередь заявок
82
- │
83
- ├── 07-testing/ # Стратегия тестирования
84
- │ └── TESTING-STRATEGY.md # Точечные тесты, Vitest, Playwright, экономия токенов
85
- │
86
- ├── 08-token-optimization/ # Оптимизация использования AI-контекста
87
- │ └── TOKEN-STRATEGY.md # Граф проекта, lazy-loading, session handoff
88
- │
89
- └── templates/ # Готовые эталонные файлы для копирования в проект
90
- ├── component.vue # Эталонный Vue 3 SFC компонент со всеми стандартами
91
- ├── theme.css # Базовый файл токенов (CSS Custom Properties)
92
- └── nuxt.config.ts # Эталонный конфигурационный файл Nuxt 4
37
+ ```bash
38
+ npm i -D @ai.all/ds7@latest
39
+ npx @ai.all/ds7 update
93
40
  ```
94
41
 
95
- ---
42
+ ## Commands
96
43
 
97
- ## 🚀 Быстрый старт
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 |
98
51
 
99
- ### Вариант А — npm (рекомендуется)
52
+ ## Files
100
53
 
101
- ```bash
102
- # В корне нового проекта:
103
- npx @ai-all-ai/ds7
104
- ```
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 |
105
61
 
106
- Команда сделает всё:
107
- - скопирует папку `ds7/` со всем стандартом
108
- - создаст `ALL.md` (если его нет)
109
- - запустит `npx @ai.all/aiall` для синхронизации всех AI-агентов
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.
110
63
 
111
- ### Вариант Б — вручную
64
+ ## Upgrading from DS7 1.x
112
65
 
113
- 1. Скопируйте папку `ds7/` в корень нового проекта
114
- 2. Скопируйте файлы из `ds7/templates/` → `components/`, `assets/css/`, `nuxt.config.ts`
115
- 3. Запустите `npx @ai.all/aiall` для синхронизации AI-агентов
116
- 4. Откройте `/ui` в браузере — интерактивная дизайн-система
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:
117
67
 
118
- ### Дополнительные команды
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`.
119
72
 
120
- ```bash
121
- npx @ai-all-ai/ds7 sync # синхронизировать только агентов
122
- npx @ai-all-ai/ds7 update # обновить ds7/ до последней версии пакета
123
- npx @ai-all-ai/ds7 --version
124
- ```
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).