Modern TypeScript/React/Next.js development rules with Tailwind CSS. Emphasizes readability, latest language features, and maintainable code patterns.
A comprehensive skill for writing clean, modern TypeScript code with React, Next.js, and Tailwind CSS. Focuses on code readability, modern patterns, and maintainable architecture.
**Use function declarations** for components:
```tsx
type UserCardProps = {
name: string;
email: string;
}
export function UserCard({ name, email }: UserCardProps) {
// Component logic
}
```
**Do NOT use default exports** for React components:
```tsx
// ❌ Avoid
export default function MyComponent() {}
// ✅ Prefer
export function MyComponent() {}
```
**Early return pattern:**
```tsx
export function UserProfile({ user }: UserProfileProps) {
if (!user) {
return <EmptyState />;
}
if (user.suspended) {
return <SuspendedMessage />;
}
return <ProfileContent user={user} />;
}
```
```tsx
// ✅ Preferred
async function fetchUser(id: string) {
const response = await fetch(`/api/users/${id}`);
const user = await response.json();
return user;
}
// ❌ Avoid
function fetchUser(id: string) {
return fetch(`/api/users/${id}`)
.then(res => res.json())
.catch(err => console.error(err));
}
```
When writing or refactoring code:
```tsx
type ProductCardProps = {
id: string;
title: string;
price: number;
imageUrl: string;
}
export function ProductCard({ id, title, price, imageUrl }: ProductCardProps) {
const [loading, setLoading] = useState(false);
async function handleAddToCart() {
setLoading(true);
const response = await fetch('/api/cart', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ productId: id })
});
if (!response.ok) {
setLoading(false);
return;
}
setLoading(false);
}
return (
<article className="rounded-lg border p-4 shadow-sm">
<img src={imageUrl} alt={title} className="h-48 w-full object-cover" />
<h3 className="mt-2 text-lg font-semibold">{title}</h3>
<p className="text-gray-600">${price.toFixed(2)}</p>
<button
onClick={handleAddToCart}
disabled={loading}
className="mt-4 w-full rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-50"
>
{loading ? 'Adding...' : 'Add to Cart'}
</button>
</article>
);
}
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/typescript-react-nextjs-best-practices/raw