{
"schemaVersion": 1,
"mime": "application/vnd.velinstyle.meta+json",
"generatedAt": "2026-08-29T13:26:56.608Z",
"framework": {
"name": "@birdapi/velinstyle",
"version": "1.4.0",
"homepage": "https://velinstyle.info",
"repository": "https://github.com/SkyliteDesign/velinstyle.git",
"tagline": "VelinStyle is the WCAG 2.2 AAA CSS framework with native JavaScript runtime and Web Components ??? build accessible UIs and check accessibility while you develop.",
"pipeline": "Core Foundation ??? Design System ??? Knowledge Graph ??? Prompt Engine ??? Review Engine ??? AI Metadata"
},
"packageExports": [
".",
"./bundle",
"./css",
"./sanitize",
"./runtime",
"./secure",
"./email",
"./search",
"./motion",
"./motion-clip",
"./tailwind",
"./tailwind/css",
"./attributes",
"./adapt",
"./inspector",
"./highlight",
"./meta",
"./transparency",
"./security",
"./a11y",
"./skills-registry",
"./blocks-registry",
"./blocks",
"./experience",
"./cli-core",
"./cli-registry",
"./cli-theme",
"./cli-ui",
"./cli-renderer"
],
"release": {
"breaking": [
"Canonical tags: velin-tooltip, velin-stepper (legacy *-wc aliases deprecated).",
".velin-mb-* is margin-bottom only; use .velin-my-* for block axis."
],
"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": {
"tags": [
"velin-accordion",
"velin-announcer",
"velin-bottom-nav",
"velin-calendar",
"velin-carousel",
"velin-code-block",
"velin-collapse",
"velin-combobox",
"velin-command",
"velin-copy",
"velin-countdown",
"velin-counter",
"velin-data-table",
"velin-dialog",
"velin-drawer",
"velin-dropdown",
"velin-email",
"velin-empty-state",
"velin-file-dropzone",
"velin-form-summary",
"velin-icon",
"velin-lightbox",
"velin-live-dot",
"velin-menubar",
"velin-modal",
"velin-otp-input",
"velin-password-strength",
"velin-persist",
"velin-popover",
"velin-progress-ring",
"velin-rating",
"velin-scroll-top",
"velin-scrollspy",
"velin-search",
"velin-secure-field",
"velin-segmented-control",
"velin-sheet",
"velin-sparkline",
"velin-stepper",
"velin-tabs",
"velin-theme-toggle",
"velin-toast",
"velin-tooltip"
],
"count": 43,
"loaderTags": [
"velin-accordion",
"velin-announcer",
"velin-bottom-nav",
"velin-calendar",
"velin-carousel",
"velin-code-block",
"velin-collapse",
"velin-combobox",
"velin-command",
"velin-copy",
"velin-countdown",
"velin-counter",
"velin-data-table",
"velin-dialog",
"velin-drawer",
"velin-dropdown",
"velin-email",
"velin-empty-state",
"velin-file-dropzone",
"velin-form-summary",
"velin-icon",
"velin-lightbox",
"velin-live-dot",
"velin-menubar",
"velin-modal",
"velin-otp-input",
"velin-password-strength",
"velin-persist",
"velin-popover",
"velin-progress-ring",
"velin-rating",
"velin-scroll-top",
"velin-scrollspy",
"velin-search",
"velin-secure-field",
"velin-segmented-control",
"velin-sheet",
"velin-sparkline",
"velin-stepper",
"velin-stepper-wc",
"velin-tabs",
"velin-theme-toggle",
"velin-toast",
"velin-tooltip",
"velin-tooltip-wc"
],
"loaderCount": 45,
"legacyAliases": [
"velin-stepper-wc",
"velin-tooltip-wc"
],
"helpers": [
"velin-flip",
"velin-haptic",
"velin-reveal"
]
},
"knowledgeGraph": {
"components": [
{
"id": "css-button",
"kind": "css-component",
"classPrefix": "velin-btn",
"category": "actions",
"subcategory": "button",
"purpose": "Primary interactive control for actions and form submit.",
"family": "actions",
"maturity": "core",
"recommendedPages": [
"landing",
"saas",
"dashboard",
"shop"
],
"recommendedSections": [
"hero",
"cta",
"contact",
"pricing"
],
"compatibleWith": [
"css-card",
"css-input",
"velin-form-summary"
],
"incompatibleWith": [],
"accessibility": {
"role": "native button/link",
"keyboard": "Enter/Space on button"
},
"seo": {
"impact": "low",
"notes": "CTA copy affects conversion, not crawl structure"
},
"performance": {
"cost": "css-only"
},
"variants": [
"primary",
"secondary",
"ghost",
"danger",
"sm",
"lg"
],
"density": [
"comfortable",
"default",
"compact"
],
"themeSupport": [
"light",
"dark",
"system"
],
"motion": {
"hover": true,
"reducedMotionSafe": true
},
"examples": [
""
],
"promptKeywords": [
"button",
"cta",
"call to action",
"submit"
],
"designIntelligence": {
"visualWeight": 4,
"importance": "primary",
"hierarchy": "action",
"spacingRules": [
"pair with gap-3 or gap-4 in CTA groups"
],
"typographyRules": [
"label ??? 3 words preferred"
],
"animationRules": [
"no infinite pulse on primary CTA"
],
"colorRules": [
"primary uses --velin-color-primary + on-primary text"
],
"eyeFlow": "place primary CTA after supporting copy",
"compositionRules": [
"max 2 CTAs in hero"
],
"commonMistakes": [
"three equal CTAs",
"low contrast ghost on muted"
],
"bestPractices": [
"one primary + optional secondary"
]
}
},
{
"id": "css-card",
"kind": "css-component",
"classPrefix": "velin-card",
"category": "content",
"subcategory": "card",
"purpose": "Grouped content surface for features, services, pricing tiers.",
"family": "surfaces",
"maturity": "core",
"recommendedPages": [
"landing",
"saas",
"agency",
"portfolio"
],
"recommendedSections": [
"services",
"benefits",
"pricing"
],
"compatibleWith": [
"css-button",
"css-badge",
"velin-icon"
],
"incompatibleWith": [],
"accessibility": {
"notes": "Heading inside card; don't nest interactive without care"
},
"seo": {
"impact": "medium",
"notes": "Card headings help section semantics"
},
"performance": {
"cost": "css-only"
},
"variants": [
"raised",
"bordered"
],
"density": [
"comfortable",
"default",
"compact"
],
"themeSupport": [
"light",
"dark"
],
"motion": {
"reducedMotionSafe": true
},
"examples": [
"???"
],
"promptKeywords": [
"card",
"feature",
"service",
"tile"
],
"designIntelligence": {
"visualWeight": 3,
"importance": "secondary",
"hierarchy": "section-item",
"spacingRules": [
"grid gap-4 or gap-6"
],
"typographyRules": [
"H3 title + short body"
],
"animationRules": [
"optional entrance; respect reduced motion"
],
"colorRules": [
"raised surface + text tokens"
],
"eyeFlow": "scan titles across grid first",
"compositionRules": [
"2???4 columns desktop; 1 mobile"
],
"commonMistakes": [
"uneven card heights with sparse content",
"too many cards above fold"
],
"bestPractices": [
"equal structure: icon, title, text, optional link"
]
}
},
{
"id": "css-input",
"kind": "css-component",
"classPrefix": "velin-input",
"category": "forms",
"subcategory": "field",
"purpose": "Text entry fields with labels for forms.",
"family": "forms",
"maturity": "core",
"recommendedPages": [
"landing",
"saas",
"dashboard",
"shop"
],
"recommendedSections": [
"contact",
"login"
],
"compatibleWith": [
"velin-form-summary",
"css-button"
],
"incompatibleWith": [],
"accessibility": {
"notes": "Visible label required; wire aria-invalid via form-summary"
},
"seo": {
"impact": "low"
},
"performance": {
"cost": "css-only"
},
"variants": [
"default",
"invalid"
],
"density": [
"default",
"compact",
"data-dense"
],
"themeSupport": [
"light",
"dark"
],
"motion": {},
"examples": [
""
],
"promptKeywords": [
"input",
"form field",
"text field"
],
"designIntelligence": {
"visualWeight": 2,
"importance": "primary",
"hierarchy": "form-control",
"spacingRules": [
"stack fields with gap-4"
],
"typographyRules": [
"label above field"
],
"animationRules": [],
"colorRules": [
"invalid uses danger tokens"
],
"eyeFlow": "label ??? field ??? help ??? errors summary",
"compositionRules": [
"group related fields"
],
"commonMistakes": [
"placeholder-only labels"
],
"bestPractices": [
"pair with velin-form-summary"
]
}
},
{
"id": "css-alert",
"kind": "css-component",
"classPrefix": "velin-alert",
"category": "feedback",
"subcategory": "alert",
"purpose": "Inline status messages.",
"family": "feedback",
"maturity": "core",
"recommendedPages": [
"dashboard",
"saas",
"docs"
],
"recommendedSections": [
"contact",
"onboarding"
],
"compatibleWith": [
"velin-form-summary"
],
"incompatibleWith": [],
"accessibility": {
"role": "status/alert depending on urgency"
},
"seo": {
"impact": "none"
},
"performance": {
"cost": "css-only"
},
"variants": [
"info",
"success",
"warning",
"danger"
],
"density": [
"default",
"compact"
],
"themeSupport": [
"light",
"dark"
],
"motion": {},
"examples": [
"???
"
],
"promptKeywords": [
"alert",
"banner",
"notice"
],
"designIntelligence": {
"visualWeight": 3,
"importance": "secondary",
"hierarchy": "feedback",
"spacingRules": [
"margin-block before forms"
],
"typographyRules": [
"concise message"
],
"animationRules": [],
"colorRules": [
"semantic status tokens"
],
"eyeFlow": "near the related control",
"compositionRules": [
"one alert per concern"
],
"commonMistakes": [
"using alert for marketing hero"
],
"bestPractices": [
"pair with actionable next step"
]
}
},
{
"id": "css-nav",
"kind": "css-component",
"classPrefix": "velin-nav",
"category": "navigation",
"subcategory": "nav",
"purpose": "Site or app navigation chrome.",
"family": "navigation",
"maturity": "core",
"recommendedPages": [
"landing",
"corporate",
"docs",
"dashboard"
],
"recommendedSections": [
"navbar"
],
"compatibleWith": [
"velin-theme-toggle",
"velin-search"
],
"incompatibleWith": [],
"accessibility": {
"notes": "Landmark nav; skip link on pages"
},
"seo": {
"impact": "high",
"notes": "Primary internal links"
},
"performance": {
"cost": "css-only"
},
"variants": [
"header",
"pills"
],
"density": [
"comfortable",
"default",
"compact"
],
"themeSupport": [
"light",
"dark"
],
"motion": {},
"examples": [
""
],
"promptKeywords": [
"navbar",
"navigation",
"header menu"
],
"designIntelligence": {
"visualWeight": 3,
"importance": "primary",
"hierarchy": "chrome",
"spacingRules": [
"sticky optional; padding-inline token"
],
"typographyRules": [
"short labels"
],
"animationRules": [],
"colorRules": [
"base or raised surface"
],
"eyeFlow": "logo ??? links ??? CTA",
"compositionRules": [
"one primary nav CTA max"
],
"commonMistakes": [
"too many top-level items"
],
"bestPractices": [
"5???7 primary links"
]
}
},
{
"id": "velin-modal",
"kind": "web-component",
"tag": "velin-modal",
"category": "overlays",
"subcategory": "modal",
"purpose": "Blocking dialog overlay for focused tasks.",
"family": "overlays",
"maturity": "core",
"recommendedPages": [
"saas",
"dashboard",
"shop"
],
"recommendedSections": [],
"compatibleWith": [
"css-button",
"velin-form-summary"
],
"incompatibleWith": [
"velin-drawer",
"velin-sheet"
],
"accessibility": {
"focusTrap": true,
"escapeCloses": true,
"inertBackground": true
},
"seo": {
"impact": "none",
"notes": "Do not put primary SEO content only in modal"
},
"performance": {
"cost": "lazy-ok"
},
"variants": [
"open"
],
"density": [
"default"
],
"themeSupport": [
"light",
"dark"
],
"motion": {
"reducedMotionSafe": true
},
"examples": [
"",
"???
"
],
"promptKeywords": [
"modal",
"dialog overlay",
"popup"
],
"designIntelligence": {
"visualWeight": 5,
"importance": "primary",
"hierarchy": "overlay",
"spacingRules": [
"comfortable body padding"
],
"typographyRules": [
"clear title"
],
"animationRules": [
"short open/close; respect reduced motion"
],
"colorRules": [
"overlay surface + dimmed backdrop"
],
"eyeFlow": "title ??? body ??? actions",
"compositionRules": [
"prefer modal for blocking confirmations"
],
"commonMistakes": [
"stacking multiple modals",
"missing close affordance"
],
"bestPractices": [
"use focus-manager lifecycle"
]
},
"api": {
"events": [
"velin-close"
],
"methods": [
"open",
"close"
]
}
},
{
"id": "velin-dialog",
"kind": "web-component",
"tag": "velin-dialog",
"category": "overlays",
"subcategory": "dialog",
"purpose": "Native dialog-based prompts and confirms.",
"family": "overlays",
"maturity": "core",
"recommendedPages": [
"saas",
"dashboard"
],
"recommendedSections": [],
"compatibleWith": [
"css-button"
],
"incompatibleWith": [],
"accessibility": {
"nativeDialog": true
},
"seo": {
"impact": "none"
},
"performance": {
"cost": "lazy-ok"
},
"variants": [],
"density": [
"default"
],
"themeSupport": [
"light",
"dark"
],
"motion": {},
"examples": [
""
],
"promptKeywords": [
"confirm dialog",
"prompt dialog"
],
"designIntelligence": {
"visualWeight": 5,
"importance": "primary",
"hierarchy": "overlay",
"spacingRules": [],
"typographyRules": [],
"animationRules": [],
"colorRules": [],
"eyeFlow": "message ??? actions",
"compositionRules": [
"use for confirm/prompt; modal for richer layouts"
],
"commonMistakes": [
"listening only to deprecated velin-dialog-close"
],
"bestPractices": [
"listen to velin-close"
]
},
"api": {
"events": [
"velin-close",
"velin-dialog-close"
]
}
},
{
"id": "velin-accordion",
"kind": "web-component",
"tag": "velin-accordion",
"category": "disclosure",
"subcategory": "accordion",
"purpose": "FAQ and progressive disclosure of related panels.",
"family": "disclosure",
"maturity": "core",
"recommendedPages": [
"landing",
"docs",
"saas",
"lawyer",
"healthcare"
],
"recommendedSections": [
"faq"
],
"compatibleWith": [
"css-card"
],
"incompatibleWith": [],
"accessibility": {
"keyboard": "arrow keys / enter within pattern"
},
"seo": {
"impact": "medium",
"notes": "Keep question text in light DOM when possible"
},
"performance": {
"cost": "lazy-ok"
},
"variants": [],
"density": [
"comfortable",
"default"
],
"themeSupport": [
"light",
"dark"
],
"motion": {
"reducedMotionSafe": true
},
"examples": [
"???"
],
"promptKeywords": [
"faq",
"accordion",
"disclosure"
],
"designIntelligence": {
"visualWeight": 2,
"importance": "secondary",
"hierarchy": "section-body",
"spacingRules": [
"stack items tightly"
],
"typographyRules": [
"questions as clear interrogatives"
],
"animationRules": [
"expand/collapse brief"
],
"colorRules": [
"base/raised"
],
"eyeFlow": "scan questions vertically",
"compositionRules": [
"use in FAQ section after social proof"
],
"commonMistakes": [
"marketing paragraphs as 'questions'"
],
"bestPractices": [
"5???8 high-intent FAQs"
]
}
},
{
"id": "velin-form-summary",
"kind": "web-component",
"tag": "velin-form-summary",
"category": "forms",
"subcategory": "validation",
"purpose": "Accessible error summary for forms.",
"family": "forms",
"maturity": "core",
"recommendedPages": [
"landing",
"saas",
"shop"
],
"recommendedSections": [
"contact"
],
"compatibleWith": [
"css-input",
"css-button"
],
"incompatibleWith": [],
"accessibility": {
"role": "alert",
"wcag": [
"3.3.1",
"3.3.3"
]
},
"seo": {
"impact": "none"
},
"performance": {
"cost": "lazy-ok"
},
"variants": [],
"density": [
"default"
],
"themeSupport": [
"light",
"dark"
],
"motion": {},
"examples": [
""
],
"promptKeywords": [
"form errors",
"validation summary",
"contact form"
],
"designIntelligence": {
"visualWeight": 4,
"importance": "primary",
"hierarchy": "form-feedback",
"spacingRules": [
"place before fields or at top of form"
],
"typographyRules": [
"list each invalid field"
],
"animationRules": [],
"colorRules": [
"danger tokens"
],
"eyeFlow": "summary ??? first invalid field",
"compositionRules": [
"required on contact/checkout forms"
],
"commonMistakes": [
"native-only bubbles without summary"
],
"bestPractices": [
"wire aria-invalid via component"
]
}
},
{
"id": "velin-theme-toggle",
"kind": "web-component",
"tag": "velin-theme-toggle",
"category": "theming",
"subcategory": "toggle",
"purpose": "Switch light/dark theme via data-velin-theme.",
"family": "theming",
"maturity": "core",
"recommendedPages": [
"docs",
"saas",
"dashboard"
],
"recommendedSections": [
"navbar"
],
"compatibleWith": [
"css-nav"
],
"incompatibleWith": [],
"accessibility": {
"notes": "Accessible name for toggle"
},
"seo": {
"impact": "none"
},
"performance": {
"cost": "lazy-ok"
},
"variants": [],
"density": [
"default",
"compact"
],
"themeSupport": [
"light",
"dark",
"system"
],
"motion": {},
"examples": [
""
],
"promptKeywords": [
"dark mode",
"theme toggle"
],
"designIntelligence": {
"visualWeight": 1,
"importance": "tertiary",
"hierarchy": "chrome",
"spacingRules": [],
"typographyRules": [],
"animationRules": [],
"colorRules": [],
"eyeFlow": "corner of header",
"compositionRules": [
"header actions cluster"
],
"commonMistakes": [
"forcing dark without attribute contract"
],
"bestPractices": [
"follow ADR 0011 precedence"
]
}
},
{
"id": "velin-data-table",
"kind": "web-component",
"tag": "velin-data-table",
"category": "data",
"subcategory": "table",
"purpose": "Progressive enhancement for sortable, filterable, paginated tables.",
"family": "data-display",
"maturity": "core",
"recommendedPages": [
"dashboard",
"crm",
"erp",
"docs"
],
"recommendedSections": [
"navbar"
],
"compatibleWith": [
"css-input",
"css-badge",
"velin-form-summary"
],
"incompatibleWith": [],
"accessibility": {
"notes": "Requires caption/aria-label; aria-sort on headers"
},
"seo": {
"impact": "low",
"notes": "Often noindex app surfaces"
},
"performance": {
"cost": "dom-rows"
},
"variants": [
"sortable",
"filterable",
"paginated"
],
"density": [
"default",
"compact",
"data-dense"
],
"themeSupport": [
"light",
"dark"
],
"motion": {
"reducedMotionSafe": true
},
"examples": [
""
],
"promptKeywords": [
"data table",
"sortable table",
"filter table"
],
"designIntelligence": {
"visualWeight": 4,
"importance": "primary",
"hierarchy": "main",
"spacingRules": [
"full-bleed in content column"
],
"typographyRules": [
"tabular nums for numeric columns"
],
"animationRules": [],
"colorRules": [
"zebra optional via tokens"
],
"eyeFlow": "toolbar ??? headers ??? rows",
"compositionRules": [
"pair filter input above table"
],
"commonMistakes": [
"missing caption",
"icon-only sort without name"
],
"bestPractices": [
"announce sort/filter changes"
]
}
},
{
"id": "velin-search",
"kind": "web-component",
"tag": "velin-search",
"category": "navigation",
"subcategory": "search",
"purpose": "Documentation and site search against a JSON index.",
"family": "navigation",
"maturity": "core",
"recommendedPages": [
"docs",
"saas",
"corporate"
],
"recommendedSections": [
"navbar"
],
"compatibleWith": [
"css-nav",
"velin-theme-toggle"
],
"incompatibleWith": [],
"accessibility": {
"notes": "Combobox pattern; keyboard results"
},
"seo": {
"impact": "low"
},
"performance": {
"cost": "index-load"
},
"variants": [],
"density": [
"default",
"compact"
],
"themeSupport": [
"light",
"dark"
],
"motion": {},
"examples": [
""
],
"promptKeywords": [
"search",
"docs search",
"site search"
],
"designIntelligence": {
"visualWeight": 2,
"importance": "secondary",
"hierarchy": "chrome",
"spacingRules": [
"header cluster"
],
"typographyRules": [],
"animationRules": [],
"colorRules": [
"surface raised for results"
],
"eyeFlow": "header center/right",
"compositionRules": [
"one search per chrome"
],
"commonMistakes": [
"blocking main thread with huge index"
],
"bestPractices": [
"relative URLs in index"
]
}
},
{
"id": "css-badge",
"kind": "css-component",
"classPrefix": "velin-badge",
"category": "feedback",
"subcategory": "badge",
"purpose": "Compact status and count labels.",
"family": "feedback",
"maturity": "core",
"recommendedPages": [
"dashboard",
"saas",
"shop"
],
"recommendedSections": [
"services",
"pricing",
"navbar"
],
"compatibleWith": [
"css-card",
"css-nav",
"css-button"
],
"incompatibleWith": [],
"accessibility": {
"notes": "Do not rely on color alone"
},
"seo": {
"impact": "none"
},
"performance": {
"cost": "css-only"
},
"variants": [
"success",
"warning",
"danger",
"info"
],
"density": [
"default",
"compact"
],
"themeSupport": [
"light",
"dark"
],
"motion": {},
"examples": [
"New"
],
"promptKeywords": [
"badge",
"status label",
"pill"
],
"designIntelligence": {
"visualWeight": 1,
"importance": "tertiary",
"hierarchy": "meta",
"spacingRules": [
"inline with title"
],
"typographyRules": [
"short labels"
],
"animationRules": [],
"colorRules": [
"semantic tokens"
],
"eyeFlow": "adjacent to title",
"compositionRules": [
"one badge cluster per card"
],
"commonMistakes": [
"color-only meaning"
],
"bestPractices": [
"pair with text"
]
}
},
{
"id": "velin-drawer",
"kind": "web-component",
"tag": "velin-drawer",
"category": "overlays",
"subcategory": "drawer",
"purpose": "Side panel overlay for navigation or secondary tasks without blocking the whole viewport like a modal.",
"family": "overlays",
"maturity": "core",
"recommendedPages": [
"dashboard",
"saas",
"docs",
"shop"
],
"recommendedSections": [
"navbar"
],
"compatibleWith": [
"css-nav",
"css-button",
"velin-form-summary"
],
"incompatibleWith": [
"velin-modal",
"velin-sheet"
],
"accessibility": {
"focusTrap": true,
"escapeCloses": true,
"inertBackground": true
},
"seo": {
"impact": "none"
},
"performance": {
"cost": "lazy-ok"
},
"variants": [
"start",
"end"
],
"density": [
"default",
"compact"
],
"themeSupport": [
"light",
"dark"
],
"motion": {
"reducedMotionSafe": true
},
"examples": [
"",
"Filters"
],
"promptKeywords": [
"drawer",
"side panel",
"sidebar overlay"
],
"designIntelligence": {
"visualWeight": 4,
"importance": "secondary",
"hierarchy": "overlay",
"spacingRules": [
"comfortable body padding"
],
"typographyRules": [
"clear title"
],
"animationRules": [
"slide in/out; respect reduced motion"
],
"colorRules": [
"overlay surface + dimmed backdrop"
],
"eyeFlow": "title ??? body ??? actions",
"compositionRules": [
"prefer drawer for filters/nav; modal for blocking confirms"
],
"commonMistakes": [
"using drawer and modal interchangeably"
],
"bestPractices": [
"use focus-manager lifecycle"
]
},
"api": {
"events": [
"velin-close"
],
"methods": [
"open",
"close"
]
}
},
{
"id": "velin-sheet",
"kind": "web-component",
"tag": "velin-sheet",
"category": "overlays",
"subcategory": "sheet",
"purpose": "Bottom or edge sheet for mobile-first actions and pickers.",
"family": "overlays",
"maturity": "core",
"recommendedPages": [
"shop",
"saas",
"dashboard",
"event"
],
"recommendedSections": [],
"compatibleWith": [
"css-button",
"velin-form-summary"
],
"incompatibleWith": [
"velin-modal",
"velin-drawer"
],
"accessibility": {
"focusTrap": true,
"escapeCloses": true,
"inertBackground": true
},
"seo": {
"impact": "none"
},
"performance": {
"cost": "lazy-ok"
},
"variants": [
"bottom"
],
"density": [
"default",
"compact"
],
"themeSupport": [
"light",
"dark"
],
"motion": {
"reducedMotionSafe": true
},
"examples": [
"",
"Actions"
],
"promptKeywords": [
"sheet",
"bottom sheet",
"action sheet"
],
"designIntelligence": {
"visualWeight": 4,
"importance": "secondary",
"hierarchy": "overlay",
"spacingRules": [
"thumb-friendly action spacing"
],
"typographyRules": [
"short action labels"
],
"animationRules": [
"slide from edge; reduced-motion safe"
],
"colorRules": [
"raised overlay surface"
],
"eyeFlow": "handle/title ??? actions",
"compositionRules": [
"prefer sheet on small viewports for actions"
],
"commonMistakes": [
"tiny hit targets",
"missing dismiss control"
],
"bestPractices": [
"use focus-manager lifecycle"
]
},
"api": {
"events": [
"velin-close"
],
"methods": [
"open",
"close"
]
}
},
{
"id": "velin-lightbox",
"kind": "web-component",
"tag": "velin-lightbox",
"category": "overlays",
"subcategory": "lightbox",
"purpose": "Media-focused overlay for images and galleries.",
"family": "overlays",
"maturity": "advanced",
"recommendedPages": [
"portfolio",
"shop",
"agency",
"event"
],
"recommendedSections": [
"services",
"gallery"
],
"compatibleWith": [
"css-card",
"css-button"
],
"incompatibleWith": [],
"accessibility": {
"focusTrap": true,
"escapeCloses": true,
"inertBackground": true
},
"seo": {
"impact": "low",
"notes": "Keep meaningful alt text in light DOM when possible"
},
"performance": {
"cost": "lazy-ok"
},
"variants": [],
"density": [
"default"
],
"themeSupport": [
"light",
"dark"
],
"motion": {
"reducedMotionSafe": true
},
"examples": [
""
],
"promptKeywords": [
"lightbox",
"image gallery overlay",
"media viewer"
],
"designIntelligence": {
"visualWeight": 5,
"importance": "primary",
"hierarchy": "overlay",
"spacingRules": [],
"typographyRules": [
"captions concise"
],
"animationRules": [
"fade/zoom brief"
],
"colorRules": [
"dark dim backdrop"
],
"eyeFlow": "media ??? caption ??? close",
"compositionRules": [
"use for media, not forms"
],
"commonMistakes": [
"forms inside lightbox",
"missing close"
],
"bestPractices": [
"use focus-manager lifecycle"
]
},
"api": {
"events": [
"velin-close"
],
"methods": [
"open",
"close"
]
}
},
{
"id": "velin-toast",
"kind": "web-component",
"tag": "velin-toast",
"category": "feedback",
"subcategory": "toast",
"purpose": "Transient status messages that do not block the page.",
"family": "feedback",
"maturity": "core",
"recommendedPages": [
"saas",
"dashboard",
"shop"
],
"recommendedSections": [],
"compatibleWith": [
"css-button",
"css-alert"
],
"incompatibleWith": [],
"accessibility": {
"role": "status",
"notes": "Prefer polite live region; do not replace form-summary"
},
"seo": {
"impact": "none"
},
"performance": {
"cost": "lazy-ok"
},
"variants": [
"success",
"warning",
"danger",
"info"
],
"density": [
"default",
"compact"
],
"themeSupport": [
"light",
"dark"
],
"motion": {
"reducedMotionSafe": true
},
"examples": [
""
],
"promptKeywords": [
"toast",
"snackbar",
"notification"
],
"designIntelligence": {
"visualWeight": 3,
"importance": "secondary",
"hierarchy": "feedback",
"spacingRules": [
"stack toasts with gap-2"
],
"typographyRules": [
"one short sentence"
],
"animationRules": [
"brief enter/exit"
],
"colorRules": [
"semantic status tokens"
],
"eyeFlow": "corner/edge of viewport",
"compositionRules": [
"use for transient status; form errors use form-summary"
],
"commonMistakes": [
"toasts for persistent form errors"
],
"bestPractices": [
"auto-dismiss with pause on focus/hover"
]
}
},
{
"id": "velin-otp-input",
"kind": "web-component",
"tag": "velin-otp-input",
"category": "forms",
"subcategory": "otp",
"purpose": "Segmented one-time-password / PIN digit entry with paste and keyboard support.",
"family": "forms",
"maturity": "core",
"recommendedPages": [
"auth",
"saas"
],
"recommendedSections": [],
"compatibleWith": [
"css-button",
"velin-form-summary",
"velin-secure-field"
],
"incompatibleWith": [],
"accessibility": {
"role": "group",
"notes": "Per-digit labels; autocomplete one-time-code"
},
"seo": {
"impact": "none"
},
"performance": {
"cost": "lazy-ok"
},
"variants": [],
"density": [
"default"
],
"themeSupport": [
"light",
"dark"
],
"motion": {
"reducedMotionSafe": true
},
"examples": [
""
],
"promptKeywords": [
"otp",
"2fa",
"pin",
"one-time password"
],
"api": {
"events": [
"velin-change",
"velin-complete"
],
"attributes": [
"length",
"value",
"disabled",
"name"
]
}
},
{
"id": "velin-password-strength",
"kind": "web-component",
"tag": "velin-password-strength",
"category": "forms",
"subcategory": "password",
"purpose": "Heuristic password strength meter linked to an input via for= or value.",
"family": "forms",
"maturity": "core",
"recommendedPages": [
"auth",
"saas"
],
"recommendedSections": [],
"compatibleWith": [
"css-input",
"velin-secure-field",
"velin-form-summary"
],
"incompatibleWith": [],
"accessibility": {
"role": "progressbar",
"notes": "aria-live polite label"
},
"seo": {
"impact": "none"
},
"performance": {
"cost": "lazy-ok"
},
"variants": [],
"density": [
"default"
],
"themeSupport": [
"light",
"dark"
],
"motion": {
"reducedMotionSafe": true
},
"examples": [
""
],
"promptKeywords": [
"password strength",
"meter",
"signup"
],
"api": {
"events": [
"velin-strength"
],
"attributes": [
"for",
"value",
"label"
]
}
},
{
"id": "velin-empty-state",
"kind": "web-component",
"tag": "velin-empty-state",
"category": "feedback",
"subcategory": "empty",
"purpose": "Consistent empty / zero-data surface with illustration, title, description, and actions slots.",
"family": "feedback",
"maturity": "core",
"recommendedPages": [
"dashboard",
"saas",
"shop",
"docs"
],
"recommendedSections": [],
"compatibleWith": [
"css-button",
"velin-icon"
],
"incompatibleWith": [],
"accessibility": {
"role": "status"
},
"seo": {
"impact": "none"
},
"performance": {
"cost": "lazy-ok"
},
"variants": [],
"density": [
"default"
],
"themeSupport": [
"light",
"dark"
],
"motion": {
"reducedMotionSafe": true
},
"examples": [
""
],
"promptKeywords": [
"empty state",
"no results",
"zero data"
],
"api": {
"attributes": [
"heading",
"description"
],
"slots": [
"illustration",
"title",
"description",
"actions"
]
}
}
],
"componentCount": 20,
"tokens": {
"version": 1,
"tokens": [
{
"name": "color-text",
"layer": "semantic",
"usage": "text",
"cssVariable": "--velin-color-text",
"pairsWith": [
"color-surface",
"color-surface-dim"
],
"contrastTarget": "aaa",
"surfaceRole": "base",
"description": "Primary body text on base/raised surfaces."
},
{
"name": "color-text-muted",
"layer": "semantic",
"usage": "text-muted",
"cssVariable": "--velin-color-text-muted",
"pairsWith": [
"color-surface",
"color-surface-dim"
],
"contrastTarget": "aa",
"surfaceRole": "muted",
"description": "Secondary text; verify contrast on muted surfaces."
},
{
"name": "color-surface",
"layer": "semantic",
"usage": "background",
"cssVariable": "--velin-color-surface",
"pairsWith": [
"color-text"
],
"contrastTarget": "aaa",
"surfaceRole": "raised",
"description": "Raised panel background."
},
{
"name": "color-surface-dim",
"layer": "semantic",
"usage": "background",
"cssVariable": "--velin-color-surface-dim",
"pairsWith": [
"color-text"
],
"contrastTarget": "aaa",
"surfaceRole": "base",
"description": "Dimmer page/canvas background behind raised surfaces."
},
{
"name": "color-primary",
"layer": "semantic",
"usage": "accent",
"cssVariable": "--velin-color-primary",
"pairsWith": [
"color-on-primary"
],
"contrastTarget": "aaa",
"surfaceRole": "accent",
"description": "Brand accent for primary CTAs."
},
{
"name": "color-on-primary",
"layer": "semantic",
"usage": "text-on-accent",
"cssVariable": "--velin-color-on-primary",
"pairsWith": [
"color-primary"
],
"contrastTarget": "aaa",
"surfaceRole": "accent",
"description": "Text/icon color on primary accent."
},
{
"name": "color-border",
"layer": "semantic",
"usage": "border",
"cssVariable": "--velin-color-border",
"pairsWith": [
"color-surface"
],
"contrastTarget": "aa",
"surfaceRole": "base",
"description": "Default border on cards, inputs, and dividers."
},
{
"name": "color-danger",
"layer": "semantic",
"usage": "status-danger",
"cssVariable": "--velin-color-danger",
"pairsWith": [
"color-on-danger"
],
"contrastTarget": "aaa",
"surfaceRole": "accent",
"description": "Danger/error accent for validation and destructive actions."
},
{
"name": "color-on-danger",
"layer": "semantic",
"usage": "text-on-danger",
"cssVariable": "--velin-color-on-danger",
"pairsWith": [
"color-danger"
],
"contrastTarget": "aaa",
"surfaceRole": "accent",
"description": "Text/icon on danger accent."
},
{
"name": "space-4",
"layer": "core",
"usage": "spacing",
"cssVariable": "--velin-space-4",
"pairsWith": [],
"contrastTarget": "none",
"description": "Default control/stack gap."
},
{
"name": "space-8",
"layer": "core",
"usage": "spacing",
"cssVariable": "--velin-space-8",
"pairsWith": [],
"contrastTarget": "none",
"description": "Mobile section padding band."
},
{
"name": "space-10",
"layer": "core",
"usage": "spacing",
"cssVariable": "--velin-space-10",
"pairsWith": [],
"contrastTarget": "none",
"description": "Tablet section padding band (hero constraint)."
},
{
"name": "space-12",
"layer": "core",
"usage": "spacing",
"cssVariable": "--velin-space-12",
"pairsWith": [],
"contrastTarget": "none",
"description": "Desktop section padding band."
},
{
"name": "shadow-md",
"layer": "semantic",
"usage": "elevation",
"cssVariable": "--velin-shadow-md",
"pairsWith": [
"color-surface"
],
"contrastTarget": "none",
"surfaceRole": "raised",
"description": "Medium elevation; dark parity via ADR 0011."
}
]
},
"pages": [
{
"id": "landing",
"name": "Landing",
"audience": "prospects",
"businessType": "general",
"pageGoal": "explain offer and convert",
"conversionGoal": "lead or signup",
"requiredSections": [
"hero",
"benefits",
"services",
"testimonials",
"faq",
"cta",
"footer"
],
"optionalSections": [
"trust-bar",
"process",
"pricing"
],
"forbiddenSections": [],
"seoIntent": "brand + primary offer",
"accessibilityRisks": [
"hero contrast",
"form labels"
],
"defaultTone": "clear-confident",
"recommendedComponents": [
"css-button",
"css-card",
"velin-accordion",
"velin-form-summary"
],
"designConstraintIds": [
"hero",
"faq",
"contact"
],
"promptKeywords": [
"landing page",
"homepage",
"marketing site"
]
},
{
"id": "corporate",
"name": "Corporate",
"audience": "stakeholders",
"businessType": "corporate",
"pageGoal": "trust and company overview",
"conversionGoal": "contact",
"requiredSections": [
"hero",
"benefits",
"process",
"testimonials",
"cta",
"footer"
],
"optionalSections": [
"services",
"faq"
],
"forbiddenSections": [],
"seoIntent": "company entity",
"accessibilityRisks": [
"long pages without landmarks"
],
"defaultTone": "formal",
"recommendedComponents": [
"css-nav",
"css-card",
"css-button"
],
"designConstraintIds": [
"hero"
],
"promptKeywords": [
"corporate",
"company",
"about"
]
},
{
"id": "lawyer",
"name": "Lawyer / Professional services",
"audience": "clients seeking counsel",
"businessType": "professional-services",
"pageGoal": "credibility + consultation booking",
"conversionGoal": "contact form",
"requiredSections": [
"hero",
"trust-bar",
"services",
"process",
"testimonials",
"faq",
"contact",
"footer"
],
"optionalSections": [
"benefits",
"pricing",
"cta"
],
"forbiddenSections": [],
"seoIntent": "local professional services",
"accessibilityRisks": [
"form validation",
"contrast on dark heroes"
],
"defaultTone": "trustworthy-calm",
"recommendedComponents": [
"css-card",
"css-button",
"velin-accordion",
"velin-form-summary",
"css-input"
],
"designConstraintIds": [
"hero",
"faq",
"contact"
],
"promptKeywords": [
"steuerberater",
"lawyer",
"attorney",
"kanzlei",
"tax advisor",
"professional services"
]
},
{
"id": "healthcare",
"name": "Healthcare",
"audience": "patients",
"businessType": "healthcare",
"pageGoal": "services + appointment",
"conversionGoal": "book / contact",
"requiredSections": [
"hero",
"services",
"process",
"testimonials",
"faq",
"contact",
"footer"
],
"optionalSections": [
"trust-bar",
"benefits"
],
"forbiddenSections": [],
"seoIntent": "clinic / practice",
"accessibilityRisks": [
"reading level",
"form a11y"
],
"defaultTone": "reassuring",
"recommendedComponents": [
"css-card",
"velin-accordion",
"velin-form-summary"
],
"designConstraintIds": [
"hero",
"faq",
"contact"
],
"promptKeywords": [
"clinic",
"doctor",
"healthcare",
"praxis"
]
},
{
"id": "restaurant",
"name": "Restaurant",
"audience": "diners",
"businessType": "hospitality",
"pageGoal": "menu interest + reservation",
"conversionGoal": "reserve",
"requiredSections": [
"hero",
"services",
"testimonials",
"cta",
"footer"
],
"optionalSections": [
"process",
"faq",
"trust-bar"
],
"forbiddenSections": [],
"seoIntent": "local restaurant",
"accessibilityRisks": [
"image-heavy pages"
],
"defaultTone": "inviting",
"recommendedComponents": [
"css-card",
"css-button"
],
"designConstraintIds": [
"hero"
],
"promptKeywords": [
"restaurant",
"cafe",
"menu"
]
},
{
"id": "portfolio",
"name": "Portfolio",
"audience": "clients/hiring",
"businessType": "creative",
"pageGoal": "showcase work",
"conversionGoal": "contact",
"requiredSections": [
"hero",
"services",
"testimonials",
"cta",
"footer"
],
"optionalSections": [
"process",
"faq"
],
"forbiddenSections": [],
"seoIntent": "personal brand",
"accessibilityRisks": [
"image alts"
],
"defaultTone": "expressive",
"recommendedComponents": [
"css-card",
"css-button"
],
"designConstraintIds": [
"hero"
],
"promptKeywords": [
"portfolio",
"designer",
"photographer"
]
},
{
"id": "agency",
"name": "Agency",
"audience": "business buyers",
"businessType": "agency",
"pageGoal": "capabilities + leads",
"conversionGoal": "contact",
"requiredSections": [
"hero",
"benefits",
"services",
"process",
"testimonials",
"cta",
"footer"
],
"optionalSections": [
"pricing",
"faq"
],
"forbiddenSections": [],
"seoIntent": "agency services",
"accessibilityRisks": [
"busy layouts"
],
"defaultTone": "confident",
"recommendedComponents": [
"css-card",
"css-button",
"velin-accordion"
],
"designConstraintIds": [
"hero",
"faq"
],
"promptKeywords": [
"agency",
"marketing agency",
"studio"
]
},
{
"id": "saas",
"name": "SaaS",
"audience": "buyers/users",
"businessType": "saas",
"pageGoal": "product value + signup",
"conversionGoal": "trial/signup",
"requiredSections": [
"hero",
"benefits",
"services",
"pricing",
"testimonials",
"faq",
"cta",
"footer"
],
"optionalSections": [
"trust-bar",
"process"
],
"forbiddenSections": [],
"seoIntent": "product category",
"accessibilityRisks": [
"pricing tables",
"modals"
],
"defaultTone": "product-led",
"recommendedComponents": [
"css-card",
"css-button",
"velin-accordion",
"velin-modal"
],
"designConstraintIds": [
"hero",
"faq"
],
"promptKeywords": [
"saas",
"software",
"app landing"
]
},
{
"id": "docs",
"name": "Docs",
"audience": "developers",
"businessType": "documentation",
"pageGoal": "teach and reference",
"conversionGoal": "task completion",
"requiredSections": [
"navbar",
"hero",
"footer"
],
"optionalSections": [
"faq"
],
"forbiddenSections": [
"pricing"
],
"seoIntent": "technical documentation",
"accessibilityRisks": [
"skip links",
"code contrast"
],
"defaultTone": "technical",
"recommendedComponents": [
"css-nav",
"velin-theme-toggle",
"velin-search"
],
"designConstraintIds": [],
"promptKeywords": [
"documentation",
"docs site",
"api docs"
]
},
{
"id": "dashboard",
"name": "Dashboard",
"audience": "operators",
"businessType": "app-shell",
"pageGoal": "monitor and act",
"conversionGoal": "task completion",
"requiredSections": [
"navbar",
"footer"
],
"optionalSections": [],
"forbiddenSections": [
"pricing",
"testimonials"
],
"seoIntent": "often noindex",
"accessibilityRisks": [
"dense tables",
"live regions"
],
"defaultTone": "utilitarian",
"recommendedComponents": [
"css-nav",
"velin-data-table",
"css-alert"
],
"designConstraintIds": [],
"promptKeywords": [
"dashboard",
"admin",
"app shell"
]
},
{
"id": "crm",
"name": "CRM",
"audience": "sales ops",
"businessType": "crm",
"pageGoal": "manage relationships",
"conversionGoal": "task completion",
"requiredSections": [
"navbar"
],
"optionalSections": [],
"forbiddenSections": [
"testimonials"
],
"seoIntent": "app",
"accessibilityRisks": [
"data-dense UI"
],
"defaultTone": "utilitarian",
"recommendedComponents": [
"velin-data-table",
"css-input",
"velin-form-summary"
],
"designConstraintIds": [],
"promptKeywords": [
"crm",
"contacts",
"pipeline"
]
},
{
"id": "erp",
"name": "ERP",
"audience": "internal ops",
"businessType": "erp",
"pageGoal": "operational workflows",
"conversionGoal": "task completion",
"requiredSections": [
"navbar"
],
"optionalSections": [],
"forbiddenSections": [
"pricing",
"testimonials"
],
"seoIntent": "app",
"accessibilityRisks": [
"complex forms"
],
"defaultTone": "utilitarian",
"recommendedComponents": [
"velin-data-table",
"css-input",
"velin-dialog"
],
"designConstraintIds": [],
"promptKeywords": [
"erp",
"inventory",
"operations"
]
},
{
"id": "blog",
"name": "Blog",
"audience": "readers",
"businessType": "content",
"pageGoal": "inform and retain",
"conversionGoal": "newsletter/contact",
"requiredSections": [
"navbar",
"hero",
"footer"
],
"optionalSections": [
"cta",
"faq"
],
"forbiddenSections": [],
"seoIntent": "articles",
"accessibilityRisks": [
"reading length"
],
"defaultTone": "editorial",
"recommendedComponents": [
"css-nav",
"css-card"
],
"designConstraintIds": [
"hero"
],
"promptKeywords": [
"blog",
"articles",
"magazine"
]
},
{
"id": "shop",
"name": "Shop",
"audience": "buyers",
"businessType": "ecommerce",
"pageGoal": "browse and purchase",
"conversionGoal": "checkout",
"requiredSections": [
"navbar",
"hero",
"services",
"cta",
"footer"
],
"optionalSections": [
"testimonials",
"faq",
"trust-bar"
],
"forbiddenSections": [],
"seoIntent": "products",
"accessibilityRisks": [
"product cards",
"filters"
],
"defaultTone": "commercial",
"recommendedComponents": [
"css-card",
"css-button",
"velin-form-summary"
],
"designConstraintIds": [
"hero"
],
"promptKeywords": [
"shop",
"store",
"ecommerce"
]
},
{
"id": "event",
"name": "Event",
"audience": "attendees",
"businessType": "event",
"pageGoal": "inform and register",
"conversionGoal": "registration",
"requiredSections": [
"hero",
"benefits",
"process",
"faq",
"cta",
"footer"
],
"optionalSections": [
"testimonials",
"pricing"
],
"forbiddenSections": [],
"seoIntent": "event entity",
"accessibilityRisks": [
"countdown motion"
],
"defaultTone": "exciting-clear",
"recommendedComponents": [
"css-button",
"css-card",
"velin-accordion"
],
"designConstraintIds": [
"hero",
"faq"
],
"promptKeywords": [
"event",
"conference",
"meetup"
]
},
{
"id": "course",
"name": "Course",
"audience": "learners",
"businessType": "education",
"pageGoal": "curriculum + enroll",
"conversionGoal": "enroll",
"requiredSections": [
"hero",
"benefits",
"process",
"pricing",
"faq",
"cta",
"footer"
],
"optionalSections": [
"testimonials"
],
"forbiddenSections": [],
"seoIntent": "course offering",
"accessibilityRisks": [
"long outlines"
],
"defaultTone": "instructive",
"recommendedComponents": [
"css-card",
"velin-accordion",
"css-button"
],
"designConstraintIds": [
"hero",
"faq"
],
"promptKeywords": [
"course",
"training",
"workshop"
]
},
{
"id": "community",
"name": "Community",
"audience": "members",
"businessType": "community",
"pageGoal": "belonging + join",
"conversionGoal": "join",
"requiredSections": [
"hero",
"benefits",
"testimonials",
"faq",
"cta",
"footer"
],
"optionalSections": [
"services",
"process"
],
"forbiddenSections": [],
"seoIntent": "community brand",
"accessibilityRisks": [
"user content"
],
"defaultTone": "welcoming",
"recommendedComponents": [
"css-card",
"css-button",
"velin-accordion"
],
"designConstraintIds": [
"hero",
"faq"
],
"promptKeywords": [
"community",
"forum",
"membership"
]
}
],
"pageCount": 17,
"sections": [
{
"id": "hero",
"role": "hero",
"blueprintFile": "hero-section.html",
"inputs": [
"title",
"subtitle",
"cta",
"brand"
],
"requiredContent": [
"headline",
"primaryCta"
],
"optionalContent": [
"image",
"secondaryCta"
],
"designRules": [
"hero-headline-lines",
"hero-cta-max",
"hero-contrast"
],
"a11yRules": [
"one h1",
"cta is real button/link"
],
"seoRules": [
"h1 matches primary intent"
],
"compatiblePrev": [],
"compatibleNext": [
"trust-bar",
"benefits",
"services"
],
"examplePrompts": [
"modern hero with two CTAs"
],
"commonMistakes": [
"three CTAs",
"headline longer than two lines"
]
},
{
"id": "trust-bar",
"role": "trust-bar",
"blueprintFile": "trust-bar.html",
"inputs": [
"logos",
"claim"
],
"requiredContent": [
"trustItems"
],
"optionalContent": [
"claim"
],
"designRules": [],
"a11yRules": [
"alt text for logos"
],
"seoRules": [],
"compatiblePrev": [
"hero"
],
"compatibleNext": [
"benefits",
"services"
],
"examplePrompts": [
"trusted by brands bar"
],
"commonMistakes": [
"low-contrast logos"
]
},
{
"id": "benefits",
"role": "benefits",
"blueprintFile": "benefits-grid.html",
"inputs": [
"items"
],
"requiredContent": [
"benefitItems"
],
"optionalContent": [],
"designRules": [],
"a11yRules": [
"headings per benefit"
],
"seoRules": [],
"compatiblePrev": [
"hero",
"trust-bar"
],
"compatibleNext": [
"services",
"process"
],
"examplePrompts": [
"three benefits"
],
"commonMistakes": [
"walls of text"
]
},
{
"id": "services",
"role": "services",
"blueprintFile": "services-grid.html",
"inputs": [
"items"
],
"requiredContent": [
"serviceItems"
],
"optionalContent": [],
"designRules": [],
"a11yRules": [
"card titles as headings"
],
"seoRules": [
"service names as keywords"
],
"compatiblePrev": [
"benefits",
"trust-bar",
"hero"
],
"compatibleNext": [
"process",
"testimonials",
"pricing"
],
"examplePrompts": [
"services grid for tax advisor"
],
"commonMistakes": [
"vague service titles"
]
},
{
"id": "process",
"role": "process",
"blueprintFile": "process-steps.html",
"inputs": [
"steps"
],
"requiredContent": [
"steps"
],
"optionalContent": [],
"designRules": [],
"a11yRules": [
"ordered list semantics"
],
"seoRules": [],
"compatiblePrev": [
"services",
"benefits"
],
"compatibleNext": [
"testimonials",
"pricing",
"faq"
],
"examplePrompts": [
"how it works in 4 steps"
],
"commonMistakes": [
"more than 6 steps"
]
},
{
"id": "testimonials",
"role": "testimonials",
"blueprintFile": "testimonials.html",
"inputs": [
"quotes"
],
"requiredContent": [
"quotes"
],
"optionalContent": [
"avatars"
],
"designRules": [],
"a11yRules": [
"cite attribution"
],
"seoRules": [],
"compatiblePrev": [
"services",
"process"
],
"compatibleNext": [
"pricing",
"faq",
"contact"
],
"examplePrompts": [
"client testimonials"
],
"commonMistakes": [
"anonymous quotes only"
]
},
{
"id": "pricing",
"role": "pricing",
"blueprintFile": "pricing-table.html",
"inputs": [
"plans"
],
"requiredContent": [
"plans"
],
"optionalContent": [],
"designRules": [],
"a11yRules": [
"table or card semantics clear"
],
"seoRules": [],
"compatiblePrev": [
"services",
"testimonials"
],
"compatibleNext": [
"faq",
"cta"
],
"examplePrompts": [
"three pricing tiers"
],
"commonMistakes": [
"unclear currency"
]
},
{
"id": "faq",
"role": "faq",
"blueprintFile": "faq-section.html",
"inputs": [
"items"
],
"requiredContent": [
"questions"
],
"optionalContent": [],
"designRules": [
"faq-questions",
"faq-pattern"
],
"a11yRules": [
"accordion keyboard support"
],
"seoRules": [
"FAQPage-ready question text"
],
"compatiblePrev": [
"testimonials",
"pricing",
"process"
],
"compatibleNext": [
"contact",
"cta",
"footer"
],
"examplePrompts": [
"FAQ with accordion"
],
"commonMistakes": [
"non-questions as titles"
]
},
{
"id": "contact",
"role": "contact",
"blueprintFile": "form-contact.html",
"inputs": [
"fields"
],
"requiredContent": [
"name",
"email",
"message"
],
"optionalContent": [
"phone"
],
"designRules": [
"contact-labels",
"contact-summary"
],
"a11yRules": [
"labels",
"form-summary"
],
"seoRules": [],
"compatiblePrev": [
"faq",
"testimonials"
],
"compatibleNext": [
"footer",
"cta"
],
"examplePrompts": [
"contact form with validation summary"
],
"commonMistakes": [
"placeholder-only labels"
]
},
{
"id": "cta",
"role": "cta",
"blueprintFile": "cta-band.html",
"inputs": [
"title",
"cta"
],
"requiredContent": [
"headline",
"primaryCta"
],
"optionalContent": [
"secondaryCta"
],
"designRules": [
"hero-cta-max"
],
"a11yRules": [
"button semantics"
],
"seoRules": [],
"compatiblePrev": [
"faq",
"pricing",
"testimonials"
],
"compatibleNext": [
"footer"
],
"examplePrompts": [
"final CTA band"
],
"commonMistakes": [
"competing CTAs"
]
},
{
"id": "footer",
"role": "footer",
"blueprintFile": "footer-simple.html",
"inputs": [
"brand",
"links"
],
"requiredContent": [
"brand"
],
"optionalContent": [
"legal",
"social"
],
"designRules": [],
"a11yRules": [
"contentinfo landmark"
],
"seoRules": [
"legal links"
],
"compatiblePrev": [
"cta",
"contact",
"faq"
],
"compatibleNext": [],
"examplePrompts": [
"site footer"
],
"commonMistakes": [
"missing legal links on regulated niches"
]
},
{
"id": "navbar",
"role": "navbar",
"blueprintFile": "navbar-header.html",
"inputs": [
"brand",
"links"
],
"requiredContent": [
"brand"
],
"optionalContent": [
"cta",
"search"
],
"designRules": [],
"a11yRules": [
"nav landmark"
],
"seoRules": [
"internal links"
],
"compatiblePrev": [],
"compatibleNext": [
"hero"
],
"examplePrompts": [
"marketing navbar"
],
"commonMistakes": [
"too many links"
]
}
],
"sectionCount": 12,
"designConstraints": [
{
"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"
}
]
},
{
"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"
}
]
},
{
"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"
}
]
}
],
"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": 58,
"categories": [
"accessibility",
"ai-workflows",
"components",
"design",
"developer-experience",
"development",
"documentation",
"intelligence",
"migration",
"motion",
"performance",
"release",
"review",
"rewrite",
"security",
"testing",
"themes",
"utilities"
],
"capabilities": [
"build.components",
"build.design",
"build.docs",
"build.dx",
"build.layout",
"build.meta",
"build.motion",
"build.normalize",
"build.perf",
"build.plan",
"build.scaffold",
"build.theme",
"build.wire",
"intelligence.acceptance",
"intelligence.classify",
"intelligence.inventory",
"intelligence.policy",
"intelligence.review",
"migrate.analyze",
"migrate.legacy-wc",
"migrate.plan",
"migrate.prefix",
"migrate.review",
"migrate.tailwind",
"reuse.gate",
"review.a11y",
"review.contract",
"review.dx",
"review.gate",
"review.perf",
"review.release",
"review.security",
"review.seo",
"review.test",
"rewrite.apply",
"rewrite.apply-gate",
"rewrite.catalog",
"rewrite.dry-run",
"rewrite.manifest",
"rewrite.preflight",
"rewrite.rollback"
],
"items": [
{
"id": "velin-design-hero-compose",
"category": "design",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"build.design"
],
"name": "Hero Compose",
"description": "Composes first viewport hero following VelinStyle hierarchy and CTA constraints.",
"prosePath": "skills/velin-design-hero-compose/SKILL.md",
"proseHref": "docs/generated/skills/velin-design-hero-compose/SKILL.md"
},
{
"id": "velin-design-section-rhythm",
"category": "design",
"priority": "recommended",
"status": "beta",
"confidence": "high",
"capabilities": [
"build.design"
],
"name": "Section Rhythm",
"description": "Aligns spacing rhythm and section purpose to design rules.",
"prosePath": "skills/velin-design-section-rhythm/SKILL.md",
"proseHref": "docs/generated/skills/velin-design-section-rhythm/SKILL.md"
},
{
"id": "velin-design-surface-roles",
"category": "design",
"priority": "recommended",
"status": "beta",
"confidence": "medium",
"capabilities": [
"build.theme"
],
"name": "Surface Roles",
"description": "Maps sections to base/raised/overlay surface roles.",
"prosePath": "skills/velin-design-surface-roles/SKILL.md",
"proseHref": "docs/generated/skills/velin-design-surface-roles/SKILL.md"
},
{
"id": "velin-dev-plan-first",
"category": "development",
"priority": "core",
"status": "stable",
"confidence": "high",
"capabilities": [
"build.plan"
],
"name": "Plan First",
"description": "Creates a plan JSON before implementation to reduce hallucinations.",
"prosePath": "skills/velin-dev-plan-first/SKILL.md",
"proseHref": "docs/generated/skills/velin-dev-plan-first/SKILL.md"
},
{
"id": "velin-dev-page-scaffold",
"category": "development",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"build.scaffold"
],
"name": "Page Scaffold",
"description": "Renders plan-based HTML and runs review gates.",
"prosePath": "skills/velin-dev-page-scaffold/SKILL.md",
"proseHref": "docs/generated/skills/velin-dev-page-scaffold/SKILL.md"
},
{
"id": "velin-dev-component-wire",
"category": "development",
"priority": "recommended",
"status": "beta",
"confidence": "medium",
"capabilities": [
"build.wire"
],
"name": "Component Wire",
"description": "Wires selected components with predictable APIs and semantics.",
"prosePath": "skills/velin-dev-component-wire/SKILL.md",
"proseHref": "docs/generated/skills/velin-dev-component-wire/SKILL.md"
},
{
"id": "velin-components-select-compose",
"category": "components",
"priority": "core",
"status": "stable",
"confidence": "high",
"capabilities": [
"build.components"
],
"name": "Select Components",
"description": "Select existing VelinStyle WC tags or CSS primitives (e.g. .velin-btn) for page intent. Plan-only reuse-first ??? does not invent tags or Apply.",
"prosePath": "skills/velin-components-select-compose/SKILL.md",
"proseHref": "docs/generated/skills/velin-components-select-compose/SKILL.md"
},
{
"id": "velin-components-api-contract",
"category": "components",
"priority": "recommended",
"status": "beta",
"confidence": "high",
"capabilities": [
"review.contract"
],
"name": "API Contract",
"description": "Validates component contracts and event/API usage.",
"prosePath": "skills/velin-components-api-contract/SKILL.md",
"proseHref": "docs/generated/skills/velin-components-api-contract/SKILL.md"
},
{
"id": "velin-components-recipe",
"category": "components",
"priority": "recommended",
"status": "beta",
"confidence": "medium",
"capabilities": [
"build.components"
],
"name": "Component Recipe",
"description": "Builds reusable component recipes for recurring UI blocks.",
"prosePath": "skills/velin-components-recipe/SKILL.md",
"proseHref": "docs/generated/skills/velin-components-recipe/SKILL.md"
},
{
"id": "velin-components-accessibility-map",
"category": "components",
"priority": "advanced",
"status": "beta",
"confidence": "medium",
"capabilities": [
"review.a11y"
],
"name": "Component Accessibility Map",
"description": "Map chosen components to a11y expectations and test hooks. Review-only ??? no Skill???Component invention beyond documented contracts.",
"prosePath": "skills/velin-components-accessibility-map/SKILL.md",
"proseHref": "docs/generated/skills/velin-components-accessibility-map/SKILL.md"
},
{
"id": "velin-utilities-layout-apply",
"category": "utilities",
"priority": "core",
"status": "stable",
"confidence": "high",
"capabilities": [
"build.layout"
],
"name": "Utilities Layout Apply",
"description": "Applies utility classes for layout and responsive structure.",
"prosePath": "skills/velin-utilities-layout-apply/SKILL.md",
"proseHref": "docs/generated/skills/velin-utilities-layout-apply/SKILL.md"
},
{
"id": "velin-utilities-prefix-fix",
"category": "utilities",
"priority": "recommended",
"status": "stable",
"confidence": "high",
"capabilities": [
"build.normalize"
],
"name": "Utilities Prefix Fix",
"description": "Normalize utility class names to the velin-* convention (CLI prefix). Write skill for planned renames ??? not a11y SAFE Apply and not Candidate auto-fix.",
"prosePath": "skills/velin-utilities-prefix-fix/SKILL.md",
"proseHref": "docs/generated/skills/velin-utilities-prefix-fix/SKILL.md"
},
{
"id": "velin-utilities-token-map",
"category": "utilities",
"priority": "advanced",
"status": "beta",
"confidence": "medium",
"capabilities": [
"build.theme",
"review.contract"
],
"name": "Utilities Token Map",
"description": "Documents how utility usage maps to token taxonomy.",
"prosePath": "skills/velin-utilities-token-map/SKILL.md",
"proseHref": "docs/generated/skills/velin-utilities-token-map/SKILL.md"
},
{
"id": "velin-themes-apply-token",
"category": "themes",
"priority": "core",
"status": "stable",
"confidence": "high",
"capabilities": [
"build.theme"
],
"name": "Theme Apply Token",
"description": "Applies built-in themes through token-safe patterns.",
"prosePath": "skills/velin-themes-apply-token/SKILL.md",
"proseHref": "docs/generated/skills/velin-themes-apply-token/SKILL.md"
},
{
"id": "velin-themes-contrast-check",
"category": "themes",
"priority": "recommended",
"status": "beta",
"confidence": "high",
"capabilities": [
"review.a11y"
],
"name": "Theme Contrast Check",
"description": "Checks token contrast and theme compatibility for WCAG goals.",
"prosePath": "skills/velin-themes-contrast-check/SKILL.md",
"proseHref": "docs/generated/skills/velin-themes-contrast-check/SKILL.md"
},
{
"id": "velin-motion-reduced-safe",
"category": "motion",
"priority": "core",
"status": "stable",
"confidence": "high",
"capabilities": [
"build.motion"
],
"name": "Motion Reduced Safe",
"description": "Applies motion while honoring prefers-reduced-motion.",
"prosePath": "skills/velin-motion-reduced-safe/SKILL.md",
"proseHref": "docs/generated/skills/velin-motion-reduced-safe/SKILL.md"
},
{
"id": "velin-motion-reveal-feedback",
"category": "motion",
"priority": "recommended",
"status": "beta",
"confidence": "medium",
"capabilities": [
"build.motion"
],
"name": "Motion Reveal Feedback",
"description": "Adds intentional reveal and feedback motion hierarchies.",
"prosePath": "skills/velin-motion-reveal-feedback/SKILL.md",
"proseHref": "docs/generated/skills/velin-motion-reveal-feedback/SKILL.md"
},
{
"id": "velin-a11y-page-checklist",
"category": "accessibility",
"priority": "core",
"status": "stable",
"confidence": "high",
"capabilities": [
"review.a11y"
],
"name": "A11y Page Checklist",
"description": "Run a page-level accessibility checklist before release. Review-only analysis ??? does not Apply HTML rewrites.",
"prosePath": "skills/velin-a11y-page-checklist/SKILL.md",
"proseHref": "docs/generated/skills/velin-a11y-page-checklist/SKILL.md"
},
{
"id": "velin-a11y-scan-fix",
"category": "accessibility",
"priority": "core",
"status": "stable",
"confidence": "high",
"capabilities": [
"review.a11y"
],
"name": "A11y Scan Fix",
"description": "Interpret a11y scan findings and diagnostics. Review-only: recommend official --fix / --fix-dry-run only when finding.fixable and scan-policy SAFE gates allow. Candidates ??? Apply; links/* detect-only; never invent ids/labels/paths.",
"prosePath": "skills/velin-a11y-scan-fix/SKILL.md",
"proseHref": "docs/generated/skills/velin-a11y-scan-fix/SKILL.md"
},
{
"id": "velin-a11y-focus-keyboard",
"category": "accessibility",
"priority": "recommended",
"status": "beta",
"confidence": "high",
"capabilities": [
"review.a11y"
],
"name": "Focus Keyboard",
"description": "Validate keyboard navigation and visible focus. Review-only ??? reports gaps; does not Apply markup changes.",
"prosePath": "skills/velin-a11y-focus-keyboard/SKILL.md",
"proseHref": "docs/generated/skills/velin-a11y-focus-keyboard/SKILL.md"
},
{
"id": "velin-testing-a11y-suite",
"category": "testing",
"priority": "recommended",
"status": "stable",
"confidence": "high",
"capabilities": [
"review.test"
],
"name": "Testing A11y Suite",
"description": "Runs accessibility test suite and triages regressions.",
"prosePath": "skills/velin-testing-a11y-suite/SKILL.md",
"proseHref": "docs/generated/skills/velin-testing-a11y-suite/SKILL.md"
},
{
"id": "velin-testing-visual-smoke",
"category": "testing",
"priority": "advanced",
"status": "beta",
"confidence": "medium",
"capabilities": [
"review.test"
],
"name": "Testing Visual Smoke",
"description": "Runs visual smoke checks across key breakpoints.",
"prosePath": "skills/velin-testing-visual-smoke/SKILL.md",
"proseHref": "docs/generated/skills/velin-testing-visual-smoke/SKILL.md"
},
{
"id": "velin-review-page-gate",
"category": "review",
"priority": "core",
"status": "stable",
"confidence": "high",
"capabilities": [
"review.gate"
],
"name": "Review Page Gate",
"description": "Runs design/a11y/seo/perf/conversion gate and reports score.",
"prosePath": "skills/velin-review-page-gate/SKILL.md",
"proseHref": "docs/generated/skills/velin-review-page-gate/SKILL.md"
},
{
"id": "velin-review-conversion-hero",
"category": "review",
"priority": "recommended",
"status": "beta",
"confidence": "medium",
"capabilities": [
"review.seo"
],
"name": "Review Conversion Hero",
"description": "Reviews hero conversion quality and CTA hierarchy.",
"prosePath": "skills/velin-review-conversion-hero/SKILL.md",
"proseHref": "docs/generated/skills/velin-review-conversion-hero/SKILL.md"
},
{
"id": "velin-review-seo-meta",
"category": "review",
"priority": "recommended",
"status": "stable",
"confidence": "high",
"capabilities": [
"review.seo"
],
"name": "Review SEO Meta",
"description": "Checks SEO metadata and content semantics.",
"prosePath": "skills/velin-review-seo-meta/SKILL.md",
"proseHref": "docs/generated/skills/velin-review-seo-meta/SKILL.md"
},
{
"id": "velin-docs-component-guide",
"category": "documentation",
"priority": "recommended",
"status": "beta",
"confidence": "high",
"capabilities": [
"build.docs"
],
"name": "Docs Component Guide",
"description": "Writes component-focused documentation with quality checklists.",
"prosePath": "skills/velin-docs-component-guide/SKILL.md",
"proseHref": "docs/generated/skills/velin-docs-component-guide/SKILL.md"
},
{
"id": "velin-docs-generate-api",
"category": "documentation",
"priority": "core",
"status": "stable",
"confidence": "high",
"capabilities": [
"build.docs"
],
"name": "Docs Generate API",
"description": "Generates API Markdown and verifies documentation footprint.",
"prosePath": "skills/velin-docs-generate-api/SKILL.md",
"proseHref": "docs/generated/skills/velin-docs-generate-api/SKILL.md"
},
{
"id": "velin-migration-prefix-classes",
"category": "migration",
"priority": "core",
"status": "stable",
"confidence": "high",
"capabilities": [
"migrate.prefix"
],
"name": "Migration Prefix Classes",
"description": "Migrates class names to velin-* convention.",
"prosePath": "skills/velin-migration-prefix-classes/SKILL.md",
"proseHref": "docs/generated/skills/velin-migration-prefix-classes/SKILL.md"
},
{
"id": "velin-migration-legacy-wc",
"category": "migration",
"priority": "recommended",
"status": "beta",
"confidence": "high",
"capabilities": [
"migrate.legacy-wc"
],
"name": "Migration Legacy WC",
"description": "Replaces legacy *-wc tags with canonical components.",
"prosePath": "skills/velin-migration-legacy-wc/SKILL.md",
"proseHref": "docs/generated/skills/velin-migration-legacy-wc/SKILL.md"
},
{
"id": "velin-release-changelog-sync",
"category": "release",
"priority": "recommended",
"status": "stable",
"confidence": "high",
"capabilities": [
"review.release"
],
"name": "Release Changelog Sync",
"description": "Keeps changelog and docs in sync before release.",
"prosePath": "skills/velin-release-changelog-sync/SKILL.md",
"proseHref": "docs/generated/skills/velin-release-changelog-sync/SKILL.md"
},
{
"id": "velin-release-meta-rebuild",
"category": "release",
"priority": "core",
"status": "stable",
"confidence": "high",
"capabilities": [
"build.meta"
],
"name": "Release Meta Rebuild",
"description": "Rebuilds velin-agent.json and llms.txt before publishing.",
"prosePath": "skills/velin-release-meta-rebuild/SKILL.md",
"proseHref": "docs/generated/skills/velin-release-meta-rebuild/SKILL.md"
},
{
"id": "velin-dx-project-init",
"category": "developer-experience",
"priority": "core",
"status": "stable",
"confidence": "high",
"capabilities": [
"build.dx"
],
"name": "DX Project Init",
"description": "Bootstraps VelinStyle projects with sane defaults.",
"prosePath": "skills/velin-dx-project-init/SKILL.md",
"proseHref": "docs/generated/skills/velin-dx-project-init/SKILL.md"
},
{
"id": "velin-dx-doctor-setup",
"category": "developer-experience",
"priority": "advanced",
"status": "experimental",
"confidence": "medium",
"capabilities": [
"review.dx"
],
"name": "DX Doctor Setup",
"description": "Run setup diagnostics and propose DX fixes. Review-only ??? proposals are not automatic Apply.",
"prosePath": "skills/velin-dx-doctor-setup/SKILL.md",
"proseHref": "docs/generated/skills/velin-dx-doctor-setup/SKILL.md"
},
{
"id": "velin-perf-audit-fix",
"category": "performance",
"priority": "recommended",
"status": "stable",
"confidence": "high",
"capabilities": [
"review.perf"
],
"name": "Perf Audit Fix",
"description": "Audit performance signals and recommend safe optimizations. Review-only ??? recommendations are not automatic Apply.",
"prosePath": "skills/velin-perf-audit-fix/SKILL.md",
"proseHref": "docs/generated/skills/velin-perf-audit-fix/SKILL.md"
},
{
"id": "velin-perf-runtime-tree-shake",
"category": "performance",
"priority": "advanced",
"status": "beta",
"confidence": "medium",
"capabilities": [
"build.perf"
],
"name": "Perf Runtime Tree Shake",
"description": "Reduces runtime payload using explicit component loading strategy.",
"prosePath": "skills/velin-perf-runtime-tree-shake/SKILL.md",
"proseHref": "docs/generated/skills/velin-perf-runtime-tree-shake/SKILL.md"
},
{
"id": "velin-security-scan-pii",
"category": "security",
"priority": "core",
"status": "stable",
"confidence": "high",
"capabilities": [
"review.security"
],
"name": "Security Scan PII",
"description": "Detect PII exposure and common security mistakes via scan. Review/detect guidance ??? Candidates ??? Apply.",
"prosePath": "skills/velin-security-scan-pii/SKILL.md",
"proseHref": "docs/generated/skills/velin-security-scan-pii/SKILL.md"
},
{
"id": "velin-security-sanitize-html",
"category": "security",
"priority": "recommended",
"status": "stable",
"confidence": "high",
"capabilities": [
"review.security"
],
"name": "Security Sanitize HTML",
"description": "Provide safe HTML sanitization guidance for dynamic content. Review-only guidance ??? does not rewrite project files.",
"prosePath": "skills/velin-security-sanitize-html/SKILL.md",
"proseHref": "docs/generated/skills/velin-security-sanitize-html/SKILL.md"
},
{
"id": "velin-ai-agent-briefing",
"category": "ai-workflows",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"build.meta",
"review.gate"
],
"name": "AI Agent Briefing",
"description": "Prepares agent context and guardrails from velin metadata.",
"prosePath": "skills/velin-ai-agent-briefing/SKILL.md",
"proseHref": "docs/generated/skills/velin-ai-agent-briefing/SKILL.md"
},
{
"id": "velin-ai-plan-scaffold-review",
"category": "ai-workflows",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"build.scaffold",
"review.gate"
],
"name": "AI Plan Scaffold Review",
"description": "Runs the canonical AI workflow from prompt to reviewed HTML.",
"prosePath": "skills/velin-ai-plan-scaffold-review/SKILL.md",
"proseHref": "docs/generated/skills/velin-ai-plan-scaffold-review/SKILL.md"
},
{
"id": "velin-ai-skill-authoring",
"category": "ai-workflows",
"priority": "advanced",
"status": "beta",
"confidence": "medium",
"capabilities": [
"build.meta"
],
"name": "AI Skill Authoring",
"description": "Authors new skills with registry-first metadata quality gates.",
"prosePath": "skills/velin-ai-skill-authoring/SKILL.md",
"proseHref": "docs/generated/skills/velin-ai-skill-authoring/SKILL.md"
},
{
"id": "velin-reuse-gate",
"category": "ai-workflows",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"reuse.gate"
],
"name": "Reuse Gate",
"description": "Before build/migration/intelligence/rewrite: search existing VelinStyle skills, components, utilities, tokens, and patterns; recommend reuse or extend; allow NEW only when gap is evidenced.",
"prosePath": "skills/velin-reuse-gate/SKILL.md",
"proseHref": "docs/generated/skills/velin-reuse-gate/SKILL.md"
},
{
"id": "velin-migration-scan",
"category": "migration",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"migrate.analyze"
],
"name": "Migration Scan",
"description": "Detect Tailwind/VelinStyle/prefix/legacy footprints in a project. Orchestrates analysis only; does not invent targets or rewrite sources.",
"prosePath": "skills/velin-migration-scan/SKILL.md",
"proseHref": "docs/generated/skills/velin-migration-scan/SKILL.md"
},
{
"id": "velin-migration-plan",
"category": "migration",
"priority": "recommended",
"status": "beta",
"confidence": "high",
"capabilities": [
"migrate.plan"
],
"name": "Migration Plan",
"description": "Produce a migration plan from scan reports without Intelligence rewrite or Apply. No target invention.",
"prosePath": "skills/velin-migration-plan/SKILL.md",
"proseHref": "docs/generated/skills/velin-migration-plan/SKILL.md"
},
{
"id": "velin-migration-tailwind",
"category": "migration",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"migrate.tailwind",
"migrate.plan"
],
"name": "Migration Tailwind",
"description": "Orchestrate `velinstyle migrate tailwind` dry-run and interpret Mapped vs Residual. Default dry-run only. Does not invent residual targets; does not raise SAFE_REWRITE; Mapped write only via separate human-confirmed CLI path outside this skill permission.",
"prosePath": "skills/velin-migration-tailwind/SKILL.md",
"proseHref": "docs/generated/skills/velin-migration-tailwind/SKILL.md"
},
{
"id": "velin-migration-review",
"category": "migration",
"priority": "recommended",
"status": "beta",
"confidence": "high",
"capabilities": [
"migrate.review"
],
"name": "Migration Review",
"description": "Review migration dry-run honesty vs coverage (Mapped ??? Coverage ??? Applied). Fail closed on coverage lies.",
"prosePath": "skills/velin-migration-review/SKILL.md",
"proseHref": "docs/generated/skills/velin-migration-review/SKILL.md"
},
{
"id": "velin-migration-stop",
"category": "migration",
"priority": "advanced",
"status": "beta",
"confidence": "high",
"capabilities": [
"migrate.review"
],
"name": "Migration Stop Rules",
"description": "Enforce Domain-L stop policy: unclear scope, heuristic mapping claims, residual-as-safe. Outputs stop checklist only.",
"prosePath": "skills/velin-migration-stop/SKILL.md",
"proseHref": "docs/generated/skills/velin-migration-stop/SKILL.md"
},
{
"id": "velin-intelligence-inventory",
"category": "intelligence",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"intelligence.inventory"
],
"name": "Intelligence Inventory",
"description": "Explain Migration Intelligence residual inventory from existing CLI reports. Never invents targetTokens.",
"prosePath": "skills/velin-intelligence-inventory/SKILL.md",
"proseHref": "docs/generated/skills/velin-intelligence-inventory/SKILL.md"
},
{
"id": "velin-intelligence-classify",
"category": "intelligence",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"intelligence.classify"
],
"name": "Intelligence Classify",
"description": "Explain classifier clusters / strategy blocks / user actions from MI artifacts. Classification ??? Acceptance ??? Mapping.",
"prosePath": "skills/velin-intelligence-classify/SKILL.md",
"proseHref": "docs/generated/skills/velin-intelligence-classify/SKILL.md"
},
{
"id": "velin-intelligence-acceptance",
"category": "intelligence",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"intelligence.acceptance"
],
"name": "Intelligence Acceptance",
"description": "Read and (with user confirm) record Acceptance via `velinstyle migrate acceptance`. ACCEPTED ??? APPLIED ??? Mapped. Never emits source???target.",
"prosePath": "skills/velin-intelligence-acceptance/SKILL.md",
"proseHref": "docs/generated/skills/velin-intelligence-acceptance/SKILL.md"
},
{
"id": "velin-intelligence-policy",
"category": "intelligence",
"priority": "recommended",
"status": "beta",
"confidence": "high",
"capabilities": [
"intelligence.policy"
],
"name": "Intelligence Policy",
"description": "Explain NEEDS_CONTEXT / INFO / Drift / Orphan / Decision Plan policy. No source mutation; no target invention (THEME/STATE/PALETTE/DIM_PX/TYPO/HALF_STEP).",
"prosePath": "skills/velin-intelligence-policy/SKILL.md",
"proseHref": "docs/generated/skills/velin-intelligence-policy/SKILL.md"
},
{
"id": "velin-intelligence-review",
"category": "intelligence",
"priority": "recommended",
"status": "beta",
"confidence": "high",
"capabilities": [
"intelligence.review",
"intelligence.policy"
],
"name": "Intelligence Review",
"description": "Review Intelligence reports for honesty: Acceptance???Mapping, SAFE_REWRITE stays 0, no heuristic-as-safe.",
"prosePath": "skills/velin-intelligence-review/SKILL.md",
"proseHref": "docs/generated/skills/velin-intelligence-review/SKILL.md"
},
{
"id": "velin-intelligence-stop",
"category": "intelligence",
"priority": "advanced",
"status": "beta",
"confidence": "high",
"capabilities": [
"intelligence.review"
],
"name": "Intelligence Stop Rules",
"description": "Domain-M stop guardian: recommendation-as-target, invent tokens, Acceptance-as-Mapping, SAFE_REWRITE inflation.",
"prosePath": "skills/velin-intelligence-stop/SKILL.md",
"proseHref": "docs/generated/skills/velin-intelligence-stop/SKILL.md"
},
{
"id": "velin-rewrite-catalog",
"category": "rewrite",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"rewrite.catalog"
],
"name": "Rewrite Catalog",
"description": "Read/explain Explicit Rewrite Catalog state (including empty). Does not invent catalog entries or targets. Agents may only recommend human/CLI catalog updates with allowlists.",
"prosePath": "skills/velin-rewrite-catalog/SKILL.md",
"proseHref": "docs/generated/skills/velin-rewrite-catalog/SKILL.md"
},
{
"id": "velin-rewrite-manifest",
"category": "rewrite",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"rewrite.manifest"
],
"name": "Rewrite Manifest",
"description": "Read/validate rewrite-manifest.json. Manifest ??? Acceptance. Does not invent entries; does not Apply. Explain `migrate rewrite-manifest` CLI only.",
"prosePath": "skills/velin-rewrite-manifest/SKILL.md",
"proseHref": "docs/generated/skills/velin-rewrite-manifest/SKILL.md"
},
{
"id": "velin-rewrite-preflight",
"category": "rewrite",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"rewrite.preflight"
],
"name": "Rewrite Preflight",
"description": "Bundled Apply-Gate preflight (OD-6): Manifest, Acceptance relation, Path, Target, MappingSource, Hash, TOCTOU, Conflict, Occurrence, Snapshot readiness. Emits GateResult[]. No Write. GATE_READY ??? SAFE_REWRITE.",
"prosePath": "skills/velin-rewrite-preflight/SKILL.md",
"proseHref": "docs/generated/skills/velin-rewrite-preflight/SKILL.md"
},
{
"id": "velin-rewrite-dry-run",
"category": "rewrite",
"priority": "core",
"status": "beta",
"confidence": "high",
"capabilities": [
"rewrite.dry-run"
],
"name": "Rewrite Dry Run",
"description": "Orchestrate rewrite dry-run diff in memory after preflight. No source write. Requires prior PREFLIGHT pass.",
"prosePath": "skills/velin-rewrite-dry-run/SKILL.md",
"proseHref": "docs/generated/skills/velin-rewrite-dry-run/SKILL.md"
},
{
"id": "velin-rewrite-apply",
"category": "rewrite",
"priority": "advanced",
"status": "experimental",
"confidence": "high",
"capabilities": [
"rewrite.apply",
"rewrite.apply-gate"
],
"name": "Rewrite Apply",
"description": "Orchestrate rewrite apply ONLY after GATE_READY + DRY_RUN_OK + Snapshot. Fail closed. Does not invent mappings. Does not raise SAFE_REWRITE. RequiresApproval mandatory.",
"prosePath": "skills/velin-rewrite-apply/SKILL.md",
"proseHref": "docs/generated/skills/velin-rewrite-apply/SKILL.md"
},
{
"id": "velin-rewrite-rollback",
"category": "rewrite",
"priority": "advanced",
"status": "experimental",
"confidence": "high",
"capabilities": [
"rewrite.rollback"
],
"name": "Rewrite Rollback",
"description": "Orchestrate snapshot rollback after failed or unwanted apply. Restore only; no new mappings.",
"prosePath": "skills/velin-rewrite-rollback/SKILL.md",
"proseHref": "docs/generated/skills/velin-rewrite-rollback/SKILL.md"
}
],
"registryVersion": "1.0.0",
"source": "packages/velinstyle-skills/registry.json"
},
"skillPacks": [
{
"id": "frontend",
"name": "Frontend Pack",
"version": "1.0.0",
"priority": "core",
"skills": [
"velin-dx-project-init",
"velin-dev-plan-first",
"velin-dev-page-scaffold",
"velin-components-select-compose",
"velin-utilities-layout-apply"
]
},
{
"id": "design",
"name": "Design Pack",
"version": "1.0.0",
"priority": "recommended",
"skills": [
"velin-design-hero-compose",
"velin-design-section-rhythm",
"velin-design-surface-roles",
"velin-themes-apply-token",
"velin-motion-reduced-safe"
]
},
{
"id": "accessibility",
"name": "Accessibility Pack",
"version": "1.0.0",
"priority": "core",
"skills": [
"velin-a11y-page-checklist",
"velin-a11y-scan-fix",
"velin-a11y-focus-keyboard",
"velin-testing-a11y-suite"
]
},
{
"id": "documentation",
"name": "Documentation Pack",
"version": "1.0.0",
"priority": "recommended",
"skills": [
"velin-docs-component-guide",
"velin-docs-generate-api",
"velin-release-changelog-sync"
]
},
{
"id": "review",
"name": "Review Pack",
"version": "1.0.0",
"priority": "core",
"skills": [
"velin-review-page-gate",
"velin-review-conversion-hero",
"velin-review-seo-meta",
"velin-security-scan-pii"
]
},
{
"id": "enterprise",
"name": "Enterprise Pack",
"version": "1.0.0",
"priority": "advanced",
"skills": [
"velin-security-scan-pii",
"velin-security-sanitize-html",
"velin-perf-audit-fix",
"velin-migration-prefix-classes",
"velin-release-meta-rebuild"
]
},
{
"id": "migration",
"name": "Migration Pack",
"version": "1.0.0",
"priority": "core",
"skills": [
"velin-reuse-gate",
"velin-migration-scan",
"velin-migration-plan",
"velin-migration-tailwind",
"velin-migration-review",
"velin-migration-stop",
"velin-migration-prefix-classes",
"velin-migration-legacy-wc"
]
},
{
"id": "intelligence",
"name": "Intelligence Pack",
"version": "1.0.0",
"priority": "core",
"skills": [
"velin-reuse-gate",
"velin-intelligence-inventory",
"velin-intelligence-classify",
"velin-intelligence-policy",
"velin-intelligence-acceptance",
"velin-intelligence-review",
"velin-intelligence-stop"
]
},
{
"id": "rewrite",
"name": "Rewrite Pack",
"version": "1.0.0",
"priority": "advanced",
"skills": [
"velin-reuse-gate",
"velin-rewrite-catalog",
"velin-rewrite-manifest",
"velin-rewrite-preflight",
"velin-rewrite-dry-run",
"velin-rewrite-apply",
"velin-rewrite-rollback"
]
}
],
"workflowGraphs": [
{
"id": "landingpage",
"name": "Landing Page Workflow",
"entry": "reuse",
"nodeCount": 9,
"edgeCount": 9
},
{
"id": "component-ship",
"name": "Component Ship Workflow",
"entry": "select",
"nodeCount": 5,
"edgeCount": 4
},
{
"id": "release-gate",
"name": "Release Gate Workflow",
"entry": "review",
"nodeCount": 5,
"edgeCount": 5
},
{
"id": "tailwind-migrate",
"name": "Tailwind Migrate Workflow",
"entry": "reuse",
"nodeCount": 6,
"edgeCount": 5
},
{
"id": "intelligence-review",
"name": "Intelligence Review Workflow",
"entry": "reuse",
"nodeCount": 7,
"edgeCount": 6
},
{
"id": "rewrite-apply",
"name": "Rewrite Apply Workflow",
"entry": "reuse",
"nodeCount": 7,
"edgeCount": 6
}
],
"bundles": [
{
"id": "landing-starter",
"origin": "official",
"packs": [
"frontend",
"design",
"review"
],
"graphs": [
"landingpage"
],
"templates": [
"landing-page"
],
"docs": [
"docs/guides/ai-skills.html"
]
},
{
"id": "review-suite",
"origin": "official",
"packs": [
"accessibility",
"review"
],
"graphs": [
"release-gate"
],
"templates": [],
"docs": [
"docs/guides/ai-skills.html"
]
}
],
"templates": [
{
"id": "landing-page",
"workflowGraph": "landingpage",
"packs": [
"frontend",
"design"
],
"theme": "default",
"demo": "samples/landing.html",
"docs": [
"docs/guides/prompt-scaffolding.html",
"docs/guides/landing-15-min.html"
],
"starterFiles": [
"templates/vite-velinstyle/index.html"
],
"defaults": {
"pageIntent": "marketing-landing",
"sections": [
"hero",
"features",
"faq",
"contact"
]
}
},
{
"id": "marketing-website",
"workflowGraph": "landingpage",
"packs": [
"frontend",
"design",
"review"
],
"theme": "default",
"demo": "samples/landing.html",
"docs": [
"docs/guides/prompt-scaffolding.html",
"docs/guides/landing-15-min.html"
],
"starterFiles": [
"templates/vite-velinstyle/index.html"
],
"defaults": {
"pageIntent": "marketing-site",
"sections": [
"hero",
"benefits",
"proof",
"faq",
"contact"
]
}
},
{
"id": "documentation-portal",
"workflowGraph": "component-ship",
"packs": [
"documentation",
"review"
],
"theme": "default",
"demo": "docs/index.html",
"docs": [
"docs/guides/ai-skills.html",
"docs/guides/prompt-scaffolding.html"
],
"starterFiles": [
"templates/vite-velinstyle/index.html"
],
"defaults": {
"pageIntent": "docs-portal",
"sections": [
"hero",
"toc",
"examples",
"faq"
]
}
},
{
"id": "admin-panel",
"workflowGraph": "release-gate",
"packs": [
"enterprise",
"review"
],
"theme": "midnight",
"demo": "samples/dashboard.html",
"docs": [
"docs/guides/ai-skills.html",
"docs/guides/prompt-scaffolding.html"
],
"starterFiles": [
"templates/vite-velinstyle/index.html"
],
"defaults": {
"pageIntent": "admin-panel",
"sections": [
"kpis",
"table",
"forms"
]
}
},
{
"id": "blog",
"workflowGraph": "landingpage",
"packs": [
"frontend",
"review"
],
"theme": "default",
"demo": "samples/blog.html",
"docs": [
"docs/guides/ai-skills.html",
"docs/guides/prompt-scaffolding.html"
],
"starterFiles": [
"templates/vite-velinstyle/index.html"
],
"defaults": {
"pageIntent": "blog",
"sections": [
"hero",
"posts",
"faq",
"contact"
]
}
},
{
"id": "ecommerce-shop",
"workflowGraph": "landingpage",
"packs": [
"frontend",
"review",
"enterprise"
],
"theme": "default",
"demo": "samples/ecommerce.html",
"docs": [
"docs/guides/ecommerce.html",
"docs/guides/prompt-scaffolding.html"
],
"starterFiles": [
"templates/vite-velinstyle/index.html"
],
"defaults": {
"pageIntent": "shop",
"sections": [
"hero",
"products",
"proof",
"faq"
]
}
},
{
"id": "portfolio",
"workflowGraph": "landingpage",
"packs": [
"design",
"frontend"
],
"theme": "soft",
"demo": "samples/portfolio.html",
"docs": [
"docs/guides/ai-skills.html",
"docs/guides/prompt-scaffolding.html"
],
"starterFiles": [
"templates/vite-velinstyle/index.html"
],
"defaults": {
"pageIntent": "portfolio",
"sections": [
"hero",
"projects",
"about",
"contact"
]
}
},
{
"id": "laravel-dashboard",
"workflowGraph": "release-gate",
"packs": [
"enterprise",
"frontend"
],
"theme": "midnight",
"demo": "samples/dashboard.html",
"docs": [
"docs/guides/laravel.html"
],
"starterFiles": [
"templates/vite-velinstyle/index.html"
],
"defaults": {
"pageIntent": "dashboard",
"sections": [
"kpis",
"table",
"forms"
]
}
}
],
"projectSkills": [
{
"id": "marketing-website",
"name": "Marketing Website",
"priority": "recommended",
"workflowGraph": "landingpage",
"packs": [
"frontend",
"design",
"review"
],
"skills": [
"velin-ai-plan-scaffold-review",
"velin-review-conversion-hero"
],
"optimizedFor": [
"cursor",
"claude-code"
]
},
{
"id": "documentation-portal",
"name": "Documentation Portal",
"priority": "recommended",
"workflowGraph": "component-ship",
"packs": [
"documentation",
"review"
],
"skills": [
"velin-docs-generate-api",
"velin-ai-agent-briefing"
],
"optimizedFor": [
"cursor",
"vscode"
]
},
{
"id": "admin-panel",
"name": "Admin Panel",
"priority": "recommended",
"workflowGraph": "release-gate",
"packs": [
"enterprise",
"review"
],
"skills": [
"velin-perf-audit-fix",
"velin-security-scan-pii"
],
"optimizedFor": [
"cursor"
]
},
{
"id": "landing-page",
"name": "Landing Page",
"priority": "core",
"workflowGraph": "landingpage",
"packs": [
"frontend",
"design"
],
"skills": [
"velin-review-conversion-hero"
],
"optimizedFor": [
"cursor",
"windsurf"
]
},
{
"id": "blog",
"name": "Blog",
"priority": "recommended",
"workflowGraph": "landingpage",
"packs": [
"frontend",
"review"
],
"skills": [
"velin-review-seo-meta"
],
"optimizedFor": [
"cursor"
]
},
{
"id": "ecommerce-shop",
"name": "E-Commerce Shop",
"priority": "advanced",
"workflowGraph": "landingpage",
"packs": [
"enterprise",
"review"
],
"skills": [
"velin-security-sanitize-html",
"velin-review-conversion-hero"
],
"optimizedFor": [
"cursor"
]
},
{
"id": "portfolio",
"name": "Portfolio",
"priority": "recommended",
"workflowGraph": "landingpage",
"packs": [
"design",
"frontend"
],
"skills": [
"velin-motion-reveal-feedback"
],
"optimizedFor": [
"cursor",
"vscode"
]
},
{
"id": "laravel-dashboard",
"name": "Laravel Dashboard",
"priority": "advanced",
"workflowGraph": "release-gate",
"packs": [
"enterprise",
"frontend"
],
"skills": [
"velin-dx-project-init"
],
"optimizedFor": [
"cursor",
"claude-code"
]
}
],
"attributes": {
"names": [
"velin-accordion",
"velin-anchor",
"velin-code",
"velin-copy",
"velin-counter",
"velin-delay",
"velin-disclosure",
"velin-duration",
"velin-ease",
"velin-fade",
"velin-grid",
"velin-highlight",
"velin-hover",
"velin-lazy",
"velin-loading",
"velin-modal",
"velin-motion",
"velin-motion-sequence",
"velin-notify",
"velin-parallax",
"velin-progress",
"velin-quote",
"velin-reveal",
"velin-scale",
"velin-scroll",
"velin-scroll-top",
"velin-search",
"velin-skeleton",
"velin-slide",
"velin-stagger",
"velin-tabs",
"velin-theme",
"velin-timeline",
"velin-tooltip",
"velin-transparency",
"velin-trigger"
],
"count": 36
},
"cli": {
"commands": [
{
"name": "init",
"summary": "Create velinstyle.config.js, optional vendor copy, and starter HTML with reveal/sprite defaults",
"flags": [],
"example": "velinstyle init"
},
{
"name": "build",
"summary": "Build custom CSS with selected layers from config, or production output with --production",
"flags": [
"--output",
"-o",
"--out",
"--minify",
"--preset",
"--production",
"--explain",
"--watch",
"--report",
"--safelist"
],
"example": "velinstyle build --production --explain -o ./dist/velin-production"
},
{
"name": "production",
"summary": "Content-aware production builder (CSS/JS/themes/icons/fonts/motion + report)",
"flags": [
"--out",
"-o",
"--explain",
"--watch",
"--report",
"--safelist",
"--no-js",
"--no-icons",
"--no-themes",
"--no-motion",
"--no-minify"
],
"example": "velinstyle production . --explain --report ./report.json"
},
{
"name": "themes",
"summary": "List available built-in themes",
"flags": [],
"example": "velinstyle themes"
},
{
"name": "add",
"summary": "Add a single component CSS file to your project",
"flags": [],
"example": "velinstyle add button"
},
{
"name": "icons",
"summary": "Manage icon providers (list, add, remove, build)",
"flags": [
"--icons",
"--variant"
],
"example": "velinstyle icons add lucide --icons menu,search",
"subcommands": [
"list",
"add",
"remove",
"build"
]
},
{
"name": "scan",
"summary": "Security, accessibility, CSS, and PII scanner; machine --json/--sarif; SAFE Apply via --fix/--fix-dry-run only",
"flags": [
"--format",
"--severity",
"--only",
"--fix",
"--fix-dry-run",
"--fix-lang",
"--json",
"--sarif"
],
"example": "velinstyle scan index.html"
},
{
"name": "prefix",
"summary": "Add missing velin- prefix to classes (dry-run; use --write)",
"flags": [
"--write",
"--map",
"--bootstrap-display"
],
"example": "velinstyle prefix src/ --write"
},
{
"name": "migrate",
"summary": "Tailwind ??? VelinStyle migration (dry-run by default; --write applies Mapped only)",
"flags": [
"--dry-run",
"--write",
"--apply",
"--compat",
"--heuristic",
"--snapshot",
"--json"
],
"example": "velinstyle migrate tailwind ./my-project",
"subcommands": [
"tailwind",
"rollback"
]
},
{
"name": "blueprint",
"summary": "Print HTML blueprint snippets; --strict fails on classes missing from CSS",
"flags": [
"--output",
"-o",
"--strict"
],
"example": "velinstyle blueprint modal -o snippet.html --strict",
"subcommands": [
"list"
]
},
{
"name": "create",
"summary": "Scaffold a runnable project: landing | dashboard | docs | auth",
"flags": [
"--theme",
"--no-copy"
],
"example": "velinstyle create landing ./my-site --theme earth",
"subcommands": [
"landing",
"dashboard",
"docs",
"auth"
]
},
{
"name": "serve",
"summary": "Serve a directory over HTTP (default port 4173)",
"flags": [
"--port"
],
"example": "velinstyle serve . --port 4173"
},
{
"name": "doctor",
"summary": "Check dist assets, themes, config, icons, and Windows ESM import hints",
"flags": [],
"example": "velinstyle doctor"
},
{
"name": "check",
"summary": "Aggregate gate: doctor + blueprint --strict + scan + review (alias: validate)",
"flags": [
"--json",
"--sarif",
"--profile"
],
"example": "velinstyle check . --profile marketing"
},
{
"name": "scaffold",
"summary": "Plan-first page HTML, recipe fragment, or Atelier Library compose (--atelier, beta)",
"flags": [
"--output",
"-o",
"--json",
"--atelier",
"--from",
"--base-url"
],
"example": "velinstyle scaffold --atelier 04,07 -o compose.html --from ./atelier/library",
"subcommands": [
"list-intents"
]
},
{
"name": "plan",
"summary": "Emit page plan JSON from a prompt or --atelier Library ids (beta)",
"flags": [
"--output",
"-o",
"--json",
"--atelier"
],
"example": "velinstyle plan --atelier 04,07"
},
{
"name": "atelier",
"summary": "Pull curated Atelier Library showcase by number/id; blade/vue/react = wrappers only",
"flags": [
"--output",
"-o",
"--format",
"--from",
"--base-url",
"--rewrite-vendor"
],
"example": "velinstyle atelier 36 -o ./velin-atelier/36-calendar --format html",
"subcommands": [
"list"
]
},
{
"name": "review",
"summary": "Design / a11y / SEO / performance / conversion review gate",
"flags": [
"--json",
"--prompt",
"--profile"
],
"example": "velinstyle review out.html --profile marketing"
},
{
"name": "wc",
"summary": "Inspect Web Component APIs from source",
"flags": [],
"example": "velinstyle wc api velin-toast",
"subcommands": [
"api"
]
},
{
"name": "layout",
"summary": "Responsive layout audit (flex, grid, viewport)",
"flags": [
"--json",
"--write",
"--dry-run"
],
"example": "velinstyle layout suggest index.html",
"subcommands": [
"audit",
"suggest",
"fix"
]
},
{
"name": "perf",
"summary": "Performance audit for images and scripts (directory or .html file)",
"flags": [
"--json",
"--write",
"--dry-run"
],
"example": "velinstyle perf audit index.html",
"subcommands": [
"audit",
"suggest",
"fix"
]
},
{
"name": "tokens",
"summary": "Build or validate design tokens JSON",
"flags": [
"--input",
"--output",
"-o"
],
"example": "velinstyle tokens validate --input examples/tokens.full.json",
"subcommands": [
"build",
"validate"
]
},
{
"name": "docs",
"summary": "Generate developer reference Markdown (alias: documentation)",
"flags": [
"--scope",
"--out"
],
"example": "velinstyle docs generate --scope all",
"subcommands": [
"generate"
]
},
{
"name": "meta",
"summary": "Build Velin-Meta agent bundle; page --write merges curated goals/intent",
"flags": [
"--out",
"--llms-out",
"--base-url",
"--no-llms",
"--write"
],
"example": "velinstyle meta page index.html --write",
"subcommands": [
"page"
]
},
{
"name": "search",
"summary": "Build JSON search index for VelinSearch",
"flags": [
"--out",
"--extra-html"
],
"example": "velinstyle search index --out dist/search-index.json",
"subcommands": [
"index"
]
},
{
"name": "skills",
"summary": "Registry-first AI skill catalog and install runner",
"flags": [
"--capability",
"--status",
"--priority",
"--origin",
"--category",
"--target",
"--no-deps",
"--json",
"--human"
],
"example": "velinstyle skills show scaffold.landing --human",
"subcommands": [
"list",
"show",
"install",
"run",
"validate",
"doctor",
"packs",
"bundles",
"templates",
"projects",
"graphs"
]
},
{
"name": "blocks",
"summary": "Velin Blocks registry ??? list, info, and ownership install (velinstyle blocks add)",
"flags": [
"--force",
"--out",
"--dry-run",
"--json"
],
"example": "velinstyle blocks list",
"subcommands": [
"list",
"info",
"add"
]
},
{
"name": "workflow",
"summary": "Resolve workflow graph or project workflow steps",
"flags": [
"--json",
"--dry-run",
"--step"
],
"example": "velinstyle workflow landingpage --json"
},
{
"name": "dashboard",
"summary": "Aggregate Production, Review, Accessibility, Transparency, Performance, Security",
"flags": [],
"example": "velinstyle dashboard"
},
{
"name": "replay",
"summary": "Replay a Velin Experience record.json through the same renderer",
"flags": [],
"example": "velinstyle replay record.json"
},
{
"name": "transparency",
"summary": "Transparency Framework doctor, validate, report, export, migrate",
"flags": [
"--policy",
"--json"
],
"example": "velinstyle transparency doctor .",
"subcommands": [
"doctor",
"validate",
"report",
"export",
"migrate"
]
},
{
"name": "motion",
"summary": "Velin Motion ??? page registry + clip pipeline (create, atelier, AI providers)",
"flags": [
"--json",
"--write",
"--out",
"--output",
"-o",
"--policy",
"--preset",
"--ai",
"--yes",
"-y",
"--provider",
"--model",
"--quality",
"--duration",
"--style",
"--prompt",
"--count",
"--dry-run",
"--clips"
],
"example": "velinstyle motion create atelier.webp",
"subcommands": [
"list",
"presets",
"create",
"atelier",
"transition",
"sequence",
"export",
"usage",
"providers",
"setup",
"zoom",
"pan",
"rotate",
"particles",
"intro",
"outro",
"doctor",
"scan",
"policy",
"demo",
"analyze",
"review",
"report",
"optimize",
"blueprint"
]
},
{
"name": "security",
"summary": "Velin Security Suite ??? Security Engine: doctor, scan, audit, publish, ci, deps, secrets, report",
"flags": [
"--json",
"--strict",
"--repo",
"--consumer",
"--ci",
"--publish",
"--deps",
"--secrets",
"--out",
"--output",
"-o"
],
"example": "velinstyle security doctor .",
"subcommands": [
"doctor",
"scan",
"audit",
"publish",
"ci",
"deps",
"secrets",
"report"
]
}
]
},
"tooling": {
"categories": [
"scan",
"prefix",
"scaffold",
"plan",
"review",
"layout",
"perf",
"tokens",
"docs",
"search",
"meta"
],
"scannerRuleCount": 59,
"scannerCoreRuleCount": 53,
"perfRuleCount": 6,
"scanPolicyCounts": {
"rules": 59,
"safeApply": 5,
"detectOnly": 2,
"reviewOnly": 52,
"scannerCore": 53,
"perf": 6
}
},
"a11y": {
"wcagLevel": "AAA",
"modules": "src/a11y/*.css",
"matrix": "docs/generated/a11y/wcag22-aaa-matrix.md",
"componentContracts": {
"velin-accordion": {
"status": "pass",
"roles": [
"group"
],
"keyboard": "Arrow/Home/End between summaries",
"reducedMotion": true,
"requiredAttributes": [],
"notes": "Wires aria-controls on summary elements."
},
"velin-announcer": {
"status": "pass",
"roles": [
"status"
],
"liveRegion": "polite|assertive",
"keyboard": "N/A",
"reducedMotion": true
},
"velin-bottom-nav": {
"status": "pass",
"roles": [
"navigation"
],
"requiredAttributes": [
"aria-label"
],
"keyboard": "Native links or buttons in slot",
"notes": "Host aria-label; slotchange syncs aria-current and infers item labels from data-nav/title."
},
"velin-carousel": {
"status": "pass",
"roles": [
"group",
"button"
],
"keyboard": "Arrows, Home, End, dots",
"reducedMotion": true
},
"velin-code-block": {
"status": "pass",
"roles": [
"button"
],
"requiredAttributes": [],
"keyboard": "Expand toggle keyboard",
"notes": "Expand uses aria-expanded and aria-controls."
},
"velin-collapse": {
"status": "pass",
"roles": [
"button"
],
"keyboard": "Enter/Space on trigger",
"requiredAttributes": []
},
"velin-combobox": {
"status": "pass",
"roles": [
"combobox",
"listbox"
],
"keyboard": "Roving, Escape, Enter",
"requiredAttributes": [
"aria-label"
]
},
"velin-command": {
"status": "pass",
"roles": [
"dialog"
],
"keyboard": "Escape, arrows in results, Tab trap",
"requiredAttributes": []
},
"velin-copy": {
"status": "pass",
"roles": [
"button"
],
"requiredAttributes": [
"aria-label"
],
"keyboard": "Native button"
},
"velin-countdown": {
"status": "pass",
"roles": [
"timer"
],
"liveRegion": "polite",
"keyboard": "N/A"
},
"velin-counter": {
"status": "pass",
"roles": [
"status"
],
"liveRegion": "polite",
"keyboard": "N/A",
"reducedMotion": true
},
"velin-data-table": {
"status": "pass",
"roles": [
"button"
],
"keyboard": "Sort buttons; editable cells: Enter/F2 edit, Escape cancel; pagination",
"liveRegion": "polite",
"reducedMotion": true,
"requiredAttributes": [],
"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",
"roles": [
"dialog"
],
"keyboard": "Native dialog, Escape",
"requiredAttributes": [],
"notes": "aria-labelledby on dialog, aria-modal true."
},
"velin-drawer": {
"status": "pass",
"roles": [
"dialog"
],
"keyboard": "Escape, Tab trap",
"requiredAttributes": [],
"notes": "Reactive title attribute + slot=title."
},
"velin-dropdown": {
"status": "pass",
"roles": [
"menu",
"button"
],
"keyboard": "Roving, typeahead, Escape"
},
"velin-email": {
"status": "pass",
"roles": [
"button"
],
"requiredAttributes": [
"aria-label"
]
},
"velin-empty-state": {
"status": "pass",
"roles": [
"status"
],
"notes": "heading/description attributes or slots; actions slot for CTAs."
},
"velin-form-summary": {
"status": "pass",
"roles": [
"alert",
"link"
],
"keyboard": "Summary links move focus to the offending field",
"liveRegion": "assertive",
"requiredAttributes": [],
"notes": "Disables native validation bubbles and renders a focusable role=alert summary. Sets aria-invalid and wires aria-describedby to per-field messages (WCAG 3.3.1, 3.3.3, 4.1.2). Field errors clear as soon as the field becomes valid."
},
"velin-icon": {
"status": "pass",
"roles": [
"img",
"presentation"
],
"requiredAttributes": [
"label"
],
"notes": "Decorative when no label; SVG aria-hidden. Do not set aria-hidden on host in JS."
},
"velin-lightbox": {
"status": "pass",
"roles": [
"dialog"
],
"keyboard": "Escape, arrows, Tab trap",
"liveRegion": "polite"
},
"velin-live-dot": {
"status": "pass",
"roles": [
"status"
],
"requiredAttributes": [],
"notes": "Status exposed via aria-label on host, not color alone."
},
"velin-menubar": {
"status": "pass",
"roles": [
"menubar",
"menu"
],
"requiredAttributes": [
"aria-label"
],
"keyboard": "Roving arrows"
},
"velin-modal": {
"status": "pass",
"roles": [
"dialog"
],
"keyboard": "Escape, Tab trap",
"requiredAttributes": [],
"notes": "Reactive title attribute + slot=title; footer slot."
},
"velin-otp-input": {
"status": "pass",
"roles": [
"group"
],
"keyboard": "Digits, arrows, backspace, paste",
"notes": "autocomplete one-time-code on first digit."
},
"velin-password-strength": {
"status": "pass",
"roles": [
"progressbar"
],
"notes": "Heuristic meter; aria-live label; for= links to password input."
},
"velin-persist": {
"status": "pass",
"keyboard": "N/A",
"notes": "display:contents; auto-saves form field values (WCAG 3.3.7 Redundant Entry helper). Clears on form submit."
},
"velin-popover": {
"status": "pass",
"roles": [
"dialog",
"tooltip"
],
"keyboard": "Escape, Enter/Space on trigger; focus opens hover mode",
"notes": "aria-labelledby or default aria-label; non-button triggers get role=button."
},
"velin-progress-ring": {
"status": "pass",
"roles": [
"progressbar"
],
"requiredAttributes": []
},
"velin-rating": {
"status": "pass",
"roles": [
"radiogroup"
],
"keyboard": "Roving, arrows"
},
"velin-scroll-top": {
"status": "pass",
"roles": [
"button"
],
"requiredAttributes": [
"aria-label"
],
"reducedMotion": true
},
"velin-scrollspy": {
"status": "pass",
"keyboard": "Native nav links",
"notes": "Sets aria-current on active link."
},
"velin-search": {
"status": "pass",
"roles": [
"combobox",
"listbox"
],
"requiredAttributes": [
"aria-label"
],
"keyboard": "Arrows, Enter, Escape",
"notes": "Default aria-label Search when unset."
},
"velin-secure-field": {
"status": "pass",
"roles": [
"textbox"
],
"requiredAttributes": [],
"notes": "Native label association."
},
"velin-segmented-control": {
"status": "pass",
"roles": [
"group"
],
"requiredAttributes": [
"aria-label"
],
"keyboard": "Roving"
},
"velin-sheet": {
"status": "pass",
"roles": [
"dialog"
],
"keyboard": "Escape, Tab trap",
"notes": "Reactive title/label + slot=title."
},
"velin-sparkline": {
"status": "pass",
"roles": [
"img",
"presentation"
],
"requiredAttributes": [
"label"
],
"notes": "Uses label, aria-label, or figcaption aria-labelledby."
},
"velin-stepper": {
"status": "pass",
"roles": [
"list"
],
"keyboard": "N/A (display); pair with buttons calling next()/prev()",
"notes": "aria-label per step (completed/current/upcoming); sr-only Completed text; aria-current on active step."
},
"velin-tabs": {
"status": "pass",
"roles": [
"tablist",
"tab",
"tabpanel"
],
"keyboard": "Roving, auto-select arrows"
},
"velin-theme-toggle": {
"status": "pass",
"roles": [
"button",
"menu"
],
"keyboard": "Menu arrows, Escape",
"notes": "aria-pressed on theme toggle."
},
"velin-toast": {
"status": "pass",
"roles": [
"status",
"alert"
],
"liveRegion": "polite|assertive",
"keyboard": "Close button"
},
"velin-tooltip": {
"status": "pass",
"roles": [
"tooltip"
],
"keyboard": "Escape, focusin"
}
},
"init": "import { initA11y } from '@birdapi/velinstyle/a11y'; initA11y();"
},
"searchIndex": {
"path": "dist/search-index.json",
"entryCount": 174
},
"documentation": {
"generated": "docs/generated/",
"guides": {
"velinMeta": "docs/guides/velin-meta.html",
"aiSkills": "docs/guides/ai-skills.html",
"aiResources": "docs/guides/ai-resources.html",
"aiResourcesDe": "docs/guides/ai-resources-leitfaden.html",
"agentWorkflows": "docs/guides/agent-workflows.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",
"cliEn": "docs/extend/cli.html",
"cliDe": "docs/extend/cli-de.html",
"pixverseEn": "docs/guides/pixverse.html",
"pixverseDe": "docs/guides/pixverse-leitfaden.html",
"velinMotionClipsEn": "docs/guides/velin-motion-clips.html",
"velinMotionClipsDe": "docs/guides/velin-motion-clips-leitfaden.html"
},
"resources": {
"componentsGenerated": "docs/generated/components/",
"componentsIntelligence": "docs/generated/intelligence/components.json",
"skillsProse": "docs/generated/skills/",
"scanPolicy": "docs/generated/rules/scan-policy.json",
"scannerRulesMd": "docs/generated/rules/scanner.md",
"atelierCatalog": "docs/generated/atelier/catalog.json",
"atelierHome": "atelier/index.html",
"atelierLibrary": "atelier/library/index.html",
"cssButtonsEn": "docs/components/buttons.html",
"cssButtonsDe": "docs/components/buttons-de.html",
"docLangMap": "docs/doc-lang-map.js"
},
"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",
"wellKnown": ".well-known/ai.json",
"scanPolicy": "docs/generated/rules/scan-policy.json"
}
},
"conventions": [
"Positioning: VelinStyle is a CSS framework with WCAG 2.2 AAA-oriented defaults, native JavaScript runtime, and Web Components ??? not a JS-only library or a utility-only CSS kit.",
"Use only velin-* utility classes and documented Web Components.",
"Prefer data-velin-theme on for theme switching.",
"Run velinstyle scan on generated HTML before shipping.",
"Prefer registry-first skills (`velinstyle skills`) and workflow graphs (`velinstyle workflow`) before inventing custom pipelines.",
"Honor skill status, confidence, compatibility, and onlyIf predicates when automating.",
"Do not put secrets, API keys, or raw emails in velin-meta or page meta.",
"Resolve doc links against docs root (/docs/), not the current page folder.",
"Prefer Velin Transparency Framework (velin-transparency + provenance) for AI/trust/compliance labeling; run `velinstyle transparency doctor`."
]
}