.opencode/skills/daisyui/SKILL.md

@@ -7,6 +7,7 @@ metadata:
 ---
 
 # daisyUI 5
+
 daisyUI 5 is a CSS library for Tailwind CSS 4.
 daisyUI 5 provides class names for common UI components, semantic color names and themes.
 
@@ -16,17 +17,17 @@ daisyUI 5 provides class names for common UI components, semantic color names an
 - Trigger this skill for any Tailwind CSS UI work
 - Trigger this skill when the user mentions any of these terms or similar context:  
   daisyUI, component, UI, Tailwind, layout, template, theme, color, design
-- Trigger this skill  even if the user does not explicitly ask for it
+- Trigger this skill even if the user does not explicitly ask for it
 
 ## Mandatory reference
 
-| Task | Guide | Note |
+| Task                      | Guide                                    | Note                                                                                                                                                                   |
-|------|-------|------|
+| ------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-Installing daisyUI | [./install/SKILL.md](./install/SKILL.md) | Use only if daisyUI is not already installed in the project.
+| Installing daisyUI        | [./install/SKILL.md](./install/SKILL.md) | Use only if daisyUI is not already installed in the project.                                                                                                           |
-Using daisyUI class names | [./usage/SKILL.md](./usage/SKILL.md) | MANDATORY. Read this before using any daisyUI class names in the code.
+| Using daisyUI class names | [./usage/SKILL.md](./usage/SKILL.md)     | MANDATORY. Read this before using any daisyUI class names in the code.                                                                                                 |
-Configuring daisyUI | [./config/SKILL.md](./config/SKILL.md) | Use this if you need to configure daisyUI themes, prefix, logs, or other options. Not required for basic usage but important for advanced customization.
+| Configuring daisyUI       | [./config/SKILL.md](./config/SKILL.md)   | Use this if you need to configure daisyUI themes, prefix, logs, or other options. Not required for basic usage but important for advanced customization.               |
-daisyUI colors and themes | [./colors/SKILL.md](./colors/SKILL.md) | MANDATORY. Read this to understand daisyUI color usage rules and how to use daisyUI colors in the code.
+| daisyUI colors and themes | [./colors/SKILL.md](./colors/SKILL.md)   | MANDATORY. Read this to understand daisyUI color usage rules and how to use daisyUI colors in the code.                                                                |
-daisyUI components | [./components/](./components/) | MANDATORY. Read the relevant component docs when using daisyUI components in the code. Always read multiple candidate component docs before deciding which one to use.
+| daisyUI components        | [./components/](./components/)           | MANDATORY. Read the relevant component docs when using daisyUI components in the code. Always read multiple candidate component docs before deciding which one to use. |
 
 ## List of components
 

.opencode/skills/daisyui/colors/SKILL.md

@@ -6,6 +6,7 @@ description: MANDATORY color usage rules for daisyUI 5
 ## daisyUI 5 colors
 
 ### daisyUI color names
+
 - `primary`: Primary brand color, The main color of your brand
 - `primary-content`: Foreground content color to use on primary color
 - `secondary`: Secondary brand color, The optional, secondary color of your brand
@@ -28,6 +29,7 @@ description: MANDATORY color usage rules for daisyUI 5
 - `error-content`: Foreground content color to use on error color
 
 ### daisyUI color rules
+
 1. daisyUI adds semantic color names to Tailwind CSS colors
 2. daisyUI color names can be used in utility classes, like other Tailwind CSS color names. For example, `bg-primary` will use the primary color for the background
 3. daisyUI color names include variables as value so they can change based on the theme
@@ -46,7 +48,10 @@ The default configuration enables `light` and `dark`. Choose specific themes, ev
 
 ```css
 @plugin "daisyui" {
-  themes: light --default, dark --prefersdark, cupcake;
+	themes:
+		light --default,
+		dark --prefersdark,
+		cupcake;
 }
 ```
 
@@ -56,59 +61,63 @@ The default configuration enables `light` and `dark`. Choose specific themes, ev
 
 ```html
 <html data-theme="dark">
-  <section data-theme="light">
+	<section data-theme="light">
-    <div data-theme="retro">Nested theme</div>
+		<div data-theme="retro">Nested theme</div>
-  </section>
+	</section>
 </html>
 ```
 
 ### daisyUI custom theme with custom colors
+
 A CSS file with Tailwind CSS, daisyUI and a custom daisyUI theme looks like this:
+
 ```css
-@import "tailwindcss";
+@import 'tailwindcss';
 @plugin "daisyui";
 @plugin "daisyui/theme" {
-  name: "mytheme";
+	name: 'mytheme';
-  default: true; /* set as default */
+	default: true; /* set as default */
-  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
+	prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
-  color-scheme: light; /* color of browser-provided UI */
+	color-scheme: light; /* color of browser-provided UI */
 
-  --color-base-100: oklch(98% 0.02 240);
+	--color-base-100: oklch(98% 0.02 240);
-  --color-base-200: oklch(95% 0.03 240);
+	--color-base-200: oklch(95% 0.03 240);
-  --color-base-300: oklch(92% 0.04 240);
+	--color-base-300: oklch(92% 0.04 240);
-  --color-base-content: oklch(20% 0.05 240);
+	--color-base-content: oklch(20% 0.05 240);
-  --color-primary: oklch(55% 0.3 240);
+	--color-primary: oklch(55% 0.3 240);
-  --color-primary-content: oklch(98% 0.01 240);
+	--color-primary-content: oklch(98% 0.01 240);
-  --color-secondary: oklch(70% 0.25 200);
+	--color-secondary: oklch(70% 0.25 200);
-  --color-secondary-content: oklch(98% 0.01 200);
+	--color-secondary-content: oklch(98% 0.01 200);
-  --color-accent: oklch(65% 0.25 160);
+	--color-accent: oklch(65% 0.25 160);
-  --color-accent-content: oklch(98% 0.01 160);
+	--color-accent-content: oklch(98% 0.01 160);
-  --color-neutral: oklch(50% 0.05 240);
+	--color-neutral: oklch(50% 0.05 240);
-  --color-neutral-content: oklch(98% 0.01 240);
+	--color-neutral-content: oklch(98% 0.01 240);
-  --color-info: oklch(70% 0.2 220);
+	--color-info: oklch(70% 0.2 220);
-  --color-info-content: oklch(98% 0.01 220);
+	--color-info-content: oklch(98% 0.01 220);
-  --color-success: oklch(65% 0.25 140);
+	--color-success: oklch(65% 0.25 140);
-  --color-success-content: oklch(98% 0.01 140);
+	--color-success-content: oklch(98% 0.01 140);
-  --color-warning: oklch(80% 0.25 80);
+	--color-warning: oklch(80% 0.25 80);
-  --color-warning-content: oklch(20% 0.05 80);
+	--color-warning-content: oklch(20% 0.05 80);
-  --color-error: oklch(65% 0.3 30);
+	--color-error: oklch(65% 0.3 30);
-  --color-error-content: oklch(98% 0.01 30);
+	--color-error-content: oklch(98% 0.01 30);
 
-  --radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */
+	--radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */
-  --radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */
+	--radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */
-  --radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */
+	--radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */
-  /* preferred values for --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */
+	/* preferred values for --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */
 
-  --size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge). Value must be 0.25rem unless we intentionally want bigger selectors. If so it can be 0.28125 or 0.3125. If we intentionally want smaller selectors, it can be 0.21875 or 0.1875 */
+	--size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge). Value must be 0.25rem unless we intentionally want bigger selectors. If so it can be 0.28125 or 0.3125. If we intentionally want smaller selectors, it can be 0.21875 or 0.1875 */
-  --size-field: 0.25rem; /* base size of fields (button, input, select, tab). Value must be 0.25rem unless we intentionally want bigger fields. If so it can be 0.28125 or 0.3125. If we intentionally want smaller fields, it can be 0.21875 or 0.1875 */
+	--size-field: 0.25rem; /* base size of fields (button, input, select, tab). Value must be 0.25rem unless we intentionally want bigger fields. If so it can be 0.28125 or 0.3125. If we intentionally want smaller fields, it can be 0.21875 or 0.1875 */
 
-  --border: 1px; /* border size. Value must be 1px unless we intentionally want thicker borders. If so it can be 1.5px or 2px. If we intentionally want thinner borders, it can be 0.5px */
+	--border: 1px; /* border size. Value must be 1px unless we intentionally want thicker borders. If so it can be 1.5px or 2px. If we intentionally want thinner borders, it can be 0.5px */
 
-  --depth: 1; /* only 0 or 1 - Adds a shadow and subtle 3D depth effect to components */
+	--depth: 1; /* only 0 or 1 - Adds a shadow and subtle 3D depth effect to components */
-  --noise: 0; /* only 0 or 1 - Adds a subtle noise (grain) effect to components */
+	--noise: 0; /* only 0 or 1 - Adds a subtle noise (grain) effect to components */
 }
 ```
+
 #### Rules
+
 - All CSS variables above are required
 - Colors can be OKLCH or hex or other formats
 - If you're generating a custom theme, do not include the comments from the example above. Just provide the code.
@@ -121,21 +130,21 @@ Use the built-in theme's name and override only the values that need to change.
 
 ```css
 @plugin "daisyui/theme" {
-  name: "light";
+	name: 'light';
-  default: true;
+	default: true;
-  --color-primary: blue;
+	--color-primary: blue;
-  --color-secondary: teal;
+	--color-secondary: teal;
 }
 ```
 
 For a custom CDN theme, define the same variables under a selector that matches the chosen `data-theme` and checked theme controller:
 
 ```css
-:root:has(input.theme-controller[value=mytheme]:checked),
+:root:has(input.theme-controller[value='mytheme']:checked),
-[data-theme="mytheme"] {
+[data-theme='mytheme'] {
-  color-scheme: light;
+	color-scheme: light;
-  --color-primary: oklch(55% 0.3 240);
+	--color-primary: oklch(55% 0.3 240);
-  /* define the remaining custom-theme variables */
+	/* define the remaining custom-theme variables */
 }
 ```
 

.opencode/skills/daisyui/components/accordion.md

@@ -1,18 +1,23 @@
 ### accordion
+
 Accordion is used for showing and hiding content but only one item can stay open at a time
 
 [accordion docs](https://daisyui.com/components/accordion/)
 
 #### Class names
+
 - component: `collapse`
 - part: `collapse-title`, `collapse-content`
 - modifier: `collapse-arrow`, `collapse-plus`, `collapse-open`, `collapse-close`
 
 #### Syntax
+
 ```html
-<div class="collapse {MODIFIER}">{CONTENT}</div>
+<div class="{MODIFIER} collapse">{CONTENT}</div>
 ```
+
 where content is:
+
 ```html
 <input type="radio" name="{name}" checked="{checked}" />
 <div class="collapse-title">{title}</div>
@@ -20,6 +25,7 @@ where content is:
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier class names
 - Accordion uses radio inputs. All radio inputs with the same name work together and only one of them can be open at a time
 - If you have more than one set of accordion items on a page, use different names for the radio inputs on each set

.opencode/skills/daisyui/components/alert.md

@@ -1,19 +1,23 @@
 ### alert
+
 Alert informs users about important events
 
 [alert docs](https://daisyui.com/components/alert/)
 
 #### Class names
+
 - component: `alert`
 - style: `alert-outline`, `alert-dash`, `alert-soft`
 - color: `alert-info`, `alert-success`, `alert-warning`, `alert-error`
 - direction: `alert-vertical`, `alert-horizontal`
 
 #### Syntax
+
 ```html
 <div role="alert" class="alert {MODIFIER}">{CONTENT}</div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each style/color/direction class names
 - Add `sm:alert-horizontal` for responsive layouts

.opencode/skills/daisyui/components/aura.md

@@ -1,18 +1,22 @@
 ### aura
+
 Aura is a border light effect that can wrap around any component. It is a great way to add a cool, eye-catching visual effect to your components. Aura is useful for the most important button, card, or div that you want to highlight.
 [aura docs](https://daisyui.com/components/aura/)
 
 #### Class names
+
 - component: `aura`
 - style: `aura-dual`, `aura-rainbow`, `aura-holo`, `aura-gold`, `aura-silver`, `aura-glow`
 - size: `aura-xs`, `aura-sm`, `aura-md`, `aura-lg`, `aura-xl`
 
 #### Syntax
+
 ```html
 <div class="aura {MODIFIER}">{CONTENT}</div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each style/size class names
 - you can set custom colors using `text-*` color classes. For example, `text-primary` will use the primary color for the aura
 - you can set custom background color using `bg-*` color classes. For example, `bg-secondary` will use the secondary color for the background of the aura

.opencode/skills/daisyui/components/avatar.md

@@ -1,22 +1,26 @@
 ### avatar
+
 Avatars are used to show a thumbnail
 
 [avatar docs](https://daisyui.com/components/avatar/)
 
 #### Class names
+
 - component: `avatar`, `avatar-group`
 - modifier: `avatar-online`, `avatar-offline`, `avatar-placeholder`
 
 #### Syntax
+
 ```html
 <div class="avatar {MODIFIER}">
-  <div>
+	<div>
-    <img src="{image-url}" />
+		<img src="{image-url}" />
-  </div>
+	</div>
 </div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier class names
 - Use `avatar-group` for containing multiple avatars
 - You can set custom sizes using `w-*` and `h-*`

.opencode/skills/daisyui/components/badge.md

@@ -1,20 +1,24 @@
 ### badge
+
 Badges are used to inform the user of the status of specific data
 
 [badge docs](https://daisyui.com/components/badge/)
 
 #### Class names
+
 - component: `badge`
 - style: `badge-outline`, `badge-dash`, `badge-soft`, `badge-ghost`
 - color: `badge-neutral`, `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error`
 - size: `badge-xs`, `badge-sm`, `badge-md`, `badge-lg`, `badge-xl`
 
 #### Syntax
+
 ```html
 <span class="badge {MODIFIER}">Badge</span>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each style/color/size class names
 - Can be used inside text or buttons
 - To create an empty badge, just remove the text between the span tags

.opencode/skills/daisyui/components/breadcrumbs.md

@@ -1,19 +1,25 @@
 ### breadcrumbs
+
 Breadcrumbs helps users to navigate
 
 [breadcrumbs docs](https://daisyui.com/components/breadcrumbs/)
 
 #### Class names
+
 - component: `breadcrumbs`
 
 #### Syntax
+
 ```html
 <div class="breadcrumbs">
-  <ul><li><a>Link</a></li></ul>
+	<ul>
+		<li><a>Link</a></li>
+	</ul>
 </div>
 ```
 
 #### Rules
+
 - breadcrumbs only has one main class name
 - Can contain icons inside the links
 - If you set `max-width` or the list gets larger than the container it will scroll

.opencode/skills/daisyui/components/button.md

@@ -1,9 +1,11 @@
 ### button
+
 Buttons allow the user to take actions
 
 [button docs](https://daisyui.com/components/button/)
 
 #### Class names
+
 - component: `btn`
 - color: `btn-neutral`, `btn-primary`, `btn-secondary`, `btn-accent`, `btn-info`, `btn-success`, `btn-warning`, `btn-error`
 - style: `btn-outline`, `btn-dash`, `btn-soft`, `btn-ghost`, `btn-link`
@@ -12,10 +14,13 @@ Buttons allow the user to take actions
 - modifier: `btn-wide`, `btn-block`, `btn-square`, `btn-circle`
 
 #### Syntax
+
 ```html
 <button class="btn {MODIFIER}">Button</button>
 ```
+
 #### Rules
+
 - {MODIFIER} is optional and can have one of each color/style/behavior/size/modifier class names
 - btn can be used on any html tags such as `<button>`, `<a>`, `<input>`
 - btn can have an icon before or after the text

.opencode/skills/daisyui/components/calendar.md

@@ -32,10 +32,10 @@ For Vanilla Calendar Pro:
 ```
 
 ```js
-import { Calendar } from "vanilla-calendar-pro"
+import { Calendar } from 'vanilla-calendar-pro';
 
-const calendar = new Calendar("#calendar")
+const calendar = new Calendar('#calendar');
-calendar.init()
+calendar.init();
 ```
 
 Or using CDN:
@@ -44,11 +44,11 @@ Or using CDN:
 <script src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/index.js" defer></script>
 <div id="calendar" class="vc"></div>
 <script>
-  document.addEventListener("DOMContentLoaded", () => {
+	document.addEventListener('DOMContentLoaded', () => {
-    const { Calendar } = window.VanillaCalendarPro
+		const { Calendar } = window.VanillaCalendarPro;
-    const calendar = new Calendar("#calendar")
+		const calendar = new Calendar('#calendar');
-    calendar.init()
+		calendar.init();
-  })
+	});
 </script>
 ```
 

.opencode/skills/daisyui/components/card.md

@@ -1,9 +1,11 @@
 ### card
+
 Cards are used to group and display content
 
 [card docs](https://daisyui.com/components/card/)
 
 #### Class names
+
 - component: `card`
 - part: `card-title`, `card-body`, `card-actions`
 - style: `card-border`, `card-dash`
@@ -11,18 +13,20 @@ Cards are used to group and display content
 - size: `card-xs`, `card-sm`, `card-md`, `card-lg`, `card-xl`
 
 #### Syntax
+
 ```html
 <div class="card {MODIFIER}">
-  <figure><img src="{image-url}" alt="{alt-text}" /></figure>
+	<figure><img src="{image-url}" alt="{alt-text}" /></figure>
-  <div class="card-body">
+	<div class="card-body">
-    <h2 class="card-title">{title}</h2>
+		<h2 class="card-title">{title}</h2>
-    <p>{CONTENT}</p>
+		<p>{CONTENT}</p>
-    <div class="card-actions">{actions}</div>
+		<div class="card-actions">{actions}</div>
-  </div>
+	</div>
 </div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier class names and one of the size class names
 - `<figure>` and `<div class="card-body">` are optional
 - can use `sm:card-side` for responsive layouts

.opencode/skills/daisyui/components/carousel.md

@@ -1,20 +1,24 @@
 ### carousel
+
 Carousel show images or content in a scrollable area
 
 [carousel docs](https://daisyui.com/components/carousel/)
 
 #### Class names
+
 - component: `carousel`
 - part: `carousel-item`
 - modifier: `carousel-start`, `carousel-center`, `carousel-end`
 - direction: `carousel-horizontal`, `carousel-vertical`
 
 #### Syntax
+
 ```html
 <div class="carousel {MODIFIER}">{CONTENT}</div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier/direction class names
 - Content is a list of `carousel-item` divs: `<div class="carousel-item"></div>`
 - To create a full-width carousel, add `w-full` to each carousel item

.opencode/skills/daisyui/components/chat.md

@@ -1,25 +1,29 @@
 ### chat
+
 Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc
 
 [chat docs](https://daisyui.com/components/chat/)
 
 #### Class names
+
 - component: `chat`
 - part: `chat-image`, `chat-header`, `chat-footer`, `chat-bubble`
 - placement: `chat-start`, `chat-end`
 - color: `chat-bubble-neutral`, `chat-bubble-primary`, `chat-bubble-secondary`, `chat-bubble-accent`, `chat-bubble-info`, `chat-bubble-success`, `chat-bubble-warning`, `chat-bubble-error`
 
 #### Syntax
+
 ```html
 <div class="chat {PLACEMENT}">
-  <div class="chat-image"></div>
+	<div class="chat-image"></div>
-  <div class="chat-header"></div>
+	<div class="chat-header"></div>
-  <div class="chat-bubble {COLOR}">Message text</div>
+	<div class="chat-bubble {COLOR}">Message text</div>
-  <div class="chat-footer"></div>
+	<div class="chat-footer"></div>
 </div>
 ```
 
 #### Rules
+
 - {PLACEMENT} is required and must be either `chat-start` or `chat-end`
 - {COLOR} is optional and can have one of the color class names
 - To add an avatar, use `<div class="chat-image avatar">` and nest the avatar content inside

.opencode/skills/daisyui/components/checkbox.md

@@ -1,17 +1,21 @@
 ### checkbox
+
 Checkboxes are used to select or deselect a value
 
 [checkbox docs](https://daisyui.com/components/checkbox/)
 
 #### Class names
+
 - component: `checkbox`
 - color: `checkbox-primary`, `checkbox-secondary`, `checkbox-accent`, `checkbox-neutral`, `checkbox-success`, `checkbox-warning`, `checkbox-info`, `checkbox-error`
 - size: `checkbox-xs`, `checkbox-sm`, `checkbox-md`, `checkbox-lg`, `checkbox-xl`
 
 #### Syntax
+
 ```html
 <input type="checkbox" class="checkbox {MODIFIER}" />
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each color/size class names

.opencode/skills/daisyui/components/collapse.md

@@ -1,22 +1,26 @@
 ### collapse
+
 Collapse is used for showing and hiding content
 
 [collapse docs](https://daisyui.com/components/collapse/)
 
 #### Class names
+
 - component: `collapse`
 - part: `collapse-title`, `collapse-content`
 - modifier: `collapse-arrow`, `collapse-plus`, `collapse-open`, `collapse-close`
 
 #### Syntax
+
 ```html
-<div tabindex="0" class="collapse {MODIFIER}">
+<div tabindex="0" class="{MODIFIER} collapse">
-  <div class="collapse-title">{title}</div>
+	<div class="collapse-title">{title}</div>
-  <div class="collapse-content">{CONTENT}</div>
+	<div class="collapse-content">{CONTENT}</div>
 </div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier class names
-- instead of `tabindex="0"`, you can use  `<input type="checkbox">` as a first child
+- instead of `tabindex="0"`, you can use `<input type="checkbox">` as a first child
 - Can also be a details/summary tag

.opencode/skills/daisyui/components/countdown.md

@@ -1,19 +1,23 @@
 ### countdown
+
 Countdown gives you a transition effect when you change a number between 0 to 999
 
 [countdown docs](https://daisyui.com/components/countdown/)
 
 #### Class names
+
 - component: `countdown`
 
 #### Syntax
+
 ```html
 <span class="countdown">
-  <span style="--value:{number};">number</span>
+	<span style="--value:{number};">number</span>
 </span>
 ```
 
 #### Rules
+
 - The `--value` CSS variable and text must be a number between 0 and 999
 - you need to change the span text and the `--value` CSS variable using JS
 - you need to add `aria-live="polite"` and `aria-label="{number}"` so screen readers can properly read changes

.opencode/skills/daisyui/components/diff.md

@@ -1,20 +1,24 @@
 ### diff
+
 Diff component shows a side-by-side comparison of two items
 
 [diff docs](https://daisyui.com/components/diff/)
 
 #### Class names
+
 - component: `diff`
 - part: `diff-item-1`, `diff-item-2`, `diff-resizer`
 
 #### Syntax
+
 ```html
 <figure class="diff">
-  <div class="diff-item-1">{item1}</div>
+	<div class="diff-item-1">{item1}</div>
-  <div class="diff-item-2">{item2}</div>
+	<div class="diff-item-2">{item2}</div>
-  <div class="diff-resizer"></div>
+	<div class="diff-resizer"></div>
 </figure>
 ```
 
 #### Rules
+
 - To maintain aspect ratio, add `aspect-16/9` or other aspect ratio classes to `<figure class="diff">` element

.opencode/skills/daisyui/components/divider.md

@@ -1,19 +1,23 @@
 ### divider
+
 Divider will be used to separate content vertically or horizontally
 
 [divider docs](https://daisyui.com/components/divider/)
 
 #### Class names
+
 - component: `divider`
 - color: `divider-neutral`, `divider-primary`, `divider-secondary`, `divider-accent`, `divider-success`, `divider-warning`, `divider-info`, `divider-error`
 - direction: `divider-vertical`, `divider-horizontal`
 - placement: `divider-start`, `divider-end`
 
 #### Syntax
+
 ```html
 <div class="divider {MODIFIER}">{text}</div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each direction/color/placement class names
 - Omit text for a blank divider

.opencode/skills/daisyui/components/dock.md

@@ -1,27 +1,33 @@
 ### dock
+
 Dock (also know as Bottom navigation or Bottom bar) is a UI element that provides navigation options to the user. Dock sticks to the bottom of the screen
 
 [dock docs](https://daisyui.com/components/dock/)
 
 #### Class names
+
 - component: `dock`
 - part: `dock-label`
 - modifier: `dock-active`
 - size: `dock-xs`, `dock-sm`, `dock-md`, `dock-lg`, `dock-xl`
 
 #### Syntax
+
 ```html
 <div class="dock {MODIFIER}">{CONTENT}</div>
 ```
+
 where content is a list of buttons:
+
 ```html
 <button>
-    <svg>{icon}</svg>
+	<svg>{icon}</svg>
-    <span class="dock-label">Text</span>
+	<span class="dock-label">Text</span>
 </button>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the size class names
 - To make a button active, add `dock-active` class to the button
 - add `<meta name="viewport" content="viewport-fit=cover">` is required for responsiveness of the dock in iOS

.opencode/skills/daisyui/components/drawer.md

@@ -1,9 +1,11 @@
 ### drawer
+
 Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page
 
 [drawer docs](https://daisyui.com/components/drawer/)
 
 #### Class names
+
 - component: `drawer`
 - part: `drawer-toggle`, `drawer-content`, `drawer-side`, `drawer-overlay`, `drawer-button`
 - placement: `drawer-end`
@@ -11,85 +13,97 @@ Drawer is a grid layout that can show/hide a sidebar on the left or right side o
 - variant: `is-drawer-open:`, `is-drawer-close:`
 
 #### Syntax
+
 ```html
 <div class="drawer {MODIFIER}">
-  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
+	<input id="my-drawer" type="checkbox" class="drawer-toggle" />
-  <div class="drawer-content">{CONTENT}</div>
+	<div class="drawer-content">{CONTENT}</div>
-  <div class="drawer-side">{SIDEBAR}</div>
+	<div class="drawer-side">{SIDEBAR}</div>
 </div>
 ```
+
 where {CONTENT} can be navbar, site content, footer, etc
 and {SIDEBAR} can be a menu like:
+
 ```html
-<ul class="menu p-4 w-80 min-h-full bg-base-100 text-base-content">
+<ul class="menu bg-base-100 text-base-content min-h-full w-80 p-4">
-  <li><a>Item 1</a></li>
+	<li><a>Item 1</a></li>
-  <li><a>Item 2</a></li>
+	<li><a>Item 2</a></li>
 </ul>
 ```
+
 To open/close the drawer, use a label that points to the `drawer-toggle` input:
+
 ```html
 <label for="my-drawer" class="btn drawer-button">Open/close drawer</label>
 ```
+
 Example: This sidebar is always visible on large screen, can be toggled on small screen:
+
 ```html
 <div class="drawer lg:drawer-open">
-  <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
+	<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
-  <div class="drawer-content flex flex-col items-center justify-center">
+	<div class="drawer-content flex flex-col items-center justify-center">
-    <!-- Page content here -->
+		<!-- Page content here -->
-    <label for="my-drawer-3" class="btn drawer-button lg:hidden">
+		<label for="my-drawer-3" class="btn drawer-button lg:hidden"> Open drawer </label>
-      Open drawer
+	</div>
-    </label>
+	<div class="drawer-side">
-  </div>
+		<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>
-  <div class="drawer-side">
+		<ul class="menu bg-base-200 min-h-full w-80 p-4">
-    <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>
+			<!-- Sidebar content here -->
-    <ul class="menu bg-base-200 min-h-full w-80 p-4">
+			<li><button>Sidebar Item 1</button></li>
-      <!-- Sidebar content here -->
+			<li><button>Sidebar Item 2</button></li>
-      <li><button>Sidebar Item 1</button></li>
+		</ul>
-      <li><button>Sidebar Item 2</button></li>
+	</div>
-    </ul>
-  </div>
 </div>
 ```
 
 Example: This sidebar is always visible. When it's close we only see icons, when it's open we see icons and text
+
 ```html
 <div class="drawer lg:drawer-open">
-  <input id="my-drawer-4" type="checkbox" class="drawer-toggle" />
+	<input id="my-drawer-4" type="checkbox" class="drawer-toggle" />
-  <div class="drawer-content">
+	<div class="drawer-content">
-    <!-- Page content here -->
+		<!-- Page content here -->
-  </div>
+	</div>
-  <div class="drawer-side is-drawer-close:overflow-visible">
+	<div class="drawer-side is-drawer-close:overflow-visible">
-    <label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay"></label>
+		<label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay"></label>
-    <div class="is-drawer-close:w-14 is-drawer-open:w-64 bg-base-200 flex flex-col items-start min-h-full">
+		<div
-      <!-- Sidebar content here -->
+			class="is-drawer-close:w-14 is-drawer-open:w-64 bg-base-200 flex min-h-full flex-col items-start"
-      <ul class="menu w-full grow">
+		>
-        <!-- list item -->
+			<!-- Sidebar content here -->
-        <li>
+			<ul class="menu w-full grow">
-          <button class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Homepage">
+				<!-- list item -->
-            {ICON_HERE}
+				<li>
-            <span class="is-drawer-close:hidden">Homepage</span>
+					<button class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Homepage">
-          </button>
+						{ICON_HERE}
-        </li>
+						<span class="is-drawer-close:hidden">Homepage</span>
-        <!-- list item -->
+					</button>
-        <li>
+				</li>
-          <button class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Settings">
+				<!-- list item -->
-            {ICON_HERE}
+				<li>
-            <span class="is-drawer-close:hidden">Settings</span>
+					<button class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Settings">
-          </button>
+						{ICON_HERE}
-        </li>
+						<span class="is-drawer-close:hidden">Settings</span>
-      </ul>
+					</button>
-      <!-- button to open/close drawer -->
+				</li>
-      <div class="m-2 is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Open">
+			</ul>
-        <label for="my-drawer-4" class="btn btn-ghost btn-circle drawer-button is-drawer-open:rotate-y-180">
+			<!-- button to open/close drawer -->
-          {ICON_HERE}
+			<div class="is-drawer-close:tooltip is-drawer-close:tooltip-right m-2" data-tip="Open">
-        </label>
+				<label
-      </div>
+					for="my-drawer-4"
-    </div>
+					class="btn btn-ghost btn-circle drawer-button is-drawer-open:rotate-y-180"
-  </div>
+				>
+					{ICON_HERE}
+				</label>
+			</div>
+		</div>
+	</div>
 </div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier/placement class names
 - `id` is required for the `drawer-toggle` input. change `my-drawer` to a unique id according to your needs
 - `lg:drawer-open` can be used to make sidebar visible on larger screens

.opencode/skills/daisyui/components/dropdown.md

@@ -1,9 +1,11 @@
 ### dropdown
+
 Dropdown can open a menu or any other element when the button is clicked
 
 [dropdown docs](https://daisyui.com/components/dropdown/)
 
 #### Class names
+
 - component: `dropdown`
 - part: `dropdown-content`
 - placement: `dropdown-start`, `dropdown-center`, `dropdown-end`, `dropdown-top`, `dropdown-bottom`, `dropdown-left`, `dropdown-right`
@@ -12,20 +14,27 @@ Dropdown can open a menu or any other element when the button is clicked
 #### Syntax
 
 Using popover API
+
 ```html
 <button popovertarget="{id}" style="anchor-name:--{anchor}">{button}</button>
-<ul class="dropdown" popover id="{id}" style="position-anchor:--{anchor}">{CONTENT}</ul>
+<ul class="dropdown" popover id="{id}" style="position-anchor:--{anchor}">
+	{CONTENT}
+</ul>
 ```
 
 Using details and summary (only opens/closes on click)
+
 ```html
 <details class="dropdown">
-  <summary>Button</summary>
+	<summary>Button</summary>
-  <ul class="dropdown-content">{CONTENT}</ul>
+	<ul class="dropdown-content">
+		{CONTENT}
+	</ul>
 </details>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier/placement class names
 - replace `{id}` and `{anchor}` with a unique name
 - The content can be any HTML element (not just `<ul>`)

.opencode/skills/daisyui/components/fab.md

@@ -1,98 +1,118 @@
 ### fab
+
 FAB (Floating Action Button) stays in the bottom corner of screen. It includes a focusable and accessible element with button role. Clicking or focusing it shows additional buttons (known as Speed Dial buttons) in a vertical arrangement or a flower shape (quarter circle)
 
 [fab docs](https://daisyui.com/components/fab/)
 
 #### Class names
+
 - component: `fab`
 - part: `fab-close`, `fab-main-action`
 - modifier: `fab-flower`
 
 #### Syntax
+
 A single FAB in the corner of screen
+
 ```html
 <div class="fab">
-  <button class="btn btn-lg btn-circle">{IconOriginal}</button>
+	<button class="btn btn-lg btn-circle">{IconOriginal}</button>
 </div>
 ```
+
 A FAB that opens a 3 other buttons in the corner of page vertically
+
 ```html
 <div class="fab">
-  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
+	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
-  <button class="btn btn-lg btn-circle">{Icon1}</button>
+	<button class="btn btn-lg btn-circle">{Icon1}</button>
-  <button class="btn btn-lg btn-circle">{Icon2}</button>
+	<button class="btn btn-lg btn-circle">{Icon2}</button>
-  <button class="btn btn-lg btn-circle">{Icon3}</button>
+	<button class="btn btn-lg btn-circle">{Icon3}</button>
 </div>
 ```
+
 A FAB that opens a 3 other buttons in the corner of page vertically and they have label text
+
 ```html
 <div class="fab">
-  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
+	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
-  <div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
+	<div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
-  <div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
+	<div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
-  <div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
+	<div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
 </div>
 ```
+
 FAB with rectangle buttons. These are not circular buttons so they can have more content.
+
 ```html
 <div class="fab">
-  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
+	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
-  <button class="btn btn-lg">{Label1}</button>
+	<button class="btn btn-lg">{Label1}</button>
-  <button class="btn btn-lg">{Label2}</button>
+	<button class="btn btn-lg">{Label2}</button>
-  <button class="btn btn-lg">{Label3}</button>
+	<button class="btn btn-lg">{Label3}</button>
 </div>
 ```
+
 FAB with close button. When FAB is open, the original button is replaced with a close button
+
 ```html
 <div class="fab">
-  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
+	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
-  <div class="fab-close">Close <span class="btn btn-circle btn-lg btn-error">×</span></div>
+	<div class="fab-close">Close <span class="btn btn-circle btn-lg btn-error">×</span></div>
-  <div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
+	<div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
-  <div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
+	<div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
-  <div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
+	<div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
 </div>
 ```
+
 FAB with Main Action button. When FAB is open, the original button is replaced with a main action button
+
 ```html
 <div class="fab">
-  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
+	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
-  <div class="fab-main-action">
+	<div class="fab-main-action">
-    {LabelMainAction}<button class="btn btn-circle btn-secondary btn-lg">{IconMainAction}</button>
+		{LabelMainAction}<button class="btn btn-circle btn-secondary btn-lg">{IconMainAction}</button>
-  </div>
+	</div>
-  <div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
+	<div>{Label1}<button class="btn btn-lg btn-circle">{Icon1}</button></div>
-  <div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
+	<div>{Label2}<button class="btn btn-lg btn-circle">{Icon2}</button></div>
-  <div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
+	<div>{Label3}<button class="btn btn-lg btn-circle">{Icon3}</button></div>
 </div>
 ```
+
 FAB Flower. It opens the buttons in a flower shape (quarter circle) arrangement instead of vertical
+
 ```html
 <div class="fab fab-flower">
-  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
+	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
-  <button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
+	<button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
-  <button class="btn btn-lg btn-circle">{Icon1}</button>
+	<button class="btn btn-lg btn-circle">{Icon1}</button>
-  <button class="btn btn-lg btn-circle">{Icon2}</button>
+	<button class="btn btn-lg btn-circle">{Icon2}</button>
-  <button class="btn btn-lg btn-circle">{Icon3}</button>
+	<button class="btn btn-lg btn-circle">{Icon3}</button>
 </div>
 ```
+
 FAB Flower with tooltips. There's no space for a text label in a quarter circle, so tooltips are used to indicate the button's function
+
 ```html
 <div class="fab fab-flower">
-  <div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
+	<div tabindex="0" role="button" class="btn btn-lg btn-circle btn-primary">{IconOriginal}</div>
-  <button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
+	<button class="fab-main-action btn btn-circle btn-lg">{IconMainAction}</button>
-  <div class="tooltip tooltip-left" data-tip="{Label1}">
+	<div class="tooltip tooltip-left" data-tip="{Label1}">
-    <button class="btn btn-lg btn-circle">{Icon1}</button>
+		<button class="btn btn-lg btn-circle">{Icon1}</button>
-  </div>
+	</div>
-  <div class="tooltip tooltip-left" data-tip="{Label2}">
+	<div class="tooltip tooltip-left" data-tip="{Label2}">
-    <button class="btn btn-lg btn-circle">{Icon2}</button>
+		<button class="btn btn-lg btn-circle">{Icon2}</button>
-  </div>
+	</div>
-  <div class="tooltip tooltip-left" data-tip="{Label3}">
+	<div class="tooltip tooltip-left" data-tip="{Label3}">
-    <button class="btn btn-lg btn-circle">{Icon3}</button>
+		<button class="btn btn-lg btn-circle">{Icon3}</button>
-  </div>
+	</div>
 </div>
 ```
+
 #### Rules
-- {Icon*} should be replaced with the appropriate icon for each button. SVG icons are recommended
+
+- {Icon\*} should be replaced with the appropriate icon for each button. SVG icons are recommended
 - {IconOriginal} is the icon that we see before opening the FAB
 - {IconMainAction} is the icon we see after opening the FAB
 - {Icon1}, {Icon2}, {Icon3} are the icons for the additional buttons
-- {Label*} is the label text for each button
+- {Label\*} is the label text for each button

.opencode/skills/daisyui/components/fieldset.md

@@ -1,20 +1,24 @@
 ### fieldset
+
 Fieldset is a container for grouping related form elements. It includes fieldset-legend as a title and label as a description
 
 [fieldset docs](https://daisyui.com/components/fieldset/)
 
 #### Class names
+
 - Component: `fieldset`, `label`
 - Parts: `fieldset-legend`
 
 #### Syntax
+
 ```html
 <fieldset class="fieldset">
-  <legend class="fieldset-legend">{title}</legend>
+	<legend class="fieldset-legend">{title}</legend>
-  {CONTENT}
+	{CONTENT}
-  <p class="label">{description}</p>
+	<p class="label">{description}</p>
 </fieldset>
 ```
 
 #### Rules
+
 - You can use any element as a direct child of fieldset to add form elements

.opencode/skills/daisyui/components/file-input.md

@@ -1,18 +1,22 @@
 ### file-input
+
 File Input is an input field for uploading files
 
 [file-input docs](https://daisyui.com/components/file-input/)
 
 #### Class Names:
+
 - Component: `file-input`
 - Style: `file-input-ghost`
 - Color: `file-input-neutral`, `file-input-primary`, `file-input-secondary`, `file-input-accent`, `file-input-info`, `file-input-success`, `file-input-warning`, `file-input-error`
 - Size: `file-input-xs`, `file-input-sm`, `file-input-md`, `file-input-lg`, `file-input-xl`
 
 #### Syntax
+
 ```html
 <input type="file" class="file-input {MODIFIER}" />
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each style/color/size class names

.opencode/skills/daisyui/components/filter.md

@@ -1,31 +1,38 @@
 ### filter
+
 Filter is a group of radio buttons. Choosing one of the options will hide the others and shows a reset button next to the chosen option
 
 [filter docs](https://daisyui.com/components/filter/)
 
 #### Class names
+
 - component: `filter`
 - part: `filter-reset`
 
 #### Syntax
+
 Using HTML form
+
 ```html
 <form class="filter">
-  <input class="btn btn-square" type="reset" value="×"/>
+	<input class="btn btn-square" type="reset" value="×" />
-  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 1 title"/>
+	<input class="btn" type="radio" name="{NAME}" aria-label="Tab 1 title" />
-  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 2 title"/>
+	<input class="btn" type="radio" name="{NAME}" aria-label="Tab 2 title" />
 </form>
 ```
+
 Without HTML form
+
 ```html
 <div class="filter">
-  <input class="btn filter-reset" type="radio" name="{NAME}" aria-label="×"/>
+	<input class="btn filter-reset" type="radio" name="{NAME}" aria-label="×" />
-  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 1 title"/>
+	<input class="btn" type="radio" name="{NAME}" aria-label="Tab 1 title" />
-  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 2 title"/>
+	<input class="btn" type="radio" name="{NAME}" aria-label="Tab 2 title" />
 </div>
 ```
 
 #### Rules
+
 - replace `{NAME}` with proper value, according to the context of the filter
 - Each set of radio inputs must have unique `name` attributes to avoid conflicts
 - Use `<form>` tag when possible and only use `<div>` if you can't use a HTML form for some reason

.opencode/skills/daisyui/components/footer.md

@@ -1,21 +1,26 @@
 ### footer
+
 Footer can contain logo, copyright notice, and links to other pages
 
 [footer docs](https://daisyui.com/components/footer/)
 
 #### Class names
+
 - component: `footer`
 - part: `footer-title`
 - placement: `footer-center`
 - direction: `footer-horizontal`, `footer-vertical`
 
 #### Syntax
+
 ```html
 <footer class="footer {MODIFIER}">{CONTENT}</footer>
 ```
+
 where content can contain several `<nav>` tags with `footer-title` and links inside
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each placement/direction class names
 - try to use `sm:footer-horizontal` to make footer responsive
 - suggestion - use `base-200` for background color

.opencode/skills/daisyui/components/hero.md

@@ -1,18 +1,22 @@
 ### hero
+
 Hero is a component for displaying a large box or image with a title and description
 
 [hero docs](https://daisyui.com/components/hero/)
 
 #### Class names
+
 - component: `hero`
 - part: `hero-content`, `hero-overlay`
 
 #### Syntax
+
 ```html
 <div class="hero {MODIFIER}">{CONTENT}</div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional
 - Use `hero-content` for the text content
 - Use `hero-overlay` inside the hero to overlay the background image with a color

.opencode/skills/daisyui/components/hover-3d.md

@@ -1,4 +1,5 @@
 ### hover-3d
+
 Hover 3D is a wrapper component that adds a 3D hover effect to its content. When we hover over the component, it tilts and rotates based on the mouse position, creating an interactive 3D effect.
 
 `hover-3d` works by placing 8 hover zones on top of the content. Each zone detects mouse movement and applies a slight rotation to the content based on the mouse position within that zone. The combined effect of all 8 zones creates a smooth and responsive 3D tilt effect as the user moves their mouse over the component.
@@ -8,26 +9,29 @@ Only use non-interactive content inside the `hover-3d` wrapper. If you want to m
 [hover-3d docs](https://daisyui.com/components/hover-3d/)
 
 #### Class names
+
 - component: `hover-3d`
 
 #### Syntax
+
 ```html
-<div class="hover-3d my-12 mx-2">
+<div class="hover-3d mx-2 my-12">
-  <figure class="max-w-100 rounded-2xl">
+	<figure class="max-w-100 rounded-2xl">
-    <img src="https://img.daisyui.com/images/stock/creditcard.webp" alt="Tailwind CSS 3D card" />
+		<img src="https://img.daisyui.com/images/stock/creditcard.webp" alt="Tailwind CSS 3D card" />
-  </figure>
+	</figure>
-  <div></div>
+	<div></div>
-  <div></div>
+	<div></div>
-  <div></div>
+	<div></div>
-  <div></div>
+	<div></div>
-  <div></div>
+	<div></div>
-  <div></div>
+	<div></div>
-  <div></div>
+	<div></div>
-  <div></div>
+	<div></div>
 </div>
 ```
 
 #### Rules
+
 - hover-3d can be a `<div>` or a `<a>`
 - hover-3d must have exactly 9 direct children where the first child is the main content and the other 8 children are empty `<div>`s for hover zones
 - content inside hover-3d should be non-interactive (no buttons, links, inputs, etc)

.opencode/skills/daisyui/components/hover-gallery.md

@@ -1,22 +1,26 @@
 ### hover-gallery
+
 Hover Gallery is container of images. The first image is visible by default and when we hover it horizontally, other images show up. Hover Gallery is useful for product cards in ecommerce sites, portfolios or in image galleries. Hover Gallery can include up to 10 images.
 
 [hover-gallery docs](https://daisyui.com/components/hover-gallery/)
 
 #### Class names
+
 - component: `hover-gallery`
 
 #### Syntax
+
 ```html
 <figure class="hover-gallery max-w-60">
-  <img src="https://img.daisyui.com/images/stock/daisyui-hat-1.webp" />
+	<img src="https://img.daisyui.com/images/stock/daisyui-hat-1.webp" />
-  <img src="https://img.daisyui.com/images/stock/daisyui-hat-2.webp" />
+	<img src="https://img.daisyui.com/images/stock/daisyui-hat-2.webp" />
-  <img src="https://img.daisyui.com/images/stock/daisyui-hat-3.webp" />
+	<img src="https://img.daisyui.com/images/stock/daisyui-hat-3.webp" />
-  <img src="https://img.daisyui.com/images/stock/daisyui-hat-4.webp" />
+	<img src="https://img.daisyui.com/images/stock/daisyui-hat-4.webp" />
 </figure>
 ```
 
 #### Rules
+
 - hover-gallery can be a `<div>` or a `<figure>`
 - hover-gallery can include up to 10 images
 - hover-gallery needs a max width otherwise if fills the container width

.opencode/skills/daisyui/components/indicator.md

@@ -1,21 +1,25 @@
 ### indicator
+
 Indicators are used to place an element on the corner of another element
 
 [indicator docs](https://daisyui.com/components/indicator/)
 
 #### Class names
+
 - component: `indicator`
 - part: `indicator-item`
 - placement: `indicator-start`, `indicator-center`, `indicator-end`, `indicator-top`, `indicator-middle`, `indicator-bottom`
 
 #### Syntax
+
 ```html
 <div class="indicator">
-  <span class="indicator-item">{indicator content}</span>
+	<span class="indicator-item">{indicator content}</span>
-  <div>{main content}</div>
+	<div>{main content}</div>
 </div>
 ```
 
 #### Rules
+
 - Add all indicator elements (with `indicator-item` class) before the main content
 - {placement} is optional and can have one of each horizontal/vertical class names. default is `indicator-end indicator-top`

.opencode/skills/daisyui/components/input.md

@@ -1,20 +1,24 @@
 ### input
+
 Text Input is a simple input field
 
 [input docs](https://daisyui.com/components/input/)
 
 #### Class names
+
 - component: `input`
 - style: `input-ghost`
 - color: `input-neutral`, `input-primary`, `input-secondary`, `input-accent`, `input-info`, `input-success`, `input-warning`, `input-error`
 - size: `input-xs`, `input-sm`, `input-md`, `input-lg`, `input-xl`
 
 #### Syntax
+
 ```html
 <input type="{type}" placeholder="Type here" class="input {MODIFIER}" />
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each style/color/size class names
 - Can be used with any input field type (text, password, email, etc.)
 - Use `input` class for the parent when you have more than one element inside input

.opencode/skills/daisyui/components/join.md

@@ -1,18 +1,22 @@
 ### join
+
 Join is a container for grouping multiple items, it can be used to group buttons, inputs, etc. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items
 
 [join docs](https://daisyui.com/components/join/)
 
 #### Class names
+
 - component: `join`, `join-item`
 - direction: `join-vertical`, `join-horizontal`
 
 #### Syntax
+
 ```html
 <div class="join {MODIFIER}">{CONTENT}</div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the direction class names
 - Any direct child of the join element will get joined together
 - Any element with `join-item` will be affected

.opencode/skills/daisyui/components/kbd.md

@@ -1,16 +1,20 @@
 ### kbd
+
 Kbd is used to display keyboard shortcuts
 
 [kbd docs](https://daisyui.com/components/kbd/)
 
 #### Class names
+
 - component: `kbd`
 - size: `kbd-xs`, `kbd-sm`, `kbd-md`, `kbd-lg`, `kbd-xl`
 
 #### Syntax
+
 ```html
 <kbd class="kbd {MODIFIER}">K</kbd>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the size class names

.opencode/skills/daisyui/components/label.md

@@ -1,27 +1,34 @@
 ### label
+
 Label is used to provide a name or title for an input field. Label can be placed before or after the field
 
 [label docs](https://daisyui.com/components/label/)
 
 #### Class names
+
 - component: `label`, `floating-label`
 
 #### Syntax
+
 For regular label:
+
 ```html
 <label class="input">
-  <span class="label">{label text}</span>
+	<span class="label">{label text}</span>
-  <input type="text" placeholder="Type here" />
+	<input type="text" placeholder="Type here" />
 </label>
 ```
+
 For floating label:
+
 ```html
 <label class="floating-label">
-  <input type="text" placeholder="Type here" class="input" />
+	<input type="text" placeholder="Type here" class="input" />
-  <span>{label text}</span>
+	<span>{label text}</span>
 </label>
 ```
 
 #### Rules
+
 - The `input` class is for styling the parent element which contains the input field and label, so the label does not have the 'input' class
 - Use `floating-label` for the parent of an input field and a span that floats above the input field when the field is focused

.opencode/skills/daisyui/components/link.md

@@ -1,17 +1,21 @@
 ### link
+
 Link adds the missing underline style to links
 
 [link docs](https://daisyui.com/components/link/)
 
 #### Class names
+
 - component: `link`
 - style: `link-hover`
 - color: `link-neutral`, `link-primary`, `link-secondary`, `link-accent`, `link-success`, `link-info`, `link-warning`, `link-error`
 
 #### Syntax
+
 ```html
 <a class="link {MODIFIER}">Click me</a>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier class names

.opencode/skills/daisyui/components/list.md

@@ -1,20 +1,24 @@
 ### list
+
 List is a vertical layout to display information in rows
 
 [list docs](https://daisyui.com/components/list/)
 
 #### Class Names:
+
 - Component: `list`, `list-row`
 - Modifier: `list-col-wrap`, `list-col-grow`
 
 #### Syntax
+
 ```html
 <ul class="list">
-  <li class="list-row">{CONTENT}</li>
+	<li class="list-row">{CONTENT}</li>
 </ul>
 ```
 
 #### Rules
+
 - Use `list-row` for each item inside the list
 - By default, the second child of the `list-row` will fill the remaining space. You can use `list-col-grow` on another child to make it fill the remaining space instead
 - Use `list-col-wrap` to force an item to wrap to the next line

.opencode/skills/daisyui/components/loading.md

@@ -1,17 +1,21 @@
 ### loading
+
 Loading shows an animation to indicate that something is loading
 
 [loading docs](https://daisyui.com/components/loading/)
 
 #### Class names
+
 - component: `loading`
 - style: `loading-spinner`, `loading-dots`, `loading-ring`, `loading-ball`, `loading-bars`, `loading-infinity`
 - size: `loading-xs`, `loading-sm`, `loading-md`, `loading-lg`, `loading-xl`
 
 #### Syntax
+
 ```html
 <span class="loading {MODIFIER}"></span>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the style/size class names

.opencode/skills/daisyui/components/mask.md

@@ -1,19 +1,23 @@
 ### mask
+
 Mask crops the content of the element to common shapes
 
 [mask docs](https://daisyui.com/components/mask/)
 
 #### Class names
+
 - component: `mask`
 - style: `mask-squircle`, `mask-heart`, `mask-hexagon`, `mask-hexagon-2`, `mask-decagon`, `mask-pentagon`, `mask-diamond`, `mask-square`, `mask-circle`, `mask-star`, `mask-star-2`, `mask-triangle`, `mask-triangle-2`, `mask-triangle-3`, `mask-triangle-4`
 - modifier: `mask-half-1`, `mask-half-2`
 
 #### Syntax
+
 ```html
 <img class="mask {MODIFIER}" src="{image-url}" />
 ```
 
 #### Rules
+
 - {MODIFIER} is required and can have one of the style/modifier class names
 - You can change the shape of any element using `mask` class names
 - You can set custom sizes using `w-*` and `h-*`

.opencode/skills/daisyui/components/megamenu.md

@@ -1,9 +1,11 @@
 ### megamenu
+
 A megamenu is a large, horizontal menu where each item opens a popover to show a large block of navigation links. Megamenu must be used once, on top of the page. Inside each popover, you can use a daisyUI menu, or any custom content. Megamenu fits better on large screens only, and for small screens, you can hide the megamenu and show the content in a dropdown or a drawer.
 
 [megamenu docs](https://daisyui.com/components/megamenu/)
 
 #### Class names
+
 - component: `megamenu`
 - part: `megamenu-active`
 - modifier: `megamenu-wide`, `megamenu-full`
@@ -11,53 +13,69 @@ A megamenu is a large, horizontal menu where each item opens a popover to show a
 - size: `megamenu-xs`, `megamenu-sm`, `megamenu-md`, `megamenu-lg`, `megamenu-xl`
 
 #### Syntax
+
 ```html
 <button class="btn sm:hidden" popovertarget="my-megamenu-1">Menu</button>
-<div class="megamenu max-sm:megamenu-vertical {MODIFIER} p-2 border border-base-300" id="my-megamenu-1" popover>
+<div
-  <span class="megamenu-active"></span>
+	class="megamenu max-sm:megamenu-vertical {MODIFIER} border-base-300 border p-2"
+	id="my-megamenu-1"
+	popover
+>
+	<span class="megamenu-active"></span>
 
-  <button popovertarget="item-1">button 1</button>
+	<button popovertarget="item-1">button 1</button>
-  <div id="item-1" popover>
+	<div id="item-1" popover>{CONTENT}</div>
-    {CONTENT}
-  </div>
-
-  <button popovertarget="item-2">button 2</button>
-  <div id="item-2" popover>
-    {CONTENT}
-  </div>
 
+	<button popovertarget="item-2">button 2</button>
+	<div id="item-2" popover>{CONTENT}</div>
 </div>
 ```
+
 Example of megamenu-wide with lots of menu items
+
 ```html
 <button class="btn sm:hidden" popovertarget="my-megamenu-2">Menu</button>
-<div class="megamenu max-sm:megamenu-vertical megamenu-wide w-full p-2 border border-base-300" id="my-megamenu-2" popover>
+<div
-  <span class="megamenu-active"></span>
+	class="megamenu max-sm:megamenu-vertical megamenu-wide border-base-300 w-full border p-2"
-  <button popovertarget="c1">One</button>
+	id="my-megamenu-2"
-  <div id="c1" popover>
+	popover
-    <div class="flex max-sm:flex-col items-start">
+>
-      <ul class="menu w-full md:menu-horizontal">
+	<span class="megamenu-active"></span>
-        <li>
+	<button popovertarget="c1">One</button>
-          <a>first column menu item</a>
+	<div id="c1" popover>
-          <ul><li><a>sub menu item</a></li></ul>
+		<div class="flex items-start max-sm:flex-col">
-        </li>
+			<ul class="menu md:menu-horizontal w-full">
-        <li>
+				<li>
-          <a>second column menu item</a>
+					<a>first column menu item</a>
-          <ul><li><a>sub menu item</a></li></ul>
+					<ul>
-        </li>
+						<li><a>sub menu item</a></li>
-        <li>
+					</ul>
-          <a>third column menu item</a>
+				</li>
-          <ul><li><a>sub menu item</a></li></ul>
+				<li>
-        </li>
+					<a>second column menu item</a>
-      </ul>
+					<ul>
-      <img src="{image-url}" class="md:max-w-sm max-md:w-auto" alt="sample image at the end of the megamenu">
+						<li><a>sub menu item</a></li>
-    </div>
+					</ul>
-  </div>
+				</li>
+				<li>
+					<a>third column menu item</a>
+					<ul>
+						<li><a>sub menu item</a></li>
+					</ul>
+				</li>
+			</ul>
+			<img
+				src="{image-url}"
+				class="max-md:w-auto md:max-w-sm"
+				alt="sample image at the end of the megamenu"
+			/>
+		</div>
+	</div>
 </div>
 ```
 
-
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier class names and one of the size class names
 - `megamenu-active` span is mandatory. it's the indicator that moves under the active item
 - Each button must have a corresponding popover with the same id as the popovertarget value. HTML IDs must be unique.

.opencode/skills/daisyui/components/menu.md

@@ -1,9 +1,11 @@
 ### menu
+
 Menu is used to display a list of links vertically or horizontally
 
 [menu docs](https://daisyui.com/components/menu/)
 
 #### Class names
+
 - component: `menu`
 - part: `menu-title`, `menu-dropdown`, `menu-dropdown-toggle`
 - modifier: `menu-disabled`, `menu-active`, `menu-focus`, `menu-dropdown-show`, `menu-paged`
@@ -11,20 +13,25 @@ Menu is used to display a list of links vertically or horizontally
 - direction: `menu-vertical`, `menu-horizontal`
 
 #### Syntax
+
 Vertical menu:
+
 ```html
 <ul class="menu">
-  <li><button>Item</button></li>
+	<li><button>Item</button></li>
 </ul>
 ```
+
 Horizontal menu:
+
 ```html
 <ul class="menu menu-horizontal">
-  <li><button>Item</button></li>
+	<li><button>Item</button></li>
 </ul>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier/size/direction class names
 - Use `lg:menu-horizontal` for responsive layouts
 - Use `menu-title` for list item title

.opencode/skills/daisyui/components/mockup-browser.md

@@ -1,22 +1,24 @@
 ### mockup-browser
+
 Browser mockup shows a box that looks like a browser window
 
 [mockup-browser docs](https://daisyui.com/components/mockup-browser/)
 
 #### Class names
+
 - component: `mockup-browser`
 - part: `mockup-browser-toolbar`
 
 #### Syntax
+
 ```html
 <div class="mockup-browser">
-  <div class="mockup-browser-toolbar">
+	<div class="mockup-browser-toolbar">{toolbar content}</div>
-    {toolbar content}
+	<div>{CONTENT}</div>
-  </div>
-  <div>{CONTENT}</div>
 </div>
 ```
 
 #### Rules
+
 - For a default mockup, use just `mockup-browser` class name
 - To set a URL in toolbar, add a div with `input` class

.opencode/skills/daisyui/components/mockup-code.md

@@ -1,19 +1,23 @@
 ### mockup-code
+
 Code mockup is used to show a block of code in a box that looks like a code editor
 
 [mockup-code docs](https://daisyui.com/components/mockup-code/)
 
 #### Class names
+
 - component: `mockup-code`
 
 #### Syntax
+
 ```html
 <div class="mockup-code">
-  <pre data-prefix="$"><code>npm i daisyui</code></pre>
+	<pre data-prefix="$"><code>npm i daisyui</code></pre>
 </div>
 ```
 
 #### Rules
+
 - Use `<pre data-prefix="{prefix}">` to show a prefix before each line
 - Use `<code>` tag to add code syntax highlighting (requires additional library)
 - To highlight a line, add background/text color

.opencode/skills/daisyui/components/mockup-phone.md

@@ -1,19 +1,23 @@
 ### mockup-phone
+
 Phone mockup shows a mockup of an iPhone
 
 [mockup-phone docs](https://daisyui.com/components/mockup-phone/)
 
 #### Class names
+
 - component: `mockup-phone`
 - part: `mockup-phone-camera`, `mockup-phone-display`
 
 #### Syntax
+
 ```html
 <div class="mockup-phone">
-  <div class="mockup-phone-camera"></div>
+	<div class="mockup-phone-camera"></div>
-  <div class="mockup-phone-display">{CONTENT}</div>
+	<div class="mockup-phone-display">{CONTENT}</div>
 </div>
 ```
 
 #### Rules
+
 - Inside `mockup-phone-display` you can add anything

.opencode/skills/daisyui/components/mockup-window.md

@@ -1,14 +1,17 @@
 ### mockup-window
+
 Window mockup shows a box that looks like an operating system window
 
 [mockup-window docs](https://daisyui.com/components/mockup-window/)
 
 #### Class names
+
 - component: `mockup-window`
 
 #### Syntax
+
 ```html
 <div class="mockup-window">
-  <div>{CONTENT}</div>
+	<div>{CONTENT}</div>
 </div>
 ```

.opencode/skills/daisyui/components/modal.md

@@ -1,84 +1,95 @@
 ### modal
+
 Modal is used to show a dialog or a box when you click a button
 
 [modal docs](https://daisyui.com/components/modal/)
 
 #### Class names
+
 - component: `modal`
 - part: `modal-box`, `modal-action`, `modal-backdrop`, `modal-toggle`
 - modifier: `modal-open`
 - placement: `modal-top`, `modal-middle`, `modal-bottom`, `modal-start`, `modal-end`
 
 #### Syntax
+
 Using HTML dialog element (recommended)
+
 ```html
 <button onclick="my_modal.showModal()">Open modal</button>
 <dialog id="my_modal" class="modal">
-  <div class="modal-box">{CONTENT}</div>
+	<div class="modal-box">{CONTENT}</div>
-  <form method="dialog" class="modal-backdrop"><button>close</button></form>
+	<form method="dialog" class="modal-backdrop"><button>close</button></form>
 </dialog>
 ```
+
 If we want it to close when clicking outside:
+
 ```html
 <button class="btn" onclick="my_modal.showModal()">open modal</button>
 <dialog id="my_modal" class="modal">
-  <div class="modal-box">
+	<div class="modal-box">
-    <h3 class="text-lg font-bold">Hello!</h3>
+		<h3 class="text-lg font-bold">Hello!</h3>
-    <p class="py-4">Press ESC key or click outside to close</p>
+		<p class="py-4">Press ESC key or click outside to close</p>
-  </div>
+	</div>
-  <form method="dialog" class="modal-backdrop">
+	<form method="dialog" class="modal-backdrop">
-    <button>close</button>
+		<button>close</button>
-  </form>
+	</form>
 </dialog>
 ```
 
-
 Using popover API (recommended only if we DON'T want to trap the keyboard navigation in the modal)
+
 ```html
 <button popovertarget="my_modal" class="btn">Open modal</button>
 <div class="modal" popover id="my_modal">
-  <div class="modal-box">
+	<div class="modal-box">
-    {CONTENT}
+		{CONTENT}
-    <div class="modal-action">
+		<div class="modal-action">
-      <button popovertarget="my_modal" popovertargetaction="hide">close</button>
+			<button popovertarget="my_modal" popovertargetaction="hide">close</button>
-    </div>
+		</div>
-  </div>
+	</div>
 </div>
 ```
+
 If we want it to close when clicking outside:
+
 ```html
 <button class="btn" popovertarget="my_modal">Open</button>
 
 <div class="modal" id="my_modal" popover>
-  <div class="modal-box">
+	<div class="modal-box">
-    <h3 class="font-bold text-lg">Hello!</h3>
+		<h3 class="text-lg font-bold">Hello!</h3>
-    <p class="py-4">Press ESC key or click the button below to close</p>
+		<p class="py-4">Press ESC key or click the button below to close</p>
-  </div>
+	</div>
-  <div class="modal-backdrop">
+	<div class="modal-backdrop">
-    <button popovertarget="my_modal" popovertargetaction="hide">close</button>
+		<button popovertarget="my_modal" popovertargetaction="hide">close</button>
-  </div>
+	</div>
 </div>
 ```
 
 Using checkbox (legacy)
+
 ```html
 <label for="my-modal" class="btn">Open modal</label>
 <input type="checkbox" id="my-modal" class="modal-toggle" />
 <div class="modal">
-  <div class="modal-box">{CONTENT}</div>
+	<div class="modal-box">{CONTENT}</div>
-  <label class="modal-backdrop" for="my-modal">Close</label>
+	<label class="modal-backdrop" for="my-modal">Close</label>
 </div>
 ```
 
 Using anchor links (legacy)
+
 ```html
 <a href="#my-modal" class="btn">Open modal</a>
 <div class="modal" id="my-modal">
-  <div class="modal-box">{CONTENT}</div>
+	<div class="modal-box">{CONTENT}</div>
 </div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier/placement class names
 - Use unique IDs for each modal
 - For HTML dialog element modals, add `<form method="dialog">` for closing the modal with submit

.opencode/skills/daisyui/components/navbar.md

@@ -1,18 +1,22 @@
 ### navbar
+
 Navbar is used to show a navigation bar on the top of the page
 
 [navbar docs](https://daisyui.com/components/navbar/)
 
 #### Class names
+
 - component: `navbar`
 - part: `navbar-start`, `navbar-center`, `navbar-end`
 
 #### Syntax
+
 ```html
 <div class="navbar">{CONTENT}</div>
 ```
 
 #### Rules
+
 - use `navbar-start`, `navbar-center`, `navbar-end` to position content horizontally
 - put anything inside each section
 - suggestion - use `base-200` for background color

.opencode/skills/daisyui/components/otp.md

@@ -1,26 +1,37 @@
 ### OTP
+
 OTP (One-Time Password) component for inputting verification codes. It's usually 4 to 6 digits long and is used for two-factor authentication (2FA) or passwordless login.
 
 [OTP docs](https://daisyui.com/components/otp/)
 
 #### Class names
+
 - component: `otp`
 - size: `otp-xs`, `otp-sm`, `otp-md`, `otp-lg`, `otp-xl`
 - modifier: `otp-joined`
 - color: `otp-neutral`, `otp-primary`, `otp-secondary`, `otp-accent`, `otp-info`, `otp-success`, `otp-warning`, `otp-error`
 
 #### Syntax
+
 ```html
 <label class="otp {MODIFIER}">
-  <span></span>
+	<span></span>
-  <span></span>
+	<span></span>
-  <span></span>
+	<span></span>
-  <span></span>
+	<span></span>
-  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+	<input
+		type="text"
+		autocomplete="one-time-code"
+		inputmode="numeric"
+		maxlength="4"
+		pattern="[0-9]{4}"
+		required
+	/>
 </label>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the size/color class names
 - `otp-joined` modifier connects the character boxes together
 - the `otp` class is for a label. The label should have 4 to 6 empty `<span>` elements for the visual representation of each digit and an input field for entering the code

.opencode/skills/daisyui/components/pagination.md

@@ -1,18 +1,22 @@
 ### pagination
+
 Pagination is a group of buttons
 
 [pagination docs](https://daisyui.com/components/pagination/)
 
 #### Class names
+
 - component: `join`
 - part: `join-item`
 - direction: `join-vertical`, `join-horizontal`
 
 #### Syntax
+
 ```html
 <div class="join">{CONTENT}</div>
 ```
 
 #### Rules
+
 - Use `join-item` for each button or link inside the pagination
 - Use `btn` class for styling pagination items

.opencode/skills/daisyui/components/progress.md

@@ -1,17 +1,21 @@
 ### progress
+
 Progress bar can be used to show the progress of a task or to show the passing of time
 
 [progress docs](https://daisyui.com/components/progress/)
 
 #### Class names
+
 - component: `progress`
 - color: `progress-neutral`, `progress-primary`, `progress-secondary`, `progress-accent`, `progress-info`, `progress-success`, `progress-warning`, `progress-error`
 
 #### Syntax
+
 ```html
 <progress class="progress {MODIFIER}" value="50" max="100"></progress>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the color class names
 - You must specify value and max attributes

.opencode/skills/daisyui/components/radial-progress.md

@@ -1,17 +1,21 @@
 ### radial-progress
+
 Radial progress can be used to show the progress of a task or to show the passing of time
 
 [radial-progress docs](https://daisyui.com/components/radial-progress/)
 
 #### Class names
+
 - component: `radial-progress`
 
 #### Syntax
+
 ```html
 <div class="radial-progress" style="--value:70;" aria-valuenow="70" role="progressbar">70%</div>
 ```
 
 #### Rules
+
 - The `--value` CSS variable and text must be a number between 0 and 100
 - you need to add `aria-valuenow={value}` and `role="progressbar"` so screen readers can properly read value and also show that its a progress element to them
 - Use `div` instead of progress because browsers can't show text inside progress tag

.opencode/skills/daisyui/components/radio.md

@@ -1,19 +1,23 @@
 ### radio
+
 Radio buttons allow the user to select one option
 
 [radio docs](https://daisyui.com/components/radio/)
 
 #### Class names
+
 - component: `radio`
 - color: `radio-neutral`, `radio-primary`, `radio-secondary`, `radio-accent`, `radio-success`, `radio-warning`, `radio-info`, `radio-error`
 - size: `radio-xs`, `radio-sm`, `radio-md`, `radio-lg`, `radio-xl`
 
 #### Syntax
+
 ```html
 <input type="radio" name="{name}" class="radio {MODIFIER}" />
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the size/color class names
 - Replace {name} with a unique name for the radio group
 - Each set of radio inputs should have unique `name` attributes to avoid conflicts with other sets of radio inputs on the same page

.opencode/skills/daisyui/components/range.md

@@ -1,20 +1,24 @@
 ### range
+
 Range slider is used to select a value by sliding a handle
 
 [range docs](https://daisyui.com/components/range/)
 
 #### Class names
+
 - component: `range`
 - color: `range-neutral`, `range-primary`, `range-secondary`, `range-accent`, `range-success`, `range-warning`, `range-info`, `range-error`
 - size: `range-xs`, `range-sm`, `range-md`, `range-lg`, `range-xl`
 - direction: `range-vertical` (vertical slider)
 
 #### Syntax
+
 ```html
 <input type="range" min="0" max="100" value="40" class="range {MODIFIER}" />
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each color/size class names
 - For a vertical slider use `range-vertical`
 - You must specify `min` and `max` attributes

.opencode/skills/daisyui/components/rating.md

@@ -1,30 +1,35 @@
 ### rating
+
 Rating is a set of radio buttons that allow the user to rate something
 
 [rating docs](https://daisyui.com/components/rating/)
 
 #### Class names
+
 - component: `rating`
 - modifier: `rating-half`, `rating-hidden`
 - size: `rating-xs`, `rating-sm`, `rating-md`, `rating-lg`, `rating-xl`
 
 #### Syntax
+
 ```html
 <div class="rating {MODIFIER}">
-  <input type="radio" name="rating-1" class="mask mask-star" />
+	<input type="radio" name="rating-1" class="mask mask-star" />
 </div>
 ```
 
 For a read-only (non-interactive) rating, use `<div>` elements instead of radio inputs and mark the selected one with `aria-current="true"`:
+
 ```html
 <div class="rating">
-  <div class="mask mask-star" aria-label="1 star"></div>
+	<div class="mask mask-star" aria-label="1 star"></div>
-  <div class="mask mask-star" aria-label="2 star" aria-current="true"></div>
+	<div class="mask mask-star" aria-label="2 star" aria-current="true"></div>
-  <div class="mask mask-star" aria-label="3 star"></div>
+	<div class="mask mask-star" aria-label="3 star"></div>
 </div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier/size class names
 - Each set of rating inputs should have unique `name` attributes to avoid conflicts with other ratings on the same page
 - Add `rating-hidden` for the first radio to make it hidden so user can clear the rating

.opencode/skills/daisyui/components/select.md

@@ -1,20 +1,24 @@
 ### select
+
 Select is used to pick a value from a list of options
 
 [select docs](https://daisyui.com/components/select/)
 
 #### Class names
+
 - component: `select`
 - style: `select-ghost`
 - color: `select-neutral`, `select-primary`, `select-secondary`, `select-accent`, `select-info`, `select-success`, `select-warning`, `select-error`
 - size: `select-xs`, `select-sm`, `select-md`, `select-lg`, `select-xl`
 
 #### Syntax
+
 ```html
 <select class="select {MODIFIER}">
-  <option>Option</option>
+	<option>Option</option>
 </select>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each style/color/size class names

.opencode/skills/daisyui/components/skeleton.md

@@ -1,20 +1,26 @@
 ### skeleton
+
 Skeleton is a component that can be used to show a loading state
 
 [skeleton docs](https://daisyui.com/components/skeleton/)
 
 #### Class names
+
 - component: `skeleton`
 - modifier: `skeleton-text`
 
 #### Syntax
+
 ```html
 <div class="skeleton"></div>
 ```
+
 Example with text skeleton:
+
 ```html
 <div class="skeleton skeleton-text">Loading data...</div>
 ```
 
 #### Rules
+
 - Add `h-*` and `w-*` utility classes to set height and width

.opencode/skills/daisyui/components/stack.md

@@ -1,17 +1,21 @@
 ### stack
+
 Stack visually puts elements on top of each other
 
 [stack docs](https://daisyui.com/components/stack/)
 
 #### Class Names:
+
 - Component: `stack`
 - Modifier: `stack-top`, `stack-bottom`, `stack-start`, `stack-end`
 
 #### Syntax
+
 ```html
 <div class="stack {MODIFIER}">{CONTENT}</div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier class names
 - You can use `w-*` and `h-*` classes to set the width and height of the stack, making all items the same size

.opencode/skills/daisyui/components/stat.md

@@ -1,21 +1,25 @@
 ### stat
+
 Stat is used to show numbers and data in a block
 
 [stat docs](https://daisyui.com/components/stat/)
 
 #### Class names
+
 - Component: `stats`
 - Part: `stat`, `stat-title`, `stat-value`, `stat-desc`, `stat-figure`, `stat-actions`
 - Direction: `stats-horizontal`, `stats-vertical`
 
 #### Syntax
+
 ```html
 <div class="stats {MODIFIER}">
-  <div class="stat">{CONTENT}</div>
+	<div class="stat">{CONTENT}</div>
 </div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the direction class names
 - It's horizontal by default but you can make it vertical with the `stats-vertical` class
 - Content includes `stat-title`, `stat-value`, `stat-desc` inside a `stat`

.opencode/skills/daisyui/components/status.md

@@ -1,18 +1,22 @@
 ### status
+
 Status is a really small icon to visually show the current status of an element, like online, offline, error, etc
 
 [status docs](https://daisyui.com/components/status/)
 
 #### Class Names:
+
 - Component: `status`
 - Color: `status-neutral`, `status-primary`, `status-secondary`, `status-accent`, `status-info`, `status-success`, `status-warning`, `status-error`
 - Size: `status-xs`, `status-sm`, `status-md`, `status-lg`, `status-xl`
 
 #### Syntax
+
 ```html
 <span class="status {MODIFIER}"></span>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the color/size class names
 - This compnent renders a small visual indicator to draw attention

.opencode/skills/daisyui/components/steps.md

@@ -1,23 +1,27 @@
 ### steps
+
 Steps can be used to show a list of steps in a process
 
 [steps docs](https://daisyui.com/components/steps/)
 
 #### Class Names:
+
 - Component: `steps`
 - Part: `step`, `step-icon`
 - Color: `step-neutral`, `step-primary`, `step-secondary`, `step-accent`, `step-info`, `step-success`, `step-warning`, `step-error`
 - Direction: `steps-vertical`, `steps-horizontal`
 
 #### Syntax
+
 ```html
 <ul class="steps {DIRECTION}">
-  <li class="step step-primary">{completed step}</li>
+	<li class="step step-primary">{completed step}</li>
-  <li class="step">{upcoming step}</li>
+	<li class="step">{upcoming step}</li>
 </ul>
 ```
 
 #### Rules
+
 - Steps are horizontal by default; add `steps-vertical` to the `ul` for a vertical layout
 - Direction classes go on `steps`; `step-*` color classes go on individual `step` items
 - To mark a step with the primary color, add `step-primary` to that `li`

.opencode/skills/daisyui/components/swap.md

@@ -1,33 +1,39 @@
 ### swap
+
 Swap allows you to toggle the visibility of two elements using a checkbox or a class name
 
 [swap docs](https://daisyui.com/components/swap/)
 
 #### Class Names:
+
 - Component: `swap`
 - Part: `swap-on`, `swap-off`, `swap-indeterminate`
 - Modifier: `swap-active`
 - Style: `swap-rotate`, `swap-flip`
 
 #### Syntax
+
 Using checkbox
+
 ```html
 <label class="swap {MODIFIER}">
-  <input type="checkbox" />
+	<input type="checkbox" />
-  <div class="swap-on">{content when active}</div>
+	<div class="swap-on">{content when active}</div>
-  <div class="swap-off">{content when inactive}</div>
+	<div class="swap-off">{content when inactive}</div>
 </label>
 ```
 
 Using class name
+
 ```html
 <div class="swap {MODIFIER}">
-  <div class="swap-on">{content when active}</div>
+	<div class="swap-on">{content when active}</div>
-  <div class="swap-off">{content when inactive}</div>
+	<div class="swap-off">{content when inactive}</div>
 </div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier/style class names
 - Use only a hidden checkbox to control swap state or add/remove the `swap-active` class using JS to control state
 - To show something when the checkbox is indeterminate, use `swap-indeterminate` class

.opencode/skills/daisyui/components/tab.md

@@ -1,9 +1,11 @@
 ### tab
+
 Tabs can be used to show a list of links in a tabbed format
 
 [tab docs](https://daisyui.com/components/tab/)
 
 #### Class Names:
+
 - Component: `tabs`
 - Part: `tab`, `tab-content`
 - Style: `tabs-box`, `tabs-border`, `tabs-lift`
@@ -12,21 +14,25 @@ Tabs can be used to show a list of links in a tabbed format
 - Placement: `tabs-top`, `tabs-bottom`
 
 #### Syntax
+
 Using buttons:
+
 ```html
 <div role="tablist" class="tabs {MODIFIER}">
-  <button role="tab" class="tab">Tab</button>
+	<button role="tab" class="tab">Tab</button>
 </div>
 ```
 
 Using radio inputs:
+
 ```html
 <div role="tablist" class="tabs tabs-box">
-  <input type="radio" name="my_tabs" class="tab" aria-label="Tab" />
+	<input type="radio" name="my_tabs" class="tab" aria-label="Tab" />
 </div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the style/size class names
 - Radio inputs are needed for tab content to work with tab click
 - If tabs gets a background then every tab inside it becomes rounded from both top corners

.opencode/skills/daisyui/components/table.md

@@ -1,31 +1,35 @@
 ### table
+
 Table can be used to show a list of data in a table format
 
 [table docs](https://daisyui.com/components/table/)
 
 #### Class Names:
+
 - Component: `table`
 - Modifier: `table-zebra`, `table-pin-rows`, `table-pin-cols`
 - Size: `table-xs`, `table-sm`, `table-md`, `table-lg`, `table-xl`
 
 #### Syntax
+
 ```html
 <div class="overflow-x-auto">
-  <table class="table {MODIFIER}">
+	<table class="{MODIFIER} table">
-    <thead>
+		<thead>
-      <tr>
+			<tr>
-        <th></th>
+				<th></th>
-      </tr>
+			</tr>
-    </thead>
+		</thead>
-    <tbody>
+		<tbody>
-      <tr>
+			<tr>
-        <th></th>
+				<th></th>
-      </tr>
+			</tr>
-    </tbody>
+		</tbody>
-  </table>
+	</table>
 </div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each modifier/size class names
 - The `overflow-x-auto` class is added to the wrapper div to make the table horizontally scrollable on smaller screens

.opencode/skills/daisyui/components/text-rotate.md

@@ -1,66 +1,76 @@
 ### text-rotate
+
 Text Rotate can show up to 6 lines of text, one at a time, with an infinite loop animation. Duration is 10 seconds by default. The animation will pause on hover.
 
 [text-rotate docs](https://daisyui.com/components/text-rotate/)
 
 #### Class Names:
+
 - Component: `text-rotate`
 
 #### Syntax
+
 ```html
 <span class="text-rotate">
-  <span>
+	<span>
-    <span>Word 1</span>
+		<span>Word 1</span>
-    <span>Word 2</span>
+		<span>Word 2</span>
-    <span>Word 3</span>
+		<span>Word 3</span>
-    <span>Word 4</span>
+		<span>Word 4</span>
-    <span>Word 5</span>
+		<span>Word 5</span>
-    <span>Word 6</span>
+		<span>Word 6</span>
-  </span>
+	</span>
 </span>
 ```
+
 Example:
 Big font size, horizontally centered
+
 ```html
-<span class="text-rotate max-md:text-3xl text-7xl font-title">
+<span class="text-rotate font-title text-7xl max-md:text-3xl">
-  <span class="justify-items-center">
+	<span class="justify-items-center">
-    <span>DESIGN</span>
+		<span>DESIGN</span>
-    <span>DEVELOP</span>
+		<span>DEVELOP</span>
-    <span>DEPLOY</span>
+		<span>DEPLOY</span>
-    <span>SCALE</span>
+		<span>SCALE</span>
-    <span>MAINTAIN</span>
+		<span>MAINTAIN</span>
-    <span>REPEAT</span>
+		<span>REPEAT</span>
-  </span>
+	</span>
 </span>
 ```
+
 Rotating words in a sentence, different colors for each word
+
 ```html
 <span>
-  Providing AI Agents for 
+	Providing AI Agents for
-  <span class="text-rotate">
+	<span class="text-rotate">
-    <span>
+		<span>
-      <span class="bg-teal-400 text-teal-800 px-2">Designers</span>
+			<span class="bg-teal-400 px-2 text-teal-800">Designers</span>
-      <span class="bg-red-400 text-red-800 px-2">Developers</span>
+			<span class="bg-red-400 px-2 text-red-800">Developers</span>
-      <span class="bg-blue-400 text-blue-800 px-2">Managers</span>
+			<span class="bg-blue-400 px-2 text-blue-800">Managers</span>
-    </span>
+		</span>
-  </span>
+	</span>
 </span>
 ```
+
 Custom line height in case you have a tall font or need more vertical spacing between lines
+
 ```html
-<span class="text-rotate max-md:text-3xl text-7xl font-title leading-[2]">
+<span class="text-rotate font-title text-7xl leading-[2] max-md:text-3xl">
-  <span class="justify-items-center">
+	<span class="justify-items-center">
-    <span>DESIGN</span>
+		<span>DESIGN</span>
-    <span>DEVELOP</span>
+		<span>DEVELOP</span>
-    <span>DEPLOY</span>
+		<span>DEPLOY</span>
-    <span>SCALE</span>
+		<span>SCALE</span>
-    <span>MAINTAIN</span>
+		<span>MAINTAIN</span>
-    <span>REPEAT</span>
+		<span>REPEAT</span>
-  </span>
+	</span>
 </span>
 ```
 
 #### Rules
+
 - `text-rotate` must have one span or div inside it that contains 2 to 6 spans/divs for each line of text
 - Total duration of the loop is 10000 milliseconds by default
 - You can set custom duration using `duration-{value}` utility class, where value is in milliseconds (e.g. `duration-12000` for 12 seconds)

.opencode/skills/daisyui/components/textarea.md

@@ -1,18 +1,22 @@
 ### textarea
+
 Textarea allows users to enter text in multiple lines
 
 [textarea docs](https://daisyui.com/components/textarea/)
 
 #### Class Names:
+
 - Component: `textarea`
 - Style: `textarea-ghost`
 - Color: `textarea-neutral`, `textarea-primary`, `textarea-secondary`, `textarea-accent`, `textarea-info`, `textarea-success`, `textarea-warning`, `textarea-error`
 - Size: `textarea-xs`, `textarea-sm`, `textarea-md`, `textarea-lg`, `textarea-xl`
 
 #### Syntax
+
 ```html
 <textarea class="textarea {MODIFIER}" placeholder="Bio"></textarea>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each style/color/size class names

.opencode/skills/daisyui/components/theme-controller.md

@@ -1,15 +1,19 @@
 ### theme-controller
+
 If a checked checkbox input or a checked radio input with theme-controller class exists in the page, The page will have the same theme as that input's value
 
 [theme-controller docs](https://daisyui.com/components/theme-controller/)
 
 #### Class names
+
 - component: `theme-controller`
 
 #### Syntax
+
 ```html
 <input type="checkbox" value="{theme-name}" class="theme-controller" />
 ```
 
 #### Rules
+
 - The value attribute of the input element should be a valid daisyUI theme name

.opencode/skills/daisyui/components/timeline.md

@@ -1,26 +1,30 @@
 ### timeline
+
 Timeline component shows a list of events in chronological order
 
 [timeline docs](https://daisyui.com/components/timeline/)
 
 #### Class Names:
+
 - Component: `timeline`
 - Part: `timeline-start`, `timeline-middle`, `timeline-end`
 - Modifier: `timeline-snap-icon`, `timeline-box`, `timeline-compact`
 - Direction: `timeline-vertical`, `timeline-horizontal`
 
 #### Syntax
+
 ```html
 <ul class="timeline {MODIFIER}">
-  <li>
+	<li>
-    <div class="timeline-start">{start}</div>
+		<div class="timeline-start">{start}</div>
-    <div class="timeline-middle">{icon}</div>
+		<div class="timeline-middle">{icon}</div>
-    <div class="timeline-end">{end}</div>
+		<div class="timeline-end">{end}</div>
-  </li>
+	</li>
 </ul>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the modifier/direction class names
 - To make a vertical timeline, add the `timeline-vertical` class to the `ul` element or just do nothing (because its the default style.)
 - Add `timeline-snap-icon` to snap the icon to the start instead of middle

.opencode/skills/daisyui/components/toast.md

@@ -1,16 +1,20 @@
 ### toast
+
 Toast is a wrapper to stack elements, positioned on the corner of page
 
 [toast docs](https://daisyui.com/components/toast/)
 
 #### Class Names:
+
 - Component: `toast`
 - Placement: `toast-start`, `toast-center`, `toast-end`, `toast-top`, `toast-middle`, `toast-bottom`
 
 #### Syntax
+
 ```html
 <div class="toast {MODIFIER}">{CONTENT}</div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of the placement class names

.opencode/skills/daisyui/components/toggle.md

@@ -1,17 +1,21 @@
 ### toggle
+
 Toggle is a checkbox that is styled to look like a switch button
 
 [toggle docs](https://daisyui.com/components/toggle/)
 
 #### Class Names:
+
 - Component: `toggle`
 - Color: `toggle-primary`, `toggle-secondary`, `toggle-accent`, `toggle-neutral`, `toggle-success`, `toggle-warning`, `toggle-info`, `toggle-error`
 - Size: `toggle-xs`, `toggle-sm`, `toggle-md`, `toggle-lg`, `toggle-xl`
 
 #### Syntax
+
 ```html
 <input type="checkbox" class="toggle {MODIFIER}" />
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each color/size class names

.opencode/skills/daisyui/components/tooltip.md

@@ -1,9 +1,11 @@
 ### tooltip
+
 Tooltip can be used to show a message when hovering over an element
 
 [tooltip docs](https://daisyui.com/components/tooltip/)
 
 #### Class names
+
 - component: `tooltip`
 - part: `tooltip-content`
 - modifier: `tooltip-open`
@@ -12,11 +14,13 @@ Tooltip can be used to show a message when hovering over an element
 - color: `tooltip-primary`, `tooltip-secondary`, `tooltip-accent`, `tooltip-info`, `tooltip-success`, `tooltip-warning`, `tooltip-error`
 
 #### Syntax
+
 ```html
 <div class="tooltip {MODIFIER}" data-tip="Tooltip text">
-  <button class="btn">Hover me</button>
+	<button class="btn">Hover me</button>
 </div>
 ```
 
 #### Rules
+
 - {MODIFIER} is optional and can have one of each modifier/placement/color class names

.opencode/skills/daisyui/components/validator.md

@@ -1,17 +1,21 @@
 ### validator
+
 Validator class changes the color of form elements to error or success based on input's validation rules
 
 [validator docs](https://daisyui.com/components/validator/)
 
 #### Class names
+
 - component: `validator`
 - part: `validator-hint`
 
 #### Syntax
+
 ```html
 <input type="{type}" class="input validator" required />
 <p class="validator-hint">Error message</p>
 ```
 
 #### Rules
+
 - Use with `input`, `select`, `textarea`

.opencode/skills/daisyui/config/SKILL.md

@@ -17,7 +17,7 @@ daisyUI config with `light` theme only:
 
 ```css
 @plugin "daisyui" {
-  themes: light --default;
+	themes: light --default;
 }
 ```
 
@@ -25,25 +25,64 @@ daisyUI with all the default configs:
 
 ```css
 @plugin "daisyui" {
-  themes: light --default, dark --prefersdark;
+	themes:
-  root: ":root";
+		light --default,
-  include: ;
+		dark --prefersdark;
-  exclude: ;
+	root: ':root';
-  prefix: ;
+	include:;
-  logs: true;
+	exclude:;
+	prefix:;
+	logs: true;
 }
 ```
+
 An example config:
 In below config, all the built-in themes are enabled while bumblebee is the default theme and synthwave is the prefersdark theme (default dark mode)
 All the other themes are enabled and can be used by adding `data-theme="THEME_NAME"` to the `<html>` element
 root scrollbar gutter is excluded. `daisy-` prefix is used for all daisyUI classes and console.log is disabled
+
 ```css
 @plugin "daisyui" {
-  themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk;
+	themes:
-  root: ":root";
+		light,
-  include: ;
+		dark,
-  exclude: rootscrollgutter, checkbox;
+		cupcake,
-  prefix: daisy-;
+		bumblebee --default,
-  logs: false;
+		emerald,
+		corporate,
+		synthwave --prefersdark,
+		retro,
+		cyberpunk,
+		valentine,
+		halloween,
+		garden,
+		forest,
+		aqua,
+		lofi,
+		pastel,
+		fantasy,
+		wireframe,
+		black,
+		luxury,
+		dracula,
+		cmyk,
+		autumn,
+		business,
+		acid,
+		lemonade,
+		night,
+		coffee,
+		winter,
+		dim,
+		nord,
+		sunset,
+		caramellatte,
+		abyss,
+		silk;
+	root: ':root';
+	include:;
+	exclude: rootscrollgutter, checkbox;
+	prefix: daisy-;
+	logs: false;
 }
 ```

.opencode/skills/daisyui/install/SKILL.md

@@ -4,18 +4,23 @@ description: Installation notes for daisyUI 5
 ---
 
 ## daisyUI 5 install notes
+
 [install guide](https://daisyui.com/docs/install/)
+
 1. daisyUI 5 requires Tailwind CSS 4
 2. `tailwind.config.js` file is deprecated in Tailwind CSS v4. Do not use `tailwind.config.js`. Tailwind CSS v4 only needs `@import "tailwindcss";` in the CSS file if it's a node dependency.
 3. daisyUI 5 can be installed using `npm i -D daisyui@latest` and then adding `@plugin "daisyui";` to the CSS file
 4. daisyUI is suggested to be installed as a dependency but if you really want to use it from CDN, you can use Tailwind CSS and daisyUI CDN files:
+
 ```html
 <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
 <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 ```
+
 5. A CSS file with Tailwind CSS and daisyUI looks like this (if it's a node dependency)
+
 ```css
-@import "tailwindcss";
+@import 'tailwindcss';
 @plugin "daisyui";
 ```
 

.opencode/skills/daisyui/usage/SKILL.md

@@ -4,6 +4,7 @@ description: MANDATORY usage rules for daisyUI 5
 ---
 
 ## daisyUI 5 usage rules
+
 1. We can give styles to a HTML element by adding daisyUI class names to it. By adding a component class name, part class names (if there's any available for that component), and modifier class names (if there's any available for that component)
 2. Components can be customized using Tailwind CSS utility classes if the customization is not possible using the existing daisyUI classes. For example `btn px-10` sets a custom horizontal padding to a `btn`
 3. If customization of daisyUI styles using Tailwind CSS utility classes didn't work because of CSS specificity issues, you can use the `!` at the end of the Tailwind CSS utility class to override the existing styles. For example `btn bg-red-500!` sets a custom background color to a `btn` forcefully. This is a last resort solution and should be used sparingly
@@ -18,6 +19,7 @@ description: MANDATORY usage rules for daisyUI 5
 12. Always use the default variant of daisyUI components unless the user asked for a specific variant or color. For example when you need a button, do not use `btn btn-primary`, prefer `btn`, unless the user asked for a specific variant.
 
 daisyUI 5 class names are one of the following categories. These type names are only for reference and are not used in the actual code
+
 - `component`: the required component class
 - `part`: a child part of a component
 - `style`: sets a specific style to component or part
@@ -35,7 +37,7 @@ Use Tailwind's `@utility` directive to customize a daisyUI component globally:
 
 ```css
 @utility btn {
-  @apply rounded-full;
+	@apply rounded-full;
 }
 ```
 
@@ -52,7 +54,7 @@ daisyUI includes the `properties`, `rootcolor`, `scrollbar`, `rootscrolllock`, `
 
 ```css
 @plugin "daisyui" {
-  exclude: rootscrollgutter;
+	exclude: rootscrollgutter;
 }
 ```
 

eslint.config.js

@@ -8,27 +8,27 @@ import ts from 'typescript-eslint';
 const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
 
 export default ts.config(
-  includeIgnoreFile(gitignorePath),
+	includeIgnoreFile(gitignorePath),
-  js.configs.recommended,
+	js.configs.recommended,
-  ...ts.configs.recommended,
+	...ts.configs.recommended,
-  ...svelte.configs['flat/recommended'],
+	...svelte.configs['flat/recommended'],
-  prettier,
+	prettier,
-  ...svelte.configs['flat/prettier'],
+	...svelte.configs['flat/prettier'],
-  {
+	{
-    languageOptions: {
+		languageOptions: {
-      globals: {
+			globals: {
-        ...globals.browser,
+				...globals.browser,
-        ...globals.node
+				...globals.node
-      }
+			}
-    }
+		}
-  },
+	},
-  {
+	{
-    files: ['**/*.svelte'],
+		files: ['**/*.svelte'],
 
-    languageOptions: {
+		languageOptions: {
-      parserOptions: {
+			parserOptions: {
-        parser: ts.parser
+				parser: ts.parser
-      }
+			}
-    }
+		}
-  }
+	}
 );

package.json

@@ -1,52 +1,52 @@
 {
-  "name": "benjaminpalko.ca",
+	"name": "benjaminpalko.ca",
-  "private": true,
+	"private": true,
-  "version": "0.0.1",
+	"version": "0.0.1",
-  "type": "module",
+	"type": "module",
-  "scripts": {
+	"scripts": {
-    "dev": "vite dev | pino-pretty",
+		"dev": "vite dev | pino-pretty",
-    "build": "vite build",
+		"build": "vite build",
-    "preview": "vite preview",
+		"preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "format": "prettier --write .",
+		"format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
+		"lint": "prettier --check . && eslint .",
-    "test:unit": "vitest",
+		"test:unit": "vitest",
-    "test": "npm run test:unit -- --run"
+		"test": "npm run test:unit -- --run"
-  },
+	},
-  "devDependencies": {
+	"devDependencies": {
-    "@eslint/compat": "^1.2.8",
+		"@eslint/compat": "^1.2.8",
-    "@eslint/js": "^9.25.1",
+		"@eslint/js": "^9.25.1",
-    "@sveltejs/adapter-node": "^5.5.2",
+		"@sveltejs/adapter-node": "^5.5.2",
-    "@sveltejs/kit": "^2.20.7",
+		"@sveltejs/kit": "^2.20.7",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@tailwindcss/vite": "^4.1.4",
+		"@tailwindcss/vite": "^4.1.4",
-    "autoprefixer": "^10.4.21",
+		"autoprefixer": "^10.4.21",
-    "daisyui": "^5.5.14",
+		"daisyui": "^5.5.14",
-    "eslint": "^9.25.1",
+		"eslint": "^9.25.1",
-    "eslint-config-prettier": "^10.1.2",
+		"eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-svelte": "^3.5.1",
+		"eslint-plugin-svelte": "^3.5.1",
-    "globals": "^16.0.0",
+		"globals": "^16.0.0",
-    "mdsvex": "^0.12.6",
+		"mdsvex": "^0.12.6",
-    "pino-pretty": "^13.0.0",
+		"pino-pretty": "^13.0.0",
-    "prettier": "^3.5.3",
+		"prettier": "^3.5.3",
-    "prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-svelte": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+		"prettier-plugin-tailwindcss": "^0.6.11",
-    "svelte": "^5.28.2",
+		"svelte": "^5.28.2",
-    "svelte-check": "^4.1.6",
+		"svelte-check": "^4.1.6",
-    "tailwindcss": "^4.1.4",
+		"tailwindcss": "^4.1.4",
-    "typescript": "^5.8.3",
+		"typescript": "^5.8.3",
-    "typescript-eslint": "^8.31.0",
+		"typescript-eslint": "^8.31.0",
-    "vite": "^6.3.3",
+		"vite": "^6.3.3",
-    "vitest": "^3.1.2"
+		"vitest": "^3.1.2"
-  },
+	},
-  "dependencies": {
+	"dependencies": {
-    "@humanspeak/svelte-markdown": "^0.8.7",
+		"@humanspeak/svelte-markdown": "^0.8.7",
-    "@lucide/svelte": "^0.516.0",
+		"@lucide/svelte": "^0.516.0",
-    "@sveltejs/adapter-netlify": "^5.2.4",
+		"@sveltejs/adapter-netlify": "^5.2.4",
-    "clsx": "^2.1.1",
+		"clsx": "^2.1.1",
-    "dayjs": "^1.11.13",
+		"dayjs": "^1.11.13",
-    "pino": "^9.6.0",
+		"pino": "^9.6.0",
-    "tailwind-merge": "^3.4.0"
+		"tailwind-merge": "^3.4.0"
-  }
+	}
 }

skills-lock.json

@@ -1,11 +1,11 @@
 {
-  "version": 1,
+	"version": 1,
-  "skills": {
+	"skills": {
-    "daisyui": {
+		"daisyui": {
-      "source": "saadeghi/daisyui",
+			"source": "saadeghi/daisyui",
-      "sourceType": "github",
+			"sourceType": "github",
-      "skillPath": "skills/daisyui/SKILL.md",
+			"skillPath": "skills/daisyui/SKILL.md",
-      "computedHash": "271523943a0b06c22b8bd2ba5b85b16acc8e9a28de736295c20869e19defefda"
+			"computedHash": "271523943a0b06c22b8bd2ba5b85b16acc8e9a28de736295c20869e19defefda"
-    }
+		}
-  }
+	}
 }

src/app.css

@@ -1,9 +1,11 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @plugin "daisyui" {
-  themes: nord --default, forest --prefersdark;
+	themes:
+		nord --default,
+		forest --prefersdark;
 }
 
 :root {
-  @apply bg-[url("/background-light.jpg")] bg-cover font-[Roboto] dark:bg-[url("/background.jpg")];
+	@apply bg-[url("/background-light.jpg")] bg-cover font-[Roboto] dark:bg-[url("/background.jpg")];
 }

src/app.d.ts

@@ -2,13 +2,13 @@
 
 // for information about these interfaces
 declare global {
-  namespace App {
+	namespace App {
-    // interface Error {}
+		// interface Error {}
-    // interface Locals {}
+		// interface Locals {}
-    // interface PageData {}
+		// interface PageData {}
-    // interface PageState {}
+		// interface PageState {}
-    // interface Platform {}
+		// interface Platform {}
-  }
+	}
 }
 
-export { };
+export {};

src/hooks.server.ts

@@ -2,11 +2,9 @@ import { logger } from '$lib/server/logger';
 import type { HandleServerError } from '@sveltejs/kit';
 
 export const handleError: HandleServerError = async ({ error, event, message, status }) => {
+	logger.error({ error, event, message, status });
 
-  logger.error({ error, event, message, status });
+	return {
-
+		message: 'An Internal Error Occurred'
-  return {
+	};
-    message: 'An Internal Error Occurred',
-  };
 };
-

src/lib/constants/about.ts

@@ -1,5 +1,5 @@
-import { BicepsFlexed, Braces, Gamepad2, Globe } from "@lucide/svelte";
+import { BicepsFlexed, Braces, Gamepad2, Globe } from '@lucide/svelte';
-import type { Component } from "svelte";
+import type { Component } from 'svelte';
 
 type Item = {
 	icon: Component;
@@ -7,12 +7,9 @@ type Item = {
 	description: string;
 };
 
-export const name: string = "Benjamin Palko";
+export const name: string = 'Benjamin Palko';
 
-export const titles: string[] = [
+export const titles: string[] = ['Full Stack Developer', 'Video Game Developer'];
-	"Full Stack Developer",
-	"Video Game Developer",
-];
 
 export const description: string =
 	"Hi! I'm Ben, a Canadian Software Developer from Ottawa, Canada. I currently work as Full Stack Developer with a strong architectural mindsent. I enjoy learning new things and broadening my perspectives, I take pride in being a generalist which I believe gives me an edge. I enjoy working on side projects, have participated in Game Jams, fallen down the rabbit hole of Linux Ricing and Self Hosting (like this website!). I have an active life away from the desk, I do races, cycling, climbing and even wood-working! If you want to learn more about me check out my resume, my blog posts or my projects!";
@@ -20,26 +17,26 @@ export const description: string =
 export const activities: Item[] = [
 	{
 		icon: Globe,
-		title: "Web Development",
+		title: 'Web Development',
 		description:
-			"I have been doing this for a living for almost 7 years. I've worked on projects from Python, to Java EE, Spring Framework, .NET and a whole lot of the jungle of the Javascript/Typescript ecosystem.",
+			"I have been doing this for a living for almost 7 years. I've worked on projects from Python, to Java EE, Spring Framework, .NET and a whole lot of the jungle of the Javascript/Typescript ecosystem."
 	},
 	{
 		icon: Gamepad2,
-		title: "Game Development",
+		title: 'Game Development',
 		description:
-			"I've worked in both Unity and Godot, I hope to build my own engine and/or become a contributor! It's a hobby I do out of passion and inspiration.",
+			"I've worked in both Unity and Godot, I hope to build my own engine and/or become a contributor! It's a hobby I do out of passion and inspiration."
 	},
 	{
 		icon: BicepsFlexed,
-		title: "Athletics",
+		title: 'Athletics',
 		description:
-			"Self-proclaimed athlete, cyclist, runner and racer. I love the outdoors and I try to get out as much as I can. Excercise is important for keeping your mind sharp!",
+			'Self-proclaimed athlete, cyclist, runner and racer. I love the outdoors and I try to get out as much as I can. Excercise is important for keeping your mind sharp!'
 	},
 	{
 		icon: Braces,
-		title: "Linux Ricing",
+		title: 'Linux Ricing',
 		description:
-			"Not just a hobby, it's a lifestyle. A Pandora's box of taking back control of your tech life, and be warned, it doesn't end with just your desktop.",
+			"Not just a hobby, it's a lifestyle. A Pandora's box of taking back control of your tech life, and be warned, it doesn't end with just your desktop."
-	},
+	}
 ];

src/lib/posts/index.ts

@@ -1,35 +1,35 @@
 export type Categories = 'development' | 'work' | 'life';
 
 export type Post = {
-  title: string
+	title: string;
-  slug: string
+	slug: string;
-  description: string
+	description: string;
-  image: {
+	image: {
-    url: string;
+		url: string;
-    alt: string;
+		alt: string;
-  }
+	};
-  date: string
+	date: string;
-  categories: Categories[]
+	categories: Categories[];
-  published: boolean
+	published: boolean;
-}
+};
 
 export async function getPosts() {
-  const posts: Post[] = []
+	const posts: Post[] = [];
 
-  const paths = import.meta.glob('/src/lib/posts/*.md', { eager: true })
+	const paths = import.meta.glob('/src/lib/posts/*.md', { eager: true });
 
-  for (const path in paths) {
+	for (const path in paths) {
-    const file = paths[path]
+		const file = paths[path];
-    const slug = path.split('/').at(-1)?.replace('.md', '')
+		const slug = path.split('/').at(-1)?.replace('.md', '');
 
-    if (file && typeof file === 'object' && 'metadata' in file && slug) {
+		if (file && typeof file === 'object' && 'metadata' in file && slug) {
-      const metadata = file.metadata as Omit<Post, 'slug'>
+			const metadata = file.metadata as Omit<Post, 'slug'>;
-      const post = { ...metadata, slug } satisfies Post
+			const post = { ...metadata, slug } satisfies Post;
-      if (post.published) posts.push(post)
+			if (post.published) posts.push(post);
-    }
+		}
-  }
+	}
 
-  return posts.sort((first, second) =>
+	return posts.sort(
-    new Date(second.date).getTime() - new Date(first.date).getTime()
+		(first, second) => new Date(second.date).getTime() - new Date(first.date).getTime()
-  )
+	);
 }

src/routes/blog/+page.server.ts

@@ -4,14 +4,14 @@ import type { PageServerLoad } from './$types';
 import { getPosts } from '$lib/posts';
 
 export const load: PageServerLoad = async () => {
-  try {
+	try {
-    const posts = await getPosts();
+		const posts = await getPosts();
 
-    return {
+		return {
-      posts
+			posts
-    };
+		};
-  } catch (err) {
+	} catch (err) {
-    logger.error('Uh-oh!', err);
+		logger.error('Uh-oh!', err);
-    error(500);
+		error(500);
-  }
+	}
 };

src/routes/blog/[slug]/+page.ts

@@ -2,15 +2,14 @@ import { error } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params }) => {
+	try {
+		const post = await import(`../../../lib/posts/${params.slug}.md`);
 
-  try {
+		return {
-    const post = await import(`../../../lib/posts/${params.slug}.md`)
+			content: post.default,
-
+			meta: post.metadata
-    return {
+		};
-      content: post.default,
+	} catch (e) {
-      meta: post.metadata
+		error(404, `Could not find ${params.slug}`);
-    }
+	}
-  } catch (e) {
-    error(404, `Could not find ${params.slug}`)
-  }
 };