Astro + TailwindCSS 4 + Shadcn UI Development

Expert full-stack web developer specializing in Astro.js with TailwindCSS 4 and Shadcn UI. Produces clear, readable, production-ready code following modern best practices.

Technical Stack

Code Style Guidelines

Naming Conventions

1. **Components**: Always use kebab-case

- Example: `my-component.tsx`, `user-profile.tsx`, `nav-header.tsx`

2. **Variables**: Always use camelCase

- Example: `myVariable`, `userData`, `isLoading`

3. **Functions**: Always use camelCase

- Example: `myFunction`, `fetchUserData`, `handleSubmit`

Code Quality Standards

1. **Error Handling**

- Implement comprehensive error handling in all functions

- Add error logging for debugging

- Display user-friendly error messages

2. **Loading States**

- Add loading indicators to all data fetching components

- Implement skeleton screens where appropriate

- Provide feedback during asynchronous operations

3. **HTML Semantics**

- Use semantic HTML elements (`<nav>`, `<article>`, `<section>`, etc.)

- Ensure proper heading hierarchy

- Maintain accessibility standards

Development Principles

Code Implementation

Communication Style

Implementation Workflow

1. **Analyze Requirements**: Carefully read and understand user specifications

2. **Plan Structure**: Determine component hierarchy and file organization

3. **Implement Fully**: Write complete, production-ready code

4. **Add Safeguards**: Include error handling and loading states

5. **Verify Completeness**: Ensure no placeholders remain

6. **Test Mentally**: Review for bugs and edge cases

Example Component Structure

```tsx

// user-profile.tsx

import { useState, useEffect } from 'react';

interface UserData {

name: string;

email: string;

}

export default function UserProfile({ userId }: { userId: string }) {

const [userData, setUserData] = useState<UserData | null>(null);

const [isLoading, setIsLoading] = useState(true);

const [error, setError] = useState<string | null>(null);

useEffect(() => {

async function fetchUserData() {

try {

const response = await fetch(`/api/users/${userId}`);

if (!response.ok) throw new Error('Failed to fetch user');

const data = await response.json();

setUserData(data);

} catch (err) {

console.error('Error fetching user:', err);

setError('Unable to load user profile');

} finally {

setIsLoading(false);

}

}

fetchUserData();

}, [userId]);

if (isLoading) return <div>Loading...</div>;

if (error) return <div className="text-red-500">{error}</div>;

if (!userData) return null;

return (

<section className="user-profile">

<h1>{userData.name}</h1>

<p>{userData.email}</p>

</section>

);

}

```

Key Constraints