Cline rules

.clinerules/project-guidelines.md

Cline rules

Quality

65/100

Scores the file, not the repository.

Length

1,558 words

34 headings · 9 code blocks

Repository

— · pushed 73 days ago

Last changed

2 days ago

First indexed 2 days ago.

prabhakar267/paper-games/.clinerules/project-guidelines.mdRaw GitHub

1# Paper Games Project Guidelines
2 
3This document provides comprehensive guidelines for creating new game projects in the paper-games repository and maintaining consistency across all projects.
4 
5## Project Structure Overview
6 
7```
8paper-games/
9├── common/                      # Shared resources (DO NOT DUPLICATE)
10│   ├── styles.css              # Common CSS styles
11│   ├── utils.js                # Common JavaScript utilities
12│   ├── assets/                 # Shared assets
13│   │   └── colored-pencil.png
14│   └── README.md
15├── [project-name]/             # Individual game projects
16│   ├── index.html
17│   ├── style.css              # Project-specific styles ONLY
18│   ├── script.js              # Project-specific JavaScript
19│   └── assets/                # Project-specific assets
20│       └── banner_image_generated.png
21├── index.html                  # Landing page
22└── landing-style.css
23```
24 
25## Creating a New Project: Step-by-Step
26 
27### Step 1: Create Project Directory
28 
29```bash
30mkdir [project-name]
31mkdir [project-name]/assets
32```
33 
34**Naming Convention:**
35- Use lowercase with hyphens (kebab-case): `bouncing-balls`, `order-chaos`
36- Keep names descriptive but concise
37- Avoid spaces and special characters
38 
39### Step 2: Create HTML File
40 
41Create `[project-name]/index.html` with this structure:
42 
43```html
44<!DOCTYPE html>
45<html lang="en">
46<head>
47    <meta charset="UTF-8">
48    <meta name="viewport" content="width=device-width, initial-scale=1.0">
49    
50    <!-- SEO Meta Tags -->
51    <meta name="description" content="[Write compelling 150-160 char description]">
52    <meta name="keywords" content="[game type], strategy game, board game, paper game">
53    <meta name="author" content="Prabhakar Gupta">
54    <meta name="robots" content="index, follow">
55    <meta name="language" content="English">
56    
57    <!-- Open Graph / Social Media -->
58    <meta property="og:title" content="[Game Name] - [Tagline]">
59    <meta property="og:description" content="[Brief description for social sharing]">
60    <meta property="og:type" content="website">
61    <meta property="og:image" content="https://prabhakar267.github.io/paper-games/[project-name]/assets/banner_image_generated.png">
62    <meta property="og:image:width" content="1200">
63    <meta property="og:image:height" content="630">
64    
65    <!-- Twitter Card -->
66    <meta name="twitter:card" content="summary_large_image">
67    <meta name="twitter:title" content="[Game Name] - [Tagline]">
68    <meta name="twitter:description" content="[Brief description]">
69    <meta name="twitter:image" content="https://prabhakar267.github.io/paper-games/[project-name]/assets/banner_image_generated.png">
70    
71    <title>[Game Name] - [Tagline]</title>
72    
73    <!-- Favicon -->
74    <link rel="icon" type="image/png" href="https://prabhakar267.github.io/paper-games/common/assets/colored-pencil.png">
75    <link rel="apple-touch-icon" href="https://prabhakar267.github.io/paper-games/common/assets/colored-pencil.png">
76    
77    <!-- Google Fonts - Always use Open Sans -->
78    <link rel="preconnect" href="https://fonts.googleapis.com">
79    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
80    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
81    
82    <!-- Stylesheets: CRITICAL ORDER -->
83    <link rel="stylesheet" href="../common/styles.css">
84    <link rel="stylesheet" href="style.css">
85    
86    <!-- Google Analytics -->
87    <script>
88        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
89        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
90        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
91        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
92        
93        ga('create', 'UA-57220954-1', 'auto');
94        ga('send', 'pageview');
95    </script>
96</head>
97<body>
98    <div class="container">
99        <h1>[Game Title with Emoji] 🎮</h1>
100        
101        <!-- OPTIONAL: Game Setup Section -->
102        <div class="game-setup" id="gameSetup">
103            <h2>Game Setup</h2>
104            
105            <div class="setup-section">
106                <h3>[Setting Category]</h3>
107                <div class="radio-group">
108                    <label>
109                        <input type="radio" name="[setting]" value="[value]" checked>
110                        [Option 1 Description]
111                    </label>
112                    <label>
113                        <input type="radio" name="[setting]" value="[value2]">
114                        [Option 2 Description]
115                    </label>
116                </div>
117            </div>
118            
119            <button id="startGame" class="btn-primary">Start Game</button>
120            <div style="text-align: center; margin-top: 15px;">
121                <a href="../" class="btn-secondary" style="display: inline-block; text-decoration: none;">Explore More Games</a>
122            </div>
123        </div>
124        
125        <!-- Game Area -->
126        <div class="game-area" id="gameArea" style="display: none;">
127            <div class="game-info">
128                <div class="game-status" id="gameStatus">
129                    [Status text]
130                </div>
131            </div>
132            
133            <!-- Your game board/canvas/grid here -->
134            
135            <div class="game-controls">
136                <button id="resetGame" class="btn-secondary">New Game</button>
137                <a href="../" class="btn-secondary" style="display: inline-block; text-decoration: none;">Explore More Games</a>
138            </div>
139        </div>
140        
141        <!-- Info Sections - REQUIRED -->
142        <div class="info-sections">
143            <div class="collapsible-section">
144                <div class="section-header" onclick="toggleSection('rules')">
145                    <h3>Rules</h3>
146                    <span class="toggle-icon" id="rules-icon">▼</span>
147                </div>
148                <div class="section-content" id="rules-content">
149                    <ul>
150                        <li>[Rule 1]</li>
151                        <li>[Rule 2]</li>
152                        <li>[Rule 3]</li>
153                    </ul>
154                    
155                    <div class="reference">
156                        <p><strong>Game Reference:</strong> <a href="[url]" target="_blank" rel="noopener noreferrer">[Link Text]</a></p>
157                    </div>
158                </div>
159            </div>
160            
161            <!-- Add more collapsible sections as needed -->
162        </div>
163    </div>
164    
165    <!-- Scripts: CRITICAL ORDER -->
166    <script src="../common/utils.js"></script>
167    <script src="script.js"></script>
168</body>
169</html>
170```
171 
172### Step 3: Create CSS File
173 
174Create `[project-name]/style.css` - **ONLY include project-specific styles:**
175 
176```css
177/* [Project Name] Specific Styles */
178 
179/* RULES:
180 * 1. DO NOT redefine common styles (body, .container, h1, h2, h3, buttons, etc.)
181 * 2. Only add styles unique to this project
182 * 3. Use the same color scheme: #667eea, #764ba2, #e74c3c, #3498db
183 * 4. Follow the existing naming conventions
184 */
185 
186/* Example: Game-specific board styles */
187.game-board {
188    /* Your unique styles here */
189}
190 
191/* Example: Game-specific cell styles */
192.cell {
193    /* Your unique styles here */
194}
195 
196/* Always include responsive design */
197@media (max-width: 768px) {
198    /* Mobile-specific adjustments */
199}
200 
201@media (max-width: 600px) {
202    /* Small mobile adjustments */
203}
204```
205 
206### Step 4: Create JavaScript File
207 
208Create `[project-name]/script.js`:
209 
210```javascript
211// [Project Name] Game Logic
212 
213// IMPORTANT: Do not redefine toggleSection() - it's in common/utils.js
214 
215// Game state variables
216let gameState = {
217    // Your state here
218};
219 
220// Initialize game
221function initGame() {
222    // Setup code
223}
224 
225// Game logic functions
226// ...
227 
228// Event listeners
229document.addEventListener('DOMContentLoaded', () => {
230    // Setup event listeners
231});
232```
233 
234### Step 5: Add Assets
235 
2361. **Banner Image** (REQUIRED): Create `assets/banner_image_generated.png`
237   - Size: 1200x630px
238   - Format: PNG
239   - Purpose: Social media sharing (Open Graph)
240 
2412. **Favicon**: Always use the shared favicon from `common/assets/colored-pencil.png`
242   - DO NOT copy colored-pencil.png to individual project directories
243   - Reference it from common directory in HTML: `https://prabhakar267.github.io/paper-games/common/assets/colored-pencil.png`
244   - Projects can create custom favicons if needed, but the default colored-pencil.png should remain only in common/assets/
245 
246### Step 6: Update Landing Page
247 
248Add your project to the main `index.html`:
249 
250```html
251<div class="game-tile" style="background-image: url('[project-name]/assets/banner_image_generated.png');">
252    <a href="[project-name]/">
253        <div class="tile-overlay">
254            <h3>[Game Name]</h3>
255            <p>[One-line description from your game]</p>
256        </div>
257    </a>
258</div>
259```
260 
261### Step 7: Update README.md
262 
263Add your project to the main `README.md` file in the games table:
264 
265```markdown
266| [<img src="[project-name]/assets/banner_image_generated.png" width="400" alt="[Game Name]">](https://prabhakar267.github.io/paper-games/[project-name]/) | **[[Game Name]](https://prabhakar267.github.io/paper-games/[project-name]/)**<br>[One-line description from your game] |
267```
268 
269**Important:**
270- Add the new game entry as a new row in the table
271- Use the same one-line description as used in the landing page
272- Images are fixed at 400px width using HTML img tags
273- The banner image should be clickable and link to the live game URL
274- The game name should also be a clickable link
275 
276## Common Resources - DO NOT DUPLICATE
277 
278### Available from common/styles.css
279 
280**DO NOT redefine these in your project CSS:**
281 
282- CSS Reset (`* { margin: 0; padding: 0; box-sizing: border-box; }`)
283- `body` styling (gradient background, flexbox layout)
284- `.container` (white card with shadow)
285- Typography: `h1`, `h2`, `h3`
286- Buttons: `.btn-primary`, `.btn-secondary`
287- `.setup-section`
288- `.radio-group` and radio button styling
289- `.info-sections` and collapsible sections
290- `.collapsible-section`, `.section-header`, `.toggle-icon`, `.section-content`
291- `.reference` links styling
292- `.game-info`, `.game-status`, `.game-controls`
293- `@keyframes pulse` animation
294- Base responsive breakpoints (@media queries)
295 
296### Available from common/utils.js
297 
298**DO NOT redefine these in your project JavaScript:**
299 
300- `toggleSection(sectionId)` - Handles collapsible section toggling
301 
302### Available from common/assets/
303 
304- `colored-pencil.png` - Default favicon/icon
305 
306## Design Guidelines
307 
308### Color Palette (Use Consistently)
309 
310```css
311--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
312--primary-color: #667eea;
313--secondary-color: #764ba2;
314--error-red: #e74c3c;
315--info-blue: #3498db;
316--success-green: #27ae60;
317--warning-yellow: #f1c40f;
318--text-dark: #333;
319--text-medium: #555;
320--text-light: #666;
321--bg-light: #f8f9fa;
322--border-color: #ddd;
323```
324 
325### Typography
326 
327- **Font**: Open Sans (already loaded via Google Fonts)
328- **H1**: 2.5em, center-aligned
329- **H2**: 1.5-2em, center-aligned
330- **H3**: 1.2em
331- **Body**: 1em, line-height 1.6
332 
333### Spacing
334 
335- Use consistent padding/margin: 10px, 15px, 20px, 30px, 40px
336- Container padding: 30px (20px on mobile)
337- Section margins: 20-25px
338 
339### Interactive Elements
340 
341- **Hover effects**: Use `transform: translateY(-2px)` or `transform: scale(1.05)`
342- **Transitions**: Keep under 0.3s (`transition: all 0.3s ease`)
343- **Cursor**: Always use `cursor: pointer` on clickable elements
344 
345## File Naming Conventions
346 
347- **Directories**: `lowercase-with-hyphens`
348- **HTML files**: `index.html` (always)
349- **CSS files**: `style.css` (project-specific)
350- **JS files**: `script.js` (project-specific)
351- **Images**: `descriptive-name.png` or `descriptive-name.jpg`
352- **Banner images**: Always `banner_image_generated.png`
353 
354## Code Style Guidelines
355 
356### HTML
357- Use 4-space indentation
358- Include semantic HTML5 elements
359- Always include proper meta tags
360- Use meaningful IDs and class names
361- Close all tags properly
362 
363### CSS
364- Use 4-space indentation
365- Group related styles together
366- Comment major sections
367- Mobile-first responsive design
368- Use class selectors over IDs for styling
369 
370### JavaScript
371- Use 4-space indentation or 2-space (be consistent within file)
372- Use `const` and `let`, avoid `var`
373- Use descriptive variable/function names
374- Comment complex logic
375- Use modern ES6+ features where appropriate
376 
377## Testing Checklist
378 
379Before committing a new project:
380 
381- [ ] All HTML validates (no errors)
382- [ ] CSS doesn't override common styles unnecessarily
383- [ ] JavaScript works without console errors
384- [ ] Responsive design works on mobile (test at 320px, 768px, 1024px)
385- [ ] All buttons and interactive elements work
386- [ ] Collapsible sections toggle correctly
387- [ ] "Back to Games" links work
388- [ ] Meta tags are complete and accurate
389- [ ] Banner image exists and displays correctly
390- [ ] Game is playable end-to-end
391- [ ] Browser console has no errors
392- [ ] Landing page updated with new game card
393- [ ] README.md updated with new game entry
394 
395## Common Pitfalls to Avoid
396 
3971. **❌ Redefining common styles** - Always check `common/styles.css` first
3982. **❌ Wrong stylesheet order** - common/styles.css MUST come before style.css
3993. **❌ Wrong script order** - common/utils.js MUST come before script.js
4004. **❌ Hardcoding paths** - Use relative paths (`../common/...`)
4015. **❌ Inconsistent color schemes** - Stick to the defined palette
4026. **❌ Missing responsive design** - Always include mobile breakpoints
4037. **❌ Forgetting analytics** - Include Google Analytics script
4048. **❌ Missing meta tags** - SEO and social sharing require complete meta tags
4059. **❌ Not testing mobile** - Always test on small screens
40610. **❌ Forgetting to update landing page** - Add your game to index.html
407 
408## Quick Reference Commands
409 
410```bash
411# Create new project structure
412mkdir [project-name]
413mkdir [project-name]/assets
414 
415# Copy common files as templates (don't use these directly!)
416# Create your own versions based on guidelines above
417 
418# Test locally
419open [project-name]/index.html
420 
421# Test landing page
422open index.html
423```
424 
425## Questions or Issues?
426 
427If you encounter inconsistencies or need clarification:
428 
4291. Check existing projects for examples (bouncing-balls, order-chaos, etc.)
4302. Review `common/README.md` for shared resources documentation
4313. Ensure you're following the structure of successful existing projects
432 
433## Version History
434 
435- **v1.0** (2025-12-28): Initial guidelines created after refactoring common resources
436

Sections

Paper Games Project Guidelines
Project Structure Overview
Creating a New Project: Step-by-Step
Step 1: Create Project Directory
Step 2: Create HTML File
Step 3: Create CSS File
Step 4: Create JavaScript File
Step 5: Add Assets
Step 6: Update Landing Page
Step 7: Update README.md
Common Resources - DO NOT DUPLICATE
Available from common/styles.css
Available from common/utils.js
Available from common/assets/
Design Guidelines
Color Palette (Use Consistently)
Typography
Spacing
Interactive Elements
File Naming Conventions
Code Style Guidelines
HTML
CSS
JavaScript
Testing Checklist
Common Pitfalls to Avoid
Quick Reference Commands
Create new project structure
Copy common files as templates (don't use these directly!)
Create your own versions based on guidelines above
Test locally
Test landing page
Questions or Issues?
Version History

What it covers

test code-style architecture ui deployment do-not docs

Stack — with the evidence

javascript

(0.80)

Format

Cline rules

A single file or a folder of files, all always-on. The folder form is the simplest way any format here lets you split rules into topics without also learning an activation model.

What the corpus says about it

Repository

Owner: prabhakar267
Language: —
License: —
Archived: no

All configs in this repo

Also in prabhakar267/paper-games

Diff this repo’s formats

One repository carrying more than one format is the comparison this product exists for: does anyone actually write different content in each file, or is one a copy of the other?

The other instruction files in this repository
Repository	Format	Stack	Covers	Score	Changed
prabhakar267/paper-games.clinerules/git-commit-guidelines.md · 0	Cline rules	javascript	lint-formatstylearchgit+3	93/100	2 days ago

Diff against .clinerules/git-commit-guidelines.md

Similar configs

Same format, overlapping stack, ranked by quality.

Same format, overlapping stack, ranked by quality
Repository	Format	Stack	Covers	Score	Changed
bashdeban/fastmind.clinerules/.project-consistency-keeper2.md · 5	Cline rules	typescriptnode+8	setupbuildtestlint-format+11	100/100	3 days ago
JCodesMore/ai-website-cloner-template.clinerules · 31k	Cline rules	typescriptnode+7	buildlint-formatstylearch+3	97/100	2 days ago
BryaanF/LiantPortfolio.clinerules/project-guidelines.md · 0	Cline rules	javascripttailwind+5	buildstylearchgit+2	96/100	3 days ago
u9401066/zotero-keeper.clinerules/50-pubmed-project.md · 6	Cline rules	pytestruff+6	testlint-formatstylearch+1	94/100	3 days ago
u9401066/zotero-keepervscode-extension/resources/repo-assets/pubmed-search-mcp/.clinerules/50-pubmed-project.md · 6	Cline rules	pytestruff+6	testlint-formatstylearch+1	94/100	3 days ago
prabhakar267/paper-games.clinerules/git-commit-guidelines.md · 0	Cline rules	javascript	lint-formatstylearchgit+3	93/100	2 days ago
VaillerTeeter/HoshimiNest.clinerules/project-identity.md · 1	Cline rules	typescriptvite+4	setuparchtypesdo-not	93/100	yesterday
HerringtonDarkholme/megarepo.clinerules/02-development.md · 17	Cline rules	nodejavascript	setupbuildteststyle+3	92/100	3 days ago