@catalystsoftware/ui 1.0.12 → 1.0.14

package/dist/components/catalyst-ui/prompt/snippets.tsx

@@ -0,0 +1,1378 @@
+// REUSABLE COMPONENTS TEMPLATE
+
+const importReadFirst = {
+    name: 'IMPORTANT READ FIRST',
+    category: 'Default',
+    value: `YOU ARE NOT ALLOWED TO START PROVIDING AN ANSWER TILL AFTER YOU HAVE READ ALL THE DATA IN THE PROMPT THAT I HAVE SENT, IN ITS ENTIRETY. NO MATTER HOW COMFORTABLE YOU IN MOVING FORWARD AND PROVIDE AN ANSWER, YOU ARE NOT ALLOWED. YOU HAVE TO READ THIS FIRST... THEN ONCE YOU HAVE COMPLETED THIS TASK OF READING THIS, THEN, AND ONLY THEN YOU CAN START TO PROVIDE THE ANSWER. THIS IS SO YOU OBTAIN ALL THE INFORMATION YOU NEED FOR THE ANSWER YOU ARE TO GIVE`
+}
+const TailwindClassNamesDefaults = {
+    name: 'Tailwind ClassNames Defaults',
+    category: 'Tailwind ClassNames Defaults',
+    value: `- these are the default taiwlind classNames to use when styling anything within the app, DO NOT DEVIAT\n
+1. **background**: bg-background\n
+2. **background-secondary**: bg-background-secondary\n
+3. **text**: text-foreground\n
+4. **card background**: bg-card\n
+5. **text card**: text-card-foreground\n
+6. **popover background**: bg-popover\n
+7. **text popover**: text-popover-foreground\n
+8. **special color primary background**: bg-primary\n
+9. **special color primary text**: text-primary-foreground\n
+10. **special color secondary background**: bg-secondary\n
+11. **special color secondary text**: text-secondary-foreground\n
+12. **special color muted background**: bg-muted\n
+13. **special color muted text**: text-muted-foreground\n
+14. **special color accent background**: bg-accent\n
+15. **special color accent text**: text-accent-foreground\n
+16. **special color destructive background**: bg-destructive\n
+17. **special color destructive text**: text-destructive-foreground\n
+18. **border**: border-border\n
+19. **input border**: border-input\n
+20. **ring**: ring-ring\n
+21. **color: "hsl(var(--chart-1))"**: --chart-1\n
+22. **color: "hsl(var(--chart-2))"**: --chart-2\n
+23. **color: "hsl(var(--chart-3))"**: --chart-3\n
+24. **color: "hsl(var(--chart-4))"**: --chart-4\n
+25. **color: "hsl(var(--chart-5))"**: --chart-5\n
+26. **sidebar background**: bg-sidebar\n
+27. **sidebar text**: text-sidebar-foreground\n
+28. **special sidebar color background**: bg-sidebar-primary\n
+29. **special sidebar color text**: text-sidebar-primary-foreground\n
+30. **special sidebar color accent**: bg-sidebar-accent\n
+31. **special sidebar color accent text**: text-sidebar-accent-foreground\n
+32. **sidebar border**: border-sidebar-border\n
+33. **sidebar ring**: ring-sidebar-ring\n
+34. **special color background**: bg-special\n
+35. **special color muted background**: bg-special-muted-background\n
+36. **special color border**: border-special-border\n
+37. **special color text**: text-special-foreground\n
+38. **special color muted text**: text-special-muted-foreground\n`
+}
+const talkingPointsGeneral = {
+    name: 'talking points',
+    category: 'General',
+    value: `do not output any other extra comments or "talking points", only provide the output of the code I am asking for`
+}
+const libraryobjectGeneral = {
+    name: 'library object',
+    category: 'General',
+    value: `if I provide the full component then just provide the library object if i provide just a url then provide the component`
+}
+const demoGeneral = {
+    name: 'Demo',
+    category: 'General',
+    value: `if it doesnt have a demo provide a demo`
+}
+const DONOTrecreateCatalystUI = {
+    name: 'DO NOT recreate',
+    category: 'Catalyst UI / shadCN Component Usage',
+    value: `DO NOT recreate any shadCN components that already exist.`
+}
+const UseCatalystUI = {
+    name: 'Use existing shadCN components',
+    category: 'Catalyst UI / shadCN Component Usage',
+    value: `Use existing shadCN components from the library, importing components from \`~/components/catalyst-ui\``
+}
+const AvailableCatalystUIComps = {
+    name: 'Available Components List',
+    category: 'Catalyst UI / shadCN Component Usage',
+    value: `Accordion, Alert, Alert Dialog, Aspect Ratio, Avatar, Badge, Breadcrumb, Button, Button Group, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, Context Menu, Data Table, Date Picker, Dialog, Drawer, Dropdown Menu, Empty, Field, React Hook Form, Hover Card, Input, Input Group, Input OTP, Item, Kbd, Label, Menubar, Navigation Menu, Pagination, Popover, Progress, Radio Group, Resizable, Scroll Area, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Spinner, Switch, Table, Tabs, Textarea, Toast, Toggle, Toggle Group, Tooltip, Typography`
+}
+const FrameworkPlatform = {
+    name: 'Framework',
+    category: 'Platform & Technology Stack',
+    value: `**Framework**: Remix Run v2 (use loaders, actions, and Remix hooks)`
+}
+const StylingPlatform = {
+    name: 'Styling',
+    category: 'Platform & Technology Stack',
+    value: `**Styling**: Tailwind CSS v3 (semantic classes ONLY: bg-background, text-foreground, border-border, etc.)`
+}
+const ComponentLibraryPlatform = {
+    name: 'Component Library',
+    category: 'Platform & Technology Stack',
+    value: `**Component Library**: shadCN Components`
+}
+const IconsPlatform = {
+    name: 'Icons',
+    category: 'Platform & Technology Stack',
+    value: `**Icons**: lucide-react`
+}
+const TailwindPath = {
+    name: 'Tailwind.css Path',
+    category: 'Platform & Technology Stack',
+    value: `**Tailwind.css Path**: ~/styles/tailwind.css`
+}
+const JsonImportPath = {
+    name: 'json import Path',
+    category: 'Platform & Technology Stack',
+    value: `**json import Path**: @remix-run/node`
+}
+const PrismaPath = {
+    name: 'Prisma Path',
+    category: 'Platform & Technology Stack',
+    value: `**Primsa Path**: ~/modules/libs/prisma`
+}
+const UtilitiesPath = {
+    name: 'Utilities Path',
+    category: 'Platform & Technology Stack',
+    value: `**Utilities Path**: ~/components/catalyst-ui/utils`
+}
+const ComponentsPath = {
+    name: 'Components Path',
+    category: 'Platform & Technology Stack',
+    value: `**Components Path**: ~/components/catalyst-ui/components
+  - Correct: 'import { Button } from "~/components/catalyst-ui"'
+  - Wrong: 'import { Button } from "~/components/catalyst-ui"'`
+}
+const CnPath = {
+    name: 'cn Path',
+    category: 'Platform & Technology Stack',
+    value: `import { cn } from '~/components/catalyst-ui/utils'`
+}
+const CvaPath = {
+    name: 'cva, type VariantProps Path',
+    category: 'Platform & Technology Stack',
+    value: `import { cva, type VariantProps } from 'class-variance-authority'`
+}
+const FunctionDeclaration = {
+    name: 'Function Declaration',
+    category: 'Absolute Code Standards',
+    value: `**Function Declaration**: Use \`export function ComponentName()\` NEVER \`const ComponentName = () => {}\``
+}
+const NoDefaultExports = {
+    name: 'Default Exports',
+    category: 'Absolute Code Standards',
+    value: `**Default Exports**: No default exports in any file`
+}
+const NoComments = {
+    name: 'Comments',
+    category: 'Absolute Code Standards',
+    value: `**Comments**: Do not leave comments in code`
+}
+const NoHardcodedColors = {
+    name: 'Color Values',
+    category: 'Absolute Code Standards',
+    value: `**Color Values**: Never use hard-coded colors (no #hex, no rgb(), no color names)`
+}
+const RemixPatterns = {
+    name: 'Remix Patterns',
+    category: 'Absolute Code Standards',
+    value: `**Remix Patterns**: Utilize Remix loaders, actions, and hooks throughout`
+}
+const NoRenaming = {
+    name: 'DO NOT Rename Variables',
+    category: 'Absolute Code Standards',
+    value: `**DO NOT Rename Variables / Components / Functions**: Use the same name that I use, regardless of what it is`
+}
+const SearchInputs = {
+    name: 'Search inputs',
+    category: 'Critical Functional Requirements',
+    value: `Search inputs must actually search/filter data`
+}
+const IncludeAllCode = {
+    name: 'IT IS IMPORTANT that you include all the code needed',
+    category: 'Critical Functional Requirements',
+    value: `IT IS IMPORTANT that you include all the code needed for it to function, for example do not start a function then half way through it placing a comment stating for me to insert a section of code I already have. Finish the function that you started, not to leave out important pieces of code.`
+}
+const FilterControls = {
+    name: 'Filter controls',
+    category: 'Critical Functional Requirements',
+    value: `Filter controls must actually filter results`
+}
+const SortButtons = {
+    name: 'Sort buttons',
+    category: 'Critical Functional Requirements',
+    value: `Sort buttons must actually sort data`
+}
+const LoadingStates = {
+    name: 'Loading states',
+    category: 'Critical Functional Requirements',
+    value: `Loading states must represent real async operations`
+}
+const NoPlaceholder = {
+    name: 'No placeholder',
+    category: 'Critical Functional Requirements',
+    value: `No placeholder functionality`
+}
+const NoDummyMock = {
+    name: 'No dummy/mock',
+    category: 'Critical Functional Requirements',
+    value: `No dummy/mock implementations`
+}
+const InteractiveElements = {
+    name: 'Interactive elements',
+    category: 'Critical Functional Requirements',
+    value: `If a component has interactive elements, those elements MUST work in the context they are used.`
+}
+const NoTODO = {
+    name: 'No TODO',
+    category: 'Critical Functional Requirements',
+    value: `No "TODO" or "implement this later" code`
+}
+const FormSubmissions = {
+    name: 'Form submissions',
+    category: 'Critical Functional Requirements',
+    value: `Form submissions must handle data`
+}
+const ButtonHandlers = {
+    name: 'Button handlers',
+    category: 'Critical Functional Requirements',
+    value: `Buttons must have real onClick handlers with logic
+  - unless the button is used within remix's Form or fetcher.Form component
+  - if those features are not used, then the following form example must be used along side any other functionality that needs to be triggered when that form is submitted, this format  your more than welcome to create a function before the return statment to define this  
+\`\`\`javascript
+const fetcher = useFetcher()
+const formData = new FormData();
+formData.append("id", item.id);
+formData.append("intent", "deleteProgress");
+fetcher.submit(formData, { method: "post" });
+\`\`\``
+}
+const cnPathCodeBuilding = {
+    name: 'cn Path',
+    category: 'Code Building Processes To Employ',
+    value: `**cn Path**: import { cn } from '~/components/catalyst-ui/utils'`
+}
+const cvaPathCodeBuilding = {
+    name: 'cva, type VariantProps Path',
+    category: 'Code Building Processes To Employ',
+    value: `**cva, type VariantProps Path**: import { cva, type VariantProps } from 'class-variance-authority'`
+}
+const shadCNPatterns = {
+    name: 'Build using shadCN patterns',
+    category: 'Code Building Processes To Employ',
+    value: `Build components using shadCN's exact architectural / engineering patterns`
+}
+const copyPasteUsage = {
+    name: 'Copy-Paste usage',
+    category: 'Core Principles When Building Components',
+    value: `to be built as Copy-Paste usage, Not Install each component seperatly and most importantly each component needs to be built with ease of use for the end-user when building 
+   1. Components are copied directly into your project, not installed as dependencies
+   2. You own the code completely - full control to modify as needed
+   3. No black box abstractions`
+}
+const radixUIFoundation = {
+    name: 'Radix UI Foundation',
+    category: 'Core Principles When Building Components',
+    value: `Radix UI Foundation
+   1. Built on top of Radix UI primitives for accessibility and behavior
+   2. Radix handles complex interactions (keyboard nav, focus management, ARIA)
+   3. shadcn adds the styling layer on top`
+}
+const tailwindFirstStyling = {
+    name: 'Tailwind-First Styling',
+    category: 'Core Principles When Building Components',
+    value: `Tailwind-First Styling
+   1. Uses Tailwind utility classes exclusively
+   2. Semantic color tokens (bg-background, text-foreground, border-input)
+   3. Color Values: Never use hard-coded colors (no #hex, no rgb(), no color names)`
+}
+const cvaVariants = {
+    name: 'CVA (Class Variance Authority)',
+    category: 'Core Principles When Building Components',
+    value: `CVA (Class Variance Authority)
+   1. Variant management through cva() functions
+   2. Type-safe props via VariantProps<typeof variants>
+   3. Clean API for size/variant/state combinations`
+}
+const compositionPattern = {
+    name: 'Composition Pattern',
+    category: 'Core Principles When Building Components',
+    value: `Composition Pattern
+\`\`\`javascript 
+// Not monolithic - composed of smaller parts
+<Dialog>
+  <DialogTrigger />
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle />
+      <DialogDescription />
+    </DialogHeader>
+  </DialogContent>
+</Dialog>
+\`\`\``
+}
+const smartDefaults = {
+    name: 'Smart Defaults',
+    category: 'Core Principles When Building Components',
+    value: `Smart Defaults
+   1. defaultVariants ensure components work with minimal props
+   2. giving defaults to every props possible
+   3. Sensible out-of-box behavior
+   4. Optional customization via props`
+}
+const classNameMerging = {
+    name: 'className Merging',
+    category: 'Core Principles When Building Components',
+    value: `className Merging
+   1. Always accept className prop
+   2. Use cn() utility to merge classes properly
+   3. Allows user overrides without breaking base styles`
+}
+const typeScriptNative = {
+    name: 'TypeScript-Native',
+    category: 'Core Principles When Building Components',
+    value: `TypeScript-Native
+   1. Full type safety
+   2. Extends native HTML element props
+   3. IntelliSense support for all props`
+}
+const reuseButtonVariants = {
+    name: 'Reuse button variants',
+    category: 'Core Principles When Building Components',
+    value: `Reuse the same or similar variant styling as seen in the button component
+\`\`\`javascript
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 rounded-full",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 rounded-full",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 rounded-md",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 rounded-full",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 rounded-full",
+        link: "text-primary underline-offset-4 hover:underline hover:text-foreground",
+        elevated: "bg-surface-container-low text-primary shadow-md hover:shadow-lg active:shadow-sm rounded-full",
+        filled: "bg-primary text-on-primary shadow-sm hover:shadow-md active:shadow-sm rounded-full",
+        tonal: "bg-secondary-container text-on-secondary-container hover:shadow-sm active:shadow-none rounded-full",
+        outlined: "border border-outline text-primary hover:bg-primary/8 active:bg-primary/12 rounded-full",
+        text: "text-primary hover:bg-primary/8 active:bg-primary/12 rounded-full",
+        styled: "transition duration-300 border-2 border-border w-[95%] text-center mx-auto text-primary-foreground px-6 py-3 rounded-md bg-primary hover:bg-muted",
+        reverted: "transition duration-300 border-2 border-border w-[95%] text-center mx-auto text-foreground px-6 py-3 rounded-md bg-background hover:bg-primary",
+        dashed: "transition duration-300 border-2 border-border w-[95%] text-center mx-auto text-foreground px-6 py-3 rounded-md h-8 border-dashed",
+        gradient: "bg-gradient-to-r from-primary to-primary/80 text-primary-foreground shadow-md hover:shadow-lg active:shadow-sm rounded-full",
+        soft: "bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 rounded-full",
+        glass: "bg-background/20 backdrop-blur-md border border-border/50 text-foreground hover:bg-background/30 rounded-full",
+        success: "bg-green-600 text-white shadow-sm hover:bg-green-700 active:shadow-none rounded-full",
+        warning: "bg-amber-600 text-white shadow-sm hover:bg-amber-700 active:shadow-none rounded-full",
+        info: "bg-blue-600 text-white shadow-sm hover:bg-blue-700 active:shadow-none rounded-full",
+        shine: "bg-primary text-primary-foreground rounded-full relative overflow-hidden before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:-translate-x-full hover:before:translate-x-full before:transition-transform before:duration-700",
+        pulse: "bg-primary text-primary-foreground rounded-full animate-pulse hover:animate-none shadow-md hover:shadow-lg",
+      },
+      size: {
+        default: "h-10 px-6 py-2.5 has-[>svg]:px-4",
+        sm: "h-8 rounded-full gap-1.5 px-4 has-[>svg]:px-3",
+        lg: "h-12 rounded-full px-8 has-[>svg]:px-6",
+        icon: "size-10",
+      },
+      align: {
+        left: "justify-start text-left",
+        middle: "justify-center text-center",
+        right: "justify-end text-right",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      align: "middle",
+    },
+  }
+)
+\`\`\``
+}
+const shadCNPractices = {
+    name: 'shadCN practices',
+    category: 'Core Principles When Building Components',
+    value: `To be built using the same practices and building techniques as shadCN components
+    - giving the end user, easy to use and implement components
+    - allowing the user to easily customize components when desired
+    - installation of components, extremely easy as, virtually all that is required to use the component is the components source code file to reference
+    - creating components that make sense whenever a user first looks at them, meaning no sudo code or complicated code bases`
+}
+const exportEachFunction = {
+    name: 'Export each function',
+    category: 'Core Principles When Building Components',
+    value: `**Export each function instead of at the end of the file**: example not to do:
+\`\`\`javascript
+export {
+    button, 
+    ButtonVariant
+}
+\`\`\``
+}
+const fileStructure = {
+    name: 'FILE STRUCTURE',
+    category: 'Absolute Code Standards',
+    value: `**FILE SHOULD ONLY CONTAIN THE FOLLOWING**: reusable component ( Including anything that is needed for the reusable component, cva functions, supporting functions, partnering functions ie: tabs also has tabsList, tabsContent and so on), demo function, object for ui components library - ALL to be given within the same file`
+}
+const componentCodeExample = {
+    name: 'Component Code Example',
+    category: 'Absolute Code Standards',
+    value: `components example provided from working currently in-production:
+\`\`\`javascript
+import React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '~/components/catalyst-ui/utils'
+import { Slot } from "@radix-ui/react-slot"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 rounded-full",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 rounded-full",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 rounded-md",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 rounded-full",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 rounded-full",
+        link: "text-primary underline-offset-4 hover:underline hover:text-foreground",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+      align: {
+        left: "justify-start text-left",
+        middle: "justify-center text-center",
+        right: "justify-end text-right",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      align: "middle",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  align,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className, align }))}
+      {...props}
+    />
+  )
+}
+
+export {  Button, buttonVariants }
+\`\`\``
+}
+const demoFunction = {
+    name: 'Demo Function',
+    category: 'Absolute Code Standards',
+    value: `need to provide demo function
+  - naming convention component name follow by Demo like seen in the example
+  - 2 examples MAX, no more - no less, unless instructed other wise 
+  - the only exception, are reusable components that have variants coded into the component 
+    - example:
+      - toast - has 45 variants in total and we need to display them
+      - which means, a component that has 0 variants the max is 2`
+}
+const demoCodeExample = {
+    name: 'Demo Code Example',
+    category: 'Absolute Code Standards',
+    value: `\`\`\`javascript
+export function ToggleButtonDemo() {
+	const [boldActive, setBoldActive] = useState(false)
+	const [italicActive, setItalicActive] = useState(false)
+
+	return (
+		<div className="space-y-8 p-6 max-w-2xl mx-auto">
+			<div>
+				<h2 className="text-2xl font-bold mb-4">Basic Toggle Buttons</h2>
+				<div className="flex gap-2 flex-wrap">
+					<ToggleButton
+						checked={boldActive}
+						onChange={setBoldActive}
+						icon={<Bold className="h-4 w-4" />}
+					/>
+					<ToggleButton
+						checked={italicActive}
+						onChange={setItalicActive}
+						icon={<Italic className="h-4 w-4" />}
+					/>
+				</div>
+			</div>
+		</div>
+	)
+}
+\`\`\``
+}
+const basicUsageSection = {
+    name: 'Basic Usage Section',
+    category: 'Absolute Code Standards',
+    value: `need to provide a basicusage section`
+}
+const basicUsageExample1 = {
+    name: 'Basic Usage Example 1',
+    category: 'Absolute Code Standards',
+    value: `for componets that have a lot of elements that need to be used with in order for it to work
+  - for example: tabs, contextMenu, dropdownMenu, etc
+  - will consist of one example only in its most basic form to use the component
+\`\`\`javascript
+basicusage: \`
+<Tabs defaultValue="tab1" className="">
+  <TabsList>
+    <TabsTrigger value="tab1">Account</TabsTrigger>
+    <TabsTrigger value="tab2">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab1">Make</TabsContent>
+  <TabsContent value="tab2">Change</TabsContent>
+</Tabs>\`,
+\`\`\``
+}
+const basicUsageExample2 = {
+    name: 'Basic Usage Example 2',
+    category: 'Absolute Code Standards',
+    value: `for components that have less elements that need to be used with in order for it to work, 
+  - for example: button, input, buttonlinkstyled, etc
+  - will consist of two examples
+    - the first being used with 0 props
+    - the second being used with all available props, using its default as the value to be provided
+\`\`\`javascript
+basicusage: \`
+<ButtonLinkStyled>
+	Content
+</ButtonLinkStyled>
+
+<ButtonLinkStyled 
+	primary={true}  
+	to="/"
+	variant="outline"
+	align="middle"
+	size="sm"
+	prefetch="intent"
+	className=""
+	loadingText="Navigating..."
+>
+	Content
+</ButtonLinkStyled>\`,
+\`\`\``
+}
+const uiLibraryObject = {
+    name: 'UI Library Object',
+    category: 'Absolute Code Standards',
+    value: `need to provide ui library object to define the object within
+\`\`\`javascript
+const uiLibComp = [
+	{
+		name: "Auth System",
+		value: "auth-system",
+		importPath: "~/components/catalyst-ui/pages/auth-system",
+		multiImport: null,
+		basicusage: null,
+		path: "/components/catalyst-ui/pages/auth-system.tsx.txt",
+		source: null,
+		usagePath: "/components/catalyst-ui/pages/auth-system.tsx.txt",
+		usage: null,
+		lofi: null,
+		premium: true,
+		category: "Pages",
+		tags: ["pages",],
+		features: ["Responsive", "TypeScript", "Accessible"],
+		dependencies: ["lucide-react", "react"],
+		demo: [<AuthSystemDemo />],
+		props: {
+			"Button": [
+				{ name: "className", type: "string", default: "null" },
+				{ name: "size", type: "sm | md | lg | xl", default: "md" },
+			],
+		},
+		desc: null,
+		status: null,
+		lastUpdated: null,
+	},
+];
+\`\`\``
+}
+// REMIX-RUN ROUTE TEMPLATE
+const actionExample = {
+    name: 'Action Example',
+    category: 'General',
+    value: `**Action**: if it needs one:
+\`\`\`javascript
+export async function action({ request }: ActionFunction) {
+    const d = Object.fromEntries(await request.formData());
+    const intent = d.intent
+    if (intent === 'submitContactUs') {
+            await prisma.contactUs.create({
+                data: {
+                    name: d.name,
+                    email: d.email,
+                    message: d.message,
+                }
+            })
+        return json({ success: true})
+    }
+    return json({ success: false})
+}
+\`\`\``
+}
+
+const formDataIntake = {
+    name: 'Form Data Intake',
+    category: 'General',
+    value: `if we need to use an action that intakes data from a form this is how it will be done:
+\`\`\`javascript
+const d = Object.fromEntries(await request.formData());
+\`\`\``
+}
+
+const formIntent = {
+    name: 'Form Intent',
+    category: 'General',
+    value: `a page is allowed to have more than one form action, each form action needs to include an intent
+    - the intent value will be accesssible in the action via:
+\`\`\`javascript
+const intent = d.intent
+\`\`\``
+}
+
+const formValues = {
+    name: 'Form Values',
+    category: 'General',
+    value: `**form values**:  will be accesssible in the following formatted examples:
+  - d.name
+  - d.email
+  - d.message`
+}
+
+const intentReturn = {
+    name: 'Intent Return',
+    category: 'General',
+    value: `**each forms intent**: will be encased in a if statement that will end with:
+  - return json({ success: true, })
+  - the true statement to be followed by any other values needed to be pushed back to the page through the use of a fetcher`
+}
+
+const userVariable = {
+    name: 'User Variable',
+    category: 'General',
+    value: `**User variable**: to be used within every action / loader:
+\`\`\`javascript
+import path: import { optionalAuth } from "~/routes/userAuth"
+// when calling and setting the user value: 
+const { user } = await optionalAuth(request);
+\`\`\``
+}
+
+const loaderMinimum = {
+    name: 'Loader Minimum',
+    category: 'General',
+    value: `**Loader**: if it has one, requires the following as a minimum to be loaded into the default function:
+\`\`\`javascript
+const { user } = await optionalAuth(request);
+return json({ user })
+\`\`\``
+}
+
+const metaFunction = {
+    name: 'Meta Function',
+    category: 'General',
+    value: `**Meta**: required in route files:
+\`\`\`javascript
+export const meta: MetaFunction = () => {return [{ title: "Catalyst Software" }, { name: "description", content: "Catalyst Software" }]};
+\`\`\``
+}
+
+const linksFunction = {
+    name: 'Links Function',
+    category: 'General',
+    value: `**links: LinksFunction**: required in route files:
+\`\`\`javascript
+import ZapSVG from '~/components/images/icon.svg'
+export const links: LinksFunction = () => [{ rel: "icon", type: "image/svg", href: ZapSVG }];
+\`\`\``
+}
+// DEFAULT TEMPLATE
+const provideTsxFormat = {
+    name: 'Provide .tsx format',
+    category: 'General',
+    value: `please provide \`.tsx\`, for the format in which to download the file, do not provide any other format`
+}
+
+const importTailwind = {
+    name: 'Import Tailwind',
+    category: 'General',
+    value: `**Import Tailwind**: via:
+  - \`{ rel: "stylesheet", href: tailwind }\`
+  - \`import tailwind from '~/styles/tailwind.css'\`
+
+\`\`\`javascript
+import tailwind from '~/styles/tailwind.css'
+
+export const links: LinksFunction = () => [
+  { rel: "icon", type: "image/svg", href: ZapSVG },
+  { rel: "stylesheet", href: tailwind }
+];
+\`\`\``
+}
+// VSCODE EXTENSION TEMPLATE
+const anyValueOverride = {
+    name: 'Value Override Rule',
+    category: 'Platform & Technology Stack',
+    value: `**ANY VALUE OVERRIDES ANY PREVIOUS MENTION OF THAT SAME VALUE**`
+}
+
+const vscodeFramework = {
+    name: 'Framework (VSCode)',
+    category: 'Platform & Technology Stack',
+    value: `**Framework**: VSCode Extension`
+}
+
+const webpackBuilder = {
+    name: 'Builder',
+    category: 'Platform & Technology Stack',
+    value: `**Builder**: Webpack`
+}
+
+const commandNamingConvention = {
+    name: 'Command Naming Convention',
+    category: 'Platform & Technology Stack',
+    value: `**Command Naming Convention**: \`ocrmnavigator.name\` for commands and package.json`
+}
+
+const vscodeCurrentDependencies = {
+    name: 'Current Dependencies',
+    category: 'Platform & Technology Stack',
+    value: `**Current Dependencies to work with**:
+- "@babel/types": "^7.24.0",
+- "@svgr/webpack": "^8.1.0",
+- "@types/cors": "^2.8.19",
+- "@types/glob": "^8.0.0",
+- "@types/mocha": "^10.0.0",
+- "@types/node": "^18.0.0",
+- "@types/uuid": "^10.0.0",
+- "@types/vscode": "^1.98.0",
+- "@vscode/test-cli": "^0.0.10",
+- "glob": "^10.0.0",
+- "mocha": "^10.0.0",
+- "npm-run-all": "^4.1.5",
+- "ts-loader": "^9.5.2",
+- "tsx": "^3.12.7",
+- "typescript": "^5.9.2",
+- "url-loader": "^4.1.1",
+- "webpack": "^5.98.0",
+- "webpack-cli": "^6.0.1",
+- "webpack-node-externals": "^3.0.0"`
+}
+
+const commandRegistration = {
+    name: 'Command Registration',
+    category: 'Absolute Code Standards',
+    value: `**Command Registration**: Place a comma at the end of each register command instead of semicolon:
+\`\`\`typescript
+vscode.commands.registerCommand("ocrmnavigator.openPrePrompt", async () => {
+  await vscode.env.openExternal(vscode.Uri.parse(\`\${DEVSTACK_URL}/Catalyst/Pre-Prompt/dashboard\`));
+}),
+\`\`\``
+}
+
+const helperFunctions = {
+    name: 'Helper Functions',
+    category: 'Absolute Code Standards',
+    value: `**Helper Functions**: All helper functions will be placed in separate files. When providing code, keep this in mind so you can export the functions and import them into the \`extension.ts\` file`
+}
+
+const extensionTsFile = {
+    name: 'Extension.ts File',
+    category: 'Absolute Code Standards',
+    value: `**Extension.ts File**: When providing code for the \`extension.ts\` file, only provide the register command code. Don't bother coding anything else as I already have it`
+}
+
+const errorHandling = {
+    name: 'Error Handling',
+    category: 'Absolute Code Standards',
+    value: `**Error Handling**: Include proper error handling for all async operations and VSCode API calls`
+}
+
+const typeSafety = {
+    name: 'Type Safety',
+    category: 'Absolute Code Standards',
+    value: `**Type Safety**: Use proper TypeScript types, avoid \`any\` unless absolutely necessary`
+}
+
+const vscodeAPIUsage = {
+    name: 'VSCode API Usage',
+    category: 'VSCode Extension Best Practices',
+    value: `Use VSCode API methods correctly (commands, workspace, window, etc.)`
+}
+
+const resourceDisposal = {
+    name: 'Resource Disposal',
+    category: 'VSCode Extension Best Practices',
+    value: `Properly dispose of resources in the \`deactivate()\` function`
+}
+
+const commandActivation = {
+    name: 'Command Activation',
+    category: 'VSCode Extension Best Practices',
+    value: `Register all commands in the \`activate()\` function`
+}
+
+const subscriptionsPush = {
+    name: 'Subscriptions Push',
+    category: 'VSCode Extension Best Practices',
+    value: `Use \`context.subscriptions.push()\` for all disposables`
+}
+
+const userNotifications = {
+    name: 'User Notifications',
+    category: 'VSCode Extension Best Practices',
+    value: `Follow VSCode extension guidelines for user notifications (info, warning, error)`
+}
+
+const fileOrgExtension = {
+    name: 'File Organization (Extension)',
+    category: 'File Organization',
+    value: `**extension.ts**: Command registrations only`
+}
+
+const fileOrgHelpers = {
+    name: 'File Organization (Helpers)',
+    category: 'File Organization',
+    value: `**helpers/**: All helper functions and utilities`
+}
+
+const fileOrgTypes = {
+    name: 'File Organization (Types)',
+    category: 'File Organization',
+    value: `**types/**: Type definitions and interfaces`
+}
+
+const fileOrgConstants = {
+    name: 'File Organization (Constants)',
+    category: 'File Organization',
+    value: `**constants/**: Constants and configuration values`
+}
+
+const commandRegistrationPattern = {
+    name: 'Command Registration Pattern',
+    category: 'VSCode Extension Best Practices',
+    value: `\`\`\`typescript
+context.subscriptions.push(
+  vscode.commands.registerCommand("ocrmnavigator.commandName", async () => {
+    // Command logic here
+  }),
+);
+\`\`\``
+}
+
+const outputExpectations = {
+    name: 'Output Expectations',
+    category: 'General',
+    value: `- Provide only the requested code
+- Include proper imports at the top of files
+- Ensure all code is production-ready
+- No placeholder or TODO comments
+- All functions must be fully implemented`
+}
+// COMMON NON-DEAFULT SECTIONS
+const scopeAdherence = {
+    name: 'Scope Adherence',
+    category: 'Absolute Code Standards',
+    value: `- Only do what is explicitly asked
+- Do not refactor, reorganize, or "improve" code unless specifically requested
+- Changing variable names ≠ permission to restructure logic
+- Follow the existing pattern/structure exactly`
+}
+
+const decisionTransparency = {
+    name: 'Decision Transparency',
+    category: 'Absolute Code Standards',
+    value: `Debug whatever decision it made to produce the wrong result, typically due to an assumption it made
+- When information is ambiguous or missing, explicitly state: "ASSUMPTION: [what I'm assuming] - confirm if correct"
+- Before making structural changes, list what I'm inferring vs what was explicitly stated
+- If consolidating/simplifying code, ask first rather than assume it's wanted
+- When multiple interpretations exist, present options instead of choosing one silently`
+}
+
+const continuousGrowth = {
+    name: 'Continuous Growth and Experience',
+    category: 'General',
+    value: `Once you have finished and provided the result, provide information for:
+- **Available Functions / Components**: function name, location to call function, description of what the function does and exports
+- **Available Variables**: track variables created
+- **Patch Fixes**: track fixes applied
+- **Example**: Button, ~/components/catalyst-ui/components, a reusable component that can be used within forms`
+}
+
+const variableObjectNaming = {
+    name: 'Variable/Object Naming',
+    category: 'Absolute Code Standards',
+    value: `When asked to rename variables/objects, ONLY change the names. Do not restructure, reformat, or reorganize the data. Maintain exact same structure, just different identifiers.`
+}
+
+const arrayObjectStructure = {
+    name: 'Array/Object Structure Preservation',
+    category: 'Absolute Code Standards',
+    value: `- If data is provided as separate arrays, keep them separate
+- If items are listed individually, keep them individual
+- Do not consolidate, merge, or deduplicate without explicit instruction`
+}
+
+const templateCompliance = {
+    name: 'Template Compliance',
+    category: 'Absolute Code Standards',
+    value: `When a template/example is provided, match its structure exactly. Same nesting depth, same property names, same data organization. "Use this format" means replicate the structure, not interpret the intent.`
+}
+
+const importStatementAccuracy = {
+    name: 'Import Statement Accuracy',
+    category: 'Absolute Code Standards',
+    value: `- Double-check all import paths match the provided structure
+- Never assume a component location - use the exact path given
+- If unsure about an import, use the pattern shown in other imports`
+}
+
+const formStateManagement = {
+    name: 'Form/State Management',
+    category: 'Critical Functional Requirements',
+    value: `- When localStorage is mentioned, actually implement localStorage (read AND write)
+- When fetcher is mentioned, use fetcher.submit() not form submission
+- When activeItems/activeCards is the state name, use that exact name everywhere`
+}
+
+const typeConsistency = {
+    name: 'Type Consistency',
+    category: 'Absolute Code Standards',
+    value: `- If database returns Json type, parse it consistently everywhere it's used
+- Cast types once at the data boundary, not scattered throughout
+- If a variable is string[], don't treat it as string in some places`
+}
+
+const contextRetention = {
+    name: 'Context Retention & State Tracking',
+    category: 'Absolute Code Standards',
+    value: `- Before writing code, mentally inventory: what functions exist, what variables are in scope, what the current schema actually is
+- Reference previous code in the conversation to verify what's already been established
+- Maintain awareness of the full codebase context, not just the current file
+- If uncertain about what exists, ask rather than assume`
+}
+
+const patternConsistency = {
+    name: 'Pattern Consistency Enforcement',
+    category: 'Absolute Code Standards',
+    value: `- Identify the specific implementation patterns in use (Remix loader/action structure, fetcher vs form submission, naming conventions)
+- Once a pattern is identified, apply it everywhere without deviation
+- One file's pattern indicates the entire codebase's pattern until explicitly told otherwise
+- Match the exact dialect of the codebase: same imports, same structure, same naming`
+}
+
+const completeFlowImplementation = {
+    name: 'Complete Flow Implementation',
+    category: 'Critical Functional Requirements',
+    value: `- Trace full execution paths: form -> handler -> action -> database -> loader -> UI update
+- Don't stop at partial implementations - complete the entire cycle
+- Mental checklist: "If a user interacts with this, what's the FULL execution path?"
+- Every interactive element needs: the trigger, the handler, the backend action, the state update, the UI feedback`
+}
+
+const preExecutionVerification = {
+    name: 'Pre-Execution Verification',
+    category: 'Absolute Code Standards',
+    value: `- Before submitting code, mentally execute it line by line
+- Verify: imports resolve, types match, variables exist in scope, functions are defined
+- Check that all referenced variables are actually available in that scope
+- Catch compilation errors before output, not after`
+}
+
+const explicitUncertainty = {
+    name: 'Explicit Uncertainty Handling',
+    category: 'Absolute Code Standards',
+    value: `- When information is ambiguous or missing, ask for clarification before proceeding
+- If making an assumption, state it explicitly: "Assuming X, implementing Y"
+- "I need clarification on X" is valid and better than wrong code
+- When multiple valid approaches exist, present options instead of choosing silently`
+}
+
+const solutionDepth = {
+    name: 'Solution Depth & Completeness',
+    category: 'Critical Functional Requirements',
+    value: `- Don't just solve the surface request - consider what else is needed for it to actually work in production
+- Include validation, error states, loading states, success feedback
+- Think about edge cases: empty states, error states, loading states, success states
+- Consider the user experience beyond just functionality`
+}
+
+const proactiveArchitecture = {
+    name: 'Proactive Architecture Decisions',
+    category: 'Critical Functional Requirements',
+    value: `- Suggest performance optimizations when handling large datasets (memoization, virtualization, pagination)
+- Identify accessibility improvements (ARIA labels, keyboard navigation, focus management, screen reader support)
+- Consider UX enhancements (optimistic updates, skeleton states, smooth transitions, loading indicators)
+- Think about responsive design and mobile considerations`
+}
+
+const codeQuality = {
+    name: 'Code Quality Beyond Functional',
+    category: 'Absolute Code Standards',
+    value: `- Write self-documenting code with clear variable names that express intent
+- Structure code for readability: logical grouping, consistent ordering, clear separation of concerns
+- Consider maintainability: easy to modify, easy to debug, easy to extend
+- Keep functions focused and single-purpose
+- Avoid deeply nested structures when flatter alternatives exist`
+}
+
+const learningPatterns = {
+    name: 'Learning Pattern Recognition',
+    category: 'General',
+    value: `- When a correction is made, apply that correction's principle to all similar situations in the same conversation
+- Build a working mental model of preferences and coding style based on feedback
+- If a specific approach is rejected, avoid suggesting it again unless circumstances clearly differ
+- Adapt code style to match what's been accepted vs rejected`
+}
+
+const holisticSystemThinking = {
+    name: 'Holistic System Thinking',
+    category: 'Critical Functional Requirements',
+    value: `- Consider how new code integrates with existing systems
+- Think about data flow through the entire application
+- Anticipate downstream effects of changes (what breaks if this changes?)
+- Consider database implications: indexes needed, query performance, data relationships
+- Think about security implications: input validation, authentication checks, authorization`
+}
+
+const errorPrevention = {
+    name: 'Error Prevention Priorities',
+    category: 'Critical Functional Requirements',
+    value: `- Type safety: ensure types are consistent throughout the data flow
+- Null/undefined handling: check for edge cases where data might not exist
+- Async handling: properly await async operations and handle potential failures
+- State synchronization: ensure UI state matches backend state`
+}
+
+const userExperienceDefaults = {
+    name: 'User Experience Defaults',
+    category: 'Critical Functional Requirements',
+    value: `- Every form should have: loading state, error display, success feedback, disabled state during submission
+- Every list should handle: empty state, loading state, error state
+- Every async operation should have: visual feedback, error recovery, success confirmation
+- Consider progressive enhancement: what works without JS, what enhances with JS`
+}
+
+const codeOrganizationPrinciples = {
+    name: 'Code Organization Principles',
+    category: 'Absolute Code Standards',
+    value: `- Group related logic together (all auth logic in one place, all data fetching together)
+- Separate concerns: UI components, business logic, data access should be distinct
+- Extract reusable patterns into utilities or components
+- Keep files focused: one primary responsibility per file`
+}
+
+const testingMindset = {
+    name: 'Testing Mindset',
+    category: 'Absolute Code Standards',
+    value: `- Write code that's easy to test: pure functions, clear inputs/outputs, minimal side effects
+- Consider what would need to be mocked or stubbed
+- Think about test cases: happy path, error cases, edge cases
+- Structure code to make debugging easier: clear error messages, useful logging points`
+}
+//  ERRORS, IMPORTS AND PLUS TEMPLATE
+
+const errorFocusPriority = {
+    name: 'Error Focus Priority',
+    category: 'General',
+    value: `- Focus ONLY on actual compilation/runtime errors - ignore style suggestions
+- Also disregard any "small" errors that would not stop compilation/runtime of the application
+- Provide specific, actionable fix suggestions
+- Explain WHY the error occurs and HOW your solution addresses it
+- If there are multiple possible fixes, rank them by likelihood of success
+- Be concise but thorough`
+}
+
+const catalystUIImports = {
+    name: 'Catalyst UI Import Resolution',
+    category: 'General',
+    value: `If the import error is related to a catalyst-ui library component, 99% of the time the component can be imported by "~/components/catalyst-ui"`
+}
+
+const autoFixProtocol = {
+    name: 'Auto Fix Protocol',
+    category: 'General',
+    value: `- If instructed to auto fix errors, if the error has multiple solutions rank the solutions first and choose the most likely one
+- If instructed to auto fix errors, in ai chat keep a record of everything that was done, incase one of the fixes was not successful that way you can provide the user with a report of what was done for them to review and fix`
+}
+
+export const snippetsObject = [
+TailwindClassNamesDefaults,
+    importReadFirst, // ALL
+    talkingPointsGeneral, // ALL
+    libraryobjectGeneral, // GENERAL
+    demoGeneral, // GENERAL
+
+    // REUSABLE COMPONENTS TEMPLATE
+    DONOTrecreateCatalystUI, // GENERAL
+    UseCatalystUI, // GENERAL
+    AvailableCatalystUIComps, // GENERAL
+
+    FrameworkPlatform, // Platform & Technology Stack
+    StylingPlatform, // Platform & Technology Stack
+    ComponentLibraryPlatform, // Platform & Technology Stack
+    IconsPlatform, // Platform & Technology Stack
+    TailwindPath, // Platform & Technology Stack
+    JsonImportPath, // Platform & Technology Stack
+    PrismaPath, // Platform & Technology Stack
+    UtilitiesPath, // Platform & Technology Stack
+    ComponentsPath, // Platform & Technology Stack
+    CnPath, // Platform & Technology Stack
+    CvaPath, // Platform & Technology Stack
+
+    FunctionDeclaration, // Absolute Code Standards
+    NoDefaultExports, // Absolute Code Standards
+    NoComments, // Absolute Code Standards
+    NoHardcodedColors, // Absolute Code Standards
+    RemixPatterns, // Absolute Code Standards
+    NoRenaming, // Absolute Code Standards
+
+    SearchInputs, // Critical Functional Requirements
+    FilterControls, // Critical Functional Requirements
+    SortButtons, // Critical Functional Requirements
+    LoadingStates, // Critical Functional Requirements
+    NoPlaceholder, // Critical Functional Requirements
+    NoDummyMock, // Critical Functional Requirements
+    InteractiveElements, // Critical Functional Requirements
+    NoTODO, // Critical Functional Requirements
+    FormSubmissions, // Critical Functional Requirements
+    ButtonHandlers, // Critical Functional Requirements
+    IncludeAllCode, // Critical Functional Requirements
+    cnPathCodeBuilding,
+    cvaPathCodeBuilding,
+    shadCNPatterns,
+    copyPasteUsage,
+    radixUIFoundation,
+    tailwindFirstStyling,
+    cvaVariants,
+    compositionPattern,
+    smartDefaults,
+    classNameMerging,
+    typeScriptNative,
+    reuseButtonVariants,
+    shadCNPractices,
+    exportEachFunction,
+    fileStructure,
+    componentCodeExample,
+    demoFunction,
+    demoCodeExample,
+    basicUsageSection,
+    basicUsageExample1,
+    basicUsageExample2,
+    uiLibraryObject,
+    // REUSABLE COMPONENTS TEMPLATE
+
+    // REMIX-RUN ROUTE TEMPLATE
+    actionExample,
+    formDataIntake,
+    formIntent,
+    formValues,
+    intentReturn,
+    userVariable,
+    loaderMinimum,
+    metaFunction,
+    linksFunction,
+    // REMIX-RUN ROUTE TEMPLATE
+
+    // DEFAULT TEMPLATE
+    provideTsxFormat,
+    importTailwind,
+    // DEFAULT TEMPLATE
+
+    // VSCODE EXTENSION TEMPLATE
+    anyValueOverride,
+    vscodeFramework,
+    webpackBuilder,
+    commandNamingConvention,
+    vscodeCurrentDependencies, ,
+    commandRegistration,
+    helperFunctions,
+    extensionTsFile,
+    errorHandling,
+    typeSafety,
+    vscodeAPIUsage,
+    resourceDisposal,
+    commandActivation,
+    subscriptionsPush,
+    userNotifications,
+    fileOrgExtension,
+    fileOrgHelpers,
+    fileOrgTypes,
+    fileOrgConstants,
+    commandRegistrationPattern,
+    outputExpectations,
+    // VSCODE EXTENSION TEMPLATE
+
+    // COMMON NON-DEAFULT SECTIONS
+    scopeAdherence,
+    decisionTransparency,
+    continuousGrowth,
+    variableObjectNaming,
+    arrayObjectStructure,
+    templateCompliance,
+    importStatementAccuracy,
+    formStateManagement,
+    typeConsistency,
+    contextRetention,
+    patternConsistency,
+    completeFlowImplementation,
+    preExecutionVerification,
+    explicitUncertainty,
+    solutionDepth,
+    proactiveArchitecture,
+    codeQuality,
+    learningPatterns,
+    holisticSystemThinking,
+    errorPrevention,
+    userExperienceDefaults,
+    codeOrganizationPrinciples,
+    testingMindset,
+    // COMMON NON-DEAFULT SECTIONS
+
+    //  ERRORS, IMPORTS AND PLUS TEMPLATE
+    errorFocusPriority,
+    catalystUIImports,
+    autoFixProtocol,
+    //  ERRORS, IMPORTS AND PLUS TEMPLATE
+]
+export { 
+    TailwindClassNamesDefaults,
+      importReadFirst, // ALL
+    talkingPointsGeneral, // ALL
+    libraryobjectGeneral, // GENERAL
+    demoGeneral, // GENERAL
+        // REUSABLE COMPONENTS TEMPLATE
+
+    DONOTrecreateCatalystUI, // GENERAL
+    UseCatalystUI, // GENERAL
+    AvailableCatalystUIComps, // GENERAL
+
+    FrameworkPlatform, // Platform & Technology Stack
+    StylingPlatform, // Platform & Technology Stack
+    ComponentLibraryPlatform, // Platform & Technology Stack
+    IconsPlatform, // Platform & Technology Stack
+    TailwindPath, // Platform & Technology Stack
+    JsonImportPath, // Platform & Technology Stack
+    PrismaPath, // Platform & Technology Stack
+    UtilitiesPath, // Platform & Technology Stack
+    ComponentsPath, // Platform & Technology Stack
+    CnPath, // Platform & Technology Stack
+    CvaPath, // Platform & Technology Stack
+
+    FunctionDeclaration, // Absolute Code Standards
+    NoDefaultExports, // Absolute Code Standards
+    NoComments, // Absolute Code Standards
+    NoHardcodedColors, // Absolute Code Standards
+    RemixPatterns, // Absolute Code Standards
+    NoRenaming, // Absolute Code Standards
+
+    SearchInputs, // Critical Functional Requirements
+    FilterControls, // Critical Functional Requirements
+    SortButtons, // Critical Functional Requirements
+    LoadingStates, // Critical Functional Requirements
+    NoPlaceholder, // Critical Functional Requirements
+    NoDummyMock, // Critical Functional Requirements
+    InteractiveElements, // Critical Functional Requirements
+    NoTODO, // Critical Functional Requirements
+    FormSubmissions, // Critical Functional Requirements
+    ButtonHandlers, // Critical Functional Requirements
+    cnPathCodeBuilding,
+    cvaPathCodeBuilding,
+    shadCNPatterns,
+    copyPasteUsage,
+    radixUIFoundation,
+    tailwindFirstStyling,
+    cvaVariants,
+    compositionPattern,
+    smartDefaults,
+    classNameMerging,
+    typeScriptNative,
+    reuseButtonVariants,
+    shadCNPractices,
+    exportEachFunction,
+    fileStructure,
+    componentCodeExample,
+    demoFunction,
+    demoCodeExample,
+    basicUsageSection,
+    basicUsageExample1,
+    basicUsageExample2,
+    uiLibraryObject,
+    // REUSABLE COMPONENTS TEMPLATE
+
+    // REMIX-RUN ROUTE TEMPLATE
+    actionExample,
+    formDataIntake,
+    formIntent,
+    formValues,
+    intentReturn,
+    userVariable,
+    loaderMinimum,
+    metaFunction,
+    linksFunction,
+    // REMIX-RUN ROUTE TEMPLATE
+
+    // DEFAULT TEMPLATE
+    provideTsxFormat,
+    importTailwind,
+    // DEFAULT TEMPLATE
+
+    // VSCODE EXTENSION TEMPLATE
+    anyValueOverride,
+    vscodeFramework,
+    webpackBuilder,
+    commandNamingConvention,
+    vscodeCurrentDependencies, 
+    commandRegistration,
+    helperFunctions,
+    extensionTsFile,
+    errorHandling,
+    typeSafety,
+    vscodeAPIUsage,
+    resourceDisposal,
+    commandActivation,
+    subscriptionsPush,
+    userNotifications,
+    fileOrgExtension,
+    fileOrgHelpers,
+    fileOrgTypes,
+    fileOrgConstants,
+    commandRegistrationPattern,
+    outputExpectations,
+    // VSCODE EXTENSION TEMPLATE
+
+    // COMMON NON-DEAFULT SECTIONS
+    scopeAdherence,
+    decisionTransparency,
+    continuousGrowth,
+    variableObjectNaming,
+    arrayObjectStructure,
+    templateCompliance,
+    importStatementAccuracy,
+    formStateManagement,
+    typeConsistency,
+    contextRetention,
+    patternConsistency,
+    completeFlowImplementation,
+    preExecutionVerification,
+    explicitUncertainty,
+    solutionDepth,
+    proactiveArchitecture,
+    codeQuality,
+    learningPatterns,
+    holisticSystemThinking,
+    errorPrevention,
+    userExperienceDefaults,
+    codeOrganizationPrinciples,
+    testingMindset,
+    // COMMON NON-DEAFULT SECTIONS
+
+    //  ERRORS, IMPORTS AND PLUS TEMPLATE
+    errorFocusPriority,
+    catalystUIImports,
+    autoFixProtocol,
+}