add-component

To generate Astro or Svelte components following project conventions, you can use an automated component generation skill that creates `.astro` or `.svelte` files. It enforces best practices like optimal placement in `src/components/` and TypeScript interfaces.

Choose Astro for static content components and Svelte for interactive UI elements. An automated component generator can intelligently suggest the right technology based on your component's purpose, ensuring you use the appropriate framework for your specific use case.

To add i18n to new Svelte or Astro components, the generation process integrates with `getTranslations(lang)` for all user-visible strings. This enforces internationalization requirements automatically, ensuring your components are ready for multi-language support.

Yes, component generation for Astro and Svelte includes dark mode support and TypeScript interfaces by default. The process enforces these best practices automatically, alongside accessibility considerations, ensuring robust and fully typed UI components.

The best way to structure interactive Svelte components within an Astro project is by placing them in appropriate subdirectories like `src/components/blog/`. A component generation skill determines optimal component placement automatically based on your project's established directory patterns.

Yes, you can automatically create a reusable Svelte button with hover effects and internationalization. By specifying the component name and purpose, the generation skill outputs an interactive Svelte component correctly placed, typed, and integrated with `getTranslations(lang)`.