Claude Code Coworking Space Site Guide

This skill provides structured guidance for working with static coworking space websites that use traditional HTML/CSS/JavaScript architecture without modern build tools or frameworks.

Project Type

Static multi-page single-file HTML sites using jQuery and Bootstrap 5, optimized for premium coworking spaces. No build process, transpilation, or bundling required.

Technology Recognition

When you encounter a project with this stack:

Apply the following guidelines.

Step 1: Understand the Architecture

Before making any changes:

1. **Identify the single-page scroll structure** - All sections (home, about, services, gallery, contact) are typically in `index.html` with anchor-based navigation (`#home`, `#about`, etc.)

2. **Locate custom vs. third-party code**:

- **Editable files**: `style.css`, `main.js`, `index.html`

- **Do NOT edit**: Any `.min.js` or `.min.css` files (third-party libraries)

3. **Review the file structure pattern**:

```

project/

├── index.html # Main page (all sections)

├── css/

│ ├── style.css # Custom styles (EDIT HERE)

│ └── *.min.css # Libraries (DO NOT EDIT)

├── js/

│ ├── main.js # Custom scripts (EDIT HERE)

│ └── *.min.js # Libraries (DO NOT EDIT)

├── img/ # Images

└── data files # JSON files for dynamic content

```

4. **Check for data files** - Look for `reviews.json`, `testimonials.json`, or similar files that feed dynamic content

Step 2: Local Development Setup

Guide the user through running the site locally:

```bash

Option 1: Python simple server

python3 -m http.server 8000

Option 2: Node.js serve package

npx serve

Option 3: Just open index.html directly in browser

```

Explain that no build step is needed - just serve static files.

Step 3: Common Modification Patterns

Updating Pricing Information

1. Search for pricing section in `index.html` (usually marked with `<!-- Pricing -->` or similar)

2. Locate pricing cards (typically Bootstrap `.card` components)

3. Update prices, features, and timestamps

4. Remind user to update "last updated" timestamps if present

Managing Reviews/Testimonials

1. Check if reviews are in `reviews.json` or hardcoded in HTML

2. If JSON-based:

- Edit the JSON file following existing structure

- Check `main.js` for the loading logic (usually AJAX `$.getJSON()`)

- Verify required fields: `reviewer_name`, `rating`, `review_date`, `review_text`, etc.

3. If HTML-based:

- Edit the review card markup directly in `index.html`

- Maintain Bootstrap grid classes for responsiveness

Gallery Image Updates

1. Locate the gallery section in `index.html`

2. Common patterns:

- Bootstrap carousel (`.carousel`, `.carousel-item`)

- Swiper.js slider (`.swiper-container`, `.swiper-slide`)

- Masonry grid with Magnific Popup

3. Add/remove image slides maintaining the existing HTML structure

4. Update carousel indicators count if present

5. Ensure images are in `img/` directory and optimized for web

Contact Information Changes

1. **Address**: Search for `<address>` tag or contact section in HTML

2. **Phone/Email**: Check for obfuscation patterns:

- JavaScript decryption functions (common anti-spam technique)

- Look for `decryptPhone()` or similar in `main.js`

- Update the decoded value, NOT the encoded version

3. **Google Maps**: Replace iframe `src` attribute with new embed URL

4. **Hours**: Update structured text or table in contact section

Styling Modifications

1. Always edit `css/style.css`, never minified files

2. Common sections to look for:

- Navbar styles (`.navbar`, `.navbar-brand`)

- Section-specific classes (`.intro`, `.about`, `.services`, `.gallery`, `.contact`)

- Custom component styles (`.review-card`, `.pricing-card`)

- Mobile-specific styles in `@media` queries

3. Use browser DevTools to identify class names before editing

Step 4: Maintain jQuery Patterns

When adding or modifying JavaScript:

1. **Use jQuery syntax consistently**:

```javascript

// Good - matches project style

$(document).ready(function() {

$('.element').on('click', function() {

$(this).addClass('active');

});

});

// Avoid - modern JS (breaks consistency)

const element = document.querySelector('.element');

element.addEventListener('click', () => {

element.classList.add('active');

});

```

2. **Follow ES5 patterns** (no arrow functions, const/let, or ES6+ features):

```javascript

// Good

var myFunction = function() {

var result = 'value';

return result;

};

// Avoid

const myFunction = () => {

const result = 'value';

return result;

};

```

3. **Use IIFE pattern for scoping**:

```javascript

(function($) {

'use strict';

// Your code here

})(jQuery);

```

Step 5: Responsive Behavior

When adding features, ensure they work with Bootstrap 5 responsive classes:

1. **Use Bootstrap grid**: `.container`, `.row`, `.col-md-6`, etc.

2. **Leverage utility classes**: `.d-none`, `.d-md-block`, `.text-center`, `.mb-4`

3. **Test mobile menu behavior**:

- Hamburger menu auto-close on link click

- Sticky navbar appearance on scroll

- Mobile-only floating action buttons

4. **Check common breakpoints**:

- `sm` (≥576px), `md` (≥768px), `lg` (≥992px), `xl` (≥1200px)

Step 6: Anti-Spam Contact Protection

If implementing or modifying contact information:

1. **Recognize obfuscation patterns**:

- Character rotation/substitution in JavaScript

- ROT13 encoding for emails

- Click-to-reveal phone numbers

2. **Example pattern**:

```javascript

// Obfuscated in HTML

<button onclick="decryptPhone()">Call Us</button>

// Decryption in main.js

function decryptPhone() {

var encoded = 'abc123xyz'; // Obfuscated

var decoded = '9876543210'; // Real number

$('.phone-display').text(decoded);

}

```

3. **When updating**: Change the decoded/real value, not the obfuscated version

Step 7: Deployment

Guide deployment for static sites:

1. **No build step required** - just upload all files maintaining directory structure

2. **Deployment options**:

- GitHub Pages (if repo is public)

- Netlify/Vercel (drag-and-drop or Git integration)

- Traditional web hosting (FTP upload)

3. **Custom domain**: Check for `CNAME` file (GitHub Pages) or DNS settings

4. **Verify after deploy**:

- All images load correctly

- Contact forms submit (if applicable)

- Google Maps iframe displays

- HTTPS works (most hosts provide free SSL)

Important Constraints

Example Workflow

User request: "Add a new testimonial and update the pricing"

1. **Read** `reviews.json` (or locate testimonial section in `index.html`)

2. **Add** new testimonial following existing JSON structure

3. **Read** `index.html` pricing section

4. **Edit** price values and update timestamp

5. **Test** locally with `python3 -m http.server 8000`

6. **Verify** responsive behavior in browser DevTools

7. **Commit** changes with clear message: "Add testimonial from [Name], update pricing for [Plan]"

Notes