diff --git a/src/data/seed-snippets.json b/src/data/seed-snippets.json
new file mode 100644
index 0000000..9f8ffb1
--- /dev/null
+++ b/src/data/seed-snippets.json
@@ -0,0 +1,65 @@
+[
+  {
+    "id": "seed-1",
+    "title": "React Counter Hook",
+    "description": "Basic state management with useState",
+    "code": "import { useState } from 'react'\n\nfunction Counter() {\n  const [count, setCount] = useState(0)\n  \n  return (\n    <div className=\"p-6 space-y-4\">\n      <p className=\"text-2xl font-bold\">Count: {count}</p>\n      <div className=\"flex gap-2\">\n        <button \n          onClick={() => setCount(count + 1)}\n          className=\"px-4 py-2 bg-primary text-primary-foreground rounded\"\n        >\n          Increment\n        </button>\n        <button \n          onClick={() => setCount(count - 1)}\n          className=\"px-4 py-2 bg-secondary text-secondary-foreground rounded\"\n        >\n          Decrement\n        </button>\n      </div>\n    </div>\n  )\n}\n\nexport default Counter",
+    "language": "tsx",
+    "category": "React Hooks",
+    "hasPreview": true,
+    "functionName": "Counter",
+    "inputParameters": [],
+    "createdAt": 0,
+    "updatedAt": 0
+  },
+  {
+    "id": "seed-2",
+    "title": "Todo List Component",
+    "description": "Complete todo list with add, toggle, and delete",
+    "code": "import { useState } from 'react'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Card } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Trash2 } from '@phosphor-icons/react'\n\nfunction TodoList() {\n  const [todos, setTodos] = useState([\n    { id: 1, text: 'Learn React', completed: false },\n    { id: 2, text: 'Build a project', completed: false }\n  ])\n  const [input, setInput] = useState('')\n\n  const addTodo = () => {\n    if (input.trim()) {\n      setTodos([...todos, { id: Date.now(), text: input, completed: false }])\n      setInput('')\n    }\n  }\n\n  const toggleTodo = (id) => {\n    setTodos(todos.map(todo => \n      todo.id === id ? { ...todo, completed: !todo.completed } : todo\n    ))\n  }\n\n  const deleteTodo = (id) => {\n    setTodos(todos.filter(todo => todo.id !== id))\n  }\n\n  return (\n    <Card className=\"p-6 max-w-md mx-auto\">\n      <h2 className=\"text-2xl font-bold mb-4\">My Todos</h2>\n      <div className=\"flex gap-2 mb-4\">\n        <Input\n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          onKeyPress={(e) => e.key === 'Enter' && addTodo()}\n          placeholder=\"Add a new todo...\"\n        />\n        <Button onClick={addTodo}>Add</Button>\n      </div>\n      <div className=\"space-y-2\">\n        {todos.map(todo => (\n          <div key={todo.id} className=\"flex items-center gap-2 p-2 hover:bg-muted rounded\">\n            <Checkbox\n              checked={todo.completed}\n              onCheckedChange={() => toggleTodo(todo.id)}\n            />\n            <span className={todo.completed ? 'line-through text-muted-foreground flex-1' : 'flex-1'}>\n              {todo.text}\n            </span>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={() => deleteTodo(todo.id)}\n            >\n              <Trash2 size={16} />\n            </Button>\n          </div>\n        ))}\n      </div>\n    </Card>\n  )\n}\n\nexport default TodoList",
+    "language": "tsx",
+    "category": "Components",
+    "hasPreview": true,
+    "functionName": "TodoList",
+    "inputParameters": [],
+    "createdAt": 0,
+    "updatedAt": 0
+  },
+  {
+    "id": "seed-3",
+    "title": "Fetch Data Hook",
+    "description": "Custom hook for API data fetching",
+    "code": "import { useState, useEffect } from 'react'\n\nfunction useFetch(url) {\n  const [data, setData] = useState(null)\n  const [loading, setLoading] = useState(true)\n  const [error, setError] = useState(null)\n\n  useEffect(() => {\n    const fetchData = async () => {\n      try {\n        setLoading(true)\n        const response = await fetch(url)\n        if (!response.ok) throw new Error('Network response was not ok')\n        const json = await response.json()\n        setData(json)\n        setError(null)\n      } catch (err) {\n        setError(err.message)\n      } finally {\n        setLoading(false)\n      }\n    }\n\n    fetchData()\n  }, [url])\n\n  return { data, loading, error }\n}",
+    "language": "tsx",
+    "category": "React Hooks",
+    "hasPreview": false,
+    "createdAt": 0,
+    "updatedAt": 0
+  },
+  {
+    "id": "seed-4",
+    "title": "Animated Card",
+    "description": "Card with hover animation using Framer Motion",
+    "code": "import { motion } from 'framer-motion'\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'\n\nfunction AnimatedCard({ title = 'Animated Card', description = 'Hover to see the effect' }) {\n  return (\n    <motion.div\n      whileHover={{ scale: 1.05, rotateZ: 2 }}\n      whileTap={{ scale: 0.95 }}\n      transition={{ type: 'spring', stiffness: 300, damping: 20 }}\n    >\n      <Card className=\"cursor-pointer\">\n        <CardHeader>\n          <CardTitle>{title}</CardTitle>\n          <CardDescription>{description}</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>This card has smooth animations on hover and tap!</p>\n        </CardContent>\n      </Card>\n    </motion.div>\n  )\n}\n\nexport default AnimatedCard",
+    "language": "tsx",
+    "category": "Components",
+    "hasPreview": true,
+    "functionName": "AnimatedCard",
+    "inputParameters": [],
+    "createdAt": 0,
+    "updatedAt": 0
+  },
+  {
+    "id": "seed-5",
+    "title": "Form Validation",
+    "description": "Form with react-hook-form validation",
+    "code": "import { useForm } from 'react-hook-form'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Card } from '@/components/ui/card'\n\nfunction ContactForm() {\n  const { register, handleSubmit, formState: { errors } } = useForm()\n\n  const onSubmit = (data) => {\n    console.log('Form data:', data)\n    alert('Form submitted successfully!')\n  }\n\n  return (\n    <Card className=\"p-6 max-w-md mx-auto\">\n      <h2 className=\"text-2xl font-bold mb-4\">Contact Form</h2>\n      <form onSubmit={handleSubmit(onSubmit)} className=\"space-y-4\">\n        <div>\n          <Label htmlFor=\"name\">Name</Label>\n          <Input\n            id=\"name\"\n            {...register('name', { required: 'Name is required' })}\n          />\n          {errors.name && (\n            <p className=\"text-destructive text-sm mt-1\">{errors.name.message}</p>\n          )}\n        </div>\n\n        <div>\n          <Label htmlFor=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            {...register('email', {\n              required: 'Email is required',\n              pattern: {\n                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\\\.[A-Z]{2,}$/i,\n                message: 'Invalid email address'\n              }\n            })}\n          />\n          {errors.email && (\n            <p className=\"text-destructive text-sm mt-1\">{errors.email.message}</p>\n          )}\n        </div>\n\n        <Button type=\"submit\" className=\"w-full\">Submit</Button>\n      </form>\n    </Card>\n  )\n}\n\nexport default ContactForm",
+    "language": "tsx",
+    "category": "Forms",
+    "hasPreview": true,
+    "functionName": "ContactForm",
+    "inputParameters": [],
+    "createdAt": 0,
+    "updatedAt": 0
+  }
+]
\ No newline at end of file
diff --git a/src/data/seed-templates.json b/src/data/seed-templates.json
new file mode 100644
index 0000000..445e0d8
--- /dev/null
+++ b/src/data/seed-templates.json
@@ -0,0 +1,35 @@
+[
+  {
+    "id": "template-1",
+    "title": "Basic React Component",
+    "description": "Simple functional component template",
+    "code": "function MyComponent() {\n  return (\n    <div className=\"p-4\">\n      <h2 className=\"text-xl font-bold\">Hello World</h2>\n      <p>This is a basic component.</p>\n    </div>\n  )\n}\n\nexport default MyComponent",
+    "language": "tsx",
+    "category": "Templates",
+    "hasPreview": true,
+    "functionName": "MyComponent",
+    "inputParameters": []
+  },
+  {
+    "id": "template-2",
+    "title": "Component with Props",
+    "description": "Component template with configurable props",
+    "code": "function Greeting({ name = 'World', message = 'Hello' }) {\n  return (\n    <div className=\"p-4\">\n      <h2 className=\"text-xl font-bold\">{message}, {name}!</h2>\n    </div>\n  )\n}\n\nexport default Greeting",
+    "language": "tsx",
+    "category": "Templates",
+    "hasPreview": true,
+    "functionName": "Greeting",
+    "inputParameters": []
+  },
+  {
+    "id": "template-3",
+    "title": "useState Hook Template",
+    "description": "Component with state management",
+    "code": "import { useState } from 'react'\nimport { Button } from '@/components/ui/button'\n\nfunction StatefulComponent() {\n  const [value, setValue] = useState(0)\n\n  return (\n    <div className=\"p-4 space-y-4\">\n      <p className=\"text-lg\">Value: {value}</p>\n      <Button onClick={() => setValue(value + 1)}>\n        Increment\n      </Button>\n    </div>\n  )\n}\n\nexport default StatefulComponent",
+    "language": "tsx",
+    "category": "Templates",
+    "hasPreview": true,
+    "functionName": "StatefulComponent",
+    "inputParameters": []
+  }
+]
\ No newline at end of file
diff --git a/src/data/snippets/atoms.json b/src/data/snippets/atoms.json
new file mode 100644
index 0000000..293c806
--- /dev/null
+++ b/src/data/snippets/atoms.json
@@ -0,0 +1,15 @@
+{
+  "buttonDefault": "interface ButtonProps {\n  children?: string\n  onClick?: () => void\n}\n\nfunction DefaultButton({ children = \"Default\", onClick }: ButtonProps) {\n  return <Button onClick={onClick}>{children}</Button>\n}",
+  "buttonSecondary": "interface ButtonProps {\n  children?: string\n  variant?: \"default\" | \"secondary\" | \"destructive\" | \"outline\" | \"ghost\" | \"link\"\n  onClick?: () => void\n}\n\nfunction CustomButton({ children = \"Secondary\", variant = \"secondary\", onClick }: ButtonProps) {\n  return <Button variant={variant} onClick={onClick}>{children}</Button>\n}",
+  "buttonDestructive": "interface DestructiveButtonProps {\n  children?: string\n  onClick?: () => void\n}\n\nfunction DestructiveButton({ children = \"Destructive\", onClick }: DestructiveButtonProps) {\n  return <Button variant=\"destructive\" onClick={onClick}>{children}</Button>\n}",
+  "buttonOutline": "interface OutlineButtonProps {\n  children?: string\n  onClick?: () => void\n}\n\nfunction OutlineButton({ children = \"Outline\", onClick }: OutlineButtonProps) {\n  return <Button variant=\"outline\" onClick={onClick}>{children}</Button>\n}",
+  "buttonGhost": "interface GhostButtonProps {\n  children?: string\n  onClick?: () => void\n}\n\nfunction GhostButton({ children = \"Ghost\", onClick }: GhostButtonProps) {\n  return <Button variant=\"ghost\" onClick={onClick}>{children}</Button>\n}",
+  "buttonLink": "interface LinkButtonProps {\n  children?: string\n  onClick?: () => void\n}\n\nfunction LinkButton({ children = \"Link\", onClick }: LinkButtonProps) {\n  return <Button variant=\"link\" onClick={onClick}>{children}</Button>\n}",
+  "buttonSizes": "interface ButtonSizesProps {\n  smallText?: string\n  defaultText?: string\n  largeText?: string\n  onSmallClick?: () => void\n  onDefaultClick?: () => void\n  onLargeClick?: () => void\n  onIconClick?: () => void\n}\n\nfunction ButtonSizes({ \n  smallText = \"Small\", \n  defaultText = \"Default\", \n  largeText = \"Large\",\n  onSmallClick,\n  onDefaultClick,\n  onLargeClick,\n  onIconClick\n}: ButtonSizesProps) {\n  return (\n    <>\n      <Button size=\"sm\" onClick={onSmallClick}>{smallText}</Button>\n      <Button size=\"default\" onClick={onDefaultClick}>{defaultText}</Button>\n      <Button size=\"lg\" onClick={onLargeClick}>{largeText}</Button>\n      <Button size=\"icon\" onClick={onIconClick}>\n        <Heart weight=\"fill\" />\n      </Button>\n    </>\n  )\n}",
+  "buttonWithIcons": "interface IconButtonProps {\n  primaryText?: string\n  secondaryText?: string\n  onPrimaryClick?: () => void\n  onSecondaryClick?: () => void\n}\n\nfunction IconButtons({ \n  primaryText = \"Favorite\", \n  secondaryText = \"Add Item\",\n  onPrimaryClick,\n  onSecondaryClick\n}: IconButtonProps) {\n  return (\n    <>\n      <Button onClick={onPrimaryClick}>\n        <Star weight=\"fill\" />\n        {primaryText}\n      </Button>\n      <Button variant=\"outline\" onClick={onSecondaryClick}>\n        <Plus weight=\"bold\" />\n        {secondaryText}\n      </Button>\n    </>\n  )\n}",
+  "badgeVariants": "interface BadgeVariantsProps {\n  defaultText?: string\n  secondaryText?: string\n  destructiveText?: string\n  outlineText?: string\n}\n\nfunction BadgeVariants({ \n  defaultText = \"Default\",\n  secondaryText = \"Secondary\",\n  destructiveText = \"Destructive\",\n  outlineText = \"Outline\"\n}: BadgeVariantsProps) {\n  return (\n    <>\n      <Badge>{defaultText}</Badge>\n      <Badge variant=\"secondary\">{secondaryText}</Badge>\n      <Badge variant=\"destructive\">{destructiveText}</Badge>\n      <Badge variant=\"outline\">{outlineText}</Badge>\n    </>\n  )\n}",
+  "badgeWithIcons": "interface IconBadgeProps {\n  completedText?: string\n  failedText?: string\n}\n\nfunction IconBadges({ \n  completedText = \"Completed\",\n  failedText = \"Failed\"\n}: IconBadgeProps) {\n  return (\n    <>\n      <Badge>\n        <Check weight=\"bold\" className=\"mr-1\" />\n        {completedText}\n      </Badge>\n      <Badge variant=\"destructive\">\n        <X weight=\"bold\" className=\"mr-1\" />\n        {failedText}\n      </Badge>\n    </>\n  )\n}",
+  "inputBasic": "interface InputProps {\n  placeholder?: string\n  value?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nfunction BasicInput({ placeholder = \"Default input\", value, onChange }: InputProps) {\n  return <Input placeholder={placeholder} value={value} onChange={onChange} />\n}",
+  "inputWithIcon": "interface SearchInputProps {\n  placeholder?: string\n  value?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nfunction SearchInput({ placeholder = \"Search...\", value, onChange }: SearchInputProps) {\n  return (\n    <div className=\"relative\">\n      <MagnifyingGlass className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n      <Input placeholder={placeholder} className=\"pl-10\" value={value} onChange={onChange} />\n    </div>\n  )\n}",
+  "inputTypes": "interface TypedInputsProps {\n  textPlaceholder?: string\n  emailPlaceholder?: string\n  passwordPlaceholder?: string\n  numberPlaceholder?: string\n  onTextChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n  onEmailChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n  onPasswordChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n  onNumberChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nfunction TypedInputs({ \n  textPlaceholder = \"Text input\",\n  emailPlaceholder = \"email@example.com\",\n  passwordPlaceholder = \"Password\",\n  numberPlaceholder = \"123\",\n  onTextChange,\n  onEmailChange,\n  onPasswordChange,\n  onNumberChange\n}: TypedInputsProps) {\n  return (\n    <>\n      <Input type=\"text\" placeholder={textPlaceholder} onChange={onTextChange} />\n      <Input type=\"email\" placeholder={emailPlaceholder} onChange={onEmailChange} />\n      <Input type=\"password\" placeholder={passwordPlaceholder} onChange={onPasswordChange} />\n      <Input type=\"number\" placeholder={numberPlaceholder} onChange={onNumberChange} />\n    </>\n  )\n}"
+}
\ No newline at end of file
diff --git a/src/data/snippets/molecules.json b/src/data/snippets/molecules.json
new file mode 100644
index 0000000..2e1809a
--- /dev/null
+++ b/src/data/snippets/molecules.json
@@ -0,0 +1,9 @@
+{
+  "formField": "interface FormFieldProps {\n  label?: string\n  placeholder?: string\n  helperText?: string\n  id?: string\n  value?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nfunction EmailFormField({ \n  label = \"Email Address\",\n  placeholder = \"john@example.com\",\n  helperText = \"We'll never share your email with anyone else.\",\n  id = \"email\",\n  value,\n  onChange\n}: FormFieldProps) {\n  return (\n    <div className=\"space-y-2\">\n      <Label htmlFor={id}>{label}</Label>\n      <div className=\"relative\">\n        <Envelope className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n        <Input id={id} type=\"email\" placeholder={placeholder} className=\"pl-10\" value={value} onChange={onChange} />\n      </div>\n      <p className=\"text-sm text-muted-foreground\">\n        {helperText}\n      </p>\n    </div>\n  )\n}",
+  "searchBar": "interface SearchBarProps {\n  placeholder?: string\n  value?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nfunction SearchBar({ placeholder = \"Search...\", value, onChange }: SearchBarProps) {\n  return (\n    <div className=\"relative\">\n      <MagnifyingGlass className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n      <Input placeholder={placeholder} className=\"pl-10\" value={value} onChange={onChange} />\n    </div>\n  )\n}",
+  "searchBarWithButton": "interface SearchBarWithButtonProps {\n  placeholder?: string\n  buttonText?: string\n  value?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n  onSearch?: () => void\n}\n\nfunction SearchBarWithButton({ \n  placeholder = \"Search...\",\n  buttonText = \"Search\",\n  value,\n  onChange,\n  onSearch\n}: SearchBarWithButtonProps) {\n  return (\n    <div className=\"flex gap-2\">\n      <div className=\"relative flex-1\">\n        <MagnifyingGlass className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n        <Input placeholder={placeholder} className=\"pl-10\" value={value} onChange={onChange} />\n      </div>\n      <Button onClick={onSearch}>{buttonText}</Button>\n    </div>\n  )\n}",
+  "userCard": "interface UserCardProps {\n  name?: string\n  username?: string\n  bio?: string\n  avatarUrl?: string\n  avatarFallback?: string\n  buttonText?: string\n  onButtonClick?: () => void\n}\n\nfunction UserCard({ \n  name = \"Alex Morgan\",\n  username = \"@alexmorgan\",\n  bio = \"Product designer passionate about creating delightful user experiences.\",\n  avatarUrl = \"https://i.pravatar.cc/150?img=1\",\n  avatarFallback = \"AM\",\n  buttonText = \"Follow\",\n  onButtonClick\n}: UserCardProps) {\n  return (\n    <Card className=\"p-6\">\n      <div className=\"flex items-start gap-4\">\n        <Avatar className=\"h-12 w-12\">\n          <AvatarImage src={avatarUrl} />\n          <AvatarFallback>{avatarFallback}</AvatarFallback>\n        </Avatar>\n        <div className=\"flex-1 min-w-0\">\n          <h3 className=\"font-semibold text-lg\">{name}</h3>\n          <p className=\"text-sm text-muted-foreground\">{username}</p>\n          <p className=\"text-sm mt-2\">\n            {bio}\n          </p>\n        </div>\n        <Button size=\"sm\" variant=\"outline\" onClick={onButtonClick}>\n          {buttonText}\n        </Button>\n      </div>\n    </Card>\n  )\n}",
+  "socialActions": "interface SocialActionsProps {\n  likeText?: string\n  commentText?: string\n  shareText?: string\n  onLike?: () => void\n  onComment?: () => void\n  onShare?: () => void\n}\n\nfunction SocialActions({ \n  likeText = \"Like\",\n  commentText = \"Comment\",\n  shareText = \"Share\",\n  onLike,\n  onComment,\n  onShare\n}: SocialActionsProps) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Button variant=\"ghost\" size=\"sm\" onClick={onLike}>\n        <Heart className=\"mr-2\" />\n        {likeText}\n      </Button>\n      <Button variant=\"ghost\" size=\"sm\" onClick={onComment}>\n        <ChatCircle className=\"mr-2\" />\n        {commentText}\n      </Button>\n      <Button variant=\"ghost\" size=\"sm\" onClick={onShare}>\n        <Share className=\"mr-2\" />\n        {shareText}\n      </Button>\n    </div>\n  )\n}",
+  "statusIndicator": "interface StatusIndicatorProps {\n  statusText?: string\n  badgeText?: string\n  isActive?: boolean\n}\n\nfunction StatusIndicator({ \n  statusText = \"System Online\",\n  badgeText = \"Active\",\n  isActive = true\n}: StatusIndicatorProps) {\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-3\">\n        <div className={cn(\n          \"h-3 w-3 rounded-full bg-accent\",\n          isActive && \"animate-pulse\"\n        )} />\n        <span className=\"font-medium\">{statusText}</span>\n      </div>\n      <Badge>{badgeText}</Badge>\n    </div>\n  )\n}",
+  "contentCard": "interface ContentCardProps {\n  title?: string\n  description?: string\n  date?: string\n  readTime?: string\n  tags?: string[]\n}\n\nfunction ContentCard({ \n  title = \"Building Scalable Design Systems\",\n  description = \"Learn how to create and maintain design systems that grow with your team.\",\n  date = \"Mar 15, 2024\",\n  readTime = \"5 min read\",\n  tags = [\"Design\", \"System\"]\n}: ContentCardProps) {\n  return (\n    <Card className=\"p-6 hover:shadow-lg transition-shadow\">\n      <div className=\"space-y-4\">\n        <div className=\"flex items-start justify-between gap-4\">\n          <div className=\"space-y-1\">\n            <h3 className=\"font-semibold text-lg line-clamp-2\">\n              {title}\n            </h3>\n            <p className=\"text-sm text-muted-foreground\">\n              {description}\n            </p>\n          </div>\n        </div>\n        <div className=\"flex items-center gap-4 text-sm text-muted-foreground\">\n          <div className=\"flex items-center gap-1\">\n            <Calendar className=\"h-4 w-4\" />\n            <span>{date}</span>\n          </div>\n          <span>•</span>\n          <span>{readTime}</span>\n        </div>\n        <div className=\"flex gap-2\">\n          {tags.map((tag) => (\n            <Badge key={tag} variant=\"outline\">{tag}</Badge>\n          ))}\n        </div>\n      </div>\n    </Card>\n  )\n}"
+}
\ No newline at end of file
diff --git a/src/data/snippets/organisms.json b/src/data/snippets/organisms.json
new file mode 100644
index 0000000..e93e96a
--- /dev/null
+++ b/src/data/snippets/organisms.json
@@ -0,0 +1,7 @@
+{
+  "navigationBar": "interface NavigationBarProps {\n  brandName?: string\n  navItems?: Array<{ label: string; icon: React.ReactNode; onClick?: () => void }>\n  avatarUrl?: string\n  avatarFallback?: string\n  onNotificationClick?: () => void\n  onSettingsClick?: () => void\n}\n\nfunction NavigationBar({ \n  brandName = \"BrandName\",\n  navItems = [\n    { label: \"Home\", icon: <House className=\"mr-2\" /> },\n    { label: \"Analytics\", icon: <ChartBar className=\"mr-2\" /> },\n    { label: \"Projects\", icon: <Folder className=\"mr-2\" /> }\n  ],\n  avatarUrl = \"https://i.pravatar.cc/150?img=3\",\n  avatarFallback = \"U\",\n  onNotificationClick,\n  onSettingsClick\n}: NavigationBarProps) {\n  return (\n    <div className=\"border-b border-border bg-card p-4\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-6\">\n          <h3 className=\"text-xl font-bold\">{brandName}</h3>\n          <nav className=\"hidden md:flex items-center gap-1\">\n            {navItems.map((item) => (\n              <Button key={item.label} variant=\"ghost\" size=\"sm\" onClick={item.onClick}>\n                {item.icon}\n                {item.label}\n              </Button>\n            ))}\n          </nav>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"ghost\" size=\"icon\" onClick={onNotificationClick}>\n            <Bell />\n          </Button>\n          <Button variant=\"ghost\" size=\"icon\" onClick={onSettingsClick}>\n            <Gear />\n          </Button>\n          <Avatar className=\"h-8 w-8\">\n            <AvatarImage src={avatarUrl} />\n            <AvatarFallback>{avatarFallback}</AvatarFallback>\n          </Avatar>\n        </div>\n      </div>\n    </div>\n  )\n}",
+  "dataTable": "interface Transaction {\n  id: string\n  status: string\n  statusVariant?: \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n  description: string\n  date: string\n  amount: string\n  isNegative?: boolean\n}\n\ninterface DataTableProps {\n  title?: string\n  exportButtonText?: string\n  transactions?: Transaction[]\n  onExport?: () => void\n}\n\nfunction DataTable({ \n  title = \"Recent Transactions\",\n  exportButtonText = \"Export\",\n  transactions = [\n    { id: \"1\", status: \"Completed\", description: \"Payment received\", date: \"Mar 15, 2024\", amount: \"$250.00\" }\n  ],\n  onExport\n}: DataTableProps) {\n  return (\n    <Card>\n      <div className=\"p-4 border-b border-border\">\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"font-semibold text-lg\">{title}</h3>\n          <Button variant=\"outline\" size=\"sm\" onClick={onExport}>\n            {exportButtonText}\n          </Button>\n        </div>\n      </div>\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Status</TableHead>\n            <TableHead>Transaction</TableHead>\n            <TableHead>Date</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {transactions.map((transaction) => (\n            <TableRow key={transaction.id}>\n              <TableCell>\n                <Badge variant={transaction.statusVariant}>{transaction.status}</Badge>\n              </TableCell>\n              <TableCell className=\"font-medium\">{transaction.description}</TableCell>\n              <TableCell>{transaction.date}</TableCell>\n              <TableCell className={cn(\n                \"text-right\",\n                transaction.isNegative && \"text-destructive\"\n              )}>{transaction.amount}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Card>\n  )\n}",
+  "form": "interface CreateAccountFormProps {\n  title?: string\n  description?: string\n  firstNameLabel?: string\n  lastNameLabel?: string\n  emailLabel?: string\n  firstNamePlaceholder?: string\n  lastNamePlaceholder?: string\n  emailPlaceholder?: string\n  cancelButtonText?: string\n  submitButtonText?: string\n  onCancel?: () => void\n  onSubmit?: (data: { firstName: string; lastName: string; email: string }) => void\n}\n\nfunction CreateAccountForm({ \n  title = \"Create Account\",\n  description = \"Fill in your details to get started\",\n  firstNameLabel = \"First Name\",\n  lastNameLabel = \"Last Name\",\n  emailLabel = \"Email\",\n  firstNamePlaceholder = \"John\",\n  lastNamePlaceholder = \"Doe\",\n  emailPlaceholder = \"john@example.com\",\n  cancelButtonText = \"Cancel\",\n  submitButtonText = \"Create Account\",\n  onCancel,\n  onSubmit\n}: CreateAccountFormProps) {\n  const [firstName, setFirstName] = useState(\"\")\n  const [lastName, setLastName] = useState(\"\")\n  const [email, setEmail] = useState(\"\")\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault()\n    onSubmit?.({ firstName, lastName, email })\n  }\n\n  return (\n    <Card className=\"p-6\">\n      <form className=\"space-y-6\" onSubmit={handleSubmit}>\n        <div>\n          <h3 className=\"text-xl font-semibold mb-4\">{title}</h3>\n          <p className=\"text-sm text-muted-foreground\">\n            {description}\n          </p>\n        </div>\n        <Separator />\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"firstName\">{firstNameLabel}</Label>\n            <Input \n              id=\"firstName\" \n              placeholder={firstNamePlaceholder}\n              value={firstName}\n              onChange={(e) => setFirstName(e.target.value)}\n            />\n          </div>\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"lastName\">{lastNameLabel}</Label>\n            <Input \n              id=\"lastName\" \n              placeholder={lastNamePlaceholder}\n              value={lastName}\n              onChange={(e) => setLastName(e.target.value)}\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"email\">{emailLabel}</Label>\n          <div className=\"relative\">\n            <Envelope className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n            <Input \n              id=\"email\" \n              type=\"email\" \n              placeholder={emailPlaceholder} \n              className=\"pl-10\"\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n            />\n          </div>\n        </div>\n        <Separator />\n        <div className=\"flex items-center justify-between gap-4\">\n          <Button variant=\"outline\" type=\"button\" onClick={onCancel}>\n            {cancelButtonText}\n          </Button>\n          <Button type=\"submit\">\n            {submitButtonText}\n            <ArrowRight className=\"ml-2\" />\n          </Button>\n        </div>\n      </form>\n    </Card>\n  )\n}",
+  "taskList": "interface Task {\n  id: string\n  title: string\n  description: string\n  status: string\n  statusColor?: \"accent\" | \"destructive\"\n  badgeText: string\n  badgeVariant?: \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n  icon: React.ReactNode\n}\n\ninterface TaskListProps {\n  title?: string\n  addButtonText?: string\n  tasks?: Task[]\n  onAddTask?: () => void\n}\n\nfunction TaskList({ \n  title = \"Project Tasks\",\n  addButtonText = \"Add Task\",\n  tasks = [\n    {\n      id: \"1\",\n      title: \"Design system documentation\",\n      description: \"Complete the component library documentation\",\n      status: \"Completed\",\n      statusColor: \"accent\" as const,\n      badgeText: \"Design\",\n      badgeVariant: \"secondary\" as const,\n      icon: <CheckCircle weight=\"fill\" className=\"h-6 w-6 text-accent mt-0.5\" />\n    }\n  ],\n  onAddTask\n}: TaskListProps) {\n  return (\n    <Card>\n      <div className=\"p-4 border-b border-border\">\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"font-semibold text-lg\">{title}</h3>\n          <Button size=\"sm\" onClick={onAddTask}>\n            <Plus className=\"mr-2\" />\n            {addButtonText}\n          </Button>\n        </div>\n      </div>\n      <div className=\"divide-y divide-border\">\n        {tasks.map((task) => (\n          <div key={task.id} className=\"p-4 hover:bg-muted/50 transition-colors\">\n            <div className=\"flex items-start gap-4\">\n              {task.icon}\n              <div className=\"flex-1 min-w-0\">\n                <h4 className=\"font-medium\">{task.title}</h4>\n                <p className=\"text-sm text-muted-foreground mt-1\">\n                  {task.description}\n                </p>\n                <div className=\"flex items-center gap-4 mt-3\">\n                  <Badge variant={task.badgeVariant}>{task.badgeText}</Badge>\n                  <span className=\"text-xs text-muted-foreground\">{task.status}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </Card>\n  )\n}",
+  "sidebarNavigation": "interface SidebarNavItem {\n  label: string\n  icon: React.ReactNode\n  variant?: \"default\" | \"ghost\"\n  onClick?: () => void\n}\n\ninterface SidebarNavigationProps {\n  title?: string\n  navItems?: SidebarNavItem[]\n  contentText?: string\n}\n\nfunction SidebarNavigation({ \n  title = \"Dashboard\",\n  navItems = [\n    { label: \"Home\", icon: <House className=\"mr-2\" />, variant: \"ghost\" as const },\n    { label: \"Analytics\", icon: <ChartBar className=\"mr-2\" />, variant: \"default\" as const },\n    { label: \"Projects\", icon: <Folder className=\"mr-2\" />, variant: \"ghost\" as const }\n  ],\n  contentText = \"Main content area\"\n}: SidebarNavigationProps) {\n  return (\n    <div className=\"flex\">\n      <aside className=\"w-64 border-r border-border bg-card/50 p-4\">\n        <div className=\"space-y-6\">\n          <div className=\"flex items-center gap-2 px-2\">\n            <div className=\"h-8 w-8 rounded-lg bg-accent\" />\n            <span className=\"font-bold\">{title}</span>\n          </div>\n          <nav className=\"space-y-1\">\n            {navItems.map((item) => (\n              <Button \n                key={item.label}\n                variant={item.variant || \"ghost\"} \n                className=\"w-full justify-start\"\n                onClick={item.onClick}\n              >\n                {item.icon}\n                {item.label}\n              </Button>\n            ))}\n          </nav>\n        </div>\n      </aside>\n      <div className=\"flex-1 p-6\">\n        <p className=\"text-sm text-muted-foreground\">\n          {contentText}\n        </p>\n      </div>\n    </div>\n  )\n}"
+}
\ No newline at end of file
diff --git a/src/data/snippets/templates.json b/src/data/snippets/templates.json
new file mode 100644
index 0000000..9c959f4
--- /dev/null
+++ b/src/data/snippets/templates.json
@@ -0,0 +1,6 @@
+{
+  "dashboardLayout": "interface StatCard {\n  label: string\n  value: string\n  trend?: string\n}\n\ninterface DashboardLayoutProps {\n  title?: string\n  navItems?: Array<{ label: string; icon: React.ReactNode; variant?: \"default\" | \"ghost\" }>\n  avatarUrl?: string\n  avatarFallback?: string\n  stats?: StatCard[]\n  onNotificationClick?: () => void\n}\n\nfunction DashboardLayout({ \n  title = \"Dashboard\",\n  navItems = [\n    { label: \"Overview\", icon: <House className=\"mr-2\" />, variant: \"default\" as const },\n    { label: \"Analytics\", icon: <ChartBar className=\"mr-2\" />, variant: \"ghost\" as const }\n  ],\n  avatarUrl,\n  avatarFallback = \"U\",\n  stats = [\n    { label: \"Total Revenue\", value: \"$45,231\", trend: \"+20.1% from last month\" }\n  ],\n  onNotificationClick\n}: DashboardLayoutProps) {\n  return (\n    <div className=\"min-h-screen bg-background\">\n      <div className=\"border-b border-border bg-card p-4\">\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"text-xl font-bold\">{title}</h3>\n          <div className=\"flex items-center gap-2\">\n            <Button variant=\"ghost\" size=\"icon\" onClick={onNotificationClick}>\n              <Bell />\n            </Button>\n            <Avatar className=\"h-8 w-8\">\n              {avatarUrl && <AvatarImage src={avatarUrl} />}\n              <AvatarFallback>{avatarFallback}</AvatarFallback>\n            </Avatar>\n          </div>\n        </div>\n      </div>\n      <div className=\"flex\">\n        <aside className=\"w-64 border-r border-border bg-card/30 p-4\">\n          <nav className=\"space-y-1\">\n            {navItems.map((item) => (\n              <Button \n                key={item.label}\n                variant={item.variant || \"ghost\"} \n                className=\"w-full justify-start\"\n              >\n                {item.icon}\n                {item.label}\n              </Button>\n            ))}\n          </nav>\n        </aside>\n        <main className=\"flex-1 p-6\">\n          <h1 className=\"text-3xl font-bold\">Overview</h1>\n          <div className=\"grid grid-cols-3 gap-6 mt-6\">\n            {stats.map((stat) => (\n              <Card key={stat.label} className=\"p-6\">\n                <p className=\"text-sm text-muted-foreground\">{stat.label}</p>\n                <p className=\"text-3xl font-bold mt-2\">{stat.value}</p>\n                {stat.trend && (\n                  <p className=\"text-sm text-accent mt-2\">{stat.trend}</p>\n                )}\n              </Card>\n            ))}\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}",
+  "landingPage": "interface LandingPageProps {\n  brandName?: string\n  navItems?: string[]\n  badge?: string\n  headline?: string\n  description?: string\n  primaryCta?: string\n  secondaryCta?: string\n  onPrimaryCta?: () => void\n  onSecondaryCta?: () => void\n}\n\nfunction LandingPage({ \n  brandName = \"ProductName\",\n  navItems = [\"Features\", \"Sign Up\"],\n  badge = \"New Release\",\n  headline = \"Build Amazing Products Faster\",\n  description = \"The complete toolkit for modern product development.\",\n  primaryCta = \"Get Started\",\n  secondaryCta,\n  onPrimaryCta,\n  onSecondaryCta\n}: LandingPageProps) {\n  return (\n    <div className=\"min-h-screen\">\n      <div className=\"border-b border-border bg-card p-4\">\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-2\">\n            <div className=\"h-8 w-8 rounded-lg bg-accent\" />\n            <h3 className=\"text-xl font-bold\">{brandName}</h3>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {navItems.map((item) => (\n              <Button key={item} variant=\"ghost\" size=\"sm\">{item}</Button>\n            ))}\n          </div>\n        </div>\n      </div>\n      <div className=\"p-12 text-center bg-gradient-to-br from-primary/20 to-accent/20\">\n        <Badge className=\"mb-4\">{badge}</Badge>\n        <h1 className=\"text-5xl font-bold mb-6\">\n          {headline}\n        </h1>\n        <p className=\"text-xl text-muted-foreground mb-8 max-w-2xl mx-auto\">\n          {description}\n        </p>\n        <div className=\"flex items-center justify-center gap-4\">\n          <Button size=\"lg\" onClick={onPrimaryCta}>\n            {primaryCta}\n            <ArrowRight className=\"ml-2\" />\n          </Button>\n          {secondaryCta && (\n            <Button size=\"lg\" variant=\"outline\" onClick={onSecondaryCta}>\n              {secondaryCta}\n            </Button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}",
+  "ecommercePage": "interface EcommercePageProps {\n  storeName?: string\n  productBadge?: string\n  productName?: string\n  productPrice?: string\n  originalPrice?: string\n  onAddToCart?: () => void\n}\n\nfunction EcommercePage({ \n  storeName = \"Store\",\n  productBadge = \"New Arrival\",\n  productName = \"Premium Product\",\n  productPrice = \"$299.00\",\n  originalPrice,\n  onAddToCart\n}: EcommercePageProps) {\n  return (\n    <div className=\"min-h-screen\">\n      <div className=\"border-b border-border bg-card p-4\">\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"text-xl font-bold\">{storeName}</h3>\n          <Button variant=\"ghost\" size=\"icon\">\n            <ShoppingCart />\n          </Button>\n        </div>\n      </div>\n      <div className=\"p-8\">\n        <div className=\"grid grid-cols-2 gap-12\">\n          <div className=\"aspect-square rounded-lg bg-gradient-to-br from-primary to-accent\" />\n          <div className=\"space-y-6\">\n            <Badge>{productBadge}</Badge>\n            <h1 className=\"text-4xl font-bold\">{productName}</h1>\n            <div className=\"flex items-baseline gap-3\">\n              <span className=\"text-3xl font-bold\">{productPrice}</span>\n              {originalPrice && (\n                <span className=\"text-lg text-muted-foreground line-through\">\n                  {originalPrice}\n                </span>\n              )}\n            </div>\n            <Button size=\"lg\" className=\"w-full\" onClick={onAddToCart}>\n              <ShoppingCart className=\"mr-2\" />\n              Add to Cart\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}",
+  "blogArticle": "interface BlogArticleProps {\n  blogName?: string\n  tags?: string[]\n  title?: string\n  authorName?: string\n  authorAvatar?: string\n  authorFallback?: string\n  date?: string\n  readTime?: string\n  excerpt?: string\n}\n\nfunction BlogArticle({ \n  blogName = \"Blog\",\n  tags = [\"Design\", \"Tutorial\"],\n  title = \"Building a Comprehensive Component Library\",\n  authorName = \"Alex Writer\",\n  authorAvatar,\n  authorFallback = \"AW\",\n  date = \"March 15, 2024\",\n  readTime = \"10 min read\",\n  excerpt = \"Design systems have become an essential part of modern product development.\"\n}: BlogArticleProps) {\n  return (\n    <div className=\"min-h-screen\">\n      <div className=\"border-b border-border bg-card p-4\">\n        <h3 className=\"text-xl font-bold\">{blogName}</h3>\n      </div>\n      <div className=\"p-8\">\n        <div className=\"max-w-4xl mx-auto space-y-6\">\n          <div className=\"flex gap-2\">\n            {tags.map((tag, idx) => (\n              <Badge key={tag} variant={idx === 0 ? \"default\" : \"secondary\"}>\n                {tag}\n              </Badge>\n            ))}\n          </div>\n          <h1 className=\"text-5xl font-bold\">\n            {title}\n          </h1>\n          <div className=\"flex items-center gap-4\">\n            <Avatar className=\"h-12 w-12\">\n              {authorAvatar && <AvatarImage src={authorAvatar} />}\n              <AvatarFallback>{authorFallback}</AvatarFallback>\n            </Avatar>\n            <div>\n              <p className=\"font-medium\">{authorName}</p>\n              <p className=\"text-sm text-muted-foreground\">\n                {date} · {readTime}\n              </p>\n            </div>\n          </div>\n          <div className=\"aspect-video rounded-lg bg-gradient-to-br from-primary to-accent\" />\n          <p className=\"text-lg text-muted-foreground leading-relaxed\">\n            {excerpt}\n          </p>\n        </div>\n      </div>\n    </div>\n  )\n}"
+}
\ No newline at end of file
diff --git a/src/lib/db-snippets.ts b/src/lib/db-snippets.ts
index c3707d7..a28d8a4 100644
--- a/src/lib/db-snippets.ts
+++ b/src/lib/db-snippets.ts
@@ -6,6 +6,8 @@ import type { Snippet, SnippetTemplate } from './types'
 import { initDB, saveDB, getFlaskAdapter } from './db-core'
 import { mapRowToObject, mapRowsToObjects } from './db-mapper'
 import { ensureDefaultNamespace } from './db-namespaces'
+import seedSnippetsData from '@/data/seed-snippets.json'
+import seedTemplatesData from '@/data/seed-templates.json'
 
 export async function getAllSnippets(): Promise<Snippet[]> {
   const adapter = getFlaskAdapter()
diff --git a/src/lib/snippets/atoms.ts b/src/lib/snippets/atoms.ts
index 3d33b94..6050cec 100644
--- a/src/lib/snippets/atoms.ts
+++ b/src/lib/snippets/atoms.ts
@@ -1,209 +1,9 @@
 /**
  * Atoms - Basic UI building blocks code snippets
+ * Data loaded from JSON for better maintainability
  */
 
-export const atomsCodeSnippets = {
-  buttonDefault: `interface ButtonProps {
-  children?: string
-  onClick?: () => void
-}
+import atomsData from '@/data/snippets/atoms.json'
 
-function DefaultButton({ children = "Default", onClick }: ButtonProps) {
-  return <Button onClick={onClick}>{children}</Button>
-}`,
-  buttonSecondary: `interface ButtonProps {
-  children?: string
-  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"
-  onClick?: () => void
-}
-
-function CustomButton({ children = "Secondary", variant = "secondary", onClick }: ButtonProps) {
-  return <Button variant={variant} onClick={onClick}>{children}</Button>
-}`,
-  buttonDestructive: `interface DestructiveButtonProps {
-  children?: string
-  onClick?: () => void
-}
-
-function DestructiveButton({ children = "Destructive", onClick }: DestructiveButtonProps) {
-  return <Button variant="destructive" onClick={onClick}>{children}</Button>
-}`,
-  buttonOutline: `interface OutlineButtonProps {
-  children?: string
-  onClick?: () => void
-}
-
-function OutlineButton({ children = "Outline", onClick }: OutlineButtonProps) {
-  return <Button variant="outline" onClick={onClick}>{children}</Button>
-}`,
-  buttonGhost: `interface GhostButtonProps {
-  children?: string
-  onClick?: () => void
-}
-
-function GhostButton({ children = "Ghost", onClick }: GhostButtonProps) {
-  return <Button variant="ghost" onClick={onClick}>{children}</Button>
-}`,
-  buttonLink: `interface LinkButtonProps {
-  children?: string
-  onClick?: () => void
-}
-
-function LinkButton({ children = "Link", onClick }: LinkButtonProps) {
-  return <Button variant="link" onClick={onClick}>{children}</Button>
-}`,
-  buttonSizes: `interface ButtonSizesProps {
-  smallText?: string
-  defaultText?: string
-  largeText?: string
-  onSmallClick?: () => void
-  onDefaultClick?: () => void
-  onLargeClick?: () => void
-  onIconClick?: () => void
-}
-
-function ButtonSizes({ 
-  smallText = "Small", 
-  defaultText = "Default", 
-  largeText = "Large",
-  onSmallClick,
-  onDefaultClick,
-  onLargeClick,
-  onIconClick
-}: ButtonSizesProps) {
-  return (
-    <>
-      <Button size="sm" onClick={onSmallClick}>{smallText}</Button>
-      <Button size="default" onClick={onDefaultClick}>{defaultText}</Button>
-      <Button size="lg" onClick={onLargeClick}>{largeText}</Button>
-      <Button size="icon" onClick={onIconClick}>
-        <Heart weight="fill" />
-      </Button>
-    </>
-  )
-}`,
-  buttonWithIcons: `interface IconButtonProps {
-  primaryText?: string
-  secondaryText?: string
-  onPrimaryClick?: () => void
-  onSecondaryClick?: () => void
-}
-
-function IconButtons({ 
-  primaryText = "Favorite", 
-  secondaryText = "Add Item",
-  onPrimaryClick,
-  onSecondaryClick
-}: IconButtonProps) {
-  return (
-    <>
-      <Button onClick={onPrimaryClick}>
-        <Star weight="fill" />
-        {primaryText}
-      </Button>
-      <Button variant="outline" onClick={onSecondaryClick}>
-        <Plus weight="bold" />
-        {secondaryText}
-      </Button>
-    </>
-  )
-}`,
-  badgeVariants: `interface BadgeVariantsProps {
-  defaultText?: string
-  secondaryText?: string
-  destructiveText?: string
-  outlineText?: string
-}
-
-function BadgeVariants({ 
-  defaultText = "Default",
-  secondaryText = "Secondary",
-  destructiveText = "Destructive",
-  outlineText = "Outline"
-}: BadgeVariantsProps) {
-  return (
-    <>
-      <Badge>{defaultText}</Badge>
-      <Badge variant="secondary">{secondaryText}</Badge>
-      <Badge variant="destructive">{destructiveText}</Badge>
-      <Badge variant="outline">{outlineText}</Badge>
-    </>
-  )
-}`,
-  badgeWithIcons: `interface IconBadgeProps {
-  completedText?: string
-  failedText?: string
-}
-
-function IconBadges({ 
-  completedText = "Completed",
-  failedText = "Failed"
-}: IconBadgeProps) {
-  return (
-    <>
-      <Badge>
-        <Check weight="bold" className="mr-1" />
-        {completedText}
-      </Badge>
-      <Badge variant="destructive">
-        <X weight="bold" className="mr-1" />
-        {failedText}
-      </Badge>
-    </>
-  )
-}`,
-  inputBasic: `interface InputProps {
-  placeholder?: string
-  value?: string
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-}
-
-function BasicInput({ placeholder = "Default input", value, onChange }: InputProps) {
-  return <Input placeholder={placeholder} value={value} onChange={onChange} />
-}`,
-  inputWithIcon: `interface SearchInputProps {
-  placeholder?: string
-  value?: string
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-}
-
-function SearchInput({ placeholder = "Search...", value, onChange }: SearchInputProps) {
-  return (
-    <div className="relative">
-      <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-      <Input placeholder={placeholder} className="pl-10" value={value} onChange={onChange} />
-    </div>
-  )
-}`,
-  inputTypes: `interface TypedInputsProps {
-  textPlaceholder?: string
-  emailPlaceholder?: string
-  passwordPlaceholder?: string
-  numberPlaceholder?: string
-  onTextChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-  onEmailChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-  onPasswordChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-  onNumberChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-}
-
-function TypedInputs({ 
-  textPlaceholder = "Text input",
-  emailPlaceholder = "email@example.com",
-  passwordPlaceholder = "Password",
-  numberPlaceholder = "123",
-  onTextChange,
-  onEmailChange,
-  onPasswordChange,
-  onNumberChange
-}: TypedInputsProps) {
-  return (
-    <>
-      <Input type="text" placeholder={textPlaceholder} onChange={onTextChange} />
-      <Input type="email" placeholder={emailPlaceholder} onChange={onEmailChange} />
-      <Input type="password" placeholder={passwordPlaceholder} onChange={onPasswordChange} />
-      <Input type="number" placeholder={numberPlaceholder} onChange={onNumberChange} />
-    </>
-  )
-}`,
-}
+export const atomsCodeSnippets: Record<string, string> = atomsData
 
diff --git a/src/lib/snippets/molecules.ts b/src/lib/snippets/molecules.ts
index d01b800..c0383cf 100644
--- a/src/lib/snippets/molecules.ts
+++ b/src/lib/snippets/molecules.ts
@@ -1,219 +1,8 @@
 /**
  * Molecules - Composite UI components code snippets
+ * Data loaded from JSON for better maintainability
  */
 
-export const moleculesCodeSnippets = {
-  formField: `interface FormFieldProps {
-  label?: string
-  placeholder?: string
-  helperText?: string
-  id?: string
-  value?: string
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-}
-
-function EmailFormField({ 
-  label = "Email Address",
-  placeholder = "john@example.com",
-  helperText = "We'll never share your email with anyone else.",
-  id = "email",
-  value,
-  onChange
-}: FormFieldProps) {
-  return (
-    <div className="space-y-2">
-      <Label htmlFor={id}>{label}</Label>
-      <div className="relative">
-        <Envelope className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-        <Input id={id} type="email" placeholder={placeholder} className="pl-10" value={value} onChange={onChange} />
-      </div>
-      <p className="text-sm text-muted-foreground">
-        {helperText}
-      </p>
-    </div>
-  )
-}`,
-  searchBar: `interface SearchBarProps {
-  placeholder?: string
-  value?: string
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-}
-
-function SearchBar({ placeholder = "Search...", value, onChange }: SearchBarProps) {
-  return (
-    <div className="relative">
-      <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-      <Input placeholder={placeholder} className="pl-10" value={value} onChange={onChange} />
-    </div>
-  )
-}`,
-  searchBarWithButton: `interface SearchBarWithButtonProps {
-  placeholder?: string
-  buttonText?: string
-  value?: string
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-  onSearch?: () => void
-}
-
-function SearchBarWithButton({ 
-  placeholder = "Search...",
-  buttonText = "Search",
-  value,
-  onChange,
-  onSearch
-}: SearchBarWithButtonProps) {
-  return (
-    <div className="flex gap-2">
-      <div className="relative flex-1">
-        <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-        <Input placeholder={placeholder} className="pl-10" value={value} onChange={onChange} />
-      </div>
-      <Button onClick={onSearch}>{buttonText}</Button>
-    </div>
-  )
-}`,
-  userCard: `interface UserCardProps {
-  name?: string
-  username?: string
-  bio?: string
-  avatarUrl?: string
-  avatarFallback?: string
-  buttonText?: string
-  onButtonClick?: () => void
-}
-
-function UserCard({ 
-  name = "Alex Morgan",
-  username = "@alexmorgan",
-  bio = "Product designer passionate about creating delightful user experiences.",
-  avatarUrl = "https://i.pravatar.cc/150?img=1",
-  avatarFallback = "AM",
-  buttonText = "Follow",
-  onButtonClick
-}: UserCardProps) {
-  return (
-    <Card className="p-6">
-      <div className="flex items-start gap-4">
-        <Avatar className="h-12 w-12">
-          <AvatarImage src={avatarUrl} />
-          <AvatarFallback>{avatarFallback}</AvatarFallback>
-        </Avatar>
-        <div className="flex-1 min-w-0">
-          <h3 className="font-semibold text-lg">{name}</h3>
-          <p className="text-sm text-muted-foreground">{username}</p>
-          <p className="text-sm mt-2">
-            {bio}
-          </p>
-        </div>
-        <Button size="sm" variant="outline" onClick={onButtonClick}>
-          {buttonText}
-        </Button>
-      </div>
-    </Card>
-  )
-}`,
-  socialActions: `interface SocialActionsProps {
-  likeText?: string
-  commentText?: string
-  shareText?: string
-  onLike?: () => void
-  onComment?: () => void
-  onShare?: () => void
-}
-
-function SocialActions({ 
-  likeText = "Like",
-  commentText = "Comment",
-  shareText = "Share",
-  onLike,
-  onComment,
-  onShare
-}: SocialActionsProps) {
-  return (
-    <div className="flex items-center gap-2">
-      <Button variant="ghost" size="sm" onClick={onLike}>
-        <Heart className="mr-2" />
-        {likeText}
-      </Button>
-      <Button variant="ghost" size="sm" onClick={onComment}>
-        <ChatCircle className="mr-2" />
-        {commentText}
-      </Button>
-      <Button variant="ghost" size="sm" onClick={onShare}>
-        <Share className="mr-2" />
-        {shareText}
-      </Button>
-    </div>
-  )
-}`,
-  statusIndicator: `interface StatusIndicatorProps {
-  statusText?: string
-  badgeText?: string
-  isActive?: boolean
-}
-
-function StatusIndicator({ 
-  statusText = "System Online",
-  badgeText = "Active",
-  isActive = true
-}: StatusIndicatorProps) {
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center gap-3">
-        <div className={cn(
-          "h-3 w-3 rounded-full bg-accent",
-          isActive && "animate-pulse"
-        )} />
-        <span className="font-medium">{statusText}</span>
-      </div>
-      <Badge>{badgeText}</Badge>
-    </div>
-  )
-}`,
-  contentCard: `interface ContentCardProps {
-  title?: string
-  description?: string
-  date?: string
-  readTime?: string
-  tags?: string[]
-}
-
-function ContentCard({ 
-  title = "Building Scalable Design Systems",
-  description = "Learn how to create and maintain design systems that grow with your team.",
-  date = "Mar 15, 2024",
-  readTime = "5 min read",
-  tags = ["Design", "System"]
-}: ContentCardProps) {
-  return (
-    <Card className="p-6 hover:shadow-lg transition-shadow">
-      <div className="space-y-4">
-        <div className="flex items-start justify-between gap-4">
-          <div className="space-y-1">
-            <h3 className="font-semibold text-lg line-clamp-2">
-              {title}
-            </h3>
-            <p className="text-sm text-muted-foreground">
-              {description}
-            </p>
-          </div>
-        </div>
-        <div className="flex items-center gap-4 text-sm text-muted-foreground">
-          <div className="flex items-center gap-1">
-            <Calendar className="h-4 w-4" />
-            <span>{date}</span>
-          </div>
-          <span>•</span>
-          <span>{readTime}</span>
-        </div>
-        <div className="flex gap-2">
-          {tags.map((tag) => (
-            <Badge key={tag} variant="outline">{tag}</Badge>
-          ))}
-        </div>
-      </div>
-    </Card>
-  )
-}`,
-}
+import moleculesData from '@/data/snippets/molecules.json'
 
+export const moleculesCodeSnippets: Record<string, string> = moleculesData
diff --git a/src/lib/snippets/organisms.ts b/src/lib/snippets/organisms.ts
index 49af3e4..c99f710 100644
--- a/src/lib/snippets/organisms.ts
+++ b/src/lib/snippets/organisms.ts
@@ -1,338 +1,8 @@
 /**
  * Organisms - Complex UI patterns code snippets
+ * Data loaded from JSON for better maintainability
  */
 
-export const organismsCodeSnippets = {
-  navigationBar: `interface NavigationBarProps {
-  brandName?: string
-  navItems?: Array<{ label: string; icon: React.ReactNode; onClick?: () => void }>
-  avatarUrl?: string
-  avatarFallback?: string
-  onNotificationClick?: () => void
-  onSettingsClick?: () => void
-}
-
-function NavigationBar({ 
-  brandName = "BrandName",
-  navItems = [
-    { label: "Home", icon: <House className="mr-2" /> },
-    { label: "Analytics", icon: <ChartBar className="mr-2" /> },
-    { label: "Projects", icon: <Folder className="mr-2" /> }
-  ],
-  avatarUrl = "https://i.pravatar.cc/150?img=3",
-  avatarFallback = "U",
-  onNotificationClick,
-  onSettingsClick
-}: NavigationBarProps) {
-  return (
-    <div className="border-b border-border bg-card p-4">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-6">
-          <h3 className="text-xl font-bold">{brandName}</h3>
-          <nav className="hidden md:flex items-center gap-1">
-            {navItems.map((item) => (
-              <Button key={item.label} variant="ghost" size="sm" onClick={item.onClick}>
-                {item.icon}
-                {item.label}
-              </Button>
-            ))}
-          </nav>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="ghost" size="icon" onClick={onNotificationClick}>
-            <Bell />
-          </Button>
-          <Button variant="ghost" size="icon" onClick={onSettingsClick}>
-            <Gear />
-          </Button>
-          <Avatar className="h-8 w-8">
-            <AvatarImage src={avatarUrl} />
-            <AvatarFallback>{avatarFallback}</AvatarFallback>
-          </Avatar>
-        </div>
-      </div>
-    </div>
-  )
-}`,
-  dataTable: `interface Transaction {
-  id: string
-  status: string
-  statusVariant?: "default" | "secondary" | "destructive" | "outline"
-  description: string
-  date: string
-  amount: string
-  isNegative?: boolean
-}
-
-interface DataTableProps {
-  title?: string
-  exportButtonText?: string
-  transactions?: Transaction[]
-  onExport?: () => void
-}
-
-function DataTable({ 
-  title = "Recent Transactions",
-  exportButtonText = "Export",
-  transactions = [
-    { id: "1", status: "Completed", description: "Payment received", date: "Mar 15, 2024", amount: "$250.00" }
-  ],
-  onExport
-}: DataTableProps) {
-  return (
-    <Card>
-      <div className="p-4 border-b border-border">
-        <div className="flex items-center justify-between">
-          <h3 className="font-semibold text-lg">{title}</h3>
-          <Button variant="outline" size="sm" onClick={onExport}>
-            {exportButtonText}
-          </Button>
-        </div>
-      </div>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Status</TableHead>
-            <TableHead>Transaction</TableHead>
-            <TableHead>Date</TableHead>
-            <TableHead className="text-right">Amount</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {transactions.map((transaction) => (
-            <TableRow key={transaction.id}>
-              <TableCell>
-                <Badge variant={transaction.statusVariant}>{transaction.status}</Badge>
-              </TableCell>
-              <TableCell className="font-medium">{transaction.description}</TableCell>
-              <TableCell>{transaction.date}</TableCell>
-              <TableCell className={cn(
-                "text-right",
-                transaction.isNegative && "text-destructive"
-              )}>{transaction.amount}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </Card>
-  )
-}`,
-  form: `interface CreateAccountFormProps {
-  title?: string
-  description?: string
-  firstNameLabel?: string
-  lastNameLabel?: string
-  emailLabel?: string
-  firstNamePlaceholder?: string
-  lastNamePlaceholder?: string
-  emailPlaceholder?: string
-  cancelButtonText?: string
-  submitButtonText?: string
-  onCancel?: () => void
-  onSubmit?: (data: { firstName: string; lastName: string; email: string }) => void
-}
-
-function CreateAccountForm({ 
-  title = "Create Account",
-  description = "Fill in your details to get started",
-  firstNameLabel = "First Name",
-  lastNameLabel = "Last Name",
-  emailLabel = "Email",
-  firstNamePlaceholder = "John",
-  lastNamePlaceholder = "Doe",
-  emailPlaceholder = "john@example.com",
-  cancelButtonText = "Cancel",
-  submitButtonText = "Create Account",
-  onCancel,
-  onSubmit
-}: CreateAccountFormProps) {
-  const [firstName, setFirstName] = useState("")
-  const [lastName, setLastName] = useState("")
-  const [email, setEmail] = useState("")
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    onSubmit?.({ firstName, lastName, email })
-  }
-
-  return (
-    <Card className="p-6">
-      <form className="space-y-6" onSubmit={handleSubmit}>
-        <div>
-          <h3 className="text-xl font-semibold mb-4">{title}</h3>
-          <p className="text-sm text-muted-foreground">
-            {description}
-          </p>
-        </div>
-        <Separator />
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <Label htmlFor="firstName">{firstNameLabel}</Label>
-            <Input 
-              id="firstName" 
-              placeholder={firstNamePlaceholder}
-              value={firstName}
-              onChange={(e) => setFirstName(e.target.value)}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="lastName">{lastNameLabel}</Label>
-            <Input 
-              id="lastName" 
-              placeholder={lastNamePlaceholder}
-              value={lastName}
-              onChange={(e) => setLastName(e.target.value)}
-            />
-          </div>
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="email">{emailLabel}</Label>
-          <div className="relative">
-            <Envelope className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-            <Input 
-              id="email" 
-              type="email" 
-              placeholder={emailPlaceholder} 
-              className="pl-10"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
-        </div>
-        <Separator />
-        <div className="flex items-center justify-between gap-4">
-          <Button variant="outline" type="button" onClick={onCancel}>
-            {cancelButtonText}
-          </Button>
-          <Button type="submit">
-            {submitButtonText}
-            <ArrowRight className="ml-2" />
-          </Button>
-        </div>
-      </form>
-    </Card>
-  )
-}`,
-  taskList: `interface Task {
-  id: string
-  title: string
-  description: string
-  status: string
-  statusColor?: "accent" | "destructive"
-  badgeText: string
-  badgeVariant?: "default" | "secondary" | "destructive" | "outline"
-  icon: React.ReactNode
-}
-
-interface TaskListProps {
-  title?: string
-  addButtonText?: string
-  tasks?: Task[]
-  onAddTask?: () => void
-}
-
-function TaskList({ 
-  title = "Project Tasks",
-  addButtonText = "Add Task",
-  tasks = [
-    {
-      id: "1",
-      title: "Design system documentation",
-      description: "Complete the component library documentation",
-      status: "Completed",
-      statusColor: "accent" as const,
-      badgeText: "Design",
-      badgeVariant: "secondary" as const,
-      icon: <CheckCircle weight="fill" className="h-6 w-6 text-accent mt-0.5" />
-    }
-  ],
-  onAddTask
-}: TaskListProps) {
-  return (
-    <Card>
-      <div className="p-4 border-b border-border">
-        <div className="flex items-center justify-between">
-          <h3 className="font-semibold text-lg">{title}</h3>
-          <Button size="sm" onClick={onAddTask}>
-            <Plus className="mr-2" />
-            {addButtonText}
-          </Button>
-        </div>
-      </div>
-      <div className="divide-y divide-border">
-        {tasks.map((task) => (
-          <div key={task.id} className="p-4 hover:bg-muted/50 transition-colors">
-            <div className="flex items-start gap-4">
-              {task.icon}
-              <div className="flex-1 min-w-0">
-                <h4 className="font-medium">{task.title}</h4>
-                <p className="text-sm text-muted-foreground mt-1">
-                  {task.description}
-                </p>
-                <div className="flex items-center gap-4 mt-3">
-                  <Badge variant={task.badgeVariant}>{task.badgeText}</Badge>
-                  <span className="text-xs text-muted-foreground">{task.status}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </Card>
-  )
-}`,
-  sidebarNavigation: `interface SidebarNavItem {
-  label: string
-  icon: React.ReactNode
-  variant?: "default" | "ghost"
-  onClick?: () => void
-}
-
-interface SidebarNavigationProps {
-  title?: string
-  navItems?: SidebarNavItem[]
-  contentText?: string
-}
-
-function SidebarNavigation({ 
-  title = "Dashboard",
-  navItems = [
-    { label: "Home", icon: <House className="mr-2" />, variant: "ghost" as const },
-    { label: "Analytics", icon: <ChartBar className="mr-2" />, variant: "default" as const },
-    { label: "Projects", icon: <Folder className="mr-2" />, variant: "ghost" as const }
-  ],
-  contentText = "Main content area"
-}: SidebarNavigationProps) {
-  return (
-    <div className="flex">
-      <aside className="w-64 border-r border-border bg-card/50 p-4">
-        <div className="space-y-6">
-          <div className="flex items-center gap-2 px-2">
-            <div className="h-8 w-8 rounded-lg bg-accent" />
-            <span className="font-bold">{title}</span>
-          </div>
-          <nav className="space-y-1">
-            {navItems.map((item) => (
-              <Button 
-                key={item.label}
-                variant={item.variant || "ghost"} 
-                className="w-full justify-start"
-                onClick={item.onClick}
-              >
-                {item.icon}
-                {item.label}
-              </Button>
-            ))}
-          </nav>
-        </div>
-      </aside>
-      <div className="flex-1 p-6">
-        <p className="text-sm text-muted-foreground">
-          {contentText}
-        </p>
-      </div>
-    </div>
-  )
-}`,
-}
+import organismsData from '@/data/snippets/organisms.json'
 
+export const organismsCodeSnippets: Record<string, string> = organismsData
diff --git a/src/lib/snippets/templates.ts b/src/lib/snippets/templates.ts
index 76ee6ea..cada463 100644
--- a/src/lib/snippets/templates.ts
+++ b/src/lib/snippets/templates.ts
@@ -1,256 +1,8 @@
 /**
  * Templates - Complete page layouts code snippets
+ * Data loaded from JSON for better maintainability
  */
 
-export const templatesCodeSnippets = {
-  dashboardLayout: `interface StatCard {
-  label: string
-  value: string
-  trend?: string
-}
+import templatesData from '@/data/snippets/templates.json'
 
-interface DashboardLayoutProps {
-  title?: string
-  navItems?: Array<{ label: string; icon: React.ReactNode; variant?: "default" | "ghost" }>
-  avatarUrl?: string
-  avatarFallback?: string
-  stats?: StatCard[]
-  onNotificationClick?: () => void
-}
-
-function DashboardLayout({ 
-  title = "Dashboard",
-  navItems = [
-    { label: "Overview", icon: <House className="mr-2" />, variant: "default" as const },
-    { label: "Analytics", icon: <ChartBar className="mr-2" />, variant: "ghost" as const }
-  ],
-  avatarUrl,
-  avatarFallback = "U",
-  stats = [
-    { label: "Total Revenue", value: "$45,231", trend: "+20.1% from last month" }
-  ],
-  onNotificationClick
-}: DashboardLayoutProps) {
-  return (
-    <div className="min-h-screen bg-background">
-      <div className="border-b border-border bg-card p-4">
-        <div className="flex items-center justify-between">
-          <h3 className="text-xl font-bold">{title}</h3>
-          <div className="flex items-center gap-2">
-            <Button variant="ghost" size="icon" onClick={onNotificationClick}>
-              <Bell />
-            </Button>
-            <Avatar className="h-8 w-8">
-              {avatarUrl && <AvatarImage src={avatarUrl} />}
-              <AvatarFallback>{avatarFallback}</AvatarFallback>
-            </Avatar>
-          </div>
-        </div>
-      </div>
-      <div className="flex">
-        <aside className="w-64 border-r border-border bg-card/30 p-4">
-          <nav className="space-y-1">
-            {navItems.map((item) => (
-              <Button 
-                key={item.label}
-                variant={item.variant || "ghost"} 
-                className="w-full justify-start"
-              >
-                {item.icon}
-                {item.label}
-              </Button>
-            ))}
-          </nav>
-        </aside>
-        <main className="flex-1 p-6">
-          <h1 className="text-3xl font-bold">Overview</h1>
-          <div className="grid grid-cols-3 gap-6 mt-6">
-            {stats.map((stat) => (
-              <Card key={stat.label} className="p-6">
-                <p className="text-sm text-muted-foreground">{stat.label}</p>
-                <p className="text-3xl font-bold mt-2">{stat.value}</p>
-                {stat.trend && (
-                  <p className="text-sm text-accent mt-2">{stat.trend}</p>
-                )}
-              </Card>
-            ))}
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}`,
-  landingPage: `interface LandingPageProps {
-  brandName?: string
-  navItems?: string[]
-  badge?: string
-  headline?: string
-  description?: string
-  primaryCta?: string
-  secondaryCta?: string
-  onPrimaryCta?: () => void
-  onSecondaryCta?: () => void
-}
-
-function LandingPage({ 
-  brandName = "ProductName",
-  navItems = ["Features", "Sign Up"],
-  badge = "New Release",
-  headline = "Build Amazing Products Faster",
-  description = "The complete toolkit for modern product development.",
-  primaryCta = "Get Started",
-  secondaryCta,
-  onPrimaryCta,
-  onSecondaryCta
-}: LandingPageProps) {
-  return (
-    <div className="min-h-screen">
-      <div className="border-b border-border bg-card p-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="h-8 w-8 rounded-lg bg-accent" />
-            <h3 className="text-xl font-bold">{brandName}</h3>
-          </div>
-          <div className="flex items-center gap-2">
-            {navItems.map((item) => (
-              <Button key={item} variant="ghost" size="sm">{item}</Button>
-            ))}
-          </div>
-        </div>
-      </div>
-      <div className="p-12 text-center bg-gradient-to-br from-primary/20 to-accent/20">
-        <Badge className="mb-4">{badge}</Badge>
-        <h1 className="text-5xl font-bold mb-6">
-          {headline}
-        </h1>
-        <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
-          {description}
-        </p>
-        <div className="flex items-center justify-center gap-4">
-          <Button size="lg" onClick={onPrimaryCta}>
-            {primaryCta}
-            <ArrowRight className="ml-2" />
-          </Button>
-          {secondaryCta && (
-            <Button size="lg" variant="outline" onClick={onSecondaryCta}>
-              {secondaryCta}
-            </Button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}`,
-  ecommercePage: `interface EcommercePageProps {
-  storeName?: string
-  productBadge?: string
-  productName?: string
-  productPrice?: string
-  originalPrice?: string
-  onAddToCart?: () => void
-}
-
-function EcommercePage({ 
-  storeName = "Store",
-  productBadge = "New Arrival",
-  productName = "Premium Product",
-  productPrice = "$299.00",
-  originalPrice,
-  onAddToCart
-}: EcommercePageProps) {
-  return (
-    <div className="min-h-screen">
-      <div className="border-b border-border bg-card p-4">
-        <div className="flex items-center justify-between">
-          <h3 className="text-xl font-bold">{storeName}</h3>
-          <Button variant="ghost" size="icon">
-            <ShoppingCart />
-          </Button>
-        </div>
-      </div>
-      <div className="p-8">
-        <div className="grid grid-cols-2 gap-12">
-          <div className="aspect-square rounded-lg bg-gradient-to-br from-primary to-accent" />
-          <div className="space-y-6">
-            <Badge>{productBadge}</Badge>
-            <h1 className="text-4xl font-bold">{productName}</h1>
-            <div className="flex items-baseline gap-3">
-              <span className="text-3xl font-bold">{productPrice}</span>
-              {originalPrice && (
-                <span className="text-lg text-muted-foreground line-through">
-                  {originalPrice}
-                </span>
-              )}
-            </div>
-            <Button size="lg" className="w-full" onClick={onAddToCart}>
-              <ShoppingCart className="mr-2" />
-              Add to Cart
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}`,
-  blogArticle: `interface BlogArticleProps {
-  blogName?: string
-  tags?: string[]
-  title?: string
-  authorName?: string
-  authorAvatar?: string
-  authorFallback?: string
-  date?: string
-  readTime?: string
-  excerpt?: string
-}
-
-function BlogArticle({ 
-  blogName = "Blog",
-  tags = ["Design", "Tutorial"],
-  title = "Building a Comprehensive Component Library",
-  authorName = "Alex Writer",
-  authorAvatar,
-  authorFallback = "AW",
-  date = "March 15, 2024",
-  readTime = "10 min read",
-  excerpt = "Design systems have become an essential part of modern product development."
-}: BlogArticleProps) {
-  return (
-    <div className="min-h-screen">
-      <div className="border-b border-border bg-card p-4">
-        <h3 className="text-xl font-bold">{blogName}</h3>
-      </div>
-      <div className="p-8">
-        <div className="max-w-4xl mx-auto space-y-6">
-          <div className="flex gap-2">
-            {tags.map((tag, idx) => (
-              <Badge key={tag} variant={idx === 0 ? "default" : "secondary"}>
-                {tag}
-              </Badge>
-            ))}
-          </div>
-          <h1 className="text-5xl font-bold">
-            {title}
-          </h1>
-          <div className="flex items-center gap-4">
-            <Avatar className="h-12 w-12">
-              {authorAvatar && <AvatarImage src={authorAvatar} />}
-              <AvatarFallback>{authorFallback}</AvatarFallback>
-            </Avatar>
-            <div>
-              <p className="font-medium">{authorName}</p>
-              <p className="text-sm text-muted-foreground">
-                {date} · {readTime}
-              </p>
-            </div>
-          </div>
-          <div className="aspect-video rounded-lg bg-gradient-to-br from-primary to-accent" />
-          <p className="text-lg text-muted-foreground leading-relaxed">
-            {excerpt}
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}`,
-}
+export const templatesCodeSnippets: Record<string, string> = templatesData