this repo has no description
stuff stuff stuff:
+86
-115
+1
-10
.agents/skills/impeccable/scripts/cleanup-deprecated.mjs
+1
-10
.agents/skills/impeccable/scripts/cleanup-deprecated.mjs
···
18
18
* 4. Removes the corresponding entries from skills-lock.json.
19
19
*/
20
20
21
-
import {
22
-
existsSync,
23
-
readFileSync,
24
-
writeFileSync,
25
-
rmSync,
26
-
readdirSync,
27
-
statSync,
28
-
lstatSync,
29
-
unlinkSync,
30
-
} from "node:fs";
21
+
import { existsSync, readFileSync, writeFileSync, rmSync, lstatSync, unlinkSync } from "node:fs";
31
22
import { join, resolve } from "node:path";
32
23
33
24
// Skills that were renamed, merged, or folded in v2.0 and v2.1.
+1
-1
pnpm-lock.yaml
+1
-1
pnpm-lock.yaml
···
113
113
specifier: ^6.0.2
114
114
version: 6.0.2
115
115
vite:
116
-
specifier: npm:@voidzero-dev/vite-plus-core@^0.1.16
116
+
specifier: npm:@voidzero-dev/vite-plus-core@latest
117
117
version: '@voidzero-dev/vite-plus-core@0.1.16(@types/node@25.6.0)(jiti@2.6.1)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)'
118
118
vite-plus:
119
119
specifier: latest
+3
-6
src/components/console/console-card.tsx
+3
-6
src/components/console/console-card.tsx
···
22
22
return (
23
23
<div
24
24
className={cn(
25
-
"bg-[var(--bg-card)]",
26
-
"border border-[var(--border-default)]",
25
+
"bg-(--bg-card)",
26
+
"border border-(--border-default)",
27
27
"p-6",
28
-
hover && [
29
-
"transition-colors duration-fast ease-default",
30
-
"hover:border-[var(--border-strong)]",
31
-
],
28
+
hover && ["transition-colors duration-fast ease-default", "hover:border-(--border-strong)"],
32
29
className,
33
30
)}
34
31
>
+8
-10
src/components/console/pokemon-table.tsx
+8
-10
src/components/console/pokemon-table.tsx
···
33
33
return (
34
34
<Table className={cn("w-full border-collapse", "text-sm", "font-mono", className)}>
35
35
<TableHeader>
36
-
<TableRow className="border-b border-[var(--border-strong)]">
36
+
<TableRow className="border-b border-(--border-strong)">
37
37
<TableHead
38
38
className={cn(
39
39
"text-left py-3 px-3",
40
-
"font-semibold text-[var(--text-secondary)]",
40
+
"font-semibold text-(--text-secondary)",
41
41
"uppercase text-xs tracking-wider",
42
42
)}
43
43
>
···
46
46
<TableHead
47
47
className={cn(
48
48
"text-left py-3 px-3",
49
-
"font-semibold text-[var(--text-secondary)]",
49
+
"font-semibold text-(--text-secondary)",
50
50
"uppercase text-xs tracking-wider",
51
51
)}
52
52
>
···
55
55
<TableHead
56
56
className={cn(
57
57
"text-left py-3 px-3",
58
-
"font-semibold text-[var(--text-secondary)]",
58
+
"font-semibold text-(--text-secondary)",
59
59
"uppercase text-xs tracking-wider",
60
60
)}
61
61
>
···
68
68
<TableRow
69
69
key={p.name}
70
70
className={cn(
71
-
"border-b border-[var(--border-default)]",
71
+
"border-b border-(--border-default)",
72
72
"transition-colors duration-fast ease-default",
73
-
"hover:bg-[var(--bg-secondary)]",
73
+
"hover:bg-(--bg-secondary)",
74
74
)}
75
75
>
76
-
<TableCell className="py-3 px-3 font-mono text-[var(--text-muted)]">{p.id}</TableCell>
77
-
<TableCell className="py-3 px-3 capitalize text-[var(--text-primary)]">
78
-
{p.name}
79
-
</TableCell>
76
+
<TableCell className="py-3 px-3 font-mono text-(--text-muted)">{p.id}</TableCell>
77
+
<TableCell className="py-3 px-3 capitalize text-(--text-primary)">{p.name}</TableCell>
80
78
<TableCell className="py-3 px-3">
81
79
{p.types.map((type) => (
82
80
<TypeBadge key={type.name} type={type.name} />
+3
-3
src/components/console/section-header.tsx
+3
-3
src/components/console/section-header.tsx
···
25
25
className={cn(
26
26
"flex items-center gap-3",
27
27
"py-3",
28
-
"border-b border-[var(--border-default)]",
28
+
"border-b border-(--border-default)",
29
29
"mb-4",
30
30
className,
31
31
)}
···
34
34
className={cn(
35
35
"text-base font-semibold",
36
36
"uppercase tracking-wider",
37
-
"text-[var(--text-secondary)]",
37
+
"text-(--text-secondary)",
38
38
"font-mono",
39
39
)}
40
40
>
41
41
{title}
42
42
</span>
43
-
{subtitle && <span className="text-sm text-[var(--text-muted)] font-mono">{subtitle}</span>}
43
+
{subtitle && <span className="text-sm text-(--text-muted) font-mono">{subtitle}</span>}
44
44
</div>
45
45
);
46
46
}
+5
-8
src/components/console/status-dot.tsx
+5
-8
src/components/console/status-dot.tsx
···
20
20
className={cn(
21
21
"inline-block w-2 h-2 rounded-full flex-shrink-0",
22
22
status === "cached" && [
23
-
"bg-[var(--status-cached)]",
23
+
"bg-(--status-cached)",
24
24
"shadow-[0_0_0_2px_oklch(65%_0.2_145/0.2)]",
25
25
],
26
-
status === "fetching" && ["bg-[var(--status-fetching)]", "animate-pulse-dot"],
27
-
status === "idle" && "bg-[var(--status-idle)]",
28
-
status === "error" && [
29
-
"bg-[var(--status-error)]",
30
-
"shadow-[0_0_0_2px_oklch(60%_0.2_25/0.2)]",
31
-
],
26
+
status === "fetching" && ["bg-(--status-fetching)", "animate-pulse-dot"],
27
+
status === "idle" && "bg-(--status-idle)",
28
+
status === "error" && ["bg-(--status-error)", "shadow-[0_0_0_2px_oklch(60%_0.2_25/0.2)]"],
32
29
className,
33
30
)}
34
31
aria-hidden="true"
···
47
44
return (
48
45
<span className={cn("inline-flex items-center gap-2", className)}>
49
46
<StatusDot status={status} />
50
-
<span className="text-sm text-[var(--text-muted)]">{label}</span>
47
+
<span className="text-sm text-(--text-muted)">{label}</span>
51
48
</span>
52
49
);
53
50
}
+3
-3
src/components/console/type-badge.tsx
+3
-3
src/components/console/type-badge.tsx
···
22
22
"inline-block",
23
23
"px-2 py-0.5",
24
24
"text-xs font-mono",
25
-
"border border-[var(--border-default)]",
26
-
"bg-[var(--bg-secondary)]",
27
-
"text-[var(--text-secondary)]",
25
+
"border border-(--border-default)",
26
+
"bg-(--bg-secondary)",
27
+
"text-(--text-secondary)",
28
28
"capitalize",
29
29
"mr-1",
30
30
className,
+2
-2
src/components/filter-form.tsx
+2
-2
src/components/filter-form.tsx
···
26
26
>
27
27
<Label
28
28
htmlFor="name-filter"
29
-
className="text-xs font-mono uppercase tracking-wider text-[var(--text-secondary)]"
29
+
className="text-xs font-mono uppercase tracking-wider text-(--text-secondary)"
30
30
>
31
31
Filter by Name
32
32
</Label>
···
36
36
placeholder="Enter Pokemon name..."
37
37
value={submitContext.nameFilter}
38
38
onChange={(e) => submitContext.updateNameFilter(e.target.value)}
39
-
className="mt-2 bg-[var(--bg-secondary)] border-[var(--border-default)] focus:border-[var(--accent-default)] focus:ring-0 rounded-none font-mono text-sm"
39
+
className="mt-2 bg-(--bg-secondary) border-(--border-default) focus:border-(--accent-default) focus:ring-0 rounded-none font-mono text-sm"
40
40
/>
41
41
<Button type="submit" className="mt-2">
42
42
Submit
+1
-1
src/components/header.tsx
+1
-1
src/components/header.tsx
···
41
41
42
42
export default function Header() {
43
43
return (
44
-
<header className="bg-[var(--bg-secondary)] border-b border-[var(--border-default)]">
44
+
<header className="bg-(--bg-secondary) border-b border-(--border-default)">
45
45
<nav className="flex flex-row items-center">
46
46
<NavItem to="/" label="~/home" />
47
47
<NavItem to="/basic" label="01_basic" />
+1
-1
src/routes/__root.tsx
+1
-1
src/routes/__root.tsx
···
2
2
import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from "@tanstack/react-router";
3
3
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
4
4
5
-
import Header from "~/components/Header";
5
+
import Header from "~/components/header";
6
6
7
7
import type { QueryClient } from "@tanstack/react-query";
8
8
import appCss from "~/styles/global.css?url";
+2
-2
src/routes/basic.tsx
+2
-2
src/routes/basic.tsx
···
25
25
});
26
26
27
27
return (
28
-
<main className="min-h-screen bg-[var(--bg-primary)] p-6">
28
+
<main className="min-h-screen bg-(--bg-primary) p-6">
29
29
<div className="max-w-4xl mx-auto">
30
30
<SectionHeader title="01_basic" subtitle="// No prefetching (baseline)" />
31
31
32
32
<ConsoleCard className="mb-6">
33
-
<h1 className="text-lg font-mono text-[var(--text-primary)] mb-4">
33
+
<h1 className="text-lg font-mono text-(--text-primary) mb-4">
34
34
National Pokédex: Pokémon {currentOffset + 1}-{currentOffset + POKEMON_LIMIT}
35
35
</h1>
36
36
<PokemonTable pokemon={data.pokemon} />
+6
-9
src/routes/debounced-preload-filters.tsx
+6
-9
src/routes/debounced-preload-filters.tsx
···
101
101
const filteredPokemon = data.pokemon;
102
102
103
103
return (
104
-
<main className="min-h-screen bg-[var(--bg-primary)] p-6">
104
+
<main className="min-h-screen bg-(--bg-primary) p-6">
105
105
<div className="max-w-4xl mx-auto">
106
106
<SectionHeader title="06_debounced" subtitle="// Advanced filter prefetch" />
107
107
108
108
{/* Filter UI */}
109
109
<ConsoleCard className="mb-6">
110
-
<h2 className="text-sm font-semibold mb-4 text-[var(--text-primary)] uppercase tracking-wider">
110
+
<h2 className="text-sm font-semibold mb-4 text-(--text-primary) uppercase tracking-wider">
111
111
Filters
112
112
</h2>
113
-
<p className="text-sm text-[var(--text-muted)] mb-4">
113
+
<p className="text-sm text-(--text-muted) mb-4">
114
114
Preloads results while typing (debounced 100ms)
115
115
</p>
116
116
<PreloadFilterSubmitContextProvider
···
126
126
</ConsoleCard>
127
127
128
128
<ConsoleCard>
129
-
<h1 className="text-lg font-mono text-[var(--text-primary)] mb-4">
129
+
<h1 className="text-lg font-mono text-(--text-primary) mb-4">
130
130
National Pokédex: Pokémon {currentOffset + 1}-{currentOffset + POKEMON_LIMIT}
131
131
{nameFilter && (
132
-
<span className="text-[var(--text-muted)]">
133
-
{" "}
134
-
(filtered: "{nameFilter}")
135
-
</span>
132
+
<span className="text-(--text-muted)"> (filtered: "{nameFilter}")</span>
136
133
)}
137
134
</h1>
138
135
139
136
<PokemonTable pokemon={filteredPokemon} />
140
137
141
138
{filteredPokemon.length === 0 && nameFilter && (
142
-
<div className="text-center py-8 text-[var(--text-muted)] font-mono">
139
+
<div className="text-center py-8 text-(--text-muted) font-mono">
143
140
No Pokemon found matching "{nameFilter}"
144
141
</div>
145
142
)}
+5
-8
src/routes/filters.tsx
+5
-8
src/routes/filters.tsx
···
72
72
const filteredPokemon = data.pokemon;
73
73
74
74
return (
75
-
<main className="min-h-screen bg-[var(--bg-primary)] p-6">
75
+
<main className="min-h-screen bg-(--bg-primary) p-6">
76
76
<div className="max-w-4xl mx-auto">
77
77
<SectionHeader title="05_filters" subtitle="// Search with prefetch" />
78
78
79
79
{/* Filter UI */}
80
80
<ConsoleCard className="mb-6">
81
-
<h2 className="text-sm font-semibold mb-4 text-[var(--text-primary)] uppercase tracking-wider">
81
+
<h2 className="text-sm font-semibold mb-4 text-(--text-primary) uppercase tracking-wider">
82
82
Filters
83
83
</h2>
84
84
<FilterSubmitContextProvider
···
95
95
</ConsoleCard>
96
96
97
97
<ConsoleCard>
98
-
<h1 className="text-lg font-mono text-[var(--text-primary)] mb-4">
98
+
<h1 className="text-lg font-mono text-(--text-primary) mb-4">
99
99
National Pokédex: Pokémon {currentOffset + 1}-{currentOffset + POKEMON_LIMIT}
100
100
{nameFilter && (
101
-
<span className="text-[var(--text-muted)]">
102
-
{" "}
103
-
(filtered: "{nameFilter}")
104
-
</span>
101
+
<span className="text-(--text-muted)"> (filtered: "{nameFilter}")</span>
105
102
)}
106
103
</h1>
107
104
108
105
<PokemonTable pokemon={filteredPokemon} />
109
106
110
107
{filteredPokemon.length === 0 && nameFilter && (
111
-
<div className="text-center py-8 text-[var(--text-muted)] font-mono">
108
+
<div className="text-center py-8 text-(--text-muted) font-mono">
112
109
No Pokemon found matching "{nameFilter}"
113
110
</div>
114
111
)}
+23
-29
src/routes/index.tsx
+23
-29
src/routes/index.tsx
···
21
21
<div className="example-card__number">Example {number}</div>
22
22
<h3 className="example-card__title">{title}</h3>
23
23
<p className="example-card__description">{description}</p>
24
-
<div className="mt-4 p-3 bg-[var(--bg-secondary)] border border-[var(--border-default)] font-mono text-xs text-[var(--text-muted)] overflow-x-auto">
24
+
<div className="mt-4 p-3 bg-(--bg-secondary) border border-(--border-default) font-mono text-xs text-(--text-muted) overflow-x-auto">
25
25
<code>{codeSnippet}</code>
26
26
</div>
27
27
</div>
···
82
82
];
83
83
84
84
return (
85
-
<main className="min-h-screen bg-[var(--bg-primary)]">
85
+
<main className="min-h-screen bg-(--bg-primary)">
86
86
{/* Hero Section */}
87
-
<section className="border-b border-[var(--border-default)] bg-[var(--bg-card)]">
87
+
<section className="border-b border-(--border-default) bg-(--bg-card)">
88
88
<div className="max-w-5xl mx-auto px-6 py-16">
89
89
<div className="flex items-center gap-3 mb-6">
90
90
<StatusDot status="cached" />
91
-
<span className="text-[var(--text-muted)] text-sm font-mono uppercase tracking-wider">
91
+
<span className="text-(--text-muted) text-sm font-mono uppercase tracking-wider">
92
92
TanStack Router Demo
93
93
</span>
94
94
</div>
95
-
<h1 className="text-4xl font-mono font-semibold text-[var(--text-primary)] mb-4">
95
+
<h1 className="text-4xl font-mono font-semibold text-(--text-primary) mb-4">
96
96
Prefetching Patterns
97
97
</h1>
98
-
<p className="text-lg text-[var(--text-secondary)] max-w-2xl leading-relaxed">
98
+
<p className="text-lg text-(--text-secondary) max-w-2xl leading-relaxed">
99
99
A developer console for exploring data prefetching techniques in modern React
100
100
applications. Learn how different patterns affect perceived performance and user
101
101
experience.
102
102
</p>
103
-
<div className="mt-8 flex items-center gap-4 text-sm text-[var(--text-muted)]">
103
+
<div className="mt-8 flex items-center gap-4 text-sm text-(--text-muted)">
104
104
<StatusDotWithLabel status="cached" label="Cached" />
105
105
<StatusDotWithLabel status="fetching" label="Fetching" />
106
106
<StatusDotWithLabel status="idle" label="Idle" />
···
110
110
111
111
{/* Examples Grid */}
112
112
<section className="max-w-5xl mx-auto px-6 py-12">
113
-
<div className="flex items-center gap-3 py-3 border-b border-[var(--border-default)] mb-4">
114
-
<span className="text-base font-semibold uppercase tracking-wider text-[var(--text-secondary)] font-mono">
113
+
<div className="flex items-center gap-3 py-3 border-b border-(--border-default) mb-4">
114
+
<span className="text-base font-semibold uppercase tracking-wider text-(--text-secondary) font-mono">
115
115
Examples
116
116
</span>
117
-
<span className="text-[var(--text-muted)] text-sm font-mono">
118
-
// Select one to explore
119
-
</span>
117
+
<span className="text-(--text-muted) text-sm font-mono">// Select one to explore</span>
120
118
</div>
121
119
122
120
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
···
128
126
129
127
{/* Concepts Section */}
130
128
<section className="max-w-5xl mx-auto px-6 pb-16">
131
-
<div className="flex items-center gap-3 py-3 border-b border-[var(--border-default)] mb-4">
132
-
<span className="text-base font-semibold uppercase tracking-wider text-[var(--text-secondary)] font-mono">
129
+
<div className="flex items-center gap-3 py-3 border-b border-(--border-default) mb-4">
130
+
<span className="text-base font-semibold uppercase tracking-wider text-(--text-secondary) font-mono">
133
131
Key Concepts
134
132
</span>
135
133
</div>
···
137
135
<ConsoleCard>
138
136
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
139
137
<div>
140
-
<h4 className="font-mono font-semibold text-[var(--text-primary)] mb-2">
141
-
Route Loaders
142
-
</h4>
143
-
<p className="text-sm text-[var(--text-secondary)] leading-relaxed">
138
+
<h4 className="font-mono font-semibold text-(--text-primary) mb-2">Route Loaders</h4>
139
+
<p className="text-sm text-(--text-secondary) leading-relaxed">
144
140
Loaders run before the route component renders, making them ideal for initiating
145
141
data fetches early in the navigation lifecycle.
146
142
</p>
147
143
</div>
148
144
<div>
149
-
<h4 className="font-mono font-semibold text-[var(--text-primary)] mb-2">
145
+
<h4 className="font-mono font-semibold text-(--text-primary) mb-2">
150
146
Intent Preloading
151
147
</h4>
152
-
<p className="text-sm text-[var(--text-secondary)] leading-relaxed">
148
+
<p className="text-sm text-(--text-secondary) leading-relaxed">
153
149
By observing user intent (hover, focus), we can predict navigation and preload data
154
150
before the click event fires.
155
151
</p>
156
152
</div>
157
153
<div>
158
-
<h4 className="font-mono font-semibold text-[var(--text-primary)] mb-2">
159
-
Query Caching
160
-
</h4>
161
-
<p className="text-sm text-[var(--text-secondary)] leading-relaxed">
154
+
<h4 className="font-mono font-semibold text-(--text-primary) mb-2">Query Caching</h4>
155
+
<p className="text-sm text-(--text-secondary) leading-relaxed">
162
156
TanStack Query maintains a cache of fetched data. Subsequent requests for the same
163
157
data return instantly from cache.
164
158
</p>
···
168
162
</section>
169
163
170
164
{/* Footer */}
171
-
<footer className="border-t border-[var(--border-default)] bg-[var(--bg-card)]">
172
-
<div className="max-w-5xl mx-auto px-6 py-6 text-sm text-[var(--text-muted)]">
165
+
<footer className="border-t border-(--border-default) bg-(--bg-card)">
166
+
<div className="max-w-5xl mx-auto px-6 py-6 text-sm text-(--text-muted)">
173
167
<p>
174
-
Built with <span className="text-[var(--accent-default)]">TanStack Router</span> +{" "}
175
-
<span className="text-[var(--accent-default)]">TanStack Query</span> +{" "}
176
-
<span className="text-[var(--accent-default)]">TanStack Start</span>
168
+
Built with <span className="text-(--accent-default)">TanStack Router</span> +{" "}
169
+
<span className="text-(--accent-default)">TanStack Query</span> +{" "}
170
+
<span className="text-(--accent-default)">TanStack Start</span>
177
171
</p>
178
172
</div>
179
173
</footer>
+2
-2
src/routes/intent-preloading.tsx
+2
-2
src/routes/intent-preloading.tsx
···
41
41
const { data } = useSuspenseQuery(pokemonListOptions);
42
42
43
43
return (
44
-
<main className="min-h-screen bg-[var(--bg-primary)] p-6">
44
+
<main className="min-h-screen bg-(--bg-primary) p-6">
45
45
<div className="max-w-4xl mx-auto">
46
46
<SectionHeader title="03_intent-preloading" subtitle="// Hover-based prefetch" />
47
47
48
48
<ConsoleCard className="mb-6">
49
-
<h1 className="text-lg font-mono text-[var(--text-primary)] mb-4">
49
+
<h1 className="text-lg font-mono text-(--text-primary) mb-4">
50
50
National Pokédex: Pokémon {currentOffset + 1}-{currentOffset + POKEMON_LIMIT}
51
51
</h1>
52
52
<PokemonTable pokemon={data.pokemon} />
+2
-2
src/routes/pagination.tsx
+2
-2
src/routes/pagination.tsx
···
41
41
const { data } = useSuspenseQuery(pokemonListOptions);
42
42
43
43
return (
44
-
<main className="min-h-screen bg-[var(--bg-primary)] p-6">
44
+
<main className="min-h-screen bg-(--bg-primary) p-6">
45
45
<div className="max-w-4xl mx-auto">
46
46
<SectionHeader title="04_pagination" subtitle="// Preloading next/prev pages" />
47
47
48
48
<ConsoleCard className="mb-6">
49
-
<h1 className="text-lg font-mono text-[var(--text-primary)] mb-4">
49
+
<h1 className="text-lg font-mono text-(--text-primary) mb-4">
50
50
National Pokédex: Pokémon {currentOffset + 1}-{currentOffset + POKEMON_LIMIT}
51
51
</h1>
52
52
<PokemonTable pokemon={data.pokemon} />
+2
-2
src/routes/preloading.tsx
+2
-2
src/routes/preloading.tsx
···
43
43
});
44
44
45
45
return (
46
-
<main className="min-h-screen bg-[var(--bg-primary)] p-6">
46
+
<main className="min-h-screen bg-(--bg-primary) p-6">
47
47
<div className="max-w-4xl mx-auto">
48
48
<SectionHeader title="02_preloading" subtitle="// Route-level prefetch" />
49
49
50
50
<ConsoleCard className="mb-6">
51
-
<h1 className="text-lg font-mono text-[var(--text-primary)] mb-4">
51
+
<h1 className="text-lg font-mono text-(--text-primary) mb-4">
52
52
National Pokédex: Pokémon {currentOffset + 1}-{currentOffset + POKEMON_LIMIT}
53
53
</h1>
54
54
<PokemonTable pokemon={data.pokemon} />