JS Dev Course - Cursor Rules

Estrutura do Projeto

Cada projeto deve seguir esta estrutura padrão:

project-name/
├── index.html          # Versão principal do projeto
├── index.js            # JavaScript principal
├── style.css           # Estilos CSS
├── README.md           # Documentação em inglês
├── README-PTBR.md      # Documentação em português
├── challenge-1/        # Primeiro desafio
│   ├── index.html
│   ├── index.js
│   ├── style.css
│   ├── README.md
│   └── README-PTBR.md
├── challenge-2/        # Segundo desafio
│   ├── index.html
│   ├── index.js
│   ├── style.css
│   ├── README.md
│   └── README-PTBR.md
└── gifs/               # GIFs demonstrativos (se aplicável)
    ├── class.gif
    ├── challenge-1.gif
    └── challenge-2.gif

Padrões de Código

HTML

Use
```
<!DOCTYPE html>
```
e estrutura HTML5 semântica
Inclua meta tags para charset, viewport e compatibilidade

Use fonte Roboto do Google Fonts:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Estrutura básica:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Name</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <!-- Conteúdo -->
    <script src="index.js"></script>
</body>
</html>

CSS

Use reset CSS básico com
```
box-sizing: border-box
```
Implemente gradientes modernos como background
Use sistema de cores consistente:
- Background: gradiente
```
#0f2027
```
  →
```
#2c5364
```
  →
```
#203a43
```
- Botões:
```
#2e647a
```
  com hover effects
- Texto: branco (
```
#fff
```
  )
Estrutura de classes:
- ```
.row
```
  para containers
- ```
.input
```
  para campos de entrada
- ```
.btn
```
  para botões
- ```
.btn-group
```
  para grupos de botões
Use unidades rem para responsividade
Implemente transições suaves (
```
transition: all 0.3s
```
)

JavaScript

Use ES6+ features quando apropriado
Implemente event listeners para interatividade

Use

document.getElementById()

document.querySelector()

para manipulação do DOM

Mantenha funções simples e focadas
Use template literals para strings dinâmicas
Implemente validação de entrada quando necessário

Padrões de Documentação

README.md (Inglês)

Título do projeto
Link para versão em português
Seção "CLASS" com instruções básicas
Seção "CHALLENGE 01" com requisitos específicos
Seção "CHALLENGE 02" com requisitos avançados
GIFs demonstrativos para cada versão
Links de navegação entre desafios

README-PTBR.md (Português)

Tradução completa do README.md
Manter mesma estrutura e formatação
Adaptar linguagem técnica para português quando necessário

Convenções de Nomenclatura

Arquivos: lowercase com hífens (ex:
```
switch-light
```
,
```
tic-tac-toe
```
)
IDs: camelCase (ex:
```
calculateBtn
```
,
```
resultDisplay
```
)
Classes: kebab-case (ex:
```
btn-group
```
,
```
input-field
```
)
Funções: camelCase (ex:
```
calculateBMI
```
,
```
clearInputs
```
)

Funcionalidades Comuns

Botões

Sempre implemente botões "Calculate" e "Clear"
Use
```
.btn-group
```
para agrupar botões relacionados
Implemente hover effects consistentes

Inputs

Use
```
type="number"
```
para valores numéricos
Defina
```
min
```
e
```
max
```
apropriados
Use placeholders descritivos
Implemente validação de entrada

Output

Use elementos semânticos para exibir resultados
Implemente formatação adequada (decimais, unidades)
Considere cores para diferentes estados (sucesso, erro, etc.)

Progression Pattern

CLASS: Implementação básica funcional
CHALLENGE 01: Adicionar lógica de negócio e categorização
CHALLENGE 02: Melhorar UX com cores, informações adicionais e feedback visual

Boas Práticas

Mantenha código limpo e bem comentado
Use nomes descritivos para variáveis e funções
Implemente tratamento de erros básico
Teste funcionalidades em diferentes navegadores
Mantenha responsividade para diferentes tamanhos de tela
Use acessibilidade básica (labels, alt text, etc.)

Exemplo de Implementação

Siga sempre o padrão estabelecido no projeto BMI:

Estrutura HTML consistente
CSS com gradientes e design moderno
JavaScript funcional e bem estruturado
Documentação clara e completa
Progressão lógica dos desafios

Estrutura do Projeto

Cada projeto deve seguir esta estrutura padrão:

project-name/
├── index.html          # Versão principal do projeto
├── index.js            # JavaScript principal
├── style.css           # Estilos CSS
├── README.md           # Documentação em inglês
├── README-PTBR.md      # Documentação em português
├── challenge-1/        # Primeiro desafio
│   ├── index.html
│   ├── index.js
│   ├── style.css
│   ├── README.md
│   └── README-PTBR.md
├── challenge-2/        # Segundo desafio
│   ├── index.html
│   ├── index.js
│   ├── style.css
│   ├── README.md
│   └── README-PTBR.md
└── gifs/               # GIFs demonstrativos (se aplicável)
    ├── class.gif
    ├── challenge-1.gif
    └── challenge-2.gif

Padrões de Código

Use

<!DOCTYPE html>

e estrutura HTML5 semântica

Inclua meta tags para charset, viewport e compatibilidade

Use fonte Roboto do Google Fonts:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Estrutura básica:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Name</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <!-- Conteúdo -->
    <script src="index.js"></script>
</body>
</html>

Use reset CSS básico com

box-sizing: border-box

Implemente gradientes modernos como background

Use sistema de cores consistente:

Background: gradiente
```
#0f2027
```
→
```
#2c5364
```
→
```
#203a43
```
Botões:
```
#2e647a
```
com hover effects
Texto: branco (
```
#fff
```
)

Estrutura de classes:

```
.row
```
para containers
```
.input
```
para campos de entrada
```
.btn
```
para botões
```
.btn-group
```
para grupos de botões

Use unidades rem para responsividade

Implemente transições suaves (

transition: all 0.3s

)

Use ES6+ features quando apropriado

Implemente event listeners para interatividade

Use

document.getElementById()

document.querySelector()

para manipulação do DOM

Mantenha funções simples e focadas

Use template literals para strings dinâmicas

Implemente validação de entrada quando necessário

Padrões de Documentação

Título do projeto

Link para versão em português

Seção "CLASS" com instruções básicas

Seção "CHALLENGE 01" com requisitos específicos

Seção "CHALLENGE 02" com requisitos avançados

GIFs demonstrativos para cada versão

Links de navegação entre desafios

Tradução completa do README.md

Manter mesma estrutura e formatação

Adaptar linguagem técnica para português quando necessário

Funcionalidades Comuns

Sempre implemente botões "Calculate" e "Clear"

Use

.btn-group

para agrupar botões relacionados

Implemente hover effects consistentes

Use

type="number"

para valores numéricos

Defina

min

max

apropriados

Use placeholders descritivos

Implemente validação de entrada

Use elementos semânticos para exibir resultados

Implemente formatação adequada (decimais, unidades)

Considere cores para diferentes estados (sucesso, erro, etc.)

JS Dev Course - Cursor Rules

JS Dev Course - Cursor Rules

Estrutura do Projeto

Padrões de Código

HTML

CSS

JavaScript

Padrões de Documentação

README.md (Inglês)

README-PTBR.md (Português)

Convenções de Nomenclatura

Funcionalidades Comuns

Botões

Inputs

Output

Progression Pattern

Boas Práticas

Exemplo de Implementação

Related Skills

Markdown Converter

Nano Banana Pro

1password

JS Dev Course - Cursor Rules

Estrutura do Projeto

Padrões de Código

HTML

CSS

JavaScript

Padrões de Documentação

README.md (Inglês)

README-PTBR.md (Português)

Convenções de Nomenclatura

Funcionalidades Comuns

Botões

Inputs

Output

Progression Pattern

Boas Práticas

Exemplo de Implementação