🎯

agentic-jumpstart-react

🎯Skill

from webdevcody/agentic-jumpstart

What it does

Enables rapid React 19 development with best practices, integrating TanStack Start, shadcn/ui, React Hook Form, Zod, and advanced component patterns.

📦

Part of

webdevcody/agentic-jumpstart(8 items)

agentic-jumpstart-react

Installation

npm runRun npm script

npm run dev

📖 Extracted from docs: webdevcody/agentic-jumpstart

Need more details? View full documentation on GitHub →

2Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

React 19 patterns and best practices for TanStack Start applications with shadcn/ui, React Hook Form, Zod, Framer Motion, and TanStack Query. Use when building React components, forms, handling state, data fetching, animations, drag and drop, toasts, modals, or when the user mentions React, hooks, components, or UI.

Overview

# React 19 Best Practices

Component Structure

File Organization

```

src/routes/admin/courses/

├── route.tsx # Route definition

├── -components/ # Route-specific components

│ ├── CourseList.tsx

│ ├── CourseForm.tsx

│ └── CourseCard.tsx

```

Component Pattern

```typescript

import { type ReactNode } from "react";

interface CourseCardProps {

course: Course;

onEdit?: (id: number) => void;

children?: ReactNode;

}

export function CourseCard({ course, onEdit, children }: CourseCardProps) {

return (

{course.title}

{course.description}

{children}

{onEdit && (

)}

);

}

```

Form Handling with React Hook Form + Zod

Basic Form Pattern

```typescript

import { useForm } from "react-hook-form";

import { zodResolver } from "@hookform/resolvers/zod";

import { z } from "zod";

const formSchema = z.object({

title: z.string().min(1, "Title is required").max(100),

description: z.string().max(500).optional(),

isPremium: z.boolean().default(false),

});

type FormData = z.infer;

export function CourseForm({ onSubmit }: { onSubmit: (data: FormData) => void }) {

const form = useForm({

resolver: zodResolver(formSchema),

defaultValues: {

title: "",

description: "",

isPremium: false,

});

return (

Title

id="title"

{...form.register("title")}

aria-invalid={!!form.formState.errors.title}

{form.formState.errors.title && (

{form.formState.errors.title.message}

)}

Description

</div> <div className="flex items-center gap-2"> <Checkbox id="isPremium" checked={form.watch("isPremium")} onCheckedChange={(checked) => form.setValue("isPremium", checked === true) } /> <Label htmlFor="isPremium">Premium content</Label> </div> <Button type="submit" disabled={form.formState.isSubmitting}> {form.formState.isSubmitting ? "Saving..." : "Save"} </Button> </form> );}```</div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Data Fetching with TanStack Query</h3><div><h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Query Options Pattern</h4>```typescriptimport { queryOptions, useQuery, useSuspenseQuery } from "@tanstack/react-query";// Define query options (can be shared between components)export const courseQueryOptions = (courseId: string) => queryOptions({ queryKey: ["course", courseId], queryFn: () => getCourseFn({ data: { courseId } }), });// In component - with suspensefunction CourseDetails({ courseId }: { courseId: string }) { const { data: course } = useSuspenseQuery(courseQueryOptions(courseId)); return <div>{course.title}</div>;}// In component - without suspensefunction CourseDetails({ courseId }: { courseId: string }) { const { data: course, isLoading, error } = useQuery(courseQueryOptions(courseId)); if (isLoading) return <Skeleton />; if (error) return <ErrorDisplay error={error} />; return <div>{course.title}</div>;}```<h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Mutations with Optimistic Updates</h4>```typescriptimport { useMutation, useQueryClient } from "@tanstack/react-query";import { toast } from "sonner";export function useUpdateCourse() { const queryClient = useQueryClient(); return useMutation({ mutationFn: updateCourseFn, onSuccess: () => { toast.success("Course updated successfully"); queryClient.invalidateQueries({ queryKey: ["courses"] }); }, onError: (error) => { toast.error(error.message || "Failed to update course"); }, });}```</div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Loading States & Suspense</h3><div><h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Loading Skeleton Pattern</h4>```typescriptfunction CourseSkeleton() { return ( <Card> <CardHeader> <Skeleton className="h-6 w-3/4" /> <Skeleton className="h-4 w-1/2" /> </CardHeader> <CardContent> <Skeleton className="h-20 w-full" /> </CardContent> </Card> );}function CourseList() { return ( <Suspense fallback={<CourseSkeleton />}> <CourseListContent /> </Suspense> );}```</div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Error Boundaries</h3><div><h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Route-Level Error Handling</h4>```typescriptimport { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary";export const Route = createFileRoute("/courses/$courseId")({ component: CoursePage, errorComponent: DefaultCatchBoundary,});```</div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Dialog & Modal Pattern</h3><div>```typescriptimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger,} from "~/components/ui/dialog";function DeleteCourseDialog({ course, onDelete,}: { course: Course; onDelete: () => void;}) { const [open, setOpen] = useState(false); return ( <Dialog open={open} onOpenChange={setOpen}> <DialogTrigger asChild> <Button variant="destructive">Delete</Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Delete Course</DialogTitle> <DialogDescription> Are you sure you want to delete "{course.title}"? This action cannot be undone. </DialogDescription> </DialogHeader> <DialogFooter> <Button variant="outline" onClick={() => setOpen(false)}> Cancel </Button> <Button variant="destructive" onClick={() => { onDelete(); setOpen(false); }} > Delete </Button> </DialogFooter> </DialogContent> </Dialog> );}```</div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Toast Notifications with Sonner</h3><div>```typescriptimport { toast } from "sonner";// Success toasttoast.success("Course saved successfully");// Error toasttoast.error("Failed to save course");// Promise toasttoast.promise(saveCourse(data), { loading: "Saving course...", success: "Course saved!", error: "Failed to save course",});// Custom toast with actiontoast("Course deleted", { action: { label: "Undo", onClick: () => restoreCourse(courseId), },});```</div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Animation with Framer Motion</h3><div><h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Basic Animation</h4>```typescriptimport { motion } from "framer-motion";function FadeInCard({ children }: { children: ReactNode }) { return ( <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.2 }} > {children} </motion.div> );}```<h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Staggered List Animation</h4>```typescriptimport { motion } from "framer-motion";const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1 }, },};const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 },};function AnimatedList({ items }: { items: Item[] }) { return ( <motion.ul variants={container} initial="hidden" animate="show"> {items.map((item) => ( <motion.li key={item.id} variants={item}> {item.title} </motion.li> ))} </motion.ul> );}```</div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Drag and Drop with @hello-pangea/dnd</h3><div>```typescriptimport { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";function ReorderableList({ items, onReorder,}: { items: Item[]; onReorder: (items: Item[]) => void;}) { const handleDragEnd = (result: DropResult) => { if (!result.destination) return; const reordered = Array.from(items); const [removed] = reordered.splice(result.source.index, 1); reordered.splice(result.destination.index, 0, removed); onReorder(reordered); }; return ( <DragDropContext onDragEnd={handleDragEnd}> <Droppable droppableId="items"> {(provided) => ( <ul {...provided.droppableProps} ref={provided.innerRef}> {items.map((item, index) => ( <Draggable key={item.id} draggableId={String(item.id)} index={index}> {(provided) => ( <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} > {item.title} </li> )} </Draggable> ))} {provided.placeholder} </ul> )} </Droppable> </DragDropContext> );}```</div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Custom Hooks</h3><div><h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">useLocalStorage</h4>```typescriptfunction useLocalStorage<T>(key: string, initialValue: T) { const [storedValue, setStoredValue] = useState<T>(() => { if (typeof window === "undefined") return initialValue; try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch { return initialValue; } }); const setValue = (value: T | ((val: T) => T)) => { const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); window.localStorage.setItem(key, JSON.stringify(valueToStore)); }; return [storedValue, setValue] as const;}```<h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">useDebounce</h4>```typescriptfunction useDebounce<T>(value: T, delay: number): T { const [debouncedValue, setDebouncedValue] = useState<T>(value); useEffect(() => { const handler = setTimeout(() => setDebouncedValue(value), delay); return () => clearTimeout(handler); }, [value, delay]); return debouncedValue;}```</div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Component Patterns Checklist</h3><div><ul class="mb-4 ml-6 space-y-1 list-disc"><li class="text-zinc-600 dark:text-zinc-400">[ ] Components use TypeScript interfaces for props</li><li class="text-zinc-600 dark:text-zinc-400">[ ] Forms use React Hook Form with Zod validation</li><li class="text-zinc-600 dark:text-zinc-400">[ ] Data fetching uses TanStack Query patterns</li><li class="text-zinc-600 dark:text-zinc-400">[ ] Loading states have skeleton placeholders</li><li class="text-zinc-600 dark:text-zinc-400">[ ] Dialogs use shadcn/ui Dialog component</li><li class="text-zinc-600 dark:text-zinc-400">[ ] Toasts use Sonner for notifications</li><li class="text-zinc-600 dark:text-zinc-400">[ ] Animations use Framer Motion</li><li class="text-zinc-600 dark:text-zinc-400">[ ] Effects clean up subscriptions</li><li class="text-zinc-600 dark:text-zinc-400">[ ] Route-specific components in <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-800">-components/</code> subdirectory</li><li class="text-zinc-600 dark:text-zinc-400">[ ] Shared components in <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-800">/src/components/</code></li></ul></div></div></div></div></div><div class="mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800"><h2 class="mb-4 flex items-center gap-2 text-lg font-semibold text-zinc-900 dark:text-white">More from this repository7</h2><div class="grid gap-3 sm:grid-cols-2"><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-performance">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">agentic-jumpstart-performance🎯Skill</div>Optimizes React and TanStack performance through strategic code splitting, memoization, lazy loading, and intelligent caching techniques.</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-database">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">agentic-jumpstart-database🎯Skill</div>Enables database operations with Drizzle ORM, providing robust PostgreSQL schema design, type-safe queries, migrations, and relationship management.</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-dependency-management">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">agentic-jumpstart-dependency-management🎯Skill</div>Manages npm dependencies with best practices, helping developers safely install, update, and secure packages across complex projects.</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-security">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">agentic-jumpstart-security🎯Skill</div>Implements security best practices for TanStack Start applications, covering authentication, authorization, input validation, and middleware protection across React 19, Drizzle ORM, and cloud servi...</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-testing">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">agentic-jumpstart-testing🎯Skill</div>Enables automated testing and validation of AI agent workflows, providing structured test cases and performance assessment for agentic systems.</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-code-quality">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">agentic-jumpstart-code-quality🎯Skill</div>Enhances code quality by automatically detecting and suggesting improvements for potential bugs, code smells, and maintainability issues.</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-frontend">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">agentic-jumpstart-frontend🎯Skill</div>Enables rapid frontend development with AI-powered code generation and component scaffolding for modern web applications.</div></a></div></div></div></main><footer class="border-t border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900"><div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8"><div class="grid grid-cols-1 gap-8 md:grid-cols-4"><div class="md:col-span-1"><a class="flex items-center" href="/"><img alt="Vibe Index" loading="lazy" width="140" height="40" decoding="async" data-nimg="1" class="h-8 w-auto dark:hidden" style="color:transparent" src="/logo.png?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe"/><img alt="Vibe Index" loading="lazy" width="140" height="40" decoding="async" data-nimg="1" class="hidden h-8 w-auto dark:block" style="color:transparent" src="/logo-dark.png?v=3&dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe"/></a>Everything you need for vibe coding. Real-time updates on skills, plugins, MCP servers, and marketplaces.</div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Resources</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/skills">Skills</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/mcp">MCP Servers</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/marketplaces">Marketplaces</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/plugins">Plugins</a></li></ul></div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Support</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/about">About Us</a></li><li><a href="mailto:admin@vibeindex.ai" class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white">Contact Us</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/feedback">Feedback</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/activity">Sync Activity</a></li></ul></div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Legal</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/privacy">Privacy Policy</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/terms">Terms of Service</a></li></ul></div></div><div class="mt-8 border-t border-zinc-200 pt-8 dark:border-zinc-800">© 2026 Vibe Index. All rights reserved. Operated by <a href="https://jolab.ai" target="_blank" rel="noopener noreferrer" class="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors">JoLab</a></div></div></footer><script src="/_next/static/chunks/74f2567fe670fe18.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[2355,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"Analytics\"]\n3:I[44636,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"Providers\"]\n4:I[3374,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n5:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n6:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n7:I[22016,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"\"]\n8:I[58234,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\na:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"OutletBoundary\"]\nb:\"$Sreact.suspense\"\nd:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"ViewportBoundary\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"MetadataBoundary\"]\n11:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n:HL[\"/_next/static/chunks/2473c16c0c2f6b5f.css?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"style\"]\n:HL[\"/_next/static/chunks/57db8c2e79c90b8c.css?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"jPO-BujWrcnKty2IaOdQo\",\"c\":[\"\",\"skills\",\"webdevcody\",\"agentic-jumpstart\",\"agentic-jumpstart-react\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"skills\",{\"children\":[[\"owner\",\"webdevcody\",\"d\"],{\"children\":[[\"repo\",\"agentic-jumpstart\",\"d\"],{\"children\":[[\"skill\",\"agentic-jumpstart-react\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2473c16c0c2f6b5f.css?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/57db8c2e79c90b8c.css?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased min-h-screen flex flex-col\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"$L3\",null,{\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"flex min-h-[60vh] flex-col items-center justify-center px-4\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-6xl font-bold text-zinc-900 dark:text-white\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mt-4 text-xl font-semibold text-zinc-700 dark:text-zinc-300\",\"children\":\"Page Not Found\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-zinc-500 dark:text-zinc-400\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"$L7\",null,{\"href\":\"/\",\"className\":\"mt-8 inline-flex items-center rounded-lg bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200\",\"children\":\"Go Home\"}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L8\",null,{}]]}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L9\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$La\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@c\"}]}]]}],{},null,false,false]},null,false,false]},null,false,false]},null,false,false]},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L10\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$11\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"12:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"IconMark\"]\nc:null\n"])</script><script>self.__next_f.push([1,"10:[[\"$\",\"title\",\"0\",{\"children\":\"agentic-jumpstart-react | Vibe Index\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Enables rapid React 19 development with best practices, integrating TanStack Start, shadcn/ui, React Hook Form, Zod, and advanced component patterns.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Vibe Index Team\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"vibe coding, vibecoding, AI coding, Claude Code, MCP servers, AI skills, AI plugins, AI development, AI assistants, Claude, cursor, windsurf, aider, cline\"}],[\"$\",\"meta\",\"4\",{\"name\":\"creator\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"5\",{\"name\":\"publisher\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"7\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"8\",{\"rel\":\"canonical\",\"href\":\"https://vibeindex.ai\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:title\",\"content\":\"Vibe Index - The Ultimate Vibe Coding Directory\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:description\",\"content\":\"The ultimate directory for vibe coding. Discover AI coding tools - skills, plugins, MCP servers, and marketplaces for Claude Code and other AI assistants.\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:url\",\"content\":\"https://vibeindex.ai\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:site_name\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image\",\"content\":\"https://vibeindex.ai/icon.png\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:width\",\"content\":\"512\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:height\",\"content\":\"512\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:alt\",\"content\":\"Vibe Index Logo\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:locale:alternate\",\"content\":\"ko_KR\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:title\",\"content\":\"Vibe Index - Vibe Coding Directory\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:description\",\"content\":\"The ultimate directory for vibe coding. Discover AI coding tools - skills, plugins, MCP servers, and marketplaces for Claude Code and other AI assistants.\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image\",\"content\":\"https://vibeindex.ai/icon.png\"}],[\"$\",\"link\",\"24\",{\"rel\":\"icon\",\"href\":\"/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"26\",{\"rel\":\"icon\",\"href\":\"/icon.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"27\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\"}],[\"$\",\"$L12\",\"28\",{}]]\n"])</script><script>self.__next_f.push([1,"13:I[74533,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"FavoriteButton\"]\n14:I[54371,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n15:I[38848,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"9:[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8\",\"children\":[[\"$\",\"nav\",null,{\"className\":\"mb-6\",\"children\":[\"$\",\"ol\",null,{\"className\":\"flex items-center gap-2 text-sm\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/skills\",\"className\":\"text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300\",\"children\":\"Skills\"}]}],[\"$\",\"li\",null,{\"className\":\"text-zinc-400\",\"children\":\"/\"}],[\"$\",\"li\",null,{\"className\":\"text-zinc-900 dark:text-white\",\"children\":\"agentic-jumpstart-react\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"mb-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start gap-4\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-5xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 flex-wrap\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold text-zinc-900 dark:text-white\",\"children\":\"agentic-jumpstart-react\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2.5 py-1 text-sm \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}],[\"$\",\"$L13\",null,{\"resourceId\":\"5cf6c86c-fba1-4dcd-bd52-ce35623e83f6\",\"size\":\"sm\"}],false]}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-zinc-600 dark:text-zinc-400\",\"children\":[\"from \",\"webdevcody\",\"/\",\"agentic-jumpstart\"]}]]}]]}],[\"$\",\"$L14\",null,{\"description\":\"Enables rapid React 19 development with best practices, integrating TanStack Start, shadcn/ui, React Hook Form, Zod, and advanced component patterns.\",\"descriptionKo\":\"Enables rapid React 19 development with best practices, integrating TanStack Start, shadcn/ui, React Hook Form, Zod, and advanced component patterns.\\n\\n최신 모범 사례를 적용한 React 19 개발을 빠르게 시작할 수 있게 해주는 스킬로, TanStack Start, shadcn/ui, React Hook Form, Zod와 고급 컴포넌트 패턴을 통합합니다.\",\"resourceId\":\"5cf6c86c-fba1-4dcd-bd52-ce35623e83f6\",\"resourceName\":\"agentic-jumpstart-react\",\"resourceType\":\"skill\",\"descriptionType\":\"ai\"}],null,null,[\"$\",\"$L7\",null,{\"href\":\"/collection/webdevcody/agentic-jumpstart\",\"className\":\"mt-4 flex items-center gap-3 rounded-lg border border-zinc-200 bg-zinc-50 p-4 transition-all hover:border-zinc-300 hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800/50 dark:hover:border-zinc-600 dark:hover:bg-zinc-800\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-2xl\",\"children\":\"📦\"}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Part of\"}],[\"$\",\"p\",null,{\"className\":\"font-semibold text-zinc-900 dark:text-white\",\"children\":[\"webdevcody\",\"/\",\"agentic-jumpstart\",[\"$\",\"span\",null,{\"className\":\"ml-2 text-sm font-normal text-zinc-500 dark:text-zinc-400\",\"children\":[\"(\",8,\" \",\"items\",\")\"]}]]}]]}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-5 w-5 text-zinc-400\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M9 5l7 7-7 7\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-wrap gap-2\",\"children\":[[\"$\",\"span\",\"agentic-jumpstart-react\",{\"onClick\":\"$undefined\",\"className\":\"inline-flex items-center rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-600 transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 \",\"children\":\"agentic-jumpstart-react\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mb-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":\"Installation\"}],[\"$\",\"$L15\",null,{\"installGuide\":{\"found\":true,\"commands\":[{\"label\":\"npm run\",\"command\":\"npm run dev\",\"description\":\"Run npm script\",\"type\":\"npm\"}],\"jsonConfig\":\"$undefined\",\"rawSection\":\"$undefined\"},\"githubUrl\":\"https://github.com/webdevcody/agentic-jumpstart\",\"owner\":\"webdevcody\",\"repo\":\"agentic-jumpstart\",\"resourceType\":\"skill\",\"resourceName\":\"agentic-jumpstart-react\"}]]}],[\"$\",\"div\",null,{\"className\":\"mb-8 flex gap-6 text-sm text-zinc-500 dark:text-zinc-400\",\"children\":[\"$L16\",false,\"$L17\",\"$L18\"]}],\"$L19\",\"$L1a\",\"$L1b\"]}]\n"])</script><script>self.__next_f.push([1,"1c:I[74533,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"FavoriteCount\"]\n1d:I[13428,[\"/_next/static/chunks/f5613062b736c8a5.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_6mY5EC9R9sVE9kiWq41XH3khJYTe\"],\"default\"]\n16:[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"title\":\"Installs\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-4 w-4\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"}]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":\"2\"}],[\"$\",\"span\",null,{\"className\":\"text-zinc-400 dark:text-zinc-500\",\"children\":\"Installs\"}]]}]\n17:[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"h-4 w-4 text-violet-500\",\"fill\":\"currentColor\",\"stroke\":\"currentColor\",\"strokeWidth\":0.5,\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z\"}]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":[\"$\",\"$L1c\",null,{\"resourceId\":\"5cf6c86c-fba1-4dcd-bd52-ce35623e83f6\"}]}]]}]\n18:[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"span\",null,{\"children\":\"Added\"}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":\"Feb 4, 2026\"}]]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://github.com/webdevcody/agentic-jumpstart\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"h-5 w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\",\"clipRule\":\"evenodd\"}]}],\"View on GitHub\"]}],[\"$\",\"$L7\",null,{\"href\":\"/skills\",\"className\":\"inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-6 py-3 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-5 w-5\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M10 19l-7-7m0 0l7-7m-7 7h18\"}]}],\"Back to Skills\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1e:T2a69,"])</script><script>self.__next_f.push([1,"---\nname: agentic-jumpstart-react\ndescription: React 19 patterns and best practices for TanStack Start applications with shadcn/ui, React Hook Form, Zod, Framer Motion, and TanStack Query. Use when building React components, forms, handling state, data fetching, animations, drag and drop, toasts, modals, or when the user mentions React, hooks, components, or UI.\n---\n\n# React 19 Best Practices\n\n## Component Structure\n\n### File Organization\n\n```\nsrc/routes/admin/courses/\n├── route.tsx # Route definition\n├── -components/ # Route-specific components\n│ ├── CourseList.tsx\n│ ├── CourseForm.tsx\n│ └── CourseCard.tsx\n```\n\n### Component Pattern\n\n```typescript\nimport { type ReactNode } from \"react\";\n\ninterface CourseCardProps {\n course: Course;\n onEdit?: (id: number) =\u003e void;\n children?: ReactNode;\n}\n\nexport function CourseCard({ course, onEdit, children }: CourseCardProps) {\n return (\n \u003cCard\u003e\n \u003cCardHeader\u003e\n \u003cCardTitle\u003e{course.title}\u003c/CardTitle\u003e\n \u003cCardDescription\u003e{course.description}\u003c/CardDescription\u003e\n \u003c/CardHeader\u003e\n \u003cCardContent\u003e{children}\u003c/CardContent\u003e\n {onEdit \u0026\u0026 (\n \u003cCardFooter\u003e\n \u003cButton onClick={() =\u003e onEdit(course.id)}\u003eEdit\u003c/Button\u003e\n \u003c/CardFooter\u003e\n )}\n \u003c/Card\u003e\n );\n}\n```\n\n## Form Handling with React Hook Form + Zod\n\n### Basic Form Pattern\n\n```typescript\nimport { useForm } from \"react-hook-form\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { z } from \"zod\";\n\nconst formSchema = z.object({\n title: z.string().min(1, \"Title is required\").max(100),\n description: z.string().max(500).optional(),\n isPremium: z.boolean().default(false),\n});\n\ntype FormData = z.infer\u003ctypeof formSchema\u003e;\n\nexport function CourseForm({ onSubmit }: { onSubmit: (data: FormData) =\u003e void }) {\n const form = useForm\u003cFormData\u003e({\n resolver: zodResolver(formSchema),\n defaultValues: {\n title: \"\",\n description: \"\",\n isPremium: false,\n },\n });\n\n return (\n \u003cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\"\u003e\n \u003cdiv\u003e\n \u003cLabel htmlFor=\"title\"\u003eTitle\u003c/Label\u003e\n \u003cInput\n id=\"title\"\n {...form.register(\"title\")}\n aria-invalid={!!form.formState.errors.title}\n /\u003e\n {form.formState.errors.title \u0026\u0026 (\n \u003cp className=\"text-sm text-red-500\"\u003e\n {form.formState.errors.title.message}\n \u003c/p\u003e\n )}\n \u003c/div\u003e\n\n \u003cdiv\u003e\n \u003cLabel htmlFor=\"description\"\u003eDescription\u003c/Label\u003e\n \u003cTextarea id=\"description\" {...form.register(\"description\")} /\u003e\n \u003c/div\u003e\n\n \u003cdiv className=\"flex items-center gap-2\"\u003e\n \u003cCheckbox\n id=\"isPremium\"\n checked={form.watch(\"isPremium\")}\n onCheckedChange={(checked) =\u003e\n form.setValue(\"isPremium\", checked === true)\n }\n /\u003e\n \u003cLabel htmlFor=\"isPremium\"\u003ePremium content\u003c/Label\u003e\n \u003c/div\u003e\n\n \u003cButton type=\"submit\" disabled={form.formState.isSubmitting}\u003e\n {form.formState.isSubmitting ? \"Saving...\" : \"Save\"}\n \u003c/Button\u003e\n \u003c/form\u003e\n );\n}\n```\n\n## Data Fetching with TanStack Query\n\n### Query Options Pattern\n\n```typescript\nimport { queryOptions, useQuery, useSuspenseQuery } from \"@tanstack/react-query\";\n\n// Define query options (can be shared between components)\nexport const courseQueryOptions = (courseId: string) =\u003e\n queryOptions({\n queryKey: [\"course\", courseId],\n queryFn: () =\u003e getCourseFn({ data: { courseId } }),\n });\n\n// In component - with suspense\nfunction CourseDetails({ courseId }: { courseId: string }) {\n const { data: course } = useSuspenseQuery(courseQueryOptions(courseId));\n return \u003cdiv\u003e{course.title}\u003c/div\u003e;\n}\n\n// In component - without suspense\nfunction CourseDetails({ courseId }: { courseId: string }) {\n const { data: course, isLoading, error } = useQuery(courseQueryOptions(courseId));\n\n if (isLoading) return \u003cSkeleton /\u003e;\n if (error) return \u003cErrorDisplay error={error} /\u003e;\n return \u003cdiv\u003e{course.title}\u003c/div\u003e;\n}\n```\n\n### Mutations with Optimistic Updates\n\n```typescript\nimport { useMutation, useQueryClient } from \"@tanstack/react-query\";\nimport { toast } from \"sonner\";\n\nexport function useUpdateCourse() {\n const queryClient = useQueryClient();\n\n return useMutation({\n mutationFn: updateCourseFn,\n onSuccess: () =\u003e {\n toast.success(\"Course updated successfully\");\n queryClient.invalidateQueries({ queryKey: [\"courses\"] });\n },\n onError: (error) =\u003e {\n toast.error(error.message || \"Failed to update course\");\n },\n });\n}\n```\n\n## Loading States \u0026 Suspense\n\n### Loading Skeleton Pattern\n\n```typescript\nfunction CourseSkeleton() {\n return (\n \u003cCard\u003e\n \u003cCardHeader\u003e\n \u003cSkeleton className=\"h-6 w-3/4\" /\u003e\n \u003cSkeleton className=\"h-4 w-1/2\" /\u003e\n \u003c/CardHeader\u003e\n \u003cCardContent\u003e\n \u003cSkeleton className=\"h-20 w-full\" /\u003e\n \u003c/CardContent\u003e\n \u003c/Card\u003e\n );\n}\n\nfunction CourseList() {\n return (\n \u003cSuspense fallback={\u003cCourseSkeleton /\u003e}\u003e\n \u003cCourseListContent /\u003e\n \u003c/Suspense\u003e\n );\n}\n```\n\n## Error Boundaries\n\n### Route-Level Error Handling\n\n```typescript\nimport { DefaultCatchBoundary } from \"~/components/DefaultCatchBoundary\";\n\nexport const Route = createFileRoute(\"/courses/$courseId\")({\n component: CoursePage,\n errorComponent: DefaultCatchBoundary,\n});\n```\n\n## Dialog \u0026 Modal Pattern\n\n```typescript\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"~/components/ui/dialog\";\n\nfunction DeleteCourseDialog({\n course,\n onDelete,\n}: {\n course: Course;\n onDelete: () =\u003e void;\n}) {\n const [open, setOpen] = useState(false);\n\n return (\n \u003cDialog open={open} onOpenChange={setOpen}\u003e\n \u003cDialogTrigger asChild\u003e\n \u003cButton variant=\"destructive\"\u003eDelete\u003c/Button\u003e\n \u003c/DialogTrigger\u003e\n \u003cDialogContent\u003e\n \u003cDialogHeader\u003e\n \u003cDialogTitle\u003eDelete Course\u003c/DialogTitle\u003e\n \u003cDialogDescription\u003e\n Are you sure you want to delete \"{course.title}\"? This action cannot\n be undone.\n \u003c/DialogDescription\u003e\n \u003c/DialogHeader\u003e\n \u003cDialogFooter\u003e\n \u003cButton variant=\"outline\" onClick={() =\u003e setOpen(false)}\u003e\n Cancel\n \u003c/Button\u003e\n \u003cButton\n variant=\"destructive\"\n onClick={() =\u003e {\n onDelete();\n setOpen(false);\n }}\n \u003e\n Delete\n \u003c/Button\u003e\n \u003c/DialogFooter\u003e\n \u003c/DialogContent\u003e\n \u003c/Dialog\u003e\n );\n}\n```\n\n## Toast Notifications with Sonner\n\n```typescript\nimport { toast } from \"sonner\";\n\n// Success toast\ntoast.success(\"Course saved successfully\");\n\n// Error toast\ntoast.error(\"Failed to save course\");\n\n// Promise toast\ntoast.promise(saveCourse(data), {\n loading: \"Saving course...\",\n success: \"Course saved!\",\n error: \"Failed to save course\",\n});\n\n// Custom toast with action\ntoast(\"Course deleted\", {\n action: {\n label: \"Undo\",\n onClick: () =\u003e restoreCourse(courseId),\n },\n});\n```\n\n## Animation with Framer Motion\n\n### Basic Animation\n\n```typescript\nimport { motion } from \"framer-motion\";\n\nfunction FadeInCard({ children }: { children: ReactNode }) {\n return (\n \u003cmotion.div\n initial={{ opacity: 0, y: 20 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -20 }}\n transition={{ duration: 0.2 }}\n \u003e\n {children}\n \u003c/motion.div\u003e\n );\n}\n```\n\n### Staggered List Animation\n\n```typescript\nimport { motion } from \"framer-motion\";\n\nconst container = {\n hidden: { opacity: 0 },\n show: {\n opacity: 1,\n transition: { staggerChildren: 0.1 },\n },\n};\n\nconst item = {\n hidden: { opacity: 0, y: 20 },\n show: { opacity: 1, y: 0 },\n};\n\nfunction AnimatedList({ items }: { items: Item[] }) {\n return (\n \u003cmotion.ul variants={container} initial=\"hidden\" animate=\"show\"\u003e\n {items.map((item) =\u003e (\n \u003cmotion.li key={item.id} variants={item}\u003e\n {item.title}\n \u003c/motion.li\u003e\n ))}\n \u003c/motion.ul\u003e\n );\n}\n```\n\n## Drag and Drop with @hello-pangea/dnd\n\n```typescript\nimport { DragDropContext, Droppable, Draggable } from \"@hello-pangea/dnd\";\n\nfunction ReorderableList({\n items,\n onReorder,\n}: {\n items: Item[];\n onReorder: (items: Item[]) =\u003e void;\n}) {\n const handleDragEnd = (result: DropResult) =\u003e {\n if (!result.destination) return;\n\n const reordered = Array.from(items);\n const [removed] = reordered.splice(result.source.index, 1);\n reordered.splice(result.destination.index, 0, removed);\n\n onReorder(reordered);\n };\n\n return (\n \u003cDragDropContext onDragEnd={handleDragEnd}\u003e\n \u003cDroppable droppableId=\"items\"\u003e\n {(provided) =\u003e (\n \u003cul {...provided.droppableProps} ref={provided.innerRef}\u003e\n {items.map((item, index) =\u003e (\n \u003cDraggable key={item.id} draggableId={String(item.id)} index={index}\u003e\n {(provided) =\u003e (\n \u003cli\n ref={provided.innerRef}\n {...provided.draggableProps}\n {...provided.dragHandleProps}\n \u003e\n {item.title}\n \u003c/li\u003e\n )}\n \u003c/Draggable\u003e\n ))}\n {provided.placeholder}\n \u003c/ul\u003e\n )}\n \u003c/Droppable\u003e\n \u003c/DragDropContext\u003e\n );\n}\n```\n\n## Custom Hooks\n\n### useLocalStorage\n\n```typescript\nfunction useLocalStorage\u003cT\u003e(key: string, initialValue: T) {\n const [storedValue, setStoredValue] = useState\u003cT\u003e(() =\u003e {\n if (typeof window === \"undefined\") return initialValue;\n try {\n const item = window.localStorage.getItem(key);\n return item ? JSON.parse(item) : initialValue;\n } catch {\n return initialValue;\n }\n });\n\n const setValue = (value: T | ((val: T) =\u003e T)) =\u003e {\n const valueToStore = value instanceof Function ? value(storedValue) : value;\n setStoredValue(valueToStore);\n window.localStorage.setItem(key, JSON.stringify(valueToStore));\n };\n\n return [storedValue, setValue] as const;\n}\n```\n\n### useDebounce\n\n```typescript\nfunction useDebounce\u003cT\u003e(value: T, delay: number): T {\n const [debouncedValue, setDebouncedValue] = useState\u003cT\u003e(value);\n\n useEffect(() =\u003e {\n const handler = setTimeout(() =\u003e setDebouncedValue(value), delay);\n return () =\u003e clearTimeout(handler);\n }, [value, delay]);\n\n return debouncedValue;\n}\n```\n\n## Component Patterns Checklist\n\n- [ ] Components use TypeScript interfaces for props\n- [ ] Forms use React Hook Form with Zod validation\n- [ ] Data fetching uses TanStack Query patterns\n- [ ] Loading states have skeleton placeholders\n- [ ] Dialogs use shadcn/ui Dialog component\n- [ ] Toasts use Sonner for notifications\n- [ ] Animations use Framer Motion\n- [ ] Effects clean up subscriptions\n- [ ] Route-specific components in `-components/` subdirectory\n- [ ] Shared components in `/src/components/`\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"div\",null,{\"className\":\"mt-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":\"Skill Details\"}],[\"$\",\"$L1d\",null,{\"content\":\"$1e\"}]]}]\n"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"div\",null,{\"className\":\"mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 flex items-center gap-2 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"More from this repository\"}],[\"$\",\"span\",null,{\"className\":\"rounded-full bg-violet-100 px-2 py-0.5 text-sm font-medium text-violet-700 dark:bg-violet-900/50 dark:text-violet-300\",\"children\":7}]]}],[\"$\",\"div\",null,{\"className\":\"grid gap-3 sm:grid-cols-2\",\"children\":[[\"$\",\"$L7\",\"c45b920f-6ee7-4a28-a8ed-6e611d95658e\",{\"href\":\"/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-performance\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"agentic-jumpstart-performance\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Optimizes React and TanStack performance through strategic code splitting, memoization, lazy loading, and intelligent caching techniques.\"}]]}]]}],[\"$\",\"$L7\",\"7252dc57-6edf-4d48-8b56-84a5a00a980d\",{\"href\":\"/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-database\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"agentic-jumpstart-database\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Enables database operations with Drizzle ORM, providing robust PostgreSQL schema design, type-safe queries, migrations, and relationship management.\"}]]}]]}],[\"$\",\"$L7\",\"f4129fe3-6d78-462e-a077-788c59442dd2\",{\"href\":\"/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-dependency-management\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"agentic-jumpstart-dependency-management\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[\"$L1f\",\"$L20\"]}]]}],\"$L21\"]}]]}],\"$L22\",\"$L23\",\"$L24\",\"$L25\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1f:[\"$\",\"span\",null,{\"children\":\"🎯\"}]\n20:[\"$\",\"span\",null,{\"children\":\"Skill\"}]\n21:[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Manages npm dependencies with best practices, helping developers safely install, update, and secure packages across complex projects.\"}]\n22:[\"$\",\"$L7\",\"97d997ca-32d4-4346-b8f1-b1551a6b85a5\",{\"href\":\"/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-security\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"agentic-jumpstart-security\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Implements security best practices for TanStack Start applications, covering authentication, authorization, input validation, and middleware protection across React 19, Drizzle ORM, and cloud servi...\"}]]}]]}]\n23:[\"$\",\"$L7\",\"c98a5849-fa38-491e-8abf-19198bf33351\",{\"href\":\"/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-testing\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"agentic-jumpstart-testing\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Enables automated testing and validation of AI agent workflows, providing structured test cases and performance assessment for agentic systems.\"}]]}]]}]\n24:[\"$\",\"$L7\",\"12d189a9-f8f3-475a-bfc4-1c463179ec81\",{\"href\":\"/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-code-quality\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"agentic-jumpstart-code-quality\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Enhances code quality by automatically detecting and suggesting improvements for potential bugs, code smells, and maintainability issues.\"}]]}]]}]\n25:[\"$\",\"$L7\",\"c5b49e7c-ddee-45f4-b783-565a676b00a6\",{\"href\":\""])</script><script>self.__next_f.push([1,"/skills/webdevcody/agentic-jumpstart/agentic-jumpstart-frontend\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"agentic-jumpstart-frontend\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Enables rapid frontend development with AI-powered code generation and component scaffolding for modern web applications.\"}]]}]]}]\n"])</script></body></html>