| name | linting-formatting |
| description | Enforces kids-learning-app specific style guidelines for JavaScript, CSS, and EJS templates. |
Instructions
When I ask you to "format this code" or "check style," apply these project-specific rules:
JavaScript Style Guide
- Indentation: 2 spaces (no tabs)
- Semicolons: Always use semicolons
- Quotes: Single quotes for JavaScript, double quotes for HTML attributes
- Line Length: Max 100 characters (break into multiple lines if longer)
- Naming Conventions:
- Variables/functions: camelCase (
currentQuestion, displayCard)
- Constants: UPPER_SNAKE_CASE (
MAX_QUESTIONS, DEFAULT_COLOR)
- CSS classes: kebab-case (
quiz-container, fruit-card)
CSS Style Guide
.selector {
display: flex;
position: relative;
width: 100%;
padding: 20px;
margin: 10px 0;
font-size: 18px;
color: #333;
background-color: #fff;
border-radius: 10px;
transition: all 0.3s ease;
}
CSS Rules:
- Order properties logically (display → box model → typography → visual → animations)
- Use hex colors (#RRGGBB) consistently
- Group related selectors together
- Comment sections clearly
- Use CSS custom properties for theme colors
EJS Template Style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<% if (condition) { %>
<div class="content">
<!-- Keep EJS logic simple -->
<%= variable %>
</div>
<% } %>
</body>
</html>
EJS Rules:
- Indent EJS blocks properly
- Keep logic minimal (move complex logic to routes)
- Use
<%= for output (auto-escapes), <%- only when needed
- Comment complex template structures
File Organization
project/
├── app.js # Routes and server setup
├── public/
│ ├── css/
│ │ └── style.css # All styles in one file (project is small)
│ └── js/
│ ├── main.js # Shared utilities (TTS)
│ └── quiz.js # Feature-specific logic
└── views/
├── layout.ejs # Shared layout
├── index.ejs # Pages
└── partials/ # Reusable components (if needed)
Linting Checks
Before committing, verify:
Project-Specific Rules
For kids-learning-app:
- Prioritize readability over clever code
- Comment age-appropriate design decisions
- Keep files small and focused
- Use clear, descriptive variable names
- Avoid abbreviations (unless universally understood like
TTS)