@redsift/ds-mcp-server 12.3.1-muiv6-alpha.2

package/dist/prompts.js

@@ -0,0 +1,762 @@
+/**
+ * MCP Prompts for the Red Sift Design System.
+ *
+ * Provides reusable prompt templates that guide AI assistants through
+ * common workflows like creating components, adding props, and building forms.
+ */
+import { z } from 'zod';
+import { PACKAGES } from './types.js';
+/**
+ * Register all MCP prompts on the server.
+ */
+export function registerPrompts(server, store, patternStore) {
+    // ─── create-component ────────────────────────────────────────────────
+    server.registerPrompt('create-component', {
+        description: 'Step-by-step guide to create a new component following design system conventions.',
+        argsSchema: {
+            name: z.string().describe('Component name in PascalCase (e.g. "StatusCard")'),
+            package: z.enum(PACKAGES).optional().describe('Target package (default: "design-system")'),
+            element: z.string().optional().describe('HTML element to extend (default: "div"). E.g. "button", "input", "a"'),
+            description: z.string().optional().describe('Brief description of the component'),
+        },
+    }, async ({ name, package: pkg, element, description }) => {
+        const targetPkg = pkg || 'design-system';
+        const htmlElement = element || 'div';
+        const desc = description || `The ${name} component.`;
+        const kebabName = toKebabCase(name);
+        return {
+            messages: [
+                {
+                    role: 'user',
+                    content: {
+                        type: 'text',
+                        text: `Create a new component **${name}** in the \`@redsift/${targetPkg}\` package.
+
+## Requirements
+
+- **Component name:** ${name}
+- **Package:** @redsift/${targetPkg}
+- **Directory:** packages/${targetPkg}/src/components/${kebabName}/
+- **HTML element:** <${htmlElement}>
+- **Description:** ${desc}
+
+## Steps
+
+1. **Generate scaffold** — Use the \`generate_component_scaffold\` tool with name="${name}", package="${targetPkg}", element="${htmlElement}", description="${desc}".
+2. **Create the directory** — \`packages/${targetPkg}/src/components/${kebabName}/\`
+3. **Write all 6 files** from the scaffold output:
+   - \`${name}.tsx\` — Main component
+   - \`types.ts\` — Props interface
+   - \`styles.ts\` — Styled component
+   - \`index.ts\` — Re-exports
+   - \`${name}.test.tsx\` — Tests
+   - \`${name}.stories.tsx\` — Storybook stories
+4. **Export the component** — Add \`export * from './components/${kebabName}';\` to \`packages/${targetPkg}/index.ts\`
+5. **Verify** — Run \`yarn check-types:${targetPkg}\` to confirm no type errors.
+
+## Conventions Checklist
+
+- [ ] Uses \`Comp\` type and \`forwardRef\`
+- [ ] Static \`.className = 'redsift-${kebabName}'\`
+- [ ] Static \`.displayName = '${name}'\`
+- [ ] Uses \`classNames()\` for className concatenation
+- [ ] Props extend \`ComponentProps<'${htmlElement}'>\` and \`StylingProps\`
+- [ ] Styled component uses transient props (\`$\` prefix)
+- [ ] Tests cover: snapshot, default render, className forwarding, ref forwarding
+- [ ] JSDoc comment above export with \`@example\` block`,
+                    },
+                },
+            ],
+        };
+    });
+    // ─── add-prop ────────────────────────────────────────────────────────
+    server.registerPrompt('add-prop', {
+        description: 'Guide to add a new prop to an existing component, updating all related files.',
+        argsSchema: {
+            component: z.string().describe('Existing component name in PascalCase (e.g. "Button")'),
+            propName: z.string().describe('New prop name in camelCase (e.g. "isLoading")'),
+            propType: z.string().describe('TypeScript type (e.g. "boolean", "string", "\'sm\' | \'md\' | \'lg\'")'),
+            required: z.string().optional().describe('Whether the prop is required ("true" or "false", default: "false")'),
+            defaultValue: z.string().optional().describe('Default value for the prop'),
+            description: z.string().optional().describe('JSDoc description for the prop'),
+        },
+    }, async ({ component, propName, propType, required, defaultValue, description }) => {
+        const isRequired = required === 'true';
+        const desc = description || `The ${propName} prop.`;
+        const comp = store.getComponent(component);
+        const packageName = comp ? comp.package.replace('@redsift/', '') : 'design-system';
+        const kebabName = toKebabCase(component);
+        const needsTransient = shouldBeTransient(propName);
+        return {
+            messages: [
+                {
+                    role: 'user',
+                    content: {
+                        type: 'text',
+                        text: `Add a new prop **${propName}** to the **${component}** component in \`@redsift/${packageName}\`.
+
+## Prop Details
+
+- **Name:** ${propName}
+- **Type:** ${propType}
+- **Required:** ${isRequired ? 'Yes' : 'No'}
+${defaultValue ? `- **Default:** ${defaultValue}` : ''}
+- **Description:** ${desc}
+
+## Files to Update
+
+### 1. \`packages/${packageName}/src/components/${kebabName}/types.ts\`
+
+Add to \`${component}Props\`:
+\`\`\`ts
+/**
+ * ${desc}${defaultValue ? `\n * @default ${defaultValue}` : ''}
+ */
+${propName}${isRequired ? '' : '?'}: ${propType};
+\`\`\`
+
+${needsTransient
+                            ? `Add to \`Styled${component}Props\`:
+\`\`\`ts
+$${propName}?: ${component}Props['${propName}'];
+\`\`\``
+                            : ''}
+
+### 2. \`packages/${packageName}/src/components/${kebabName}/${component}.tsx\`
+
+- Destructure \`${propName}\` from props${defaultValue ? ` with default: \`${propName} = ${defaultValue}\`` : ''}
+${needsTransient
+                            ? `- Pass \`$${propName}={${propName}}\` to the styled component`
+                            : `- Use \`${propName}\` in the render logic`}
+
+### 3. \`packages/${packageName}/src/components/${kebabName}/styles.ts\`
+
+${needsTransient
+                            ? `Use the transient prop in styles:
+\`\`\`ts
+\${({ $${propName} }) => $${propName} ? css\\\`/* styles */\\\` : ''}
+\`\`\``
+                            : 'Add any relevant styles.'}
+
+### 4. \`packages/${packageName}/src/components/${kebabName}/${component}.stories.tsx\`
+
+Add story variants demonstrating the new prop:
+\`\`\`tsx
+export const With${capitalize(propName)}: Story = {
+  args: {
+    ${propName}: ${getExampleValue(propType, defaultValue)},
+  },
+};
+\`\`\`
+
+### 5. \`packages/${packageName}/src/components/${kebabName}/${component}.test.tsx\`
+
+Add test for the new prop:
+\`\`\`tsx
+it('should handle ${propName} prop', () => {
+  const { container } = render(<${component} ${propName}={${getExampleValue(propType, defaultValue)}} />);
+  // Assert expected behavior
+});
+\`\`\`
+
+### 6. Update snapshots
+
+\`\`\`bash
+yarn test:unit:${packageName} -u
+\`\`\`
+
+## Verification
+
+\`\`\`bash
+yarn check-types:${packageName}
+yarn lint:${packageName}
+yarn test:unit:${packageName}
+\`\`\``,
+                    },
+                },
+            ],
+        };
+    });
+    // ─── build-form ──────────────────────────────────────────────────────
+    server.registerPrompt('build-form', {
+        description: 'Generate a form composition using design system form components.',
+        argsSchema: {
+            fields: z
+                .string()
+                .describe('Comma-separated list of field definitions. Format: "name:type" where type is text|email|password|number|select|checkbox|radio|textarea. Example: "email:email,password:password,name:text,role:select"'),
+            submitLabel: z.string().optional().describe('Submit button label (default: "Submit")'),
+            layout: z.string().optional().describe('Form layout: "vertical" (default) or "horizontal"'),
+        },
+    }, async ({ fields, submitLabel, layout }) => {
+        const submit = submitLabel || 'Submit';
+        const formLayout = layout || 'vertical';
+        const parsedFields = fields.split(',').map((f) => {
+            const [name, type] = f.trim().split(':');
+            return { name: name.trim(), type: (type || 'text').trim() };
+        });
+        const imports = new Set(['Button']);
+        const fieldComponents = [];
+        for (const field of parsedFields) {
+            const label = capitalize(field.name.replace(/([A-Z])/g, ' $1').trim());
+            switch (field.type) {
+                case 'text':
+                case 'email':
+                case 'password':
+                case 'number':
+                    imports.add('TextField');
+                    fieldComponents.push(`      <TextField\n        label="${label}"\n        name="${field.name}"\n        type="${field.type}"${field.type === 'email' ? '\n        autoComplete="email"' : ''}${field.type === 'password' ? '\n        autoComplete="current-password"' : ''}\n      />`);
+                    break;
+                case 'textarea':
+                    imports.add('TextArea');
+                    fieldComponents.push(`      <TextArea\n        label="${label}"\n        name="${field.name}"\n        rows={4}\n      />`);
+                    break;
+                case 'select':
+                    imports.add('Select');
+                    imports.add('Option');
+                    fieldComponents.push(`      <Select label="${label}" name="${field.name}">\n        <Option value="option1">Option 1</Option>\n        <Option value="option2">Option 2</Option>\n      </Select>`);
+                    break;
+                case 'checkbox':
+                    imports.add('Checkbox');
+                    fieldComponents.push(`      <Checkbox label="${label}" name="${field.name}" />`);
+                    break;
+                case 'radio':
+                    imports.add('RadioGroup');
+                    imports.add('Radio');
+                    fieldComponents.push(`      <RadioGroup label="${label}" name="${field.name}">\n        <Radio value="option1" label="Option 1" />\n        <Radio value="option2" label="Option 2" />\n      </RadioGroup>`);
+                    break;
+                default:
+                    imports.add('TextField');
+                    fieldComponents.push(`      <TextField label="${label}" name="${field.name}" type="text" />`);
+            }
+        }
+        const importList = Array.from(imports).sort().join(', ');
+        return {
+            messages: [
+                {
+                    role: 'user',
+                    content: {
+                        type: 'text',
+                        text: `Build a form with the following fields using Red Sift Design System components.
+
+## Form Specification
+
+- **Layout:** ${formLayout}
+- **Fields:** ${parsedFields.map((f) => `${f.name} (${f.type})`).join(', ')}
+- **Submit:** "${submit}"
+
+## Generated Code
+
+\`\`\`tsx
+import React, { FormEvent } from 'react';
+import { ${importList} } from '@redsift/design-system';
+
+interface FormData {
+${parsedFields.map((f) => `  ${f.name}: ${f.type === 'checkbox' ? 'boolean' : 'string'};`).join('\n')}
+}
+
+function MyForm() {
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    // Process form data
+  };
+
+  return (
+    <form onSubmit={handleSubmit}${formLayout === 'horizontal'
+                            ? ' style={{ display: "flex", gap: "16px", alignItems: "flex-end", flexWrap: "wrap" }}'
+                            : ''}>
+${fieldComponents.join('\n\n')}
+
+      <Button type="submit">${submit}</Button>
+    </form>
+  );
+}
+\`\`\`
+
+## Notes
+
+- All form components are from \`@redsift/design-system\`
+- Add validation as needed using the \`error\` and \`helperText\` props on \`TextField\`
+- For Select fields, replace placeholder options with real data
+- Use \`useSearchParams\` or a form library for state management if needed`,
+                    },
+                },
+            ],
+        };
+    });
+    // ─── pr-description ──────────────────────────────────────────────────
+    server.registerPrompt('pr-description', {
+        description: 'Generate a pull request description following the repository PR template.',
+        argsSchema: {
+            title: z.string().describe('PR title'),
+            changes: z.string().describe('Description of the changes made'),
+            issueNumber: z.string().optional().describe('Related GitHub issue number'),
+            packages: z
+                .string()
+                .optional()
+                .describe('Comma-separated list of affected packages (e.g. "design-system, popovers")'),
+        },
+    }, async ({ title, changes, issueNumber, packages: pkgs }) => {
+        const affectedPkgs = pkgs
+            ? pkgs
+                .split(',')
+                .map((p) => p.trim())
+                .filter(Boolean)
+            : [];
+        return {
+            messages: [
+                {
+                    role: 'user',
+                    content: {
+                        type: 'text',
+                        text: `Generate a pull request description for the following changes.
+
+## PR Details
+
+- **Title:** ${title}
+- **Changes:** ${changes}
+${issueNumber ? `- **Issue:** #${issueNumber}` : '- **Issue:** (none specified)'}
+${affectedPkgs.length > 0 ? `- **Affected packages:** ${affectedPkgs.map((p) => `@redsift/${p}`).join(', ')}` : ''}
+
+## PR Template
+
+Fill in this template:
+
+\`\`\`markdown
+## Summary
+
+<!-- Brief description of the change -->
+
+${issueNumber ? `Closes #${issueNumber}` : '<!-- Link to related issue -->'}
+
+## Changes
+
+${changes}
+
+## Checklist
+
+- [${issueNumber ? 'x' : ' '}] Linked to a GitHub issue
+- [ ] Added/updated unit tests
+- [ ] Added/updated Storybook stories
+- [ ] Verified accessibility (keyboard navigation, screen reader)
+- [ ] Updated snapshots (\`yarn test:unit:<package> -u\`)
+- [ ] Updated CHANGELOG.md under \`[Unreleased]\`
+- [ ] Ran \`yarn check-types:<package>\` with no errors
+- [ ] Ran \`yarn lint:<package>\` with no errors
+- [ ] Tested in Storybook locally
+
+## How to Test
+
+1. Check out this branch
+2. Run \`yarn install\`
+3. Run \`yarn start:storybook\`
+4. Navigate to the affected component(s)
+5. Verify the changes work as expected
+
+## Screenshots
+
+<!-- Add screenshots if visual changes -->
+\`\`\`
+
+Also generate a changelog entry for CHANGELOG.md under \`[Unreleased]\`:
+
+${affectedPkgs.map((p) => `- \`@redsift/${p}\`: ${changes}`).join('\n') || `- ${changes}`}`,
+                    },
+                },
+            ],
+        };
+    });
+    // ─── implement-ui ────────────────────────────────────────────────────
+    server.registerPrompt('implement-ui', {
+        description: 'Generate a complete UI implementation using proven design system composition patterns. Searches for matching patterns and provides detailed component usage guidance.',
+        argsSchema: {
+            description: z
+                .string()
+                .describe('Describe the UI you want to build (e.g. "a data table with search and export", "a settings page with toggles")'),
+            target: z
+                .string()
+                .optional()
+                .describe('Target framework or context (e.g. "React", "Next.js"). Defaults to React.'),
+        },
+    }, async ({ description, target }) => {
+        const framework = target || 'React';
+        // Search for relevant patterns
+        const patterns = patternStore.searchPatterns(description, 5);
+        let patternSection;
+        if (patterns.length === 0) {
+            patternSection = `No exact pattern matches found for "${description}". Use the \`search_patterns\` tool with broader terms, or compose from individual components using \`search_components\`.`;
+        }
+        else {
+            const patternBlocks = patterns.map((p) => {
+                const components = p.components.join(', ');
+                const packages = p.packages.join(', ');
+                return `### ${p.name}
+- **Description:** ${p.description}
+- **Components:** ${components}
+- **Packages:** ${packages}
+- **Layout:** ${p.layout}
+- **Tags:** ${p.tags.join(', ')}
+- **Documentation:** https://design-system.redsift.io/patterns/${p.slug}
+- **Full demo source:** Fetch the resource \`design-system://patterns/${p.slug}\` to get complete working code`;
+            });
+            patternSection = patternBlocks.join('\n\n');
+        }
+        return {
+            messages: [
+                {
+                    role: 'user',
+                    content: {
+                        type: 'text',
+                        text: `Implement a ${framework} UI for the following requirement:
+
+> ${description}
+
+## Matching Composition Patterns
+
+${patternSection}
+
+## Implementation Instructions
+
+1. **Fetch the full pattern spec** for each matched pattern above by reading the resource \`design-system://patterns/{slug}\`. This gives you:
+   - **When to Use** — decision criteria to confirm pattern fit
+   - **Anatomy** — visual structure (which component goes in which slot)
+   - **Features** — required vs optional features table
+   - **State Management** — every \`useState\`/\`useRef\` hook with TypeScript types and initial values
+   - **Data Contract** — TypeScript type definitions for rows and fetch functions
+   - **Implementation Checklist** — ordered step-by-step build guide
+   - **Complete demo source code** — a full working reference implementation
+   - **Variant demos** — loading, empty, and error state implementations
+   - **Keyboard & Accessibility** — a11y requirements
+
+2. **Follow the Implementation Checklist** step-by-step. It references the other spec sections by name (e.g. "Define your row type per Data Contract").
+
+3. **Adapt the Data Contract** — Replace the example \`Row\` type with your actual domain types. Keep the same field structure (id, status fields, date fields, tag arrays) where applicable.
+
+4. **Use the State Management section** as your hook scaffold — copy the hooks and adapt types to your data model.
+
+5. **Include variant handling** — Implement loading, empty, and error states as shown in the variant demos. These are critical for production quality.
+
+6. **Import components** from the listed packages (e.g. \`import { Button, Flexbox, Heading } from '@redsift/design-system';\`).
+
+7. **Look up individual component props** using the \`get_component_props\` tool if you need the full API for any component.
+
+## Code Quality Requirements
+
+- Use TypeScript with proper types (no \`any\`)
+- Use \`forwardRef\` for components that wrap DOM elements
+- Use \`styled-components\` with transient props (\`$\` prefix) for styling
+- Follow the component naming and file structure conventions of the design system
+- Implement loading, empty, and error states (not just the happy path)
+
+## Output
+
+Provide a complete, working ${framework} implementation with:
+- All necessary imports
+- TypeScript interfaces for props and data types
+- Component implementation with all state hooks
+- Loading, empty, and error state handling
+- Brief usage example`,
+                    },
+                },
+            ],
+        };
+    });
+    // ─── create-pattern ──────────────────────────────────────────────────
+    server.registerPrompt('create-pattern', {
+        description: 'Step-by-step guide to create a new pattern page for the design system website.',
+        argsSchema: {
+            name: z.string().describe('Pattern name in Title Case (e.g. "Dashboard Card")'),
+            description: z.string().describe('Brief description of what the pattern is and when to use it'),
+            components: z
+                .string()
+                .describe('Comma-separated list of components used. Format: "ComponentName:/category/slug" (e.g. "Button:/forms/button,Flexbox:/layout/flexbox")'),
+            relatedPatterns: z
+                .string()
+                .optional()
+                .describe('Comma-separated list of related patterns. Format: "Pattern Name:slug" (e.g. "Table Toolbar:table-toolbar,Data Table Page:data-table-page")'),
+            variants: z
+                .string()
+                .optional()
+                .describe('Comma-separated list of variant demo names beyond the default "example" (e.g. "with-loading,with-empty-state")'),
+        },
+    }, async ({ name, description, components, relatedPatterns, variants }) => {
+        const slug = toKebabCase(name.replace(/\s+/g, ''));
+        const parsedComponents = components.split(',').map((c) => {
+            const [compName, href] = c.trim().split(':');
+            return { name: compName.trim(), href: href?.trim() || '' };
+        });
+        const parsedRelated = relatedPatterns
+            ? relatedPatterns.split(',').map((r) => {
+                const [rName, rSlug] = r.trim().split(':');
+                return { name: rName.trim(), slug: rSlug?.trim() || toKebabCase(rName.trim().replace(/\s+/g, '')) };
+            })
+            : [];
+        const parsedVariants = variants
+            ? variants
+                .split(',')
+                .map((v) => v.trim())
+                .filter(Boolean)
+            : [];
+        const componentLines = parsedComponents
+            .map((c) => `- <Link href="${c.href}" as={RouterLink}>${c.name}</Link> — TODO: describe role`)
+            .join('\n');
+        const relatedLines = parsedRelated.length > 0
+            ? parsedRelated
+                .map((r) => `- <Link href="/patterns/${r.slug}" as={RouterLink}>${r.name}</Link> — TODO: describe relationship`)
+                .join('\n')
+            : '- <!-- Add related patterns -->';
+        const variantSections = parsedVariants
+            .map((v) => {
+            const title = v
+                .replace(/-/g, ' ')
+                .replace(/\b\w/g, (c) => c.toUpperCase())
+                .replace(/^With /, 'With ');
+            return `## ${title}
+
+TODO: Describe this variant.
+
+<DemoBlock withThemeSwitcher path="patterns/${slug}/${v}" />`;
+        })
+            .join('\n\n');
+        const mdxContent = `import { Link } from '@redsift/design-system';
+import { DemoBlock } from '../../components/DemoBlock';
+import { CodeBlock } from '../../components/CodeBlock';
+import { RouterLink } from '../../components/RouterLink';
+
+## Introduction
+
+${description}
+
+### Components
+
+{/* prettier-ignore */}
+${componentLines}
+
+## Example
+
+TODO: Describe the default example.
+
+<DemoBlock withThemeSwitcher path="patterns/${slug}/example" />
+
+${variantSections ? variantSections + '\n\n' : ''}## Related Patterns
+
+{/* prettier-ignore */}
+${relatedLines}`;
+        const patternsJsonEntry = JSON.stringify({
+            name,
+            slug,
+            description,
+            components: parsedComponents.map((c) => c.name),
+            packages: ['@redsift/design-system'],
+            layout: 'TODO: describe component layout',
+            tags: ['TODO'],
+        }, null, 2);
+        return {
+            messages: [
+                {
+                    role: 'user',
+                    content: {
+                        type: 'text',
+                        text: `Create a new pattern page **${name}** for the design system website.
+
+## Pattern Details
+
+- **Name:** ${name}
+- **Slug:** ${slug}
+- **Description:** ${description}
+- **Components:** ${parsedComponents.map((c) => c.name).join(', ')}
+${parsedRelated.length > 0 ? `- **Related patterns:** ${parsedRelated.map((r) => r.name).join(', ')}` : ''}
+${parsedVariants.length > 0 ? `- **Variants:** ${parsedVariants.join(', ')}` : ''}
+
+## Steps
+
+### 1. Create the MDX page
+
+**File:** \`apps/website/pages/patterns/${slug}.mdx\`
+
+\`\`\`mdx
+${mdxContent}
+\`\`\`
+
+### 2. Create demo files
+
+**Directory:** \`apps/website/demo/patterns/${slug}/\`
+
+Create at minimum:
+- \`example.tsx\` — default demo
+${parsedVariants.map((v) => `- \`${v}.tsx\` — ${v.replace(/-/g, ' ')} variant`).join('\n')}
+
+Each demo file should export a default React component demonstrating the pattern.
+
+### 3. Register in patterns.json
+
+**File:** \`docs/patterns.json\`
+
+Add this entry to the array:
+
+\`\`\`json
+${patternsJsonEntry}
+\`\`\`
+
+### 4. Update CHANGELOG.md
+
+Add under \`[Unreleased]\`:
+- \`website\`: Add ${name} pattern page
+
+## Critical Conventions
+
+- **\`{/* prettier-ignore */}\`** is REQUIRED before every list that contains \`<Link>\` tags (both Components and Related Patterns lists). Without it, Prettier reformats the single-line tags into multi-line JSX which breaks the MDX parser.
+- **Keep all \`<Link>\` tags on a single line** within list items — never split across multiple lines.
+- If a component has sub-components (e.g. Card.Header), list them on the same line: \`<Link ...>Card</Link>, Card.Header, Card.Body — description\`
+- Demo paths in \`<DemoBlock>\` must match the file structure under \`apps/website/demo/\`.
+
+## Verification
+
+1. Run \`yarn dev:website\` and navigate to \`/patterns/${slug}\`
+2. Verify the page renders without MDX parser errors
+3. Save the file and verify Prettier does not break the Link lists
+4. Confirm all demo blocks render correctly`,
+                    },
+                },
+            ],
+        };
+    });
+    // ─── add-demo ────────────────────────────────────────────────────────
+    server.registerPrompt('add-demo', {
+        description: 'Generate a demo file for a component or pattern on the documentation website.',
+        argsSchema: {
+            component: z
+                .string()
+                .describe('Component name in PascalCase (e.g. "Button") or pattern slug (e.g. "data-table-page")'),
+            demoName: z.string().describe('Demo file name without extension (e.g. "example", "with-loading", "variants")'),
+            description: z.string().optional().describe('What this demo should demonstrate'),
+            isPattern: z
+                .string()
+                .optional()
+                .describe('"true" if this is a pattern demo, "false" for component demo (default: "false")'),
+        },
+    }, async ({ component, demoName, description, isPattern }) => {
+        const isPatternDemo = isPattern === 'true';
+        const slug = isPatternDemo ? component : toKebabCase(component);
+        const demoDir = isPatternDemo ? `patterns/${slug}` : slug;
+        const demoPath = `apps/website/demo/${demoDir}/${demoName}.tsx`;
+        const desc = description || `Demonstrates the ${demoName.replace(/-/g, ' ')} state/variant.`;
+        // Look up component info for imports
+        const comp = isPatternDemo ? null : store.getComponent(component);
+        const packageName = comp ? comp.package : '@redsift/design-system';
+        return {
+            messages: [
+                {
+                    role: 'user',
+                    content: {
+                        type: 'text',
+                        text: `Create a demo file for **${component}** — **${demoName}**.
+
+## Demo Details
+
+- **Component:** ${component}
+- **Demo name:** ${demoName}
+- **File:** \`${demoPath}\`
+- **Description:** ${desc}
+- **Package:** ${packageName}
+
+## Template
+
+\`\`\`tsx
+import React from 'react';
+import { ${isPatternDemo ? '/* components */' : component} } from '${packageName}';
+
+export default () => (
+  // TODO: implement the ${demoName.replace(/-/g, ' ')} demo
+  <${isPatternDemo ? 'div' : component}>Example</${isPatternDemo ? 'div' : component}>
+);
+\`\`\`
+
+## Conventions
+
+1. **Default export** — every demo MUST use a default export (arrow function or named function)
+2. **Self-contained** — demos should not share utilities or state with other demo files
+3. **Import from packages** — use \`import { X } from '${packageName}'\`, not source paths
+4. **Clean code** — the source is shown in the "Show Code" panel, keep it readable
+5. **No data fetching** — use hardcoded mock data
+6. **Layout** — wrap multiple items in \`<Flexbox>\` with appropriate gap and direction
+7. **Props from DemoBlock** — the demo receives \`isScreenSmall: boolean\` and \`theme: Theme\` as props (use if needed)
+
+## MDX Reference
+
+After creating the demo file, reference it in the MDX page:
+
+\`\`\`mdx
+<DemoBlock withThemeSwitcher path="${demoDir}/${demoName}" />
+\`\`\`
+
+## Verification
+
+1. Run \`yarn dev:website\`
+2. Navigate to the component/pattern page
+3. Confirm the demo renders (not a stuck spinner)
+4. Toggle the code viewer and verify the source looks clean`,
+                    },
+                },
+            ],
+        };
+    });
+}
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function toKebabCase(str) {
+    return str
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+        .toLowerCase();
+}
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+/**
+ * Determine if a prop should use a transient ($-prefixed) styled prop.
+ * Visual/styling props need transient props; event handlers and refs don't.
+ */
+function shouldBeTransient(propName) {
+    // Event handlers, refs, and children don't need transient props
+    if (propName.startsWith('on') || propName === 'ref' || propName === 'children') {
+        return false;
+    }
+    // Common visual props
+    const visualProps = [
+        'variant',
+        'size',
+        'color',
+        'disabled',
+        'isDisabled',
+        'isLoading',
+        'isActive',
+        'isOpen',
+        'isSelected',
+        'fullWidth',
+        'align',
+        'direction',
+        'orientation',
+        'placement',
+        'appearance',
+    ];
+    if (visualProps.includes(propName))
+        return true;
+    // Default to transient for non-standard HTML attributes
+    return propName.startsWith('is') || propName.startsWith('has');
+}
+function getExampleValue(type, defaultValue) {
+    if (defaultValue)
+        return defaultValue;
+    if (type === 'boolean')
+        return 'true';
+    if (type === 'string')
+        return '"example"';
+    if (type === 'number')
+        return '42';
+    if (type.includes('|')) {
+        const first = type.split('|')[0].trim().replace(/['"]/g, '');
+        return `"${first}"`;
+    }
+    return 'undefined';
+}
+//# sourceMappingURL=prompts.js.map