@birdapi/velinstyle 1.1.0 → 1.2.1

package/components/velin-file-dropzone.js

@@ -0,0 +1,162 @@
+import { escapeHTML } from './sanitize.js';
+
+const styles = `
+  :host { display: block; }
+  .zone {
+    border: 2px dashed var(--velin-color-border, #cbd5e1);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    padding: var(--velin-space-6, 1.5rem);
+    background: var(--velin-color-surface-dim, var(--velin-color-bg-subtle, #f8fafc));
+    color: var(--velin-color-text, #111);
+    text-align: center;
+    transition: border-color 150ms ease, background 150ms ease;
+  }
+  :host([dragging]) .zone {
+    border-color: var(--velin-color-primary, #2563eb);
+    background: var(--velin-color-primary-subtle, #eff6ff);
+  }
+  .hint { margin: 0 0 var(--velin-space-3, 0.75rem); color: var(--velin-color-text-muted, #64748b); }
+  .browse {
+    display: inline-flex; align-items: center; justify-content: center;
+    min-block-size: 2.75rem; padding-inline: var(--velin-space-4, 1rem);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    border: none; cursor: pointer;
+    background: var(--velin-color-primary, #2563eb);
+    color: var(--velin-color-on-primary, #fff);
+    font: inherit;
+  }
+  .browse:focus-visible { outline: 2px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  input[type="file"] {
+    position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0,0,0,0); border: 0;
+  }
+  .list { list-style: none; padding: 0; margin: var(--velin-space-4, 1rem) 0 0; text-align: start; }
+  .list li {
+    display: flex; justify-content: space-between; gap: var(--velin-space-3, 0.75rem);
+    padding: var(--velin-space-2, 0.5rem) 0;
+    border-block-end: 1px solid var(--velin-color-border, #e2e8f0);
+    font-size: var(--velin-text-sm, 0.875rem);
+  }
+  .progress {
+    margin-block-start: var(--velin-space-3, 0.75rem);
+    block-size: 0.5rem; border-radius: 999px;
+    background: var(--velin-color-border, #e2e8f0); overflow: hidden;
+  }
+  .bar {
+    block-size: 100%; inline-size: 0%;
+    background: var(--velin-color-primary, #2563eb);
+    transition: inline-size 150ms ease;
+  }
+  .status { margin: var(--velin-space-2, 0.5rem) 0 0; font-size: var(--velin-text-sm, 0.875rem); }
+  .status[data-tone="error"] { color: var(--velin-color-danger, #b91c1c); }
+`;
+
+class VelinFileDropzone extends HTMLElement {
+  static get observedAttributes() {
+    return ['accept', 'multiple', 'label', 'progress'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._files = [];
+  }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  attributeChangedCallback() {
+    if (this.shadowRoot?.querySelector('.zone')) this._render();
+  }
+
+  get files() {
+    return this._files.slice();
+  }
+
+  _emitFiles(fileList) {
+    const accept = this.getAttribute('accept');
+    const files = [...fileList];
+    if (accept) {
+      const parts = accept.split(',').map((s) => s.trim().toLowerCase());
+      const bad = files.find((f) => {
+        const name = f.name.toLowerCase();
+        const type = (f.type || '').toLowerCase();
+        return !parts.some((p) => (p.startsWith('.') ? name.endsWith(p) : type === p || type.startsWith(p.replace('/*', '/'))));
+      });
+      if (bad) {
+        this._setStatus(`File type not allowed: ${bad.name}`, 'error');
+        this.dispatchEvent(new CustomEvent('velin-error', { bubbles: true, detail: { message: 'accept', file: bad } }));
+        return;
+      }
+    }
+    this._files = files;
+    this._setStatus(files.length ? `${files.length} file(s) ready` : '', 'ok');
+    this.dispatchEvent(new CustomEvent('velin-files', { bubbles: true, detail: { files } }));
+    this._renderList();
+  }
+
+  _setStatus(text, tone = 'ok') {
+    const el = this.shadowRoot?.querySelector('.status');
+    if (!el) return;
+    el.textContent = text;
+    el.dataset.tone = tone;
+  }
+
+  _renderList() {
+    const ul = this.shadowRoot?.querySelector('.list');
+    if (!ul) return;
+    ul.innerHTML = this._files.map((f) => `<li><span>${escapeHTML(f.name)}</span><span>${Math.round(f.size / 1024)} KB</span></li>`).join('');
+  }
+
+  _render() {
+    const label = escapeHTML(this.getAttribute('label') || 'Upload files');
+    const accept = this.getAttribute('accept') || '';
+    const multiple = this.hasAttribute('multiple');
+    const progress = Math.max(0, Math.min(100, Number(this.getAttribute('progress') || 0)));
+
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="zone" role="group" aria-label="${label}">
+        <p class="hint">Drag and drop files here, or browse. Client-side only — wire <code>velin-files</code> to your upload API.</p>
+        <button type="button" class="browse">Browse files</button>
+        <input type="file" ${accept ? `accept="${escapeHTML(accept)}"` : ''} ${multiple ? 'multiple' : ''} />
+        <div class="progress" hidden="${progress <= 0 ? 'true' : 'false'}" aria-hidden="${progress <= 0 ? 'true' : 'false'}">
+          <div class="bar" style="inline-size:${progress}%"></div>
+        </div>
+        <p class="status" role="status" aria-live="polite"></p>
+        <ul class="list"></ul>
+      </div>
+    `;
+
+    const input = this.shadowRoot.querySelector('input');
+    const browse = this.shadowRoot.querySelector('.browse');
+    const zone = this.shadowRoot.querySelector('.zone');
+    browse.addEventListener('click', () => input.click());
+    input.addEventListener('change', () => {
+      if (input.files?.length) this._emitFiles(input.files);
+    });
+
+    ['dragenter', 'dragover'].forEach((ev) => {
+      zone.addEventListener(ev, (e) => {
+        e.preventDefault();
+        this.setAttribute('dragging', '');
+      });
+    });
+    ['dragleave', 'drop'].forEach((ev) => {
+      zone.addEventListener(ev, (e) => {
+        e.preventDefault();
+        this.removeAttribute('dragging');
+      });
+    });
+    zone.addEventListener('drop', (e) => {
+      const list = e.dataTransfer?.files;
+      if (list?.length) this._emitFiles(list);
+    });
+
+    this._renderList();
+  }
+}
+
+customElements.define('velin-file-dropzone', VelinFileDropzone);
+export default VelinFileDropzone;

package/components/velin-icon.js

@@ -32,8 +32,28 @@ function resolveProviderUrl(provider, variant) {
 }
 
 const _svgCache = new Map();
+const DEFAULT_SPRITE = 'velin-icons.svg';
+
+/**
+ * Resolve default sprite URL: attribute → meta/html data → VelinIcon.defaultSprite → relative fallback.
+ * Avoids hardcoded absolute `/dist/...` which breaks offline/vendor installs.
+ */
+function resolveDefaultSpriteUrl() {
+  if (typeof document !== 'undefined') {
+    const meta = document.querySelector('meta[name="velin-icon-sprite"]');
+    const fromMeta = meta?.getAttribute('content')?.trim();
+    if (fromMeta) return fromMeta;
+    const fromHtml = document.documentElement?.getAttribute('data-velin-icon-sprite')?.trim();
+    if (fromHtml) return fromHtml;
+  }
+  const configured = typeof VelinIcon.defaultSprite === 'string' ? VelinIcon.defaultSprite.trim() : '';
+  return configured || DEFAULT_SPRITE;
+}
 
 class VelinIcon extends HTMLElement {
+  /** @type {string} Relative or absolute sprite URL used when `sprite` attribute is omitted. */
+  static defaultSprite = DEFAULT_SPRITE;
+
   static get observedAttributes() {
     return ['name', 'size', 'label', 'provider', 'variant', 'sprite'];
   }
@@ -99,7 +119,8 @@ class VelinIcon extends HTMLElement {
     if (spriteAttr === '' || (spriteAttr == null && isLocalSymbol)) {
       href = `#${name}`;
     } else {
-      const spriteUrl = sanitizeURL(spriteAttr || '/dist/velin-icons.svg') || '/dist/velin-icons.svg';
+      const fallback = resolveDefaultSpriteUrl();
+      const spriteUrl = sanitizeURL(spriteAttr || fallback) || fallback || DEFAULT_SPRITE;
       href = `${spriteUrl}#${name}`;
     }
     use.setAttribute('href', href);

package/components/velin-lightbox.js

@@ -92,7 +92,6 @@ class VelinLightbox extends HTMLElement {
     this.setAttribute('open', '');
     setBackgroundInert(this);
     this._render();
-    document.body.style.overflow = 'hidden';
     const overlay = this.shadowRoot.querySelector('.overlay');
     overlay.removeEventListener('keydown', this._onTrapKey);
     overlay.addEventListener('keydown', this._onTrapKey);
@@ -101,8 +100,7 @@ class VelinLightbox extends HTMLElement {
 
   close() {
     this.removeAttribute('open');
-    clearBackgroundInert();
-    document.body.style.overflow = '';
+    clearBackgroundInert(this);
     if (this._previousFocus) {
       this._previousFocus.focus();
       this._previousFocus = null;
@@ -110,6 +108,10 @@ class VelinLightbox extends HTMLElement {
     this.dispatchEvent(new CustomEvent('velin-close', { bubbles: true }));
   }
 
+  disconnectedCallback() {
+    clearBackgroundInert(this);
+  }
+
   _prev() { this._index = (this._index - 1 + this._items.length) % this._items.length; this._render(); }
   _next() { this._index = (this._index + 1) % this._items.length; this._render(); }
 

package/components/velin-modal.js

@@ -146,7 +146,6 @@ class VelinModal extends HTMLElement {
     this._previouslyFocused = saveFocus();
     setBackgroundInert(this);
     document.addEventListener('keydown', this._onKeydown);
-    document.body.style.overflow = 'hidden';
 
     requestAnimationFrame(() => {
       const focusable = getFocusableElements(this.shadowRoot);
@@ -156,8 +155,7 @@ class VelinModal extends HTMLElement {
 
   _close() {
     document.removeEventListener('keydown', this._onKeydown);
-    document.body.style.overflow = '';
-    clearBackgroundInert();
+    clearBackgroundInert(this);
     restoreFocus(this._previouslyFocused);
   }
 
@@ -171,7 +169,7 @@ class VelinModal extends HTMLElement {
 
   disconnectedCallback() {
     document.removeEventListener('keydown', this._onKeydown);
-    document.body.style.overflow = '';
+    clearBackgroundInert(this);
   }
 }
 

package/components/velin-search.js

@@ -129,7 +129,7 @@ class VelinSearch extends HTMLElement {
       return;
     }
     if (!this._indexLoaded) await this._loadIndex();
-    const { groups } = this._search.query(q, {
+    const { groups } = await this._search.query(q, {
       minChars: this.minChars,
       fuzzy: this.fuzzy,
       categories: this.categories || undefined,

package/components/velin-sheet.js

@@ -78,7 +78,6 @@ class VelinSheet extends HTMLElement {
     this._prev = saveFocus();
     setBackgroundInert(this);
     document.addEventListener('keydown', this._onKey);
-    document.body.style.overflow = 'hidden';
     requestAnimationFrame(() => {
       const f = getFocusableElements(this.shadowRoot);
       if (f.length) f[0].focus();
@@ -87,8 +86,7 @@ class VelinSheet extends HTMLElement {
 
   _close() {
     document.removeEventListener('keydown', this._onKey);
-    document.body.style.overflow = '';
-    clearBackgroundInert();
+    clearBackgroundInert(this);
     restoreFocus(this._prev);
   }
 
@@ -99,7 +97,7 @@ class VelinSheet extends HTMLElement {
 
   disconnectedCallback() {
     document.removeEventListener('keydown', this._onKey);
-    document.body.style.overflow = '';
+    clearBackgroundInert(this);
   }
 }
 

package/core/a11y/component-contracts.json

@@ -1,6 +1,6 @@
 {
   "wcagLevel": "AAA",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "components": {
     "velin-accordion": {
       "status": "pass",
@@ -77,11 +77,28 @@
     "velin-data-table": {
       "status": "pass",
       "roles": ["button"],
-      "keyboard": "Native buttons for column sort and pagination",
+      "keyboard": "Sort buttons; editable cells: Enter/F2 edit, Escape cancel; pagination",
       "liveRegion": "polite",
       "reducedMotion": true,
       "requiredAttributes": [],
-      "notes": "Enhances a light-DOM table. Sort state exposed via aria-sort; sort triggers are real buttons. Needs a caption, aria-label, or label attribute (warns otherwise). Filtered and off-page rows use hidden so they leave the a11y tree; sort, filter and page changes are announced."
+      "notes": "Enhances a light-DOM table. Optional editable attribute or data-editable cells for inline edit (velin-data-table-edit). No virtualization in v1."
+    },
+    "velin-calendar": {
+      "status": "pass",
+      "roles": ["group", "grid", "button"],
+      "keyboard": "Arrows, Home/End, PageUp/Down, Enter/Space",
+      "reducedMotion": true,
+      "requiredAttributes": [],
+      "notes": "Month calendar. value ISO date; velin-change event. Optional min/max."
+    },
+    "velin-file-dropzone": {
+      "status": "pass",
+      "roles": ["group"],
+      "keyboard": "Browse button + native file input",
+      "liveRegion": "polite",
+      "reducedMotion": true,
+      "requiredAttributes": [],
+      "notes": "Client-side dropzone. Events velin-files / velin-error. Does not upload to a server."
     },
     "velin-dialog": {
       "status": "pass",

package/core/attributes/registry.js

@@ -226,6 +226,20 @@ function registerBuiltins() {
     },
   });
 
+  registerAttribute('velin-transparency', {
+    async enhance(el) {
+      const { attach } = await import('../transparency/attach.js');
+      attach(el);
+    },
+  });
+  registerAttribute('velin-disclosure', {
+    async enhance(el) {
+      const { attach } = await import('../transparency/attach.js');
+      if (!el.hasAttribute('velin-transparency')) el.setAttribute('velin-transparency', '');
+      attach(el);
+    },
+  });
+
   for (const motion of ['velin-reveal', 'velin-fade', 'velin-slide', 'velin-scale', 'velin-parallax', 'velin-hover', 'velin-stagger', 'velin-scroll']) {
     registerAttribute(motion, { enhance() {} });
   }

package/core/meta/build.js

@@ -164,6 +164,35 @@ export async function buildAgentBundle(options) {
     }
   }
 
+  const readJsonSafe = (rel) => {
+    const p = join(pkgRoot, rel);
+    if (!existsSync(p)) return null;
+    try {
+      return JSON.parse(readFileSync(p, 'utf-8'));
+    } catch {
+      return null;
+    }
+  };
+
+  const knowledgeComponents = readJsonSafe('core/meta/knowledge/components.json');
+  const knowledgeTokens = readJsonSafe('core/meta/knowledge/tokens.json');
+  const pageRegistry = readJsonSafe('core/meta/pages/registry.json');
+  const sectionRegistry = readJsonSafe('core/meta/sections/registry.json');
+  const skillsRegistry = readJsonSafe('packages/velinstyle-skills/registry.json');
+  const skillsCatalog = readJsonSafe('packages/velinstyle-skills/catalog.json');
+
+  const constraintDir = join(pkgRoot, 'core', 'meta', 'design-constraints');
+  const designConstraints = [];
+  if (existsSync(constraintDir)) {
+    for (const file of readdirSync(constraintDir).filter((f) => f.endsWith('.json'))) {
+      try {
+        designConstraints.push(JSON.parse(readFileSync(join(constraintDir, file), 'utf-8')));
+      } catch {
+        /* skip bad files */
+      }
+    }
+  }
+
   const bundle = {
     schemaVersion: VELIN_AGENT_SCHEMA_VERSION,
     mime: VELIN_META_MIME,
@@ -174,7 +203,8 @@ export async function buildAgentBundle(options) {
       homepage: pkg.homepage,
       repository: pkg.repository,
       tagline:
-        'VelinStyle is the WCAG 2.2 AAA CSS framework with native JavaScript runtime and Web Components.',
+        'VelinStyle is a CSS framework with WCAG 2.2 AAA-oriented defaults, native JavaScript runtime, and Web Components.',
+      pipeline: 'Core Foundation → Design System → Knowledge Graph → Prompt Engine → Review Engine → AI Metadata',
     },
     packageExports: pkg.exports,
     release: {
@@ -185,6 +215,7 @@ export async function buildAgentBundle(options) {
       migration: [
         'Replace velin-tooltip-wc / velin-stepper-wc with velin-tooltip / velin-stepper.',
         'Point AI tools at velin-agent.json or docs/llms.txt for framework context.',
+        'Prefer velinstyle scaffold / plan for page generation (plan → render → review).',
       ],
     },
     components: {
@@ -195,10 +226,73 @@ export async function buildAgentBundle(options) {
       legacyAliases,
       helpers,
     },
+    knowledgeGraph: {
+      components: knowledgeComponents?.components || [],
+      componentCount: knowledgeComponents?.components?.length || 0,
+      tokens: knowledgeTokens,
+      pages: pageRegistry?.pages || [],
+      pageCount: pageRegistry?.pages?.length || 0,
+      sections: sectionRegistry?.sections || [],
+      sectionCount: sectionRegistry?.sections?.length || 0,
+      designConstraints,
+      schemas: [
+        'schemas/component-knowledge.schema.json',
+        'schemas/design-intelligence.schema.json',
+        'schemas/design-constraint.schema.json',
+        'schemas/page-template.schema.json',
+        'schemas/section.schema.json',
+        'schemas/review-report.schema.json',
+        'schemas/token-graph.schema.json',
+        'schemas/design-rule.schema.json',
+        'schemas/skill-record.schema.json',
+        'schemas/skill-registry.schema.json',
+        'schemas/skill-pack.schema.json',
+        'schemas/skill-graph.schema.json',
+        'schemas/skill-bundle.schema.json',
+        'schemas/skill-template.schema.json',
+        'schemas/skill-project.schema.json',
+      ],
+    },
+    skills: {
+      count: skillsCatalog?.totals?.skills || skillsRegistry?.skills?.length || 0,
+      categories: [...new Set((skillsRegistry?.skills || []).map((item) => item.category))].sort(),
+      capabilities: [...new Set((skillsRegistry?.skills || []).flatMap((item) => item.capabilities || []))].sort(),
+      items: (skillsRegistry?.skills || []).map((item) => ({
+        id: item.id,
+        category: item.category,
+        priority: item.priority,
+        status: item.status,
+        confidence: item.confidence,
+        capabilities: item.capabilities || [],
+      })),
+    },
+    skillPacks: skillsRegistry?.packs || [],
+    workflowGraphs: (skillsRegistry?.workflowGraphs || []).map((graph) => ({
+      id: graph.id,
+      name: graph.name,
+      entry: graph.entry,
+      nodeCount: Object.keys(graph.nodes || {}).length,
+      edgeCount: (graph.edges || []).length,
+    })),
+    bundles: skillsRegistry?.bundles || [],
+    templates: skillsRegistry?.templates || [],
+    projectSkills: skillsRegistry?.projects || [],
     attributes: { names: attributes, count: attributes.length },
     cli: { commands: cliCommands },
     tooling: {
-      categories: ['scan', 'prefix', 'scaffold', 'layout', 'perf', 'tokens', 'docs', 'search', 'meta'],
+      categories: [
+        'scan',
+        'prefix',
+        'scaffold',
+        'plan',
+        'review',
+        'layout',
+        'perf',
+        'tokens',
+        'docs',
+        'search',
+        'meta',
+      ],
       scannerRuleCount,
     },
     a11y: {
@@ -216,11 +310,17 @@ export async function buildAgentBundle(options) {
       generated: 'docs/generated/',
       guides: {
         velinMeta: 'docs/guides/velin-meta.html',
+        aiSkills: 'docs/guides/ai-skills.html',
         velinSearch: 'docs/guides/velin-search.html',
         syntaxHighlight: 'docs/guides/syntax-highlight.html',
         promptScaffolding: 'docs/guides/prompt-scaffolding.html',
         apiReference: 'docs/guides/api-reference.html',
       },
+      strategy: {
+        note: 'Maintainer strategy/ADR docs are not published (monorepo interne_docs/strategy).',
+        northStar: 'VELINSTYLE_2030.md',
+        architecture: 'ARCHITECTURE.md',
+      },
       agentFiles: {
         json: 'dist/velin-agent.json',
         llmsTxt: 'dist/llms.txt',
@@ -240,7 +340,7 @@ export async function buildAgentBundle(options) {
 export function buildLlmsTxt(bundle, baseUrl = 'https://velinstyle.info') {
   const tagline =
     bundle.framework.tagline ||
-    'VelinStyle is the WCAG 2.2 AAA CSS framework with native JavaScript runtime and Web Components.';
+    'VelinStyle is a CSS framework with WCAG 2.2 AAA-oriented defaults, native JavaScript runtime, and Web Components.';
   const lines = [
     `# VelinStyle ${bundle.framework.version}`,
     '',
@@ -251,19 +351,34 @@ export function buildLlmsTxt(bundle, baseUrl = 'https://velinstyle.info') {
     '## Framework',
     `- npm: ${bundle.framework.name}`,
     `- ${tagline}`,
+    `- Pipeline: ${bundle.framework.pipeline || 'Core → Design → Knowledge → Prompt → Review → AI Metadata'}`,
+    `- Maturity: CSS/Web Components/runtime = stable; plan/review, knowledge graph, page/section registry, agent metadata = beta/foundation (seed, expanding); Studio + Utility Engine generator = planned`,
     `- Components: ${bundle.components.count} canonical Web Components (\`velin-*\`); ${bundle.components.loaderCount ?? bundle.components.count} lazy-loader entries`,
+    `- Knowledge graph: ${bundle.knowledgeGraph?.componentCount ?? 0} component nodes, ${bundle.knowledgeGraph?.pageCount ?? 0} page types, ${bundle.knowledgeGraph?.sectionCount ?? 0} sections, ${bundle.knowledgeGraph?.designConstraints?.length ?? 0} design constraint packs`,
     `- HTML attributes: ${bundle.attributes.count} \`velin-*\` bridges`,
-    `- CLI: velinstyle (scan, scaffold, docs generate, search index, meta)`,
+    `- CLI: velinstyle (scan, scaffold, plan, review, docs generate, search index, meta)`,
+    '',
+    '## Agent briefing',
+    '- Treat plan/review/knowledge graph as beta foundation — usable, not a finished AI design system.',
+    '- Build pages with plan-first flow: analyze prompt → page registry → sections → design constraints → HTML → review.',
+    '- Prefer tokens (`--velin-color-*`, `--velin-space-*`) over raw hex.',
+    '- One H1 per page; form fields need labels + `velin-form-summary` when validating.',
+    '- Hero: max 2 CTAs; FAQ uses disclosure (`velin-accordion` / details).',
+    '- Do not invent non-`velin-*` utility classes.',
+    '- Prefer registry-backed skills/workflows (`velinstyle skills ...`, `velinstyle workflow ...`) before ad-hoc orchestration.',
     '',
     '## Conventions',
     ...bundle.conventions.map((c) => `- ${c}`),
     '',
     '## Key guides',
     `- [Velin-Meta](${baseUrl}/docs/guides/velin-meta.html)`,
+    `- [AI Skills](${baseUrl}/docs/guides/ai-skills.html)`,
     `- [VelinSearch](${baseUrl}/docs/guides/velin-search.html)`,
     `- [Syntax highlighting](${baseUrl}/docs/guides/syntax-highlight.html)`,
     `- [Prompt scaffolding](${baseUrl}/docs/guides/prompt-scaffolding.html)`,
     `- [API reference (generated)](${baseUrl}/docs/guides/api-reference.html)`,
+    `- North star: VELINSTYLE_2030.md`,
+    `- Architecture: ARCHITECTURE.md`,
     '',
     '## Generated reference',
     `- [Components index](${baseUrl}/docs/generated/components/)`,
@@ -273,9 +388,14 @@ export function buildLlmsTxt(bundle, baseUrl = 'https://velinstyle.info') {
     '',
     '## Usage for agents',
     '```',
+    'npx velinstyle plan "Steuerberater Landingpage mit Kontaktformular"',
+    'npx velinstyle scaffold "Steuerberater Landingpage mit Kontaktformular" -o out.html --json',
+    'npx velinstyle review out.html --json',
     'npx velinstyle meta',
     'npx velinstyle docs generate',
-    'npx velinstyle search index',
+    'npx velinstyle skills list --capability review',
+    'npx velinstyle skills install frontend',
+    'npx velinstyle workflow landingpage --json',
     '```',
     '',
   ];

package/core/meta/design-constraints/contact.json

@@ -0,0 +1,9 @@
+{
+  "id": "contact",
+  "target": "section:contact",
+  "rules": [
+    { "id": "contact-labels", "scope": "section", "section": "contact", "rule": "Visible labels on all fields", "severity": "error" },
+    { "id": "contact-summary", "scope": "section", "section": "contact", "rule": "Include velin-form-summary for errors", "severity": "error" },
+    { "id": "contact-submit", "scope": "section", "section": "contact", "rule": "Single primary submit button", "severity": "warning" }
+  ]
+}

package/core/meta/design-constraints/faq.json

@@ -0,0 +1,9 @@
+{
+  "id": "faq",
+  "target": "section:faq",
+  "rules": [
+    { "id": "faq-questions", "scope": "section", "section": "faq", "rule": "Entries must be clear interrogatives", "severity": "error" },
+    { "id": "faq-pattern", "scope": "section", "section": "faq", "rule": "Use accordion/disclosure, not long marketing paragraphs", "severity": "error" },
+    { "id": "faq-count", "scope": "section", "section": "faq", "rule": "Prefer 5–8 high-intent FAQs", "severity": "info" }
+  ]
+}

package/core/meta/design-constraints/hero.json

@@ -0,0 +1,13 @@
+{
+  "id": "hero",
+  "target": "section:hero",
+  "rules": [
+    { "id": "hero-headline-lines", "scope": "section", "section": "hero", "rule": "Headline max 2 lines on desktop", "severity": "error" },
+    { "id": "hero-cta-max", "scope": "section", "section": "hero", "rule": "Maximum 2 CTAs", "severity": "error" },
+    { "id": "hero-image-side", "scope": "section", "section": "hero", "rule": "Image left OR right, not competing dual heroes", "severity": "warning" },
+    { "id": "hero-padding", "scope": "section", "section": "hero", "rule": "Section padding by breakpoint", "breakpoints": { "mobile": "var(--velin-space-8)", "tablet": "var(--velin-space-10)", "desktop": "var(--velin-space-12)" }, "severity": "warning" },
+    { "id": "hero-contrast", "scope": "section", "section": "hero", "rule": "Text/surface pairs must meet contrast contract", "severity": "error" },
+    { "id": "hero-motion", "scope": "section", "section": "hero", "rule": "Animation only when motion-safe", "severity": "warning" },
+    { "id": "hero-container", "scope": "section", "section": "hero", "rule": "Content inside documented container width", "severity": "warning" }
+  ]
+}