Skill Issue: storyblok-build-frontend

Is your agent struggling to properly implement Storyblok components? Does it take weird detours, unnecessarily brute-force its way through trivial tasks, make important decisions on a whim, or deviate from best practices at random?

The storyblok-build-frontend skill instills the nitty-gritty details of every Storyblok frontend framework SDK into your agent. Thanks to this skill, you can safely delegate work to agents and be sure that they understand not just your tech stack, but also the relevant Storyblok SDKs and best practices. This article shows how agent performance increases substantially when you give them the tools they need to draw the rest of the owl.

Where it gets used

The skill comes into play when your agent is tasked with generating frontend components for Storyblok blocks and integrating them into your project. The /storyblok-build-frontend skill comes with built-in support for all major tech stacks.

Why use this skill?

To show the benefits of this skill, two separate Nuxt projects were created for the same Storyblok space. Both projects shared the following minimal setup:

• Default Nuxt setup with npm create nuxt@latest
• Claude (Opus 5 (1M context) with high effort) with the Storyblok MCP Server installed

Then Claude was tasked with creating the pages and framework components for an existing Storyblok space in a concise prompt:

Build the pages and all required components for the content in the Storyblok space 23426661337

The Storyblok space in question contained the following content:

• A home page with a single Teaser block
• A gallery page with a Multi-Option (References) field that links its children
• Three child pages, each containing information (a name, description, and picture) of a different cat

This is a modest setup with just enough tricky aspects (primarily the references in the gallery page) to serve as a viable point of comparison. Any state-of-the-art AI agent should be able to leverage its intrinsic coding abilities and the Storyblok OSS ecosystem to build a functional website from this content and the prompt. But how well does it do, with and without the skills library?

Without the skill

The agent immediately dove into exploration mode and scanned the project directory for existing Storyblok libraries and tools. Finding nothing, it attempted to install and use the CLI to pull block data from the space. Due to a lack of credentials, this proved rather unsuccessful. Then, after installing @storyblok/nuxt on a whim, the agent finally decided to give the MCP server a try. After exploring every nook and cranny of the space with plenty of MCP invocations, it built an understanding of the Space's content structure. Yearning for even more data, it proceeded to request every page from the CDN, only to glean no meaningful information from this exercise. The agent then pivoted to building framework components. After getting stumped by the fact that, by default, relations are not resolved, it iterated for some time on this problem. It eventually thought of using the resolve_relations API parameter, but had in the meantime built a helper library that would remain unused (if never deleted). Other distractions included a paranoid need to triple-check AVIF support and a compulsion to inflate the Readme file beyond any reasonable degree. After much guessing and iterating, it finally arrived at a working page that contained reasonable code and was fully type-checked.

With the skill

Armed with the skills, the agent was able to build the page in the manner of a seasoned Storyblok developer. After loading the relevant skills for the task at hand (storyblok-build-frontend and storyblok-use-mcp) the agent quickly identified the project as a fresh Nuxt 4 install with no Storyblok tooling present. From there, it immediately requested the Space's stories and blocks via the MCP server, installed @storyblok/nuxt, wrote code broadly equivalent to the previous run and then verified that the project worked. Irrelevant detours were entirely avoided and no token was wasted on trying approaches that were never going to work.

Comparison and results

Without the skills, the Agent had to try and make up a Storyblok workflow from first principles. In a meandering fashion, it eventually figured out when to use the MCP server and how to resolve relations, but expended tokens and time on doomed endeavors. Without the benefits of either skills or a detailed prompt, the agent fell into several rabbit holes. It was able to iterate its way out of several dead ends, but left digital detritus in the form of redundant type declarations and unused helper functions behind. Time and token expenditure on iterating and guesswork was considerable.

With the skills installed, the agent had instant knowledge of suitable workflows and best practices for a Storyblok project. The MCP server was used to follow a reasonable order of operations that arrived at a working page without detours or failed experiments. In doing that, it proved to be about twice as efficient in both time and tokens.

An agent without the Storyblok skills approaches every Storyblok projects like a human developer approaches their first Storyblok adventure. Given basic web development competency, investment in time and effort allow man and machine to iterate on every problem until a solution arises. But efficiency is a key distinction. Apart from wasted resources, the meandering and exploratory approach taken by an agent without skills calls for close human supervision, which eats into any possible AI-related efficiency gains. With the skills package, an agent turns from a junior developer that takes a stab at their first Storyblok project into a seasoned Storyblok expert that can be trusted with handling projects on their own.

Get the skills

To make use of the skill library in your projects, simply install the Storyblok Agent Plugin; it sets up everything your agent needs to perform at the level of an experienced Storyblok Developer.

We want your feedback

We would love to hear back from you on how you use these skills and how they are working for you! Let us know in our Discord.