French development guide for Astro projects with Conventional Commits, Tabler icons, optimized images (AVIF/WebP), and Google Lighthouse/EcoIndex best practices
Guide complet pour développer avec Astro, TailwindCSS, et suivre les meilleures pratiques de performance et accessibilité (en français).
Follow these development guidelines for all Astro projects:
Generate commit messages following Conventional Commits specification:
**Format:** `[type][(scope)]: [description]`
**Rules:**
**Examples:**
```bash
git commit -m 'feat(ui): add responsive layout with TailwindCSS'
git commit -m 'fix(modal): resolve accessibility issues on close'
git commit -m 'chore: initialize Astro project with TypeScript'
```
**When user requests a commit:**
1. Review changed files
2. Generate appropriate conventional commit message
3. Keep description under 60 characters
4. Provide complete git command ready to execute
---
Always use Tabler icons through `@iconify-json/tabler` and `astro-icon/components`:
```astro
---
import { Icon } from 'astro-icon/components'
---
<Icon name="tabler:arrow-right" class="w-5 h-5" />
<Icon name="tabler:menu-2" class="w-6 h-6 text-blue-600" />
```
**Never** use other icon libraries unless explicitly requested.
---
Use the `Image.astro` component from `~/components/common/Image.astro`:
**Recommended configuration:**
**Example:**
```astro
---
import Image from '~/components/common/Image.astro'
---
<Image
src={import('@/assets/hero.avif')}
widths={[400, 900]}
sizes="(max-width: 900px) 400px, 900px"
alt="Descriptive alt text for accessibility"
aspectRatio="16:9"
loading="lazy"
decoding="async"
formats={['avif', 'webp', 'jpg']}
/>
```
**Approved image sources:**
---
**Directory structure:**
```
src/
components/
common/ # Reusable components (Image, Button, etc.)
features/ # Feature-specific components
layouts/ # Page layouts
ui/ # Basic UI primitives
```
**Best practices:**
**Example component:**
```astro
---
/**
* Reusable card component with hover effect
* @param title - Card title
* @param description - Card description text
* @param href - Optional link URL
*/
interface Props {
title: string
description: string
href?: string
}
const { title, description, href } = Astro.props
---
<div class="rounded-lg border p-6 transition-all duration-300 hover:shadow-lg">
<h3 class="text-xl font-semibold">{title}</h3>
<p class="mt-2 text-gray-600">{description}</p>
{href && (
<a href={href} class="mt-4 inline-block text-blue-600 hover:underline">
Learn more →
</a>
)}
</div>
```
---
**Google Lighthouse targets:** >90 score for all metrics (Performance, Accessibility, Best Practices, SEO)
**EcoIndex optimization:**
**Strategies:**
---
**Requirements:**
**Example with reduced motion:**
```html
<button class="transition-all duration-300 ease-in-out hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100">
Click me
</button>
```
---
**Rules:**
**Animation example:**
```html
<div class="transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl">
Hover me
</div>
```
---
---
When user types these commands, perform the associated action:
---
**User:** "Create a hero section with an image and CTA button"
**Agent response:**
1. Create `src/components/features/HeroSection.astro`
2. Use `Image.astro` component with AVIF/WebP formats
3. Use Tabler icon for CTA button arrow
4. Apply Tailwind utility classes (mobile-first)
5. Ensure WCAG contrast compliance
6. Add JSDoc documentation
7. Provide conventional commit message:
```bash
git commit -m 'feat(hero): add responsive hero section with CTA'
```
---
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/astro-tailwind-development-guide/raw