@kiva/kv-components 8.3.0 → 8.4.0

package/AGENTS.md

@@ -13,7 +13,7 @@ Accessible UI component library built with Vue 3 Composition API, Tailwind CSS,
 
 ## Getting Started
 
-**Always run `nvm use` when working in this repo** to ensure you're using the correct Node.js version specified in [.nvmrc](../../../.nvmrc).
+**Run `nvm use` before any terminal commands** (npm, node, etc.) to ensure you're using the correct Node.js version specified in [.nvmrc](../../../.nvmrc). This is not required for file reading or editing operations.
 
 ## Component Development Patterns
 

package/CLAUDE.md

@@ -1,10 +1,10 @@
-@AGENTS.md
+# CLAUDE.md
 
-# Claude AI Instructions
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-> **Important**: Always include context from [AGENTS.md](AGENTS.md) as the primary directive for this package.
+@AGENTS.md
 
-> **Note**: This file should only contain Claude-specific configurations or workarounds as a last resort. All general development instructions, patterns, and guidelines belong in [AGENTS.md](AGENTS.md).
+> **Note**: This file imports [AGENTS.md](./AGENTS.md) which contains all general development instructions, patterns, and guidelines for this repository. This file should only contain Claude Code-specific configurations or workarounds as a last resort.
 
 ## Claude-Specific Configuration
 

package/dist/vue/KvCompactLoanCard.css

@@ -1 +1 @@
-.loan-card-use[data-v-b4700d22]:hover,.loan-card-use[data-v-b4700d22]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-b4700d22]{text-decoration-line:underline}.loan-card-progress[data-v-b4700d22]:hover,.loan-card-progress[data-v-b4700d22]:focus{text-decoration-line:none}.loan-card-use-text[data-v-b4700d22] p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;text-overflow:ellipsis}.loan-card-cta[data-v-b4700d22] form,.loan-card-cta[data-v-b4700d22] fieldset,.loan-card-cta[data-v-b4700d22] .tw-w-full,.loan-card-cta[data-v-b4700d22] button{height:40px!important;max-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-b4700d22] .tw-inline-flex{height:40px!important;max-height:40px!important;min-height:40px!important}
+.loan-card-use[data-v-1e5999ce]:hover,.loan-card-use[data-v-1e5999ce]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-1e5999ce]{text-decoration-line:underline}.loan-card-progress[data-v-1e5999ce]:hover,.loan-card-progress[data-v-1e5999ce]:focus{text-decoration-line:none}.loan-card-use-text[data-v-1e5999ce] p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;text-overflow:ellipsis}.loan-card-cta[data-v-1e5999ce] form,.loan-card-cta[data-v-1e5999ce] fieldset,.loan-card-cta[data-v-1e5999ce] .tw-w-full,.loan-card-cta[data-v-1e5999ce] button{height:40px!important;max-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-1e5999ce] .tw-inline-flex{height:40px!important;max-height:40px!important;min-height:40px!important}

package/dist/vue/KvCompactLoanCard.js

@@ -9,7 +9,7 @@ const V = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, R = { class
 }, F = { class: "tw-text-primary !tw-font-medium tw-text-base tw-leading-normal tw-truncate" }, W = ["href"], j = { class: "tw-truncate" }, E = {
   key: 0,
   class: "loan-card-use-text tw-w-full tw-overflow-hidden"
-}, O = { class: "tw-flex-1 tw-min-w-0 tw-mr-1" }, U = { class: "tw-flex-1 tw-min-w-0" }, K = { class: "tw-p-1 tw-rounded-l-sm tw-border tw-border-gray-100 tw-border-r-0" };
+}, U = { class: "tw-flex-1 tw-min-w-0 tw-mr-1" }, O = { class: "tw-flex-1 tw-min-w-0" }, K = { class: "tw-p-1 tw-rounded-l-sm tw-border tw-border-gray-100 tw-border-r-0" };
 function z(h, o, t, e, G, H) {
   const b = w("kv-material-icon"), v = w("kv-borrower-image"), x = w("kv-loan-tag"), m = w("kv-loading-placeholder"), _ = w("kv-loan-use"), y = w("kv-loan-callouts"), L = w("kv-loan-progress-group"), C = w("kv-lend-cta");
   return a(), l("div", {
@@ -114,7 +114,7 @@ function z(h, o, t, e, G, H) {
           }, {
             default: f(() => [
               e.isLoading ? (a(), l("div", E, [
-                (a(!0), l(g, null, A([...Array(4)], (n, M) => (a(), l("div", {
+                (a(!0), l(g, null, A([...Array(e.loanUseLoadingRows)], (n, M) => (a(), l("div", {
                   key: M,
                   class: "tw-h-2 tw-mb-1"
                 }, [
@@ -161,7 +161,7 @@ function z(h, o, t, e, G, H) {
       ])
     }, [
       e.hasProgressData ? (a(), l(g, { key: 1 }, [
-        r("div", U, [
+        r("div", O, [
           e.sharesAvailable ? (a(), s(u(e.tag), {
             key: 0,
             to: e.readMorePath,
@@ -221,7 +221,7 @@ function z(h, o, t, e, G, H) {
           }, null, 8, ["loan", "unreserved-amount", "basket-items", "is-loading", "is-adding", "enable-five-dollars-notes", "five-dollars-selected", "kv-track-function", "show-view-loan", "custom-loan-details", "external-links", "route", "user-balance", "get-cookie", "set-cookie", "is-visitor", "primary-button-text", "secondary-button-text", "secondary-button-handler"])
         ], 2))
       ], 64)) : (a(), l(g, { key: 0 }, [
-        r("div", O, [
+        r("div", U, [
           i(m, {
             class: "tw-mb-0.5",
             style: { width: "100%", maxWidth: "11rem", height: "1rem" }
@@ -240,7 +240,7 @@ function z(h, o, t, e, G, H) {
     ], 2)
   ], 2);
 }
-const Q = /* @__PURE__ */ B(N, [["render", z], ["__scopeId", "data-v-b4700d22"]]);
+const Q = /* @__PURE__ */ B(N, [["render", z], ["__scopeId", "data-v-1e5999ce"]]);
 export {
   p as KV_COMPACT_LOAN_CARD_FRAGMENT,
   $ as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,

package/dist/vue/KvCompactLoanCard.vue.d.ts

@@ -165,6 +165,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         height: string;
         maxHeight: string;
     }>;
+    loanUseLoadingRows: import('vue').ComputedRef<3 | 4>;
     clickReadMore: (target: string, event: Event) => void;
     trackWebsiteClick: () => void;
     handleCloseButton: (event: any) => void;

package/dist/vue/KvCompactLoanCard2.js

@@ -1,20 +1,20 @@
 import r from "graphql-tag";
-import w from "numeral";
+import F from "numeral";
 import { computed as n } from "vue";
-import { mdiMapMarker as F, mdiHome as M, mdiLink as S, mdiClose as E } from "@mdi/js";
-import { LOAN_CALLOUTS_FRAGMENT as R, LOAN_GEOCODE_FRAGMENT as O, LOAN_PROGRESS_FRAGMENT as G, loanCardComputedProperties as P, loanCardMethods as V } from "../utils/loanCard.js";
+import { mdiMapMarker as M, mdiHome as S, mdiLink as E, mdiClose as R } from "@mdi/js";
+import { LOAN_CALLOUTS_FRAGMENT as O, LOAN_GEOCODE_FRAGMENT as G, LOAN_PROGRESS_FRAGMENT as P, loanCardComputedProperties as V, loanCardMethods as U } from "../utils/loanCard.js";
 import D from "./KvLoanUse.js";
-import U from "./KvBorrowerImage.js";
-import $ from "./KvLoanCallouts.js";
-import W from "./KvLendCta.js";
-import I from "./KvLoanProgressGroup.js";
-import x from "./KvLoanTag.js";
-import H from "./KvMaterialIcon.js";
-import j from "./KvLoadingPlaceholder.js";
-import q from "./KvLoanTeamPick.js";
-import { KV_LEND_CTA_FRAGMENT as z, KV_LEND_CTA_USER_FRAGMENT as J } from "./KvLendCta2.js";
-import { KV_LOAN_TAG_FRAGMENT as Q } from "./KvLoanTag2.js";
-import { KV_LOAN_USE_FRAGMENT as X } from "./KvLoanUse2.js";
+import $ from "./KvBorrowerImage.js";
+import W from "./KvLoanCallouts.js";
+import I from "./KvLendCta.js";
+import x from "./KvLoanProgressGroup.js";
+import H from "./KvLoanTag.js";
+import j from "./KvMaterialIcon.js";
+import q from "./KvLoadingPlaceholder.js";
+import z from "./KvLoanTeamPick.js";
+import { KV_LEND_CTA_FRAGMENT as J, KV_LEND_CTA_USER_FRAGMENT as Q } from "./KvLendCta2.js";
+import { KV_LOAN_TAG_FRAGMENT as X } from "./KvLoanTag2.js";
+import { KV_LOAN_USE_FRAGMENT as Y } from "./KvLoanUse2.js";
 const Ce = r`
 	fragment KvCompactLoanCard on LoanBasic {
 		id
@@ -37,30 +37,30 @@ const Ce = r`
 		...LoanGeocode
 		...LoanProgress
 	}
-	${z}
-	${Q}
+	${J}
 	${X}
-	${R}
+	${Y}
 	${O}
 	${G}
-`, ge = r`
+	${P}
+`, he = r`
 	fragment KvCompactLoanCardUser on LoanBasic {
 		id
 		...KvLendCtaUser
 	}
-	${J}
-`, he = {
+	${Q}
+`, Ae = {
   name: "KvCompactLoanCard",
   components: {
-    KvBorrowerImage: U,
-    KvLoadingPlaceholder: j,
+    KvBorrowerImage: $,
+    KvLoadingPlaceholder: q,
     KvLoanUse: D,
-    KvMaterialIcon: H,
-    KvLendCta: W,
-    KvLoanTag: x,
-    KvLoanCallouts: $,
-    KvLoanTeamPick: q,
-    KvLoanProgressGroup: I
+    KvMaterialIcon: j,
+    KvLendCta: I,
+    KvLoanTag: H,
+    KvLoanCallouts: W,
+    KvLoanTeamPick: z,
+    KvLoanProgressGroup: x
   },
   props: {
     loanId: {
@@ -205,8 +205,8 @@ const Ce = r`
   setup(e, { emit: t }) {
     const {
       allDataLoaded: a,
-      borrowerName: l,
-      city: i,
+      borrowerName: i,
+      city: l,
       countryName: s,
       distributionModel: u,
       formattedLocation: d,
@@ -216,29 +216,29 @@ const Ce = r`
       isLoading: p,
       loanAmount: L,
       loanBorrowerCount: y,
-      loanCallouts: C,
-      loanStatus: g,
+      loanCallouts: g,
+      loanStatus: C,
       loanUse: h,
       readMorePath: A,
       state: _,
       tag: N,
       unreservedAmount: b,
       sharesAvailable: B
-    } = P(e), {
+    } = V(e), {
       clickReadMore: T
-    } = V(e, t), v = n(() => {
+    } = U(e, t), v = n(() => {
       if (!e.website)
         return "";
       const o = e.website.trim();
       return o.startsWith("http://") || o.startsWith("https://") ? o : `https://${o}`;
-    }), k = n(() => {
+    }), w = n(() => {
       const o = e.showLightView ? "auto" : "6.75rem", K = e.showLightView ? "none" : "6.75rem";
       return { height: o, maxHeight: K };
-    });
+    }), k = n(() => e.showLightView ? 3 : 4);
     return {
       allDataLoaded: a,
-      borrowerName: l,
-      city: i,
+      borrowerName: i,
+      city: l,
       countryName: s,
       distributionModel: u,
       formattedLocation: d,
@@ -249,19 +249,20 @@ const Ce = r`
       isLoading: p,
       loanAmount: L,
       loanBorrowerCount: y,
-      loanCallouts: C,
-      loanStatus: g,
+      loanCallouts: g,
+      loanStatus: C,
       loanUse: h,
-      mdiMapMarker: F,
-      mdiHome: M,
-      mdiLink: S,
-      mdiClose: E,
+      mdiMapMarker: M,
+      mdiHome: S,
+      mdiLink: E,
+      mdiClose: R,
       readMorePath: A,
       state: _,
       tag: N,
       unreservedAmount: b,
       sharesAvailable: B,
-      customStyle: k,
+      customStyle: w,
+      loanUseLoadingRows: k,
       clickReadMore: T,
       trackWebsiteClick: () => {
         e.kvTrackFunction("Lending", "click-Business Website", "Website", e.loanId);
@@ -279,12 +280,12 @@ const Ce = r`
     amountLent() {
       var t, a;
       const e = ((a = (t = this.loan) == null ? void 0 : t.loanFundraisingInfo) == null ? void 0 : a.fundedAmount) ?? 0;
-      return w(e).format("$0,0");
+      return F(e).format("$0,0");
     }
   }
 };
 export {
   Ce as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  ge as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
-  he as default
+  he as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  Ae as default
 };

package/docs/ai-documentation-prompt.md

@@ -0,0 +1,306 @@
+# AI Documentation Prompt
+
+Use this prompt when generating component documentation with AI assistance.
+
+---
+
+## ⚠️ CRITICAL: ALWAYS Use the ComponentDocs.template.mdx Template
+
+**When creating any component `.mdx` documentation file, you MUST use the template:**
+
+📄 **Template Location:** `@kiva/kv-components/src/vue/.storybook/templates/ComponentDocs.template.mdx`
+
+**This is NOT optional. Do NOT create freeform MDX documentation.**
+
+The template provides:
+- Consistent structure across all component documentation
+- Required sections (Variations, Usage Information, Behavior, Anatomy, Specs, Best Practices, Accessibility)
+- Proper Storybook imports and Meta configuration
+- Table of Contents with navigation
+- Do/Don't best practices layout
+- Controls integration for interactive demos
+
+**Every `.mdx` file MUST:**
+1. Start by reading the ComponentDocs.template.mdx file
+2. Fill in ALL template placeholders with component-specific content
+3. Use the exact section structure and headings from the template
+4. Follow the established patterns for story references and code examples
+5. Include all required sections (do not skip sections)
+
+---
+
+## Prompt Template
+
+### For New Documentation
+
+```
+I need to create comprehensive Storybook documentation for a Vue 3 component in the @kiva/kv-components library.
+
+Component Name: {{ComponentName}}
+Component File: @kiva/kv-components/src/vue/{{ComponentName}}.vue
+Story File: @kiva/kv-components/src/vue/stories/{{ComponentName}}.stories.js [May not exist yet]
+Existing Documentation: [None | Path to existing MDX file]
+
+Please use the documentation template located at:
+@kiva/kv-components/src/vue/.storybook/templates/ComponentDocs.template.mdx
+
+**IMPORTANT - If Story File Does Not Exist:**
+1. Create a **stub** `.stories.js` file first (use the stories template with minimal working exports)
+2. Ensure the stub exports all story names referenced in the MDX (ComponentOverview, AllVariations, Default, etc.)
+3. Then proceed with documentation creation
+4. Add a TODO comment at the top indicating which stories need to be fully implemented
+5. The documentation can guide story creation later, but the file must exist to avoid MDX import errors
+
+**IMPORTANT:** If existing documentation exists:
+1. Analyze the existing MDX file structure and content
+2. Compare it against the template structure
+3. Identify what sections are missing or need updates
+4. Preserve existing quality content, stories references, and examples
+5. Provide a migration plan to bring documentation up to current standards
+6. Suggest which existing stories can be reused vs. which need to be created
+
+Generate a complete MDX documentation file by filling in all template placeholders with appropriate content based on the component's implementation.
+
+Required steps:
+1. Analyze the component's props, slots, events, and implementation
+2. Identify all variants and states
+3. Fill in ALL template variables with specific, accurate content
+4. Ensure story references match the existing story file
+5. Create meaningful code examples using realistic prop values
+6. Write clear, actionable usage guidelines
+7. Document all accessibility features present in the component
+
+Template Variables to Fill:
+
+**Basic Info:**
+- {{ComponentName}} - Component name (e.g., KvButton, KvModal)
+- {{componentDescription}} - One-sentence component purpose
+- {{componentOverviewDescription}} - Brief paragraph about the component
+
+**Variations:**
+- {{variationsDescription}} - Describe all available variations
+
+**Usage:**
+- {{usageInformationDescription}} - Main description of component usage
+- {{whenToUseList}} - Bullet list of appropriate use cases
+- {{whenNotToUseList}} - Bullet list of when NOT to use this component
+
+**Behavior:**
+- {{behaviorDescription}} - Overall behavior description
+- {{BehaviorSubsection1Title}} - First behavior subsection title
+- {{behaviorSubsection1Description}} - Description for first behavior
+- {{BehaviorSubsection1StoryName}} - Story name for first behavior demo
+- {{BehaviorSubsection2Title}} - Second behavior subsection title
+- {{behaviorSubsection2Description}} - Description for second behavior
+- {{BehaviorSubsection2StoryName}} - Story name for second behavior demo
+
+**Anatomy:**
+- {{anatomyDescription}} - Brief intro to component structure
+- {{anatomyBulletList}} - Markdown bullet list of component parts
+
+**Specs:**
+- {{SpecsSubsection1Title}} - First specs subsection title
+- {{specsSubsection1Description}} - Description for first spec
+- {{SpecsSubsection1StoryName}} - Story name for first spec demo
+- {{SpecsSubsection2Title}} - Second specs subsection title
+- {{specsSubsection2Description}} - Description for second spec
+
+**Best Practices:**
+- {{bestPractice1ImageFileName}} - Image filename for first "Do" example
+- {{bestPractice1DoDescription}} - Description for first "Do"
+- {{bestPractice1DontImageFileName}} - Image filename for first "Don't"
+- {{bestPractice1DontDescription}} - Description for first "Don't"
+- {{bestPractice2ImageFileName}} - Image filename for second "Do"
+- {{bestPractice2DoDescription}} - Description for second "Do"
+- {{bestPractice2DontImageFileName}} - Image filename for second "Don't"
+- {{bestPractice2DontDescription}} - Description for second "Don't"
+
+**Accessibility:**
+- {{accessibilityBulletList}} - Markdown bullet list of accessibility features
+
+**Code Examples:**
+- {{codeExample1Title}} - Title for first example
+- {{codeExample1}} - Complete Vue code for first example
+- {{codeExample2Title}} - Title for second example
+- {{codeExample2}} - Complete Vue code for second example
+- {{codeExample3Title}} - Title for third example
+- {{codeExample3}} - Complete Vue code for third example
+
+Guidelines:
+- Use actual prop names and values from the component
+- **PRESERVE existing story references** from the .stories.js file - don't rename stories that already exist
+- **Reuse existing Default story** rather than creating a new one
+- **Use existing stories** for ComponentOverview if suitable stories exist
+- For AllVariations: If component is complex or has many existing variation stories, use multiple existing stories instead of requiring one comprehensive AllVariations story
+- Follow the style and tone of existing documentation (see KvIconButtonDocs.mdx)
+- Be specific and actionable in all descriptions
+- Use realistic, practical code examples
+- Include image placeholders with descriptive filenames using kebab-case
+- Ensure all accessibility features are documented
+- Adapt the template structure if needed (add/remove subsections based on component complexity)
+
+Output:
+A complete MDX file ready to save as {{ComponentName}}Docs.mdx
+
+**After completion, verify using:**
+📋 [Component Documentation Checklist](./component-documentation-checklist.md)
+
+---
+
+### For Migrating Existing Documentation
+
+```
+I need to migrate existing Storybook documentation to our current template standards.
+
+Component Name: {{ComponentName}}
+Existing Documentation: @kiva/kv-components/src/vue/stories/{{ComponentName}}Docs.mdx
+Story File: @kiva/kv-components/src/vue/stories/{{ComponentName}}.stories.js
+Template: @kiva/kv-components/src/vue/.storybook/templates/ComponentDocs.template.mdx
+
+Task:
+1. Analyze the existing documentation against the template
+2. Identify missing sections (Variations, Usage Information, Behavior, Anatomy, Specs, Best Practices, Accessibility, etc.)
+3. Preserve all existing content, story references, and code examples
+4. Enhance with missing sections following template structure
+5. Maintain existing story names - do NOT rename or create new stories unnecessarily
+6. Update structure to match template where possible without losing valuable content
+7. Identify which new stories (if any) need to be created
+
+Migration Approach:
+- Keep what works: Preserve existing quality content
+- Fill the gaps: Add missing required sections
+- Standardize format: Adjust to template structure where beneficial
+- Maintain continuity: Don't break existing story references
+
+Output:
+- Updated MDX file with enhanced documentation
+- List of existing stories that are working well
+- List of new stories needed (if any)
+- Summary of changes made
+```
+
+---
+
+## Recommended Creation Order
+
+See [Component Stories Guide - Recommended Creation Order](./ai-stories-prompt.md#recommended-creation-order) for detailed workflow options.
+
+**Quick Reference:**
+- **Stories First**: Create stories → Test in Storybook → Document
+- **Documentation First**: Document requirements → Create stories
+- **Parallel**: Basic stories → Documentation → Fill gaps
+
+## Handling Missing Files
+
+### When Stories Don't Exist Yet
+1. **Create a stub stories file first** - The MDX import requires it
+2. **Reference standard story names** - ComponentOverview, AllVariations, Default, etc.
+3. **Add TODO comments** - Clearly list required stories to flesh out
+4. **Provide clear guidance** - Describe what each story should show
+
+**Example TODO comment:**
+```mdx
+<!--
+TODO: Create the following stories in ComponentName.stories.js:
+
+1. ComponentOverview - Show 2-4 key variants (bare, with background, with border, toggle)
+2. AllVariations - Comprehensive showcase of all sizes and styles
+3. Default - Interactive playground with all props
+4. ComponentStates - Show enabled, hover, active, disabled states
+5. SpecialFeature - Demonstrate [specific behavior]
+
+See ai-stories-prompt.md for story creation guidance.
+-->
+```
+
+### When Component File Is Incomplete
+If the component implementation is missing features:
+1. Document the **intended** behavior
+2. Add notes about features that need implementation
+3. Mark sections as "Coming Soon" or "Planned"
+4. Create story placeholders for future features
+
+## Usage Instructions
+
+1. **Copy the prompt template above**
+2. **Replace `{{ComponentName}}`** with your actual component name
+3. **Provide the AI with access to:**
+   - The component source file
+   - The existing story file
+   - The template file
+   - Reference documentation (like KvIconButtonDocs.mdx)
+4. **Review and refine** the generated documentation
+5. **Test all story references** to ensure they work
+6. **Add images** for Best Practices section
+7. **Verify code examples** are functional
+
+## Tips for Best Results
+
+### Context Provision
+- Share the full component file content
+- Include the complete stories file
+- Reference existing good documentation as examples
+- Mention any special features or complexity
+
+### Iteration Approach
+Generate in stages if needed:
+1. First pass: Basic structure and content
+2. Second pass: Refine descriptions and examples
+3. Third pass: Add missing details, verify accuracy
+
+### Common Adjustments
+After generation, typically need to:
+- Add or adjust story references to match actual story names
+- Create actual image files for Best Practices
+- Fine-tune code examples for clarity
+- Add domain-specific Kiva context
+- Adjust accessibility details based on actual implementation
+
+### Review Checklist
+- [ ] All template variables replaced with real content
+- [ ] Story references match actual story names in .stories.js
+- [ ] Code examples use correct prop names and types
+- [ ] Accessibility section reflects actual implementation
+- [ ] Usage guidelines are specific to this component
+- [ ] Best Practices are relevant and actionable
+- [ ] No placeholder text remains (search for `{{`)
+
+## Example Command
+
+For a hypothetical KvModal component:
+
+```
+Generate documentation for KvModal using the template at
+@kiva/kv-components/src/vue/.storybook/templates/ComponentDocs.template.mdx
+
+Component: @kiva/kv-components/src/vue/KvModal.vue
+Stories: @kiva/kv-components/src/vue/stories/KvModal.stories.js
+
+This is a modal dialog component with:
+- Size variants (small, medium, large)
+- Optional close button
+- Header, body, and footer slots
+- Backdrop click to close
+- ESC key handling
+- Focus trap when open
+
+Follow all guidelines in the prompt template above.
+```
+
+## Advanced: Batch Generation
+
+For generating documentation for multiple components:
+
+1. Create a list of components needing documentation
+2. Use the same prompt template for each
+3. Process 2-3 at a time to maintain quality
+4. Review and refine each before moving to the next batch
+5. Maintain consistency across all generated docs
+
+## Maintenance
+
+Update this prompt when:
+- Template structure changes
+- New documentation patterns emerge
+- Common generation issues are identified
+- Documentation standards evolve