<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Volt UI</title> <base href="/"> <script> // Applies the visitor's saved theme before first paint so there is no // flash of the default (volt/sharp/light) theme while Angular loads. // This mirrors src/app/components/theme-switcher.ts's localStorage // keys; keep both in sync if those keys ever change. Runs unguarded // because it only ever executes in the browser (a raw <script> tag // is never evaluated by Angular's server ...
Scanned 9/3/2026
Install to Claude Code
Skills Directorynpx -y skills add Andersseen/agentyx --skill volt-ui --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Volt Ui?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/andersseen-volt-ui)More formats (shields.io, HTML) on the badges page.
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>Volt UI</title>
<base href="/">
<script>
// Applies the visitor's saved theme before first paint so there is no
// flash of the default (volt/sharp/light) theme while Angular loads.
// This mirrors src/app/components/theme-switcher.ts's localStorage
// keys; keep both in sync if those keys ever change. Runs unguarded
// because it only ever executes in the browser (a raw <script> tag
// is never evaluated by Angular's server renderer, just serialized).
(function () {
try {
var root = document.documentElement;
var color = localStorage.getItem('volt-color');
var style = localStorage.getItem('volt-style');
var dark = localStorage.getItem('volt-dark') === 'true';
if (color) root.setAttribute('data-color', color);
if (style) root.setAttribute('data-style', style);
if (dark) {
root.classList.add('dark');
root.style.colorScheme = 'dark';
}
} catch (e) {
// localStorage may be unavailable (private browsing, blocked
// storage) — fall back to the default theme, no worse than today.
}
})();
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script type="module" crossorigin="" src="/assets/index-CJiictn1.js"></script>
<link rel="stylesheet" crossorigin="" href="/assets/index-BR2D9J_p.css">
<style>.lmn-filled[_nghost-ng-c1530450384] svg[_ngcontent-ng-c1530450384]{fill:color-mix(in oklab,currentColor 24%,transparent)}.lmn-animate-el[_ngcontent-ng-c1530450384]{display:inline-block}@keyframes _ngcontent-ng-c1530450384_lmn-github{0%,to{translate:0 0px;scale:1;rotate:0deg}50%{translate:0 0px;scale:1;rotate:1.14deg}}</style><style>.lmn-filled[_nghost-ng-c2473854282] svg[_ngcontent-ng-c2473854282]{fill:color-mix(in oklab,currentColor 24%,transparent)}.lmn-animate-el[_ngcontent-ng-c2473854282]{display:inline-block}@keyframes _ngcontent-ng-c2473854282_lmn-menu{0%,to{scale:1 1}50%{scale:.932 1}}</style><style>.lmn-filled[_nghost-ng-c334245325] svg[_ngcontent-ng-c334245325]{fill:color-mix(in oklab,currentColor 24%,transparent)}.lmn-animate-el[_ngcontent-ng-c334245325]{display:inline-block}@keyframes _ngcontent-ng-c334245325_lmn-sun{0%,to{scale:1}50%{scale:1.019}}</style></head>
<body><!--nghm-->
<app-root ng-version="21.2.17" ngh="5" ng-server-context="other"><div class="min-h-screen flex flex-col bg-background text-foreground font-sans transition-colors duration-200 selection:bg-primary/20 relative"><div class="fixed inset-0 overflow-hidden pointer-events-none z-0"><div class="absolute -top-[20%] -left-[10%] w-[50%] h-[50%] rounded-[100%] bg-primary/20 blur-[120px] mix-blend-screen opacity-50"></div><div class="absolute top-[60%] -right-[10%] w-[40%] h-[60%] rounded-[100%] bg-primary/20 blur-[120px] mix-blend-screen opacity-30"></div></div><app-header ngh="4"><header class="sticky top-0 z-50 bg-background/70 backdrop-blur-xl border-b border-border/40"><div class="max-w-6xl mx-auto px-4 sm:px-6 h-14 sm:h-16 flex items-center justify-between gap-2"><div class="flex items-center gap-4"><a routerlink="/" class="flex items-center gap-2 hover:opacity-80 transition-opacity" href="/" jsaction="click:;"><div class="flex items-center justify-center w-8 h-8 rounded-lg overflow-hidden relative shadow-[0_0_15px_rgba(var(--color-primary),0.5)]"><div class="absolute inset-0 bg-primary opacity-20"></div><img src="favicon.svg" alt="Volt UI Logo" class="w-full h-full object-cover relative z-10"></div><span class="text-xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-foreground to-foreground/60 hidden sm:inline-flex"> Volt UI </span></a><volt-badge variant="secondary" class="font-mono text-xs hidden md:inline-flex border-none shadow-sm ring-1 ring-border/50 bg-muted border border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring font-medium items-center px-2.5 py-0.5 rounded-full text-foreground transition-colors" ngh="0"> v1.0.0 </volt-badge></div><div class="flex items-center gap-2 sm:gap-3"><nav class="hidden md:flex gap-1 text-sm font-medium text-muted-foreground mr-1"><a routerlink="/" routerlinkactive="text-foreground" class="px-3 py-2 rounded-md transition-colors hover:text-foreground" href="/" jsaction="click:;"> Home </a><a routerlink="/docs/introduction" routerlinkactive="text-foreground" class="px-3 py-2 rounded-md transition-colors hover:text-foreground" href="/docs/introduction" jsaction="click:;"> Docs </a><a routerlink="/docs/components" routerlinkactive="text-foreground" class="px-3 py-2 rounded-md transition-colors hover:text-foreground" href="/docs/components" jsaction="click:;"> Components </a><a routerlink="/create-theme" routerlinkactive="text-foreground" class="px-3 py-2 rounded-md transition-colors hover:text-foreground" href="/create-theme" jsaction="click:;"> Create Theme </a><a routerlink="/docs/layouts" routerlinkactive="text-foreground" class="px-3 py-2 rounded-md transition-colors hover:text-foreground" href="/docs/layouts" jsaction="click:;"> Layouts </a></nav><a href="https://github.com/andersseen/volt-ui" target="_blank" rel="noreferrer" aria-label="GitHub repository" class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-border/60 text-muted-foreground transition-colors hover:text-foreground hover:bg-muted/60"><lmn-github _nghost-ng-c1530450384="" style="display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;" class="" aria-hidden="true" ngh="0"><svg _ngcontent-ng-c1530450384="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" class="" width="20" height="20"><path _ngcontent-ng-c1530450384="" d="M12 2C6.48 2 2 6.58 2 12.23c0 4.52 2.87 8.35 6.84 9.7.5.1.68-.22.68-.48 0-.24-.01-1.04-.01-1.88-2.78.62-3.37-1.22-3.37-1.22-.45-1.18-1.11-1.49-1.11-1.49-.91-.64.07-.63.07-.63 1 .08 1.53 1.06 1.53 1.06.9 1.56 2.35 1.11 2.92.85.09-.67.35-1.11.63-1.37-2.22-.26-4.55-1.14-4.55-5.08 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.33 9.33 0 0 1 12 6.88c.85 0 1.7.12 2.5.36 1.9-1.33 2.74-1.05 2.74-1.05.55 1.4.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.95-2.34 4.82-4.57 5.07.36.33.68.98.68 1.98 0 1.43-.01 2.58-.01 2.93 0 .27.18.59.69.48A10.23 10.23 0 0 0 22 12.23C22 6.58 17.52 2 12 2Z"></path></svg></lmn-github></a><app-theme-switcher ngh="2"><div class="flex items-center gap-2 sm:gap-3"><div class="hidden lg:flex items-center gap-2"><div class="w-[130px] xl:w-[140px]"><volt-select placeholder="Theme Color" class="block w-full" ngh="1"><button role="combobox" ngpselect="" type="button" class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background cursor-pointer placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1" id="ngp-select-2" aria-expanded="false" tabindex="0" jsaction="click:;keydown:;blur:;"><span class="block text-left truncate flex-1 pointer-events-none"> volt <!----><!----></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 opacity-50 shrink-0 pointer-events-none"><path d="m6 9 6 6 6-6"></path></svg></button><!----></volt-select></div></div><div class="hidden xl:flex items-center gap-2"><div class="w-[120px]"><volt-select placeholder="Style" class="block w-full" ngh="1"><button role="combobox" ngpselect="" type="button" class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background cursor-pointer placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1" id="ngp-select-3" aria-expanded="false" tabindex="0" jsaction="click:;keydown:;blur:;"><span class="block text-left truncate flex-1 pointer-events-none"> sharp <!----><!----></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 opacity-50 shrink-0 pointer-events-none"><path d="m6 9 6 6 6-6"></path></svg></button><!----></volt-select></div></div><button type="button" aria-label="Toggle dark mode" class="inline-flex h-10 w-10 items-center justify-center rounded-md border border-input bg-surface hover:bg-muted text-sm" jsaction="click:;"><!----><lmn-sun _nghost-ng-c334245325="" style="display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;" class="" aria-hidden="true" ngh="0"><svg _ngcontent-ng-c334245325="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="20" height="20" stroke-width="2"><circle _ngcontent-ng-c334245325="" cx="12" cy="12" r="4" class="lmn-animate-el"></circle><path _ngcontent-ng-c334245325="" d="M12 2v2" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M12 20v2" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M4.93 4.93l1.41 1.41" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M17.66 17.66l1.41 1.41" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M2 12h2" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M20 12h2" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M6.34 17.66l-1.41 1.41" class="lmn-animate-el"></path><path _ngcontent-ng-c334245325="" d="M19.07 4.93l-1.41 1.41" class="lmn-animate-el"></path></svg></lmn-sun><!----></button></div></app-theme-switcher><app-mobile-menu ngh="3"><button aria-label="Open menu" class="md:hidden inline-flex h-9 w-9 items-center justify-center rounded-md border border-border/60 text-muted-foreground transition-colors hover:text-foreground hover:bg-muted/60" jsaction="click:;"><lmn-menu _nghost-ng-c2473854282="" style="display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;" class="" aria-hidden="true" ngh="0"><svg _ngcontent-ng-c2473854282="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="20" height="20" stroke-width="2"><line _ngcontent-ng-c2473854282="" x1="4" x2="20" y1="6" y2="6" class="lmn-animate-el"></line><line _ngcontent-ng-c2473854282="" x1="4" x2="20" y1="12" y2="12" class="lmn-animate-el"></line><line _ngcontent-ng-c2473854282="" x1="4" x2="20" y1="18" y2="18" class="lmn-animate-el"></line></svg></lmn-menu></button><!----></app-mobile-menu></div></div></header></app-header><main class="flex-grow"><router-outlet></router-outlet><!----></main><app-footer ngh="0"><footer class="border-t border-border/50 bg-muted/15 py-10 relative z-10"><div class="max-w-6xl mx-auto px-4 sm:px-6 flex flex-col md:flex-row justify-between items-center gap-5 text-sm text-muted-foreground"><div class="flex items-center gap-3"><img src="favicon.svg" alt="" class="h-7 w-7 rounded-lg"><div><p class="font-medium text-foreground">Volt UI</p><p class="text-xs">Angular components you own.</p></div></div><div class="flex items-center gap-5"><a routerlink="/docs/introduction" class="hover:text-foreground transition-colors" href="/docs/introduction" jsaction="click:;">Docs</a><a routerlink="/docs/components" class="hover:text-foreground transition-colors" href="/docs/components" jsaction="click:;">Components</a><span class="hidden sm:inline">© 2026</span><a href="https://github.com/Andersseen/volt-ui" target="_blank" rel="noreferrer" aria-label="GitHub repository" class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border/60 hover:text-foreground transition-colors"><lmn-github _nghost-ng-c1530450384="" style="display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;" class="" aria-hidden="true" ngh="0"><svg _ngcontent-ng-c1530450384="" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" class="" width="16" height="16"><path _ngcontent-ng-c1530450384="" d="M12 2C6.48 2 2 6.58 2 12.23c0 4.52 2.87 8.35 6.84 9.7.5.1.68-.22.68-.48 0-.24-.01-1.04-.01-1.88-2.78.62-3.37-1.22-3.37-1.22-.45-1.18-1.11-1.49-1.11-1.49-.91-.64.07-.63.07-.63 1 .08 1.53 1.06 1.53 1.06.9 1.56 2.35 1.11 2.92.85.09-.67.35-1.11.63-1.37-2.22-.26-4.55-1.14-4.55-5.08 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.33 9.33 0 0 1 12 6.88c.85 0 1.7.12 2.5.36 1.9-1.33 2.74-1.05 2.74-1.05.55 1.4.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.95-2.34 4.82-4.57 5.07.36.33.68.98.68 1.98 0 1.43-.01 2.58-.01 2.93 0 .27.18.59.69.48A10.23 10.23 0 0 0 22 12.23C22 6.58 17.52 2 12 2Z"></path></svg></lmn-github></a></div></div></footer></app-footer></div></app-root>
<script type="text/javascript" id="ng-event-dispatch-contract">(()=>{function p(t,n,r,o,e,i,f,m){return{eventType:t,event:n,targetElement:r,eic:o,timeStamp:e,eia:i,eirp:f,eiack:m}}function u(t){let n=[],r=e=>{n.push(e)};return{c:t,q:n,et:[],etc:[],d:r,h:e=>{r(p(e.type,e,e.target,t,Date.now()))}}}function s(t,n,r){for(let o=0;o<n.length;o++){let e=n[o];(r?t.etc:t.et).push(e),t.c.addEventListener(e,t.h,r)}}function c(t,n,r,o,e=window){let i=u(t);e._ejsas||(e._ejsas={}),e._ejsas[n]=i,s(i,r),s(i,o,!0)}window.__jsaction_bootstrap=c;})();
</script><script>window.__jsaction_bootstrap(document.body,"ng",["click","keydown"],["blur"]);</script>
<script id="ng-state" type="application/json">{"__nghData__":[{},{"t":{"2":"t0","3":"t1","6":"t2"},"c":{"2":[{"i":"t0","r":1}],"3":[],"6":[]}},{"d":[4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,30,31,32,33,34,35,36,37,38,39,40,41,42],"t":{"44":"t3","45":"t4"},"c":{"44":[],"45":[{"i":"t4","r":1}]}},{"t":{"2":"t5"},"c":{"2":[]}},{"n":{"10":"9f"}},{"c":{"6":[]}}]}</script></body></html>Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
