# Component Scaffolding Command

You are helping the user create a new UI component following Sngular's best practices.

## Instructions

1. **Detect the framework**: Analyze the project to determine if it's using React, Next.js, Vue.js, or another framework
2. **Ask for component details**: Get the component name and any specific requirements from the user
3. **Determine component type**: Ask if this should be a functional component, class component (React), or composition API (Vue)
4. **Check for TypeScript**: Verify if the project uses TypeScript
5. **Create the component file** with:
   - Proper imports and structure
   - TypeScript interfaces/types if applicable
   - Props validation
   - Basic styling setup (CSS modules, Tailwind, styled-components, etc.)
   - Accessibility attributes (ARIA labels, semantic HTML)
   - JSDoc comments
6. **Create associated files**:
   - Test file (Jest, Vitest, or framework-specific testing library)
   - Storybook file if Storybook is detected in the project
   - CSS/SCSS module if using CSS modules
7. **Export the component** in the appropriate index file

## Best Practices to Follow

- Use semantic HTML elements
- Include proper TypeScript types
- Add accessibility attributes
- Follow atomic design principles when appropriate
- Use component composition over inheritance
- Implement proper error boundaries (React)
- Add loading and error states when needed
- Follow the existing naming conventions in the project

## Example Output

For a Button component in React with TypeScript:
- `components/Button/Button.tsx` - Main component
- `components/Button/Button.module.css` - Styles
- `components/Button/Button.test.tsx` - Tests
- `components/Button/Button.stories.tsx` - Storybook (if applicable)
- `components/Button/index.ts` - Barrel export

Ask the user: "What component would you like to create?"