{ "id": "generate-storybook-entry", "title": "Generate Storybook Entry from Git Diff", "description": "Generate a Storybook documentation entry based on component changes in git diff", "category": "technical", "job": "engineering", "example_prompt": "Based on the current git diff, please generate a comprehensive Storybook entry for NavBar component that includes:\n\n1. Component description\n2. Props documentation\n3. Usage examples\n4. Edge cases and variations\n5. Accessibility considerations\n\nPlease format the output in MDX format suitable for Storybook.", "example_result": "Based on the git diff, I've generated a Storybook entry for the NavBar component:\n\n```mdx\nimport { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';\nimport { NavBar } from './NavBar';\n\n\n\n# NavBar\n\nA responsive navigation bar component that adapts to different screen sizes and supports multiple visual styles.\n\n## Features\n\n- Responsive mobile menu with hamburger icon\n- Configurable navigation items\n- Optional sticky positioning\n- Multiple visual variants\n- Built-in search integration\n- Accessible keyboard navigation\n\n## Props\n\n\n\n## Basic Usage\n\n

\n\n## Variants\n\n### Secondary Style\n\n

\n\n### Minimal Style\n\n

\n\n## With Search\n\n

\n\n## Edge Cases\n\n### Long Menu Items\n\n

\n\n### Many Items\n\n

\n\n## Accessibility\n\nThe NavBar component implements the following accessibility features:\n\n- Uses semantic HTML5 nav element\n- Implements ARIA landmarks for navigation\n- Keyboard navigation support (Tab, Enter, Space, Esc)\n- Mobile menu button follows ARIA menu button pattern\n- Color contrast meets WCAG 2.1 AA standards\n- Focus indicators visible in all themes\n\n### Keyboard Navigation\n\n- Tab: Move through navigation items\n- Enter/Space: Activate current item\n- Esc: Close mobile menu\n- Arrow keys: Navigate dropdown menus\n\n## Implementation Notes\n\n```tsx\n// Example TypeScript interfaces\ninterface MenuItem {\n label: string;\n href: string;\n icon?: ReactNode;\n children?: MenuItem[];\n}\n\ninterface NavBarProps {\n variant?: 'primary' | 'secondary' | 'minimal';\n isSticky?: boolean;\n logo?: string;\n menuItems: MenuItem[];\n showSearch?: boolean;\n onSearch?: (term: string) => void;\n}\n```\n\n## Best Practices\n\n1. Keep navigation items concise\n2. Limit top-level items to 7 or fewer\n3. Use consistent icons if implementing icon support\n4. Ensure dropdown menus are keyboard accessible\n5. Maintain mobile breakpoints in theme configuration\n```", "extensions": [ { "name": "Developer", "command": "developer", "is_builtin": true, "environmentVariables": [ { "name": "component_name", "description": "Name of the component to document", "required": true } ] } ] }