Cursor AI Integration

Cursor is the AI-first code editor that's revolutionizing development. With native AI integration throughout the interface, Cursor provides intelligent assistance that understands your Forge projects and helps you build faster, smarter, and more efficiently.

Why Choose Cursor for Forge Development?

Cursor isn't just another code editor with AI features bolted onâit's built from the ground up with AI at its core. For Forge developers, this means:

🧠 Native AI Understanding

Cursor understands Forge project structures, Hammer tags, and deployment patterns without configuration.

⚡ Instant Context Awareness

AI assistance that knows your entire project context, making suggestions that fit your existing codebase.

🔄 Intelligent Refactoring

AI-powered refactoring that maintains Forge conventions and best practices automatically.

🐛 Smart Debugging

AI assistance that helps identify and fix issues specific to web development and Forge deployments.

Getting Started with Cursor + Forge

Step 1: Install Cursor

Visit cursor.sh and download Cursor for your operating system
Install Cursor following the standard installation process
Launch Cursor and complete the initial setup
Sign in with your preferred account (GitHub recommended for best AI features)

Step 2: Set Up Your Forge Project

Cursor works with both new and existing Forge projects:

đ Opening an Existing Project

Clone your Forge project repository locally
Open Cursor and select "Open Folder"
Navigate to your Forge project directory
Cursor automatically detects the project structure

đ Starting a New Project

Create a new folder for your project
Open the folder in Cursor
Initialize your Forge project structure
Start building with AI assistance from the beginning

Step 3: Configure Cursor for Optimal Forge Development

While Cursor works great out of the box, these configurations will enhance your Forge development experience:

🎯 AI Model Settings

Configure Cursor's AI models for the best results:

Use GPT-4 for complex code generation and refactoring
Enable Claude for detailed explanations and documentation
Set appropriate temperature for creativity vs. precision

Recommended AI Settings:

// In Cursor Settings (Cmd/Ctrl + ,)
{
  "cursor.ai.model": "gpt-4",
  "cursor.ai.temperature": 0.3,
  "cursor.ai.maxTokens": 2000,
  "cursor.ai.contextWindow": "large"
}

đ Project-Specific Configuration

Create a .cursor-rules file in your project root to help Cursor understand your Forge project. Choose the configuration that matches your project setup:

Basic Forge Project (.cursor-rules):

# Forge Project Configuration for Cursor AI

## Project Overview
This is a Forge project for web hosting and deployment.

## Project Structure
- Static HTML, CSS, and JavaScript files
- Assets organized in logical directories (/css/, /js/, /images/, /assets/)
- Must include index.html as the main entry point
- Optional forgerc.txt for URL routing configuration

## Forge Platform Requirements
- **index.html**: Required main entry point for the site
- **forgerc.txt**: Optional configuration file for custom URL routing
- **Static Assets**: All CSS, JS, images, and other assets
- **Forms**: Use Forge Forms service for contact forms and data collection

## Coding Standards
- Use semantic HTML5 elements
- Follow responsive design principles
- Ensure cross-browser compatibility
- Optimize for performance and SEO
- Include proper meta tags and favicon

## Best Practices
- Keep HTML clean and semantic
- Use external CSS and JS files linked with relative paths
- Optimize images for web (WebP when possible)
- Follow accessibility guidelines (WCAG 2.1 AA)
- Test across different devices and browsers
- Use progressive enhancement techniques

## Forge Forms Integration
- Use `data-forge-name` attribute on form elements to enable Forge Forms
- Each form needs unique `data-forge-name` value (e.g., "Contact Form", "Email Signup")
- Each input field can have `data-forge-name` for custom field naming
- Forms support Ajax submission, redirects, notifications, and autoresponders
- Access form data through Forge dashboard Forms tab

## URL Routing (forgerc.txt)
Forge Server configuration for clean URLs, redirects, and file exclusions:

### Basic Structure
```
[Global Rules]

[Condition] [path]
    [Rule] [arguments]
```

### Common Examples
```
# Remove trailing slashes globally
ClearLastSlash true

# Exclude files from CDN
Files
    robots.txt
    sitemap.xml
    api/data.json

# Clean URLs (remove .html extensions)
Location /about
    Rewrite /about.html

Location /contact
    Rewrite /contact.html

# External redirects
Location /terms
    Redirect https://docs.google.com/document/your-terms 302

# Direct text responses
Location /status
    Respond "Site is operational" 200

# Custom 404 page
NotFound
    Rewrite /404.html

# SPA routing (React, Vue, Angular)
NotFound
    Rewrite /index.html
```

### File Formats Supported
- `forgerc.txt` (recommended)
- `.forgerc` 
- `forgerc.json`

Forge + Hammer Project (.cursor-rules):

# Forge + Hammer Project Configuration for Cursor AI

## Project Overview
This is a Forge project using the Hammer templating system for enhanced development workflow.

## Project Structure
- HTML files use Hammer tags for templating and asset management
- Source files in root directory, compiled output in /Build/
- Assets organized in logical directories (/css/, /js/, /images/, /assets/)
- Build output goes to /Build/ directory (auto-generated, don't edit directly)

## Forge Platform Requirements
- **index.html**: Required main entry point (in source, not /Build/)
- **forgerc.txt**: Optional configuration for URL routing and file exclusions
- **Hammer Build System**: Processes templates and assets during build
- **Forms**: Use Forge Forms with `data-forge-name` attributes in templates

## Hammer Template System
- Use Hammer tags for includes and asset management
- Templates are processed during build to generate static files
- Live reload available during development

## Coding Standards
- Use semantic HTML5 elements in Hammer templates
- Follow responsive design principles
- Use Hammer tags for asset paths: <!-- @path filename.ext -->
- Include files using: <!-- @include filename.html -->
- Add live reload during development: <!-- @reload -->

## File Organization
- **/includes/**: Reusable HTML components and templates
- **/css/**: Stylesheets and design files
- **/js/**: JavaScript functionality and libraries
- **/images/**: Image assets and graphics
- **/assets/**: General assets and resources
- **/Build/**: Generated output (don't edit manually)

## Best Practices
- Keep templates modular and reusable
- Use includes for common elements (header, footer, navigation)
- Leverage Hammer's asset path resolution
- Follow accessibility guidelines in templates
- Test compiled output across different devices and browsers

## Hammer Tag Reference
- @include: Include content from another file
- @path: Reference assets with automatic path resolution
- @stylesheet: Link external CSS files
- @javascript: Link external JS files
- @reload: Enable live reloading for development

## Development Workflow
- Edit source files (HTML, CSS, JS) in root directory
- Use Hammer tags for templating and asset management
- Hammer compiles everything to /Build/ directory
- Deploy /Build/ contents to Forge hosting

## URL Routing (forgerc.txt)
Same configuration as Basic Forge, with considerations for build output:

### Hammer-Specific Examples
```
# Global settings
ClearLastSlash true

# Exclude source files from CDN (keep in /Build/ only)
Files
    robots.txt
    sitemap.xml

# Clean URLs for compiled pages
Location /portfolio
    Rewrite /portfolio/index.html

Location /blog
    Rewrite /blog/index.html

# Handle both source and build paths
Location /api/contact
    Rewrite /api/contact.html
```

Note: forgerc.txt should be in project root (source), not in /Build/ directory

Which configuration should you use?

Basic Forge: For static HTML sites, single-page applications, or when using other build tools
Forge + Hammer: For templated sites that benefit from includes, asset processing, and live reload

Using Cursor AI Features with Forge

🤖 AI Code Generation

Cursor's AI can generate Forge-optimized code using simple prompts:

Generating HTML Components

Prompt: "Create a responsive navigation header for a Forge project with logo, menu items, and mobile hamburger menu"

Result: Cursor generates semantic HTML with proper Hammer tags, responsive CSS, and JavaScript for mobile functionality.

Creating Form Layouts

Prompt: "Build a contact form with name, email, message fields, validation, and Forge-ready styling"

Result: Complete form with HTML structure, CSS styling, JavaScript validation, and proper accessibility attributes.

Responsive CSS Grid Layouts

Prompt: "Create a CSS Grid layout for a portfolio gallery that's responsive across all screen sizes"

Result: Modern CSS Grid implementation with media queries and proper image handling.

💬 Cursor Chat for Forge Development

Use Cursor's chat feature (Cmd+L / Ctrl+L) for interactive assistance:

You: "How do I optimize this HTML for better SEO?"

Cursor: Analyzes your HTML and suggests meta tags, semantic elements, image alt attributes, and structured data improvements.

You: "Explain how Hammer tags work in this template"

Cursor: Breaks down each Hammer tag in your file, explaining their purpose and how they'll be processed during build.

You: "Make this CSS more maintainable and follow BEM methodology"

Cursor: Refactors your CSS to use BEM naming conventions while maintaining all existing functionality.

🔄 AI-Powered Refactoring

Cursor excels at intelligent refactoring that maintains functionality while improving code quality:

HTML Structure Optimization: Improves semantic markup and accessibility
CSS Organization: Refactors styles for better maintainability and performance
JavaScript Modernization: Updates code to use modern ES6+ features
Responsive Design Improvements: Enhances layouts for better cross-device compatibility

🚀 Rapid Prototyping Workflow

Start with a basic HTML structure
Use Cursor AI to generate component layouts
Iterate quickly with AI suggestions
Add Hammer tags for includes and assets
Deploy to Forge for testing

🔧 Maintenance and Optimization Workflow

Use Cursor to analyze existing code for improvements
Get AI suggestions for performance optimizations
Refactor code with AI assistance for better maintainability
Update dependencies and fix compatibility issues
Document changes with AI-generated comments

Pro Tips for Cursor + Forge

💡 Context is King

Always provide context about your project goals, target audience, and technical requirements when asking for AI assistance.

🎯 Be Specific with Prompts

Instead of "make this better," try "optimize this CSS for performance while maintaining visual design on mobile devices."

🔍 Review AI Suggestions

Always review and test AI-generated code. While Cursor is excellent, human oversight ensures quality and catches edge cases.

📚 Learn from AI Explanations

Use Cursor's explanations to understand why certain approaches are recommended. This builds your expertise over time.

🔄 Iterate and Improve

Don't accept the first AI suggestion. Ask for alternatives, improvements, or different approaches to find the best solution.

Troubleshooting Common Issues

⚡ Slow AI Responses

Solution: Reduce context window size, use more specific prompts, or switch to a faster model for simple tasks.

🎯 AI Suggestions Don't Match Project Style

Solution: Include style guide information in your prompts or .cursor-rules file. Show examples of preferred code style.

🔍 AI Can't Find Project Files

Solution: Ensure your project is properly opened as a folder in Cursor, not individual files.

Advanced Cursor Features for Forge

đ¨ AI-Powered Code Reviews

Use Cursor to review your code for:

HTML semantic improvements
CSS optimization opportunities
JavaScript best practices
Accessibility compliance
Performance bottlenecks

đ Intelligent Documentation

Cursor can generate comprehensive documentation for your Forge projects:

Code comments explaining complex functionality
README files with setup and deployment instructions
Style guide documentation
Component usage examples

Ready to Start Building?

Cursor's AI-first approach combined with Forge's powerful platform creates an unmatched development experience. Start building smarter today.

Download Cursor

Compare with VS Code â AI Getting Started â