Early research preview — this project is an experiment and may change significantly.
Bloktastic

Agent Skill

The Bloktastic agent skill lets AI coding agents discover, install, and generate code for Storyblok components without any copy-paste. One command installs the skill, then your agent handles the rest.

Install

npx skills add https://github.com/bartundmett/bloktastic --skill bloktastic

This registers the /bloktastic skill with your agent. Run it once per project or globally depending on your agent's configuration.

Prerequisites

  • An AI coding agent that supports skills (e.g. Claude Code)
  • A Storyblok personal access token (STORYBLOK_OAUTH_TOKEN)
  • Your Storyblok Space ID

Usage

Once installed, invoke the skill in your agent:

/bloktastic

Or pass a specific package directly:

/bloktastic add @bloktastic/hero

What happens under the hood

The skill runs a 4-phase workflow automatically:

  1. Setup — Checks for bloktastic.config.json. If missing, prompts for your Space ID and region and runs bloktastic init.
  2. Discovery — Searches the Bloktastic registry for the component you need. If you passed a package name, this step is skipped.
  3. Installation — Runs bloktastic add <package> --prompt-output stdout to push the schema to Storyblok and capture the generation prompt.
  4. Code generation — Detects your project's framework, CSS approach, and coding patterns, then generates a production-ready component matching your stack.

Manual workflow

If your agent doesn't support skills, or you want to use the prompt with a different AI tool, you can run the CLI manually: 

# initialize project
bloktastic init

# add a component (prompt copied to clipboard)
bloktastic add @bloktastic/hero

# or output prompt to stdout for piping
bloktastic add @bloktastic/hero --prompt-output stdout

Then paste the prompt into your preferred AI tool along with your project's stack context.

Next