Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From dotfusion-docs
Finish setting up a project cloned from the Dotfusion Next.js and Storyblok boilerplate. Use when the developer says "let's finish the install", "finish the setup", "set up this project", or right after cloning the template. Configures the Storyblok region, tokens, secrets, brand colors, fonts, and site metadata, then verifies the install.
How this skill is triggered — by the user, by Claude, or both
Slash command
/dotfusion-docs:finish-the-install-storyblokThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill completes the per-project setup of a repository cloned from the Dotfusion Next.js and Storyblok boilerplate. Work through the steps in order. Ask the developer for the values you need in one batched set of questions before changing files. Never commit secrets, and never overwrite a value the developer did not ask you to change.
This skill completes the per-project setup of a repository cloned from the Dotfusion Next.js and Storyblok boilerplate. Work through the steps in order. Ask the developer for the values you need in one batched set of questions before changing files. Never commit secrets, and never overwrite a value the developer did not ask you to change.
Check that this is the boilerplate before doing anything: package.json name is boilerplate-nextjs-storyblok (or a renamed fork of it) and an .env.sample exists at the root. If it does not look like the boilerplate, stop and tell the developer. If package.json name is boilerplate-nextjs-agilitycms, invoke finish-the-install-agility instead.
Read .env.sample so you know the exact variable names, then ask the developer for, in one message:
us or eu.https://www.example.com).Create .env.local from .env.sample with the values from Step 2. Do not commit it: it is already in .gitignore. Leave any value the developer skipped as the placeholder and tell them it still needs a real value. Set NEXT_PUBLIC_STORYBLOK_IS_PREVIEW=true for local development.
Run nvm use to select the pinned Node version, then npm install. Do not pass --force or --legacy-peer-deps. If the install reports a peer conflict, stop and report it rather than working around it. A handful of EBADENGINE warnings on lint-staged are harmless if Node is older than the pinned .nvmrc; advise the developer to nvm install the exact version.
Update the color values in src/styles/abstracts/_tokens.scss. Change only the values the developer provided. The CSS custom properties in src/styles/base/_root.scss read from these tokens, so you do not edit them directly unless the developer wants a runtime override.
For Google Fonts, import the family with next/font/google in src/app/layout.tsx, apply its CSS variable on the <html> or <body> element, and point --font-family-base and --font-family-heading at that variable. For custom font files, place them under public/fonts, add the @font-face rules to src/styles/base/_fonts.scss, and update the font-family tokens in src/styles/abstracts/_tokens.scss. Keep the token and the applied font in sync.
In src/app/layout.tsx, set the site name and default description in the metadata export. Confirm NEXT_PUBLIC_SITE_URL in .env.local matches the production URL so canonical links, the sitemap, and JSON-LD resolve correctly.
The Storyblok MCP server is already configured in .mcp.json and .vscode/mcp.json at https://mcp.labs.storyblok.com/. Tell the developer:
@storyblok/react SDK that serves the site.Tell the developer that for the site chrome to render real content, four global stories need to exist in their Storyblok space, one per content type:
global/site-settings (content type site-settings): siteName, defaultDescription, logo.global/primary-navigation (content type primary-navigation): links list (label, url, openInNewTab).global/footer-navigation (content type footer-navigation): links list (label, url, openInNewTab).global/social-links (content type social-links): links list (platform, url).The site runs without them (the chrome falls back to safe empty values) but cannot render real navigation until they exist. See docs/architecture.md shared-content contract for the field shapes.
Also tell the developer to set the space's Visual Editor preview URL to http://localhost:3000/api/preview?secret=<STORYBLOK_PREVIEW_SECRET>&slug=. Storyblok appends the slug per story.
Run, in order, and fix anything that fails before reporting success:
npm run typechecknpm run lintnpm run lint:stylesnpm run format:checknpm testIf the Storyblok values are real and at least one story exists in the space, also run npm run build to confirm the site builds against the space.
Summarize what changed and list the remaining manual steps:
NEXT_PUBLIC_STORYBLOK_IS_PREVIEW to false on production and true on preview.https://<your-domain>/api/revalidate?secret=<STORYBLOK_WEBHOOK_SECRET> (Storyblok dashboard, Settings then Webhooks), enabling story published, unpublished, deleted, and moved.RUN_E2E repository variable to true to enable the end-to-end and Lighthouse jobs.npm run dev to start working. The Visual Editor in the Storyblok dashboard renders the local site live.npx claudepluginhub dotfusion/engineering-docs --plugin dotfusion-docsGuides creation and editing of skills using test-driven development with pressure scenarios and subagents to verify agent compliance.
Runs a structured interview session to sharpen plans or designs, producing ADRs and a glossary as output.
Applies curated color/font themes to slides, docs, and HTML artifacts. Includes 10 preset themes and can generate custom themes on demand.