gh-igpastor-sng-claude-marketplace-plugins-sngular-frontend/commands/sng-component.md

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?"