AI SummaryA Cursor-specific ruleset that standardizes JavaScript project structure and code patterns (HTML5, CSS gradients, naming conventions) for teaching web development from beginner to advanced through project-based learning.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "js-dev-course — Cursor Rules" prompt rules to my project. Repository: https://github.com/EmersonBraun/js-dev-course Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
Course designed to teach javascript through projects, starting from scratch and advancing, taught by *EmersonBraun*
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 `
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: `html <!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() e 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
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts