Setup personalised project

What personalising a project actually involves#

Before reaching for any tool, it helps to understand the work itself. Turning the demo into your site means, end to end:

1. Wipe the demo. Remove the agntcms demo brand, sections, and content so nothing of the template leaks into your site.
2. Bring your design in. Migrate your design tokens — colours, type scale, spacing — into styles/theme.css, and wire up your fonts.
3. Map your layout to sections. Break your design into reusable blocks (hero, feature grid, pricing, footer…) and turn each into a registered section type under agntcms/sections/.
4. Rebuild the components. Write each section's component against your styles, exposing the text and images as editable fields.
5. Fill in the content. Populate every page's JSON with your real copy and SEO, plus globals like header and footer.
6. Verify. Compare the result against your design, fix mismatches, and update BRAND.md.

By hand this is two or three days of work and dozens of chances to break something. That is exactly the kind of infrastructural work the framework is built to absorb.

The tool: /agntcms-init-from-artifact#

The /agntcms-init-from-artifact skill does the entire process above in one pass — in about an hour — starting from a Claude artifact app. Point it at your source and walk away; it drives the migration and asks you clarifying questions where the source is ambiguous. It is also the best example of what skills in this framework can do.

Why#

You explored the demo — roughly thirty section types about agntcms itself and pages like What is built and Pain Answer. Turning that into your site by hand — wiping the demo, migrating design tokens, rewriting sections to match the source app, filling in content — is two or three days of work and dozens of chances to break something.

/agntcms-init-from-artifact does all of that in one pass, in about an hour. The AI-native idea in action: the user does not perform ten steps; the user states the task and gets the result.

Step 1 — open a NEW Claude Code session inside the project#

This is the single most important thing to get right. Close the session you used during install (if any), and open a fresh Claude Code session with the project folder as the working directory.

Why: project skills live in .claude/skills/ and are loaded into Claude Code at session startup. A session opened before the project existed cannot see them; a session opened inside the project picks up /agntcms-init-from-artifact, /agntcms-sections, /agntcms-structure, and the rest automatically. Without that, /agntcms-init-from-artifact does not exist as far as Claude is concerned.

Step 2 — get a Claude artifact app#

The skill accepts any React, Vue, or plain HTML+CSS app as its source — not just Claude Design output. The quality of the migration scales directly with the quality of the source: a well-structured app with CSS custom properties and one component per visual block produces an on-brand site in one pass; a rough app with inline styles will need hand-tuning after.

What the source needs for the best result:

• CSS with custom properties (--color-primary, --font-heading, etc.) — these become your design tokens in styles/theme.css.
• One component or section per visual block — hero, feature grid, pricing table, footer, etc. Each becomes a registered section type.
• Hardcoded copy for every text field — lifted verbatim into the content JSON.

Step 3 — hand the source to /agntcms-init-from-artifact#

In the fresh Claude Code session from Step 1, send:

run /agntcms-init-from-artifact, source is at <path or URL>.

Or in plain prose:

migrate this artifact app into agntcms. Source: <path or URL>.

From there, nothing. The agent drives the process. It will ask clarifying questions where the source is ambiguous — the app has both a pricing section and a plans section; one section type or two?, this component has a hardcoded image — should it become an ImageField? — answer in plain text.

What happens#

The skill runs eight steps in sequence, in a single pass. In brief:

1. State check. Confirm the project is still in demo state.
2. Copy source CSS. Copy every stylesheet from the source into styles/source-tokens.css and styles/source-components.css. Import them in styles/globals.css.
3. Migrate tokens. Copy --variable: value pairs from the source CSS verbatim into styles/theme.css. Wire fonts via next/font/google.
4. Map blocks to sections. Read every component and page in the source. Deduplicate. Produce an explicit inventory: pages, globals, new section types.
5. Create section types. For each new type, run /agntcms-section-new, then write the component reusing the source CSS class names directly. Register in agntcms/config.ts.
6. Fill the pages. For each page, write content/pages/<slug>.json with copy lifted verbatim from the source. SEO fields are mandatory.
7. Fill the globals. Header, footer, site meta — from the source's header and footer components.
8. Verify and report. Screenshot the CMS and the source side by side. Fix any mismatch. Update BRAND.md.

When the skill is done, run pnpm dev (or start the site) and walk through the result in the preview.

Don't want to do this yourself?#

Maybe you love the idea of agntcms but coding and vibe coding are not your thing, or you simply do not have the hour to spare. That is a perfectly good reason — and you do not have to give up the framework. Get in touch with us or one of our partners and we will set up your personalised project for you, end to end. You bring the brand and the copy; we hand you a running, on-brand site.

The lesson#

Skills are not a helper for writing prose. They are full, robust, verifiable automated flows that absorb the infrastructural work. /agntcms-init-from-artifact is the largest example. The others follow the same pattern at smaller scale.

Next time you need to do something in the project, the first move should be ask Claude Code, not open a file.