Initial commit

commands/sng-component.md

@@ -0,0 +1,44 @@
+# 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?"