Every Visor project starts from the same Next.js template, and the template ships with eight skills that teach an AI coding assistant how Visor works. Invoke one by name and the assistant works to Visor's conventions.
The skills run in Claude Code, VS Code, Kiro, and Antigravity, with a subscription to an AI assistant.
What's in the template
- initiator: sets up the project, from the Git remote and an onboarding branch to dependencies, the environment file, and a running dev server
- convert-html: turns a design's HTML, CSS, and JS into a theme, layouts, and widgets
- create-widget: writes a new widget to the template's conventions
- create-layout: writes a new layout with its placeholder zones
- create-api-route: connects a component to content from the Visor API
- review-code: checks code against Visor's conventions
- testing: writes tests for the project
- chocolate-factory-sdk: adds a Chocolate Factory AI agent to the site
From a design to a site
For a new site, the starting point is convert-html. Design the site in any AI design tool, such as Claude. Export it as HTML, CSS, and JS, and place the files in the project's source folder. A Next.js project works as input too.
The skill reads the files, maps each section onto the template's conventions, and writes the theme, layout, and widget files. When a section could become a new widget or reuse an existing one, it asks. Clean, unminified files convert fastest.
The output is a working starting point. Review naming, content bindings, and edge cases, activate the theme in Studio, and editors can start building pages with the new widgets.
Where the time goes
Translating markup into React components and wiring them to a CMS is repetitive work that follows fixed rules. The skills encode those rules, so developers spend their time on the parts that are specific to the site.
