45 lines
1.8 KiB
Markdown
45 lines
1.8 KiB
Markdown
# 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?"
|