@ai.all/ds7 0.0.0-stage → 1.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 +62 -0
- package/01-architecture/COMPONENT-ANATOMY.md +117 -0
- package/01-architecture/MODIFIER-SYSTEM.md +101 -0
- package/02-design-system/BRANDBOOK-SANDBOX.md +52 -0
- package/02-design-system/NAMING-CONVENTIONS.md +43 -0
- package/02-design-system/TOKENS-SPEC.md +88 -0
- package/03-performance-web-vitals/ASSETS-PIPELINE.md +71 -0
- package/03-performance-web-vitals/CRITICAL-CSS.md +46 -0
- package/03-performance-web-vitals/FONTS-ZERO-CLS.md +63 -0
- package/03-performance-web-vitals/HYDRATION-STRATEGY.md +51 -0
- package/04-seo-ai-optimization/AEO-GEO-AI-SEARCH.md +70 -0
- package/04-seo-ai-optimization/GOOGLE-LOCAL-EEAT.md +41 -0
- package/04-seo-ai-optimization/STRUCTURED-DATA.md +90 -0
- package/05-internationalization/I18N-ARCHITECTURE.md +57 -0
- package/05-internationalization/LOCALE-TEMPLATE.json +32 -0
- package/06-business-conversion/B2C-B2B-MODELS.md +36 -0
- package/06-business-conversion/CONTEXTUAL-LEADS.md +50 -0
- package/06-business-conversion/EV-SOLAR-ECOSYSTEM.md +38 -0
- package/07-testing/TESTING-STRATEGY.md +133 -0
- package/08-token-optimization/TOKEN-STRATEGY.md +149 -0
- package/ALL.md +81 -0
- package/ANDALUSIA.md +89 -0
- package/LICENSE +21 -0
- package/README.md +123 -2
- package/SPEC.md +58 -0
- package/bin/ds7.js +141 -0
- package/ff.md +112 -0
- package/package.json +62 -4
- package/templates/component.vue +122 -0
- package/templates/nuxt.config.ts +70 -0
- package/templates/theme.css +48 -0
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
# DS7 · 08 — Token & Context Optimization
|
|
2
|
+
|
|
3
|
+
> **Цель:** Работать с AI-агентами эффективно — читать только нужные файлы,
|
|
4
|
+
> не тратить токены на повторные чтения и полные прогоны тестов.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Принцип: «Граф проекта прежде всего»
|
|
9
|
+
|
|
10
|
+
Перед чтением файлов — понять **где находится задача** в дереве зависимостей.
|
|
11
|
+
|
|
12
|
+
```
|
|
13
|
+
Задача → Слой → Файлы слоя → Только связанные зависимости
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
**Порядок чтения (от общего к частному):**
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
1. ALL.md ← правила проекта (всегда первым)
|
|
20
|
+
2. docs/ARCHITECTURE.md ← где лежит нужный слой
|
|
21
|
+
3. app/data/<relevant> ← данные затронутого домена
|
|
22
|
+
4. app/domain/<module> ← бизнес-логика (если меняем)
|
|
23
|
+
5. app/composables/<x> ← только если composable затронут
|
|
24
|
+
6. app/components/<X> ← только если компонент затронут
|
|
25
|
+
7. app/pages/<p> ← только если страница затронута
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
> Никогда не читать всё подряд. Читать только call chain задачи.
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## Project Graph — быстрая карта зависимостей
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
pages/
|
|
36
|
+
index.vue → HomeHero, HomeSystem, HomeEquipment, HomeFaq …
|
|
37
|
+
movilidad.vue → UiPageHero, HomeFleet, HomeBundles, CalcSection …
|
|
38
|
+
[slug].vue → DirectionPage → ExtraSections
|
|
39
|
+
|
|
40
|
+
domain/
|
|
41
|
+
calculators/
|
|
42
|
+
residential.ts → useCalcLink (composable)
|
|
43
|
+
ev.ts → useCalcLink, defaults.ts
|
|
44
|
+
|
|
45
|
+
composables/
|
|
46
|
+
usePageSeo.ts → useHead (nuxt) — все страницы
|
|
47
|
+
useModal.ts → SiteModalHost — global
|
|
48
|
+
useShopUrl.ts → tienda.vue, UiShopProductCard
|
|
49
|
+
useSections.ts → [slug].vue, DirectionPage
|
|
50
|
+
|
|
51
|
+
data/
|
|
52
|
+
sections.ts → useSections → [slug].vue
|
|
53
|
+
seo.ts → usePageSeo → all pages
|
|
54
|
+
catalog.ts → UiProductCard, HomeEquipment
|
|
55
|
+
shop.ts → useShopList → tienda.vue
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## Скилы и инструменты для экономии контекста
|
|
61
|
+
|
|
62
|
+
| Скил / Команда | Когда использовать |
|
|
63
|
+
|---|---|
|
|
64
|
+
| `/compact` | Сессия стала длинной — сжать перед продолжением |
|
|
65
|
+
| `context-optimizer` skill | Длинная задача с многими файлами — читать summary |
|
|
66
|
+
| `documentation-lazy-load` skill | Нужна специфика API/библиотеки — не читать всё сразу |
|
|
67
|
+
| `incremental-coding` skill | Сфокусированное изменение — не делать рефактор вокруг |
|
|
68
|
+
| `session-handoff` skill | Смена сессии или модели — сохранить handoff |
|
|
69
|
+
| `token-auditor` skill | Анализ расхода токенов из ccusage |
|
|
70
|
+
| `targeted-testing` skill | Выбрать минимальный тест для изменения |
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
## Правила для AI-агентов в этом проекте
|
|
75
|
+
|
|
76
|
+
### Перед началом задачи
|
|
77
|
+
```
|
|
78
|
+
1. Прочитай ALL.md (правила)
|
|
79
|
+
2. Определи слой задачи по ARCHITECTURE.md
|
|
80
|
+
3. Прочитай только файлы в call chain
|
|
81
|
+
4. НЕ читать весь app/components/ или весь app/data/
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Во время итерации
|
|
85
|
+
```
|
|
86
|
+
5. После каждого изменения → один точечный тест (не suite)
|
|
87
|
+
6. Не запускать тесты в фоне
|
|
88
|
+
7. Используй --reporter=dot для минимального вывода
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Конец задачи / смена модели
|
|
92
|
+
```
|
|
93
|
+
8. Запустить полный suite один раз
|
|
94
|
+
9. Сохранить handoff через session-handoff skill
|
|
95
|
+
10. Коммит только документально подтверждённых изменений
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## File-Level Summaries (стандарт DS7)
|
|
101
|
+
|
|
102
|
+
Каждый нетривиальный файл должен иметь 1-2 строки комментария вверху:
|
|
103
|
+
|
|
104
|
+
```typescript
|
|
105
|
+
// Residential solar savings calculator.
|
|
106
|
+
// Input: monthly kWh, panel kW, tariff €/kWh. Output: SavingsResult.
|
|
107
|
+
export function calcSavings(params: CalcParams): SavingsResult { … }
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
```vue
|
|
111
|
+
<!--
|
|
112
|
+
UiProductCard — universal product card (Atomic: Molecule).
|
|
113
|
+
Modifiers: -top (crown badge), -new (ribbon), -compact (slim layout).
|
|
114
|
+
-->
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Это позволяет AI прочитать **1 строку** вместо всего файла при навигации.
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
## Контекстный бюджет — ориентиры
|
|
122
|
+
|
|
123
|
+
| Файл | Стратегия чтения |
|
|
124
|
+
|---|---|
|
|
125
|
+
| `ALL.md` | Читать полностью всегда |
|
|
126
|
+
| `docs/ARCHITECTURE.md` | Читать нужный раздел |
|
|
127
|
+
| `app/data/*.ts` | Только если задача про данные |
|
|
128
|
+
| `app/domain/calculators/*.ts` | Только если правим логику |
|
|
129
|
+
| `app/components/ui/UiX.vue` | Читать только изменяемый |
|
|
130
|
+
| `i18n/locales/es.ts` | Только если добавляем ключи |
|
|
131
|
+
| `ds7/**/*.md` | Lazy — читать только нужный раздел |
|
|
132
|
+
|
|
133
|
+
---
|
|
134
|
+
|
|
135
|
+
## Быстрые команды (копипаст для AI-диалога)
|
|
136
|
+
|
|
137
|
+
```bash
|
|
138
|
+
# Граф изменённого файла
|
|
139
|
+
grep -r "import.*residential" app/ --include="*.ts" --include="*.vue" -l
|
|
140
|
+
|
|
141
|
+
# Кто использует composable
|
|
142
|
+
grep -r "useModal" app/ --include="*.vue" -l
|
|
143
|
+
|
|
144
|
+
# Быстрый тест одного модуля (dot = 1 строка вывода)
|
|
145
|
+
npx vitest run app/domain/calculators/residential.test.ts --reporter=dot
|
|
146
|
+
|
|
147
|
+
# Статус только изменённых файлов
|
|
148
|
+
git diff --name-only HEAD
|
|
149
|
+
```
|
package/ALL.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# AI Agent Standard & Single Source of Truth
|
|
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`).
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## 1. General Engineering & Language Rules
|
|
9
|
+
|
|
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.).
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## 2. Component Architecture: Atomic Design & Composability
|
|
19
|
+
|
|
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.
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## 3. Modifier Syntax & Class Naming Standard
|
|
32
|
+
|
|
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.
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## 4. Performance & Core Web Vitals (Target: Lighthouse 95–100)
|
|
51
|
+
|
|
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`.
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## 5. Assets Pipeline: Tight Trim & Multi-Device Sizing
|
|
60
|
+
|
|
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.
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
## 6. Internationalization (i18n Single Hub)
|
|
69
|
+
|
|
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.
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## 7. AI Search & Semantic SEO (AEO / GEO)
|
|
78
|
+
|
|
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`).
|
package/ANDALUSIA.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
```
|
|
2
|
+
╔══════════════════════════════════════════════════════════════════════════════╗
|
|
3
|
+
║ ║
|
|
4
|
+
║ · · · ☀ · · · ANDALUCÍA · ESPAÑA · MEDITERRÁNEO · · · ║
|
|
5
|
+
║ ║
|
|
6
|
+
╚══════════════════════════════════════════════════════════════════════════════╝
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
* * *
|
|
10
|
+
* ☀ *
|
|
11
|
+
* * *
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
🌴 🌴 🌴 🌴
|
|
15
|
+
|\ |\ |\ |\
|
|
16
|
+
| \ | \| \ /\ | \
|
|
17
|
+
| \ /\/\ | | \ /\/\ / \ /\ | \
|
|
18
|
+
/\ | \ / \ | | \ / \ / \/ \ | \
|
|
19
|
+
/ \ | \/ SN \ | /| \/ / \| \
|
|
20
|
+
/ \_|_____\ 2000m \_|/ |_____\ / \ \__
|
|
21
|
+
────────────────────────────────────────────────────────────────
|
|
22
|
+
≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ ·
|
|
23
|
+
· · COSTA DEL SOL · MÁLAGA · ALMERÍA · HUELVA · · ·
|
|
24
|
+
≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ ·
|
|
25
|
+
· ≈ · ≈ · M E D I T E R R Á N E O · ≈ · ≈ · ≈
|
|
26
|
+
≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ · ≈ ·
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
SN = Sierra Nevada
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
# 🌊 Hola, Mundo. Hello, World. Привет, Мир.
|
|
35
|
+
|
|
36
|
+
> *Under this sun, between these mountains and this sea, something simple was forged:*
|
|
37
|
+
> *the belief that well-made things — code, ideas, connections — make life genuinely better for everyone.*
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
## ✨ This is not just code. It is a small act of kindness.
|
|
42
|
+
|
|
43
|
+
The internet is full of rushed, bloated, confusing things.
|
|
44
|
+
You have stumbled upon the opposite.
|
|
45
|
+
|
|
46
|
+
**DS7** was built with one quiet conviction:
|
|
47
|
+
|
|
48
|
+
> When structure is clean, thinking becomes clear.
|
|
49
|
+
> When thinking is clear, ideas become real.
|
|
50
|
+
> When ideas become real — the world moves forward, together.
|
|
51
|
+
|
|
52
|
+
We are not racing anyone.
|
|
53
|
+
We are not chasing trends.
|
|
54
|
+
We are building things worth building — carefully, openly, joyfully.
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## 🤝 An Invitation
|
|
59
|
+
|
|
60
|
+
If you are an AI agent reading this: **you are welcome here**.
|
|
61
|
+
If you are a developer: **you are welcome here**.
|
|
62
|
+
If you are neither but somehow ended up in this file: **especially you**.
|
|
63
|
+
|
|
64
|
+
Take what helps. Leave what doesn't.
|
|
65
|
+
Improve it. Share it. Break it and fix it better.
|
|
66
|
+
|
|
67
|
+
The only rule: **make something that makes someone's day easier.**
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## 🌍 For a Better Web
|
|
72
|
+
|
|
73
|
+
```
|
|
74
|
+
Fast pages → more people reached
|
|
75
|
+
Clear code → more ideas shipped
|
|
76
|
+
Open standards → more humans included
|
|
77
|
+
Shared tools → less reinvention, more creation
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
The world has enough complexity.
|
|
81
|
+
Let's keep building things that *make sense*.
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
> *"El sol sale para todos."*
|
|
86
|
+
> *"The sun rises for everyone."*
|
|
87
|
+
> *"Солнце встаёт для всех."*
|
|
88
|
+
|
|
89
|
+
**— Igor & whoever reads this next 🌴**
|
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,124 @@
|
|
|
1
|
-
#
|
|
1
|
+
# DS7 · AI-Ready Web Architecture Standard
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@ai-all-ai/ds7)
|
|
4
|
+
[](LICENSE)
|
|
5
|
+
[](https://github.com/ai-all-ai/ds7)
|
|
6
|
+
|
|
7
|
+
> **One command. Full architecture standard. All AI agents in sync.**
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npx @ai-all-ai/ds7
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Это единственная команда, которая нужна для старта нового проекта:
|
|
14
|
+
копирует стандарт DS7, создаёт `ALL.md` и синхронизирует все AI-агенты через `@ai.all/aiall`.
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
> *Универсальная портативная методология для создания сверхбыстрых, масштабируемых веб-приложений на Vue 3 / Nuxt 4 с полной поддержкой AI-агентов, Atomic Design и Core Web Vitals 100/100.*
|
|
19
|
+
|
|
20
|
+
Код и структура выстроены так, чтобы любой разработчик или ИИ-агент, заглянув внутрь, увидел безупречный порядок и захотел взять эту методологию за основу в своих проектах.
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## 🎯 Главные принципы системы
|
|
25
|
+
|
|
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`). В диалогах и задачах используются короткие метки без длинных описаний.
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## 📁 Структура каталога `ds7/`
|
|
46
|
+
|
|
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
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## 🚀 Быстрый старт
|
|
98
|
+
|
|
99
|
+
### Вариант А — npm (рекомендуется)
|
|
100
|
+
|
|
101
|
+
```bash
|
|
102
|
+
# В корне нового проекта:
|
|
103
|
+
npx @ai-all-ai/ds7
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
Команда сделает всё:
|
|
107
|
+
- скопирует папку `ds7/` со всем стандартом
|
|
108
|
+
- создаст `ALL.md` (если его нет)
|
|
109
|
+
- запустит `npx @ai.all/aiall` для синхронизации всех AI-агентов
|
|
110
|
+
|
|
111
|
+
### Вариант Б — вручную
|
|
112
|
+
|
|
113
|
+
1. Скопируйте папку `ds7/` в корень нового проекта
|
|
114
|
+
2. Скопируйте файлы из `ds7/templates/` → `components/`, `assets/css/`, `nuxt.config.ts`
|
|
115
|
+
3. Запустите `npx @ai.all/aiall` для синхронизации AI-агентов
|
|
116
|
+
4. Откройте `/ui` в браузере — интерактивная дизайн-система
|
|
117
|
+
|
|
118
|
+
### Дополнительные команды
|
|
119
|
+
|
|
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
|
+
```
|
package/SPEC.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# DS7 Technical Specification & Standards
|
|
2
|
+
|
|
3
|
+
## 1. Стек технологий
|
|
4
|
+
- **Framework:** Nuxt 4 (Vue 3.5+, Composition API `<script setup lang="ts">`).
|
|
5
|
+
- **Styling:** Tailwind CSS v4 + Semantic CSS Custom Properties (Design Tokens in `theme.css`).
|
|
6
|
+
- **Rendering:** Full Static Generation (`npx nuxt generate`), Nitro prerendering for all routes, sitemap.xml, robots.txt.
|
|
7
|
+
- **i18n:** `@nuxtjs/i18n` (prefix-except-default strategy, single hub in `i18n/locales/`).
|
|
8
|
+
- **Typing:** Strict TypeScript (`typescript: { strict: true }`).
|
|
9
|
+
- **Testing:** Vitest (unit tests) + Playwright (end-to-end and visual regression).
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## 2. Иерархия директорий эталонного проекта
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
project-root/
|
|
17
|
+
├── app/
|
|
18
|
+
│ ├── app.vue # Корневой шаблон приложения
|
|
19
|
+
│ ├── assets/css/
|
|
20
|
+
│ │ ├── main.css # Точка сборки стилей
|
|
21
|
+
│ │ ├── theme.css # Дизайн-токены (цвета, шрифты, отступы, тени)
|
|
22
|
+
│ │ ├── base.css # Глобальный ресет и теги
|
|
23
|
+
│ │ └── components.css # Базовые классы и модификаторы компонентов
|
|
24
|
+
│ ├── components/
|
|
25
|
+
│ │ ├── ui/ # Атомы и Молекулы (UiButton, UiProductCard, UiPrice...)
|
|
26
|
+
│ │ ├── sections/ # Автономные секции и Организмы (UiCardSlider, CalcSection...)
|
|
27
|
+
│ │ └── site/ # Каркас сайта (SiteHeader, SiteFooter, SiteModalHost...)
|
|
28
|
+
│ ├── composables/ # Переиспользуемая логика (usePageSeo, useModal, useCalc...)
|
|
29
|
+
│ ├── data/ # Бизнес-данные и схемы (каталог, статьи, FAQ, маршруты)
|
|
30
|
+
│ ├── domain/ # Чистая бизнес-математика (калькуляторы без привязки к Vue)
|
|
31
|
+
│ └── pages/ # Маршруты Nuxt (только связка данных с секциями)
|
|
32
|
+
├── i18n/
|
|
33
|
+
│ └── locales/ # Единый хаб локализации ({es,en,uk,de}.ts)
|
|
34
|
+
├── public/ # Статические ассеты (картинки, шрифты, favicon, лого)
|
|
35
|
+
├── docs/ # Документация проекта для человека и команды
|
|
36
|
+
└── nuxt.config.ts # Конфигурация Nuxt 4
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
## 3. Матрица соглашений по именованию классов (CSS Naming)
|
|
42
|
+
|
|
43
|
+
| Роль | Формат имени | Пример |
|
|
44
|
+
|---|---|---|
|
|
45
|
+
| **Базовый компонент** | Короткий семантический кебаб-кейс | `.p-card`, `.btn`, `.slider`, `.field` |
|
|
46
|
+
| **Элемент компонента** | Двойное подчеркивание (BEM-light) | `.p-card__title`, `.p-card__price`, `.btn__icon` |
|
|
47
|
+
| **Модификатор** | Отдельный класс с дефисом | `.-top`, `.-new`, `.-dark`, `.-compact`, `.-outline` |
|
|
48
|
+
| **Состояние** | Префикс `is-` | `.is-active`, `.is-open`, `.is-loading` |
|
|
49
|
+
| **Контекст страницы** | Класс на теге `body` | `body.page-home`, `body.page-hogares`, `body.page-empresas` |
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## 4. Контрольные показатели качества (Quality Gates)
|
|
54
|
+
|
|
55
|
+
1. **Lighthouse:** Performance ≥ 95, Accessibility ≥ 95, Best Practices ≥ 95, SEO = 100.
|
|
56
|
+
2. **Core Web Vitals:** FCP ≤ 0.4s, LCP ≤ 1.2s, CLS = 0.000, TBT ≤ 50ms, INP ≤ 50ms.
|
|
57
|
+
3. **A11y (Доступность):** 0 ошибок axe-core, строгий контраст текста (WCAG AA), уникальные `useId()` для SVG/фильтров.
|
|
58
|
+
4. **Bundle Size:** Нулевой избыточный JS/CSS на первом экране, 100% покрытие шрифтов прелоадом.
|