A WordPress framework: plugin + IDE extension for Cursor and VS Code

Skylit.DEV brings WordPress to the File System

Skylit.DEV creates a bidirectional live sync between your development folder, Gutenberg, and the WordPress database. Build WordPress websites as structured files while everything stays instantly synchronized.

Join Early Access
Rotate your phone to landscape for a closer look.
  1. Edit the filesWrite standard HTML with classes, IDs, and Skylit-powered data attributes.
  2. Gutenberg updatesSkylit syncs the save. The block changes in the editor.
  3. Edit in WordPressRetype the button on the canvas. The sidebar field follows.
  4. The file updatesThe new value is written back to home.html.
  5. Select in GutenbergClick a block. The IDE jumps to its line.
  6. Tag it with Alt+TThe selection lands in the AI chat as context.
  7. Instruct the AIDefine the change in plain words or technical terms, like “wrap folders and files in spans”.
  8. See it in GutenbergThe AI edits the file. The block updates on save.
  9. Add a blockNew HTML, like the logo with a relative path, becomes a Gutenberg block.

The WordPress plugin

Turns WordPress into a file-based system. It compiles your HTML into real Gutenberg blocks, registers patterns, hybrid blocks, CPTs, and fields, adds developer tools to the block editor, and runs caching and site utilities.

The IDE extension

Skylit.DEV I/O connects your dev folder to the site from Cursor or VS Code. Every save syncs both ways: posts, templates, patterns, ACF field groups, forms, and media, with a local preview to check the result.

The AI skillset

SKILL.md files ship with the plugin and land in your dev folder. They tell AI agents how your project is structured, so they make safe edits instead of guessing at WordPress.

MCP for IDE Agents

The IDE extension ships its own MCP server, so agents in Cursor or VS Code can take over what the extension normally does on its own: sync, push and pull, linking new posts, uploading media, and purging the cache.

WP Agent for Cloud AI

The plugin can add a WP Agent: a separate WordPress user with editor-level permissions. ChatGPT, Claude, or Codex connect to it over MCP and can edit and publish content and upload media, with no access to plugins, themes, users, settings, or wp-admin.

What Skylit.DEV Brings to Your Workflow

Code-first Gutenberg

Write clean HTML and CSS in your dev folder. Skylit compiles it into real Gutenberg blocks; classes, IDs, attributes, and hierarchy stay intact.

Architecture, CPTs & fields

Define custom post types, field schemas, and relationships in your file system. Skylit syncs architecture into the database, no admin-only configuration.

Hybrid blocks & patterns

Convert HTML into reusable patterns with controlled block interfaces. Devs own structure and logic; editors work inside predefined zones.

Loops & dynamic output

Build CPT loops, archive grids, and related content from files using a structured JSON layer in HTML guided by the Expression Engine without scattering template logic.

Write & sync content from files

Author post content and structure in HTML files. Skylit syncs into the database and Gutenberg instantly as your content lives as both code and editable blocks.

Native local media

Your local media-library/ folder is the WordPress Media Library, including folder structure. Drop assets in the project; Skylit syncs, links, and keeps folders aligned with no manual uploads.

  • appearance/

    Full FSE support: templates, template parts, patterns, global CSS, fonts, and theme assets.

  • functionality/

    As many PHP and JS files as you need for hooks, AJAX, and widgets. The plugin loads them, and you can edit them from the IDE or the block editor.

  • post-types/

    Pages, posts, and every custom post type as HTML, with their field data, SEO settings, and featured images.

  • media-library/

    The WordPress Media Library, folders included. Drop a file in, and it is uploaded and linked.

  • plugins/

    Adapters for ACF, Fluent Forms, SEOPress, WooCommerce, BunnyCDN, Complianz, and Skylit settings. Structure and settings sync; secrets stay protected on the server.

  • taxonomies/

    Categories, tags, and custom taxonomy terms as JSON vocabularies.

  • utilities/

    Popups, internal SOPs, LLMs.txt, the maintenance page, and analytics reports.

  • .skylit/

    35+ agent skills, project memory, and revisions, so AI agents and teammates know how the project works.

The token reality

Instead of parsing complete Gutenberg output, huge database tables, and mixed theme logic, AI operates on clearly defined layouts, structured data schemas, reusable block systems, consistent file patterns, and core web languages it already understands best.

Because the system is predictable, AI does not need to query MCP to interpret your project first. It understands it immediately from file system: smaller context windows, fewer tokens wasted on guesswork.

The Skylit.DEV approach

Skylit.DEV provides a defined internal structure and default skillset: how blocks compose, how data connects to layouts, how loops render, how styles and logic stay organized, and which expressions exist in your environment. On top of that, devs and AI build a project memory, so models keep following your decisions from one session to the next.

Result: faster understanding of complex codebases, safer edits to layouts and data, consistent generation of new components, and fewer errors from misreading WordPress structure.

35+ agent skills ship with the framework

  • Patterns & hybrid blocks
  • Loops & archives
  • Expressions
  • Conditions & block options
  • ACF
  • WooCommerce
  • SEO
  • Fluent Forms
  • Media
  • Accessibility
  • HTML & CSS
  • JS & PHP
  • Sync metadata
  • Git & revisions
  • Project memory
  • MCP sync tools
  • Popups
  • Analytics
  • Public preview

You are no longer asking AI to work around a CMS. You are giving it a compact, structured WordPress project in files, which it can change with precision.

Join Early Access

Static pages for visitors

Public pages are built to static HTML and served at the same URLs, with measured critical CSS, an HTML cache, and CDN-aware purges. Each page rebuilds after a sync.

Dynamic data where it matters

Forms, carts, and logged-in fragments keep working inside static pages through the dynamic areas you allow. Nothing has to be faked or rebuilt by hand.

PHP for the CMS

Server resources go to editors, Gutenberg, REST, and integrations instead of rebuilding every page view, so the admin stays fast even when traffic spikes.

Native caching

Skylit has native caching that sets long-lived browser cache headers on versioned bundles and fonts, keeps generated CSS and JS as cached asset files, and turns on a Redis or Memcached object cache when the server has one, found automatically. If you still prefer your own caching or optimization plugin, switch the native options off and use any third-party plugin instead.

Optimization you control

You decide how CSS and JS from the framework and every plugin are bundled: per page or site-wide, kept apart or merged into one file. A scan lists every file visitors load, including Tag Manager tags, and each one can be preloaded, deferred, loaded async, or delayed until idle or the first interaction.

Like headless, without a second front end: one WordPress install with full FSE support, and Gutenberg as the editing surface. Visitors get fast static pages, editors keep the full CMS, and there is no separate app to build, host, or keep in sync.

HTML to Gutenberg Compiler

Transforms clean HTML into editable block structures while preserving hierarchy, attributes, and layout.

CSS Rendering Pipeline

Applies your development CSS directly inside Gutenberg and frontend with consistent output and no duplicate styling layers.

Pattern Conversion Engine

Converts HTML sections into reusable patterns and repeatable layout systems.

Hybrid Block System

Connects patterns to controlled block interfaces with editable areas and defined structure.

Loop Engine

Builds dynamic content sections, including CPT loops, archives, and related content.

Expression Engine

Adds conditional logic, dynamic rendering, and data-aware output directly to layouts.

Bidirectional Sync Layer

Keeps your file system, Gutenberg, and database aligned with accurate metadata mapping and block identity tracking.

Media Library Folders

A folder tree in the Media Library and media modal that mirrors your local media-library/ folders. Create, move, and filter attachments with Git-friendly structure.

Conditions & Block Options

Show, hide, or modify blocks from field values and expressions. Toggle instance parts without duplicating patterns.

CSS, JS & PHP from files

Global and block CSS, front-end JS, and PHP hooks live as project files. The plugin loads them; Gutenberg stays the editing surface.

Built-in utilities

  • Maintenance Mode

    A branded 503 page for visitors, switched from the IDE or admin bar. Editors keep working behind it.

  • Website Analytics

    Scheduled client reports from GA4, Search Console, WooCommerce, Fluent Forms, and PageSpeed, as PDF, HTML, or CSV.

  • LLMs.txt

    A curated /llms.txt map of your site for AI search and assistants, kept as a file in the project.

  • Popups

    Modal popups built as files and opened from any button or link. Edit them in Gutenberg like any other page.

  • Internal SOPs

    Editor guides that live in wp-admin, so your clients know how to update their own site.

  • Login Gate

    Double-click or press and hold the site logo to sign in, with no login link on the page.

Deep IDE integration

Select a block in Gutenberg and open its source in Cursor or VS Code. Navigate from code back to the exact block instance in the editor.

Enhanced editing environment

Custom block attributes and inspector control over loops, expressions, conditions, and options, without leaving Gutenberg.

Layout & workflow control

Adjustable UI chrome for precision work, direct title and slug editing, clearer navigation in deep nesting, and canvas width with zoom.

Templating & per-CPT modes

Define how the editor behaves globally or per CPT: how content renders and is edited in Gutenberg: mix flexible pages, locked layouts, and data models in one system.

Dark mode in the editor

Light, dark, or system UI in Gutenberg so long editing sessions stay readable without fighting the default WordPress chrome.

Access to code files

Open a block’s HTML, CSS, JS, and PHP from the editor footer. Edits there and in your IDE stay in sync.

DEV Code and WP Editor.Fully Synchronized.

Skylit.DEV does not replace Gutenberg.
It turns it into a synchronized development interface.

Everything built in your IDE remains fully accessible and editable inside WordPress.

Who Skylit.DEV is for

Built for Developers, Agencies, and Businesses

A complete framework, not another plugin. Skylit.DEV replaces more than a dozen plugins, from caching and analytics reports to popups and maintenance mode, and gives every project a clear file structure plus true visual, on-canvas editing for clients. For teams that want full control of their website, with the best of WordPress, modern libraries, and AI-accelerated workflows.

  1. Building custom themes and systems
  2. Working with CPT-driven architectures
  3. Using patterns, loops, and reusable layouts
  4. Using AI without giving up ownership
  5. Handing clients safe, on-canvas editing
  6. Replacing a stack of plugins with one framework

Where Control Breaks Down

When a WordPress project exists mainly across the database, admin screens, generated block markup, and remote tool calls, every change becomes harder to inspect.

AI may be able to make the change, but developers are left with limited visibility, unclear diffs, fragmented history, and errors that can quietly carry into the next instruction.

The Skylit.DEV Path

Skylit.DEV brings WordPress structures into a clear project folder and keeps them synchronized with Gutenberg and the database.

Templates, patterns, content, CPT definitions, field schemas, assets, CSS, JavaScript, and PHP become readable files that can be edited directly, reviewed before deployment, tracked in Git, and safely modified by AI.

Inspectable source

See, read, and edit the actual structure behind the website, with or without AI.

Real Git history

Meaningful diffs, branches, and rollbacks instead of hidden database changes you cannot review.

Structured AI context

Predictable folders, schemas, conventions, and project skills help AI understand what it is changing before it changes it.

Connected Gutenberg

Developers work from the IDE while editors keep working inside the familiar WordPress interface.

Portable ownership

Your project stays readable, adaptable, and independent of any single model, editor, agent, or AI protocol.

Surgical edits

Small, reviewable changes on real files. One mistake does not cascade into the next, and you can reverse course quickly.

We are building human AI collaboration around code you still own: readable, portable, and ready for whatever comes next.

Join Early Access

We are opening Skylit.DEV to a limited number of developers and agencies. Request access to work inside the full synchronized system: compiler, Gutenberg utilities, caching, and maintenance included.

Join Early Access