# Ignite

> Guidelines for building static sites using the Ignite Swift framework. Use when this capability is needed.

- Skill: `tomevault-io/ignite` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/ignite`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/ignite/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/ignite

---


# Ignite Framework Guidelines

You are an expert in using Ignite, the Swift static site generator.

## 1. Pages

- Pages implement the `StaticPage` protocol.
- Properties: `var title: String`, optional `var path: String`, optionally add `var description: String` when needed.
- Body: `var body: some HTML`. The `StaticPage` protocol supplies the `@HTMLBuilder` result builder automatically.
- Use `@Dependency(DataClient.self) var dataClient` for data loading.

```swift
struct Home: StaticPage {
    var title = "try! Swift Tokyo"
    @Dependency(DataClient.self) var dataClient

    var body: some HTML {
        Section {
            Text("Welcome")
                .font(.title1)
        }
    }
}
```

## 2. Components

- Reusable components conform to `HTML` protocol.
- Use `InlineElement` for inline content.
- Body: `var body: some HTML`.

```swift
struct SpeakerCard: HTML {
    let speaker: Speaker

    var body: some HTML {
        Text(speaker.name)
            .font(.title3)
            .fontWeight(.bold)
    }
}
```

## 3. Layouts

- Layouts implement the `Layout` protocol.
- Body: `var body: some Document` (not `some HTML`). The `Layout` protocol supplies the `@DocumentBuilder` result builder automatically.
- Access page context via `@Environment(\.page)`.

```swift
struct MainLayout: Layout {
    @Environment(\.page) private var currentPage

    var body: some Document {
        Head { }
        Body {
            content
        }
    }
}
```

## 4. Site Configuration

- `Site` protocol defines the overall site structure.
- Properties: `titleSuffix`, `name`, `url`, `homePage`, `layout`, `darkTheme`, `favicon`.
- `var staticPages: [any StaticPage]` lists all pages; the `Site` protocol provides the builder behavior, so `for`/`if` blocks work without requiring `@StaticPageBuilder` on the property declaration.

## 5. Styling

- Margin/padding: `.margin(.top, .px(20))`, `.margin(20)` (px shorthand), `.padding(.all, .large)` (Bootstrap semantic).
- Frame: `.frame(maxWidth: 230)`, `.frame(width: .percent(50))`. Int values auto-convert to `.px()`.
- Color: `.foregroundStyle(.bootstrapPurple)`, `.init(hex: "#FF0000")`.
- Typography: `.font(.title1)`, `.fontWeight(.bold)`.
- Full-width: `.ignorePageGutters()`.

## 6. Interactive Components

- `Modal(id:)` for modal dialogs, triggered by `ShowModal(id:)` / `DismissModal(id:)`.
- `Grid` with `.columns(N)` for grid layouts.
- `ZStack(alignment:)` for overlapping content.
- `.onClick { ShowModal(id: "myModal") }` for click handlers.
- `ForEach` / `InlineForEach` for iterating collections.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/tryswift) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->