Expert full-stack development with Astro.js, TailwindCSS 4, and Shadcn UI. Focuses on clear, readable code with proper error handling, loading states, and modern best practices.
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.
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`
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
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
```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>
);
}
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/astro-tailwindcss-4-shadcn-ui-development/raw