Menu
React best practices e frameworks modernos
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Python best practices e styleguide
Integração completa com Notion usando MCP customizado (notion-automation-suite)
Gera critérios de aceite Given/When/Then para requisitos funcionais. Inclui happy path, edge cases e falhas.
Cria Architecture Decision Records (ADRs) para decisões técnicas. Inclui alternativas, justificativa e consequências.
Extrai especificações de um sistema legado (código existente) quando não há documentação adequada.
Converte input não estruturado (texto, notas, docs parciais) em requisitos funcionais (FR) e perguntas abertas. Não inventa requisitos.
| name | react-best-practices |
| description | React best practices e frameworks modernos |
| triggers | ["react","nextjs","vite","typescript","jsx","component"] |
| sources | ["https://github.com/vitejs/vite","https://github.com/vercel/next.js","https://github.com/react-boilerplate/react-boilerplate"] |
Convenções para React com frameworks modernos.
Para projetos que precisam de SEO, SSR ou roteamento:
// pages/users/[id].tsx
import { GetServerSideProps } from 'next';
export default function UserPage({ user }) {
return <div>{user.name}</div>;
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const user = await getUser(context.params.id);
return { props: { user } };
};
Para aplicações SPA modernas:
// src/App.tsx
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
project/
├── pages/
│ ├── api/
│ ├── _app.tsx
│ └── index.tsx
├── components/
├── lib/
├── styles/
└── public/
project/
├── src/
│ ├── components/
│ ├── hooks/
│ ├── utils/
│ ├── App.tsx
│ └── main.tsx
└── public/
interface UserCardProps {
name: string;
email: string;
avatar?: string;
}
export const UserCard: React.FC<UserCardProps> = ({ name, email, avatar }) => {
return (
<div>
{avatar && <img src={avatar} alt={name} />}
<h3>{name}</h3>
<p>{email}</p>
</div>
);
};
function useUser(userId: string) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchUser(userId).then(setUser).finally(() => setLoading(false));
}, [userId]);
return { user, loading };
}