Zur Component Expo springen
VelinStyle+PixVerse Partnerwerbung ?? KI-Video-Maker Werbung
EN DE

Accessibility-first CSS + Web Components

CSS Design System mit live Web Components.

OKLCH-Tokens, Utilities, Themes und 43 Custom Elements ??? nur laden, was im DOM liegt.

npm i @birdapi/velinstyle@1.4.0
Loslegen Installation GitHub Docs Live Demo

Surfaces & Studio

Atelier und Quiz jetzt. Studio als N??chstes.

Fertige Interfaces und die Quiz Challenge heute ??? visueller Template-Bau, wenn Studio kommt.

Jetzt verf??gbar

VelinStyle Atelier

Kuratierte produktionsreife Interfaces, Live-Showcases und Template-Bibliothek. Surfaces per CLI holen und mit scaffold --atelier zusammensetzen ??? komplette Fl??chen, keine isolierten Bauteile.

  • Template-Bibliothek
  • Live-Demos
  • CLI-Pull (beta)
Atelier ??ffnen Bibliothek CLI-Docs

Demn??chst

Velin Studio

Der geplante visuelle Template-Builder: Atelier-Surfaces kombinieren, Layouts bearbeiten und produktionsreifen Markup exportieren ??? Authoring-UI ??ber der Bibliothek, kein Ersatz daf??r.

  • Template-Builder
  • Kombinieren & Export
  • Geplant
Noch nicht ausgeliefert Roadmap in 1.4.0

Jetzt verf??gbar

Quiz Challenge

60 Fragen zu Komponenten, Tokens, A11y, Runtime und CLI ??? Level, Streaks, Badges und Leaderboard. Eigenst??ndige App unter /vs-quiz/.

  • 60 Fragen
  • 3 Level
  • Leaderboard
Quiz starten Docs

Framework-Fakten

1.4.0 auf einen Blick

Zuerst die Kernzahlen ??? danach geb??ndelte F??higkeiten. Der Production Builder liefert nur, was ihr braucht: build only what your project actually uses.

35+ CSS Components 43 Web Components 36 HTML Attributes 13 Themes 58 AI Skills

Kern

Build & CLI

Transparenz & AI

Warum VelinStyle

Ein Vorteil pro Karte

Accessibility

WCAG-2.2-AAA-orientierte Tokens, Fokus, Keyboard-Contracts.

Accessibility Docs

Scanner & SAFE-Fixes

59 Regeln, Diagnostics, 5 SAFE Apply ??? Candidates nie Auto-Apply; links/* Detect-only.

CLI-Scan-Docs

Agent-Discovery

58 Skills, ai.json, Agent-Manifest, ??ffentliche Prose ??? keine erfundenen Skill???Component-Links.

AI Resources

Modernes CSS

OKLCH-Tokens, Nesting, Layers, Container Queries.

Design Tokens

Native Runtime

bootFromDOM l??dt nur Komponenten, die auf der Seite liegen.

JavaScript API

Web Components

43 Custom Elements f??r Overlays, Search, Toast, Charts.

Component Index

Developer Experience

npm-Pin, CDN, CLI, generierte Docs, Live-Galerien.

Download

Performance

Selektive Loader, Audit-CLI, kein Full-IIFE auf der Home.

Performance Audit

Framework-Vergleich

Bootstrap ?? Tailwind ?? VelinStyle

Kriterium
Bootstrap
Tailwind
VelinStyle
Markup-Dichte
Niedrig
Hoch (Class-Sprawl)
Kontrolliert
CSS
Komponenten
Utilities
Komponenten + Utilities
Accessibility
Teilweise
Selbst bauen
Integriert
Themes
Begrenzt
Selbst bauen
13 Themes
Motion
Plugins
Bibliotheken
Integriert
Web Components
Nein
Nein
43
CLI
Eingeschr??nkt
CLI
CLI + Generator + Audit
Agent Support
Nein
Nein
AI Resources ?? velin-agent.json ?? llms.txt
Live Demo
Docs Samples
Play CDN
Diese Seite

Ein Stack ?? drei Habits

CSS ?? Web Components ?? Attributes

1. CSS Components

<button class="velin-btn velin-btn--primary">Invite</button>

Token-basierter Button mit Varianten und Focus Ring.

Button Docs

2. Web Components

<velin-theme-toggle themes-base="dist/themes/"></velin-theme-toggle>

Custom Elements f??r Theme, Toast, Overlays, Search.

Component Index

3. HTML Attributes

<div velin-reveal>Erscheint beim Scrollen</div>
Erscheint beim Scrollen

36 velin-*-Br??cken f??r Motion und Behavior.

Motion Attributes

Capabilities

Architecture Map

Core, Runtime, Accessibility, Developer und AI ??? anklickbare Boxen ??ffnen die Docs.

VelinStyle

AI Runtime

Skill-System ist bereits in VelinStyle

Offizielle Skills, Packs und Workflow-Graphs laufen ??ber Registry + CLI ??? nicht geplant, sondern shipping.

shipped Skill Engine Registry Packs Workflows CLI
01Registry

IDs, Dependencies, Status, Confidence

02Packs

frontend ?? design ?? a11y ?? review ?? enterprise

03Workflows

Landing ?? Component Ship ?? Release Gates

04CLI

velinstyle skills ?? workflow

Schnellstart

velinstyle skills list --capability review && velinstyle workflow release-gate --json

CLI Live

Motion Clips CLI bei der Arbeit

So sieht velinstyle motion aus ??? und die neue Surface dazu: Presets, lokale Engine, optional PixVerse.

velinstyle ??? motion clips 
$

Release

Neu in VelinStyle 1.4.0

1.4.0 liefert Scan-Diagnostics & SAFE-Fixes, ??ffentliche AI-/Agent-Discovery (58 Skills) und Tailwind-Migrate (Pilot). Motion Clips aus 1.3.0 bleiben. Siehe AI Resources und CLI Scan f??r Grenzen.

1.4.0ScannerNEU

Scan-Diagnostics & SAFE-Fixes

59 Regeln ?? strukturierte Diagnostics ?? 5 SAFE Apply ?? links/* Detect-only ?? Candidates ??? Apply ?? Dry-Run / fail-closed.

CLI Scanscan-policy.jsonAI Resources
1.4.0AI / AgentsNEU

Agent-Discovery & 58 Skills

.well-known/ai.json ??? velin-agent.json ??? llms.txt ?? Registry 1.0.0 ?? ??ffentliche Skill-Prose ?? 43/46 Component-Examples ?? 7 DIRECT Atelier-Related-Links.

AI ResourcesAI Skillsai.json
1.4.0Tailwind migrateNEU

Tailwind migrate + Compat

CLI migrate tailwind ?? optional @birdapi/velinstyle-tailwind ?? Pilot 69.4% Mapped ??? keine Tailwind-Parity-Garantie.

MigrateCompatChangelog
1.3.0Motion Clips

Motion-Clip-Pipeline

Paket @birdapi/velinstyle-motion ?? motion create / atelier / transition / sequence / usage ?? Wizard ?? Mini-Prompts ?? optional PixVerse (Credits).

DocsCLI
1.2.7Motion

Motion Engine Surface

Timeline Registry + Runtime ?? Composer ?? Scroll/Transitions ?? analyze ?? review ?? optimize ?? volle Blueprint-Registry. Studio-ready Datenmodell; Studio-UI sp??ter.

DocsCLI
1.2.6MotionNEU

Motion Foundation

Volle Motion Registry ?? Trigger Engine ?? Policies ?? doctor/scan/policy/demo ?? Gallery v1 ?? velin-motion + velin-trigger.

DocsAttribute
1.2.5Experience

Velin Experience

Registry ?? Contract ?? Themes/Modes ?? volle CLI-Oberfl??che ?? dashboard ?? --record + replay ?? Plugin-Skeleton. Das Binary ist nur der Einstieg.

CLIProduction
1.2.4ScannerNEU

Content Scanner

Scan your project ??? HTML, Blade (.blade.php), Twig, Vue, React, Astro, Markdown/MDX. Strukturierter Production Report mit Savings %.

DocsReport
1.2.2Production

Production Builder

Build only what your project actually uses. Projekt analysieren ??? CSS, Web Components, Themes, Icons und Motion nur f??r das, was du brauchst, inkl. Gr????en-Report.

DocsCLI
1.2.2Atelierbeta

Atelier CLI

Library-Templates aus der CLI: atelier list, atelier 24, scaffold --atelier 24. Atelier ??? Velin Studio (Studio bleibt planned).

DocsLibrary
1.2.2Components

Neue Komponenten

velin-otp-input, velin-password-strength, velin-empty-state ??? Komponenten, die Teams wirklich brauchen.

DocsLive Demo
1.2.2Tabellen

Tabellen-Severity

Severity-Zust??nde f??r Tabellen und Data Tables ??? weniger Custom-CSS.

DocsTabellen
1.2.2Overlays

Overlay-Titel

Modal, Drawer und Sheet unterst??tzen dynamische / reaktive Titel.

ModalDrawer
1.2.1Transparenzbeta

Transparency Framework

Kennzeichnung und Nachweis ??? KI, Trust, Compliance, Metadaten. HTML-Bridge, Claim-Taxonomie, CLI doctor / report / migrate.

Live DemoDocsCLI
1.2.2Runtime

Motion Runtime

Reveal, Stagger und Reduced-Motion-Contracts in der Attribute-Schicht.

Live DemoDocsAPI
1.2.2Search

Suche

Fuzzy-Dokumentationssuche als velin-search auf der Homepage.

Live DemoDocsAPI
1.2.2Docs

Highlight

Selektives Syntax-Highlighting f??r Galerien und Code-Bl??cke.

Live DemoDocsAPI
1.2.2CLIbeta

CLI Plan und Review

Plan-first Scaffolding und heuristische Review-Gates f??r A11y, SEO und Design ??? beta, Schemas wachsen weiter.

Live DemoDocsAPI
1.2.2AIbeta

Agent-Metadaten

Reicheres velin-agent.json und llms.txt mit Knowledge Graph, Pages, Sections ??? beta-Seed.

Live DemoDocsAPI
1.2.xAI Skillsbeta

Skill Engine + Registry

Offizielle Skills mit Capabilities, Workflow-Graphs, Packs, Bundles und Projekt-Templates f??r Agent-Ausf??hrung.

Live DemoDocsCLI
1.2.2Metabeta

Knowledge + Blueprints

Page Types, Section Graphs und Design Constraints ??? Seed-Coverage, kein fertiges AI Design System.

DocsAPI
1.2.2Runtime

Subpath APIs

Selektive ESM-Entry-Points ??? nur die Chunks booten, die dein DOM braucht.

Live DemoDocsAPI
1.2.2A11y

Accessibility

AAA-orientierte Defaults, Focus-Manager-Overlays und live Test-Center-Checks.

Live DemoDocsAPI
1.2.2Themes

Theme Runtime

Attribute- und System-Dark-Parit??t, dichterer Surface-Stack, 13 Themes.

Live DemoDocsAPI
1.2.2Perf

Performance

Selektive Loader und Audit-CLI ??? kein Full-IIFE auf der Homepage.

DocsLive Demo
1.2.2CSS

Container Queries

Komponentenlokales Layout mit Container-Query-Utilities und Docs.

DocsLive Demo
1.2.2Components

Komponenten-Bibliothek

43 Web Components und 35+ CSS Components ??? Overlays, Suche, Charts, Forms.

DocsLive DemoAPI
1.2.xUtilities

Utilities

Layout-, Display-, Spacing- und Position-Utilities auf dem gemeinsamen Token-Vertrag.

DocsLive DemoAPI
1.2.xAttributes

HTML Attributes

36 HTML Attributes f??r Motion, Density und Progressive Enhancement.

DocsLive DemoAPI
1.2.xThemes

Themes

Dreizehn Themes auf einem Token-Vertrag ??? live im Nav umschaltbar.

DocsLive DemoAPI
1.2.9RC

Release Candidate

Versionen, Site-Badges und Docs auf einer Linie nach Technical Debt 1.2.8. verify:home wieder gr??n.

Changelog
1.2.8Debt

Technical Debt

Security-Check-Schritt, publish pack dry-run, Malware-Kategorien, Motion-V2-Fallbacks dokumentiert.

Changelog
1.2.3Security

Velin Security Suite

CLI Security auf der Security Engine ??? doctor, scan, audit, publish, ci, deps, secrets, report.

Docs
1.2.0Foundation

1.2 Foundation

Ship Surface, Design Intelligence, AI Skills und neue WC-Primitives ??? Basis der 1.2-Linie.

Changelog

Live Playground

Wie treiben Tokens eine komplette UI-Surface?

Theme, Density, Radius und Spacing formen dieselbe Live-Surface. Labels, Fokus und Contracts bleiben intakt.

Qualit??tsaussagen werden im Test Center gemessen ??? hier nicht behauptet.

MRR

???48k

Churn

1.2%

NPS

72

<velin-theme-toggle themes-base="dist/themes/"></velin-theme-toggle> <button class="velin-btn velin-btn--primary">Invite</button>

Component Contracts

Wann welche Overlay-Komponente?

Zweck, Wann / Wann nicht, Keyboard, ARIA, API ??? danach die Live-Demo.

Qualit??tsaussagen werden im Test Center gemessen ??? hier nicht behauptet.

EscFocus trap

Modal

Blockierende Entscheidung. F??r Best??tigen/Zahlen. Nicht f??r Navigation.

Esc, Focus Trap, aria-modal. Tastatur: Tab-Zyklus.

SideNav

Drawer

Seitennavigation / Filter. Nicht f??r kritische Best??tigungen.

Secondary

Sheet

Sekund??re Aufgaben, Warenkorb, Notizen. Formulare kurz halten.

Anchor

Popover / Tooltip

Zus??tzliche Aktionen ohne Modal.
RovingARIA

Accordion / Tabs / Toast

Roving Tabindex.
Live

Search / Code / Sparkline

bootFromDOM({ attributes: true, motion: true });
MenuEsc

Dropdown

Aktionsmen??s. Nicht f??r Navigationsb??ume.

Contracts
FilterKB

Combobox

Filterbare Einzelauswahl mit Tastatur.

???K

Command

Palette f??r Power-User (Ctrl/Cmd+K).

SwipeFocus

Carousel / Lightbox

Slide 1 ??? tokens
Slide 2 ??? motion
Slide 3 ??? a11y
 VelinStyle-Logo VelinStyle-Logo monochrom
MenubarDialog

Menubar / Dialog

Dashboard

Wie sieht ein echtes Dashboard aus?

App-Shell mit Sidebar, KPIs, Tabelle, Tabs, Drawer und Theme-Switch ??? alles VelinStyle.

Qualit??tsaussagen werden im Test Center gemessen ??? hier nicht behauptet.

Aktiver Workspace

Seats

42

Tickets

7

Trend

Dashboard-Rechnungen
RechnungStatusSumme
#1042Bezahlt???129
#1041Offen???49

Token Lab

Wie ver??ndert sich dieselbe Surface mit Tokens?

Spacing, Radius, Elevation, Density, Surface, Motion ??? live auf Nav, Card, Form, Chart und CTA.

Qualit??tsaussagen werden im Test Center gemessen ??? hier nicht behauptet.

Steuerungen schreiben echte --velin-*-Tokens auf #tokenSurface. Optionaler Vergleich mit Defaults unter der Live-Stage.

Live-Tokens

Surface-Karte

Radius, Elevation, Density, Accent und Typografie greifen hier ??ber --velin-*.

Token-Beispielzeilen
TokenWert
--velin-radius-mdlive
--velin-space-3live
--velin-color-primarylive
Mit Defaults vergleichen

Control (defaults)

Baseline card

Unmodified --velin-* defaults for side-by-side proof.

Animation Gallery

Welche Motion-Patterns z??hlen in Product-UI?

Nur contract-gest??tzte Motion: Fokus, Overlays, Feedback, Loading, Reveal und Reduced Motion.

Qualit??tsaussagen werden im Test Center gemessen ??? hier nicht behauptet.

Focus

Sichtbarer Fokusring f??r Tastatur. Tab in die Kontrolle.

Docs Playground
Collapse

Sekund??ren Inhalt zeigen, ohne die Seite zu verlassen.

Erweiterter Panel-Inhalt.

Docs Playground
Modal

Blockierende Entscheidung mit Focus Trap. Esc schlie??t.

Docs Playground
Drawer

Seitennavigation / Filter. Kurze Pfade halten.

Docs Playground
Toast

Kurzes Status-Feedback mit Live-Region-Semantik.

Docs Playground
Loading

Busy-State + Spinner. Lieber explizites aria-busy.

Docs Playground
Reveal

Entrance nur, wenn Motion erlaubt ist.

Eingeblendet
Docs Playground
Reduced motion

Respektiert prefers-reduced-motion. Umschalten meldet die Systempr??ferenz.

???

Docs Test Center

VelinStyle Test Center

Kannst du Accessibility live pr??fen?

Live-Labs im gleichen Karten-Layout ??? Settings setzen, Stage beobachten, Markup kopieren.

Qualit??tsaussagen werden im Test Center gemessen ??? hier nicht behauptet.

Live-Stage ?? LTR ?? Desktop ?? Motion an ?? Kontrast normal ?? Theme auto

ARIA Live bereit

motion

axe-core scan

???

    Tastatur-Navigation

    ???

    Focus

    ???

    ARIA

    ???

    RTL

    ???

    Responsive

    ???

    Dark Mode

    ???

    Light Mode

    ???

    Reduced Motion

    ???

    High Contrast

    ???

    Accessibility-Sweep

    ???

    Stage-Snapshot 
    ???

    Werte darunter sind keine Marketing-Claims ??? f??r messbare Fehler axe-core ausf??hren.

    Showcase

    Welche echten Projekte laufen mit VelinStyle?

    Screenshot, Branche, Components, Utilities, Themes, Responsive, Dark, A11y, Live-Demo, Code, Case Study.

    Qualit??tsaussagen werden im Test Center gemessen ??? hier nicht behauptet.

    Showcase wird geladen???

    Faire Kriterien

    VelinStyle beurteilen ??? ohne Fake-Competitor-Skins

    Vier messbare Achsen. Keine Bootstrap-/Tailwind-/Shoelace-CSS-Skizzen. Vergleichen nach Belegen, nicht nach Vibes.

    Kriterium Was wir messen VelinStyle heute Expliziter Non-Claim
    Accessibility Fokus, Tastatur, ARIA-Contracts; live axe auf der Stage Component Contracts + Test Center axe-Scan Kein WCAG-Zertifikat f??r dein fertiges Produkt
    Tokens OKLCH Design Tokens + Theme-CSS, das cascaded Token Lab schreibt echte --velin-* Kein Figma-Token-Sync und keine Multi-Brand Design-Ops-Suite
    Bundle Selektiver Boot vs. voller Framework-Dump ESM bootFromDOM ??? nur Komponenten, die im DOM liegen Kein Zero-JS / CSS-only; Runtime l??dt weiterhin, was du nutzt
    DX Docs-Erreichbarkeit, Suche, Install-Pfad, AI-Metadaten Nav-Suche, Docs, npm install, velin-agent.json / llms.txt Keine volle IDE-Extension und kein Tailwind-gro??es Plugin-??kosystem

    Competitor-Parity-Claims? Nutze deren Docs und miss dieselben vier Achsen ??? keine bemalten Lookalikes.

    Install

    Wie startest du mit VelinStyle 1.4.0?

    npm-Pin, CDN, Runtime-Exports, Docs, Playground, Source ??? kopieren und shippen.

    velinstyle ??? install 
    $
    import { bootFromDOM } from '@birdapi/velinstyle/runtime'; bootFromDOM(document, { attributes: true, motion: true, highlight: true });
    Dokumentation lesen Playground GitHub

    Gebaut f??r das moderne Web

    • WCAG 2.2 AAA
    • Modernes CSS
    • Web Components
    • Runtime
    • CLI
    • AI-ready
    • Open Source

    Schneller bauen.
    Cleverer gestalten.
    Besser ausliefern.

    Partner ?? Motion AI

    VelinStyle + PixVerse

    Optionales AI-Video f??r Motion Clips ??? lokales HTML/CSS bleibt kostenlos; PixVerse liefert MP4, wenn du es brauchst.

    AI-Clips, die in deinen Motion-Stack schmelzen

    Text- & Image-to-Video ??ber PixVerse, angebunden ??ber den VelinStyle-CLI-Partnerflow. Derselbe Neon-Look wie die Motion-Surface ??? jetzt am Ende der Expo.

    Mit PixVerse starten PixVerse Docs Motion Clips

    Affiliate-Partnerlink ?? ??ffnet PixVerse-Signup

    Live velin-modal ??? Escape, Overlay-Klick, Focus Trap.

    Filter

     Navigation

    Offcanvas

    Offcanvas-Pattern ??ber velin-sheet.

    Drawer-Animation live.

    Sheet

    Modal Open/Close-Lifecycle.

     Neu Fakten Warum VelinStyle Vergleich Drei Habits Playground Token Lab Test Center Install Docs