When I first started working on front-end systems, pipelines were the go-to solution for repetitive tasks. Duplicating code? Gulp pipeline. Compiling SCSS to CSS on every save? Grunt with a watch command. If you found yourself doing the same thing more than twice, you built a pipeline and let it run. Then things shifted. Instead of relying entirely on pipelines, we started writing Node scripts. These were smaller, more targeted, and lived closer to the code. You could scaffold components, generate files, and enforce conventions without needing to touch CI every time. It felt faster, more flexible, and easier to onboard.
Now we’re shifting again, but now with AI. As AI integrates with the workflow, we need to learn how to replace our now out-of-date systems with it. Lately, I’ve been thinking about that in terms of AI skills.
Before we get into that, let’s ground ourselves in something familiar.
The Average Design System Contribution
If you’ve worked on a design system, you know the drill. You start by creating the component itself and adding it to your component library. That part is usually straightforward.
Then comes the headache: documentation standards. You manually create stories based on existing patterns, wire up props, and define variants. After that, you write documentation, usually in a Markdown file. None of this is particularly difficult, but it is repetitive. And repetition is where inconsistencies creep in: slightly different story structures, missing props, and docs that don’t quite match the component. So naturally, we try to streamline it.
Streamline? But how?
AI skills to the rescue! But what is an AI skill, you ask? At a high level, an AI skill is a reusable set of instructions that tells an AI how to perform a specific task within your system. Think of how you write prompts into Claude and ChatGPT. Skills are like that, but for repetitive tasks. Still not sure you get it? Here’s an example: Instead of explaining every step—”create a component, now make a story, now write docs”—you just say, “add this component,” and the skill handles the rest the way your team expects. It’s not just automation. It’s automation with context. Sounds neat, huh?
How do we get started, though? In practice, AI skills are pretty simple. At its simplest, you can define a skill as a markdown file:
# Skill: Create Design System Component
## Instructions
- Create a new React component in the component library
- Generate a Storybook story file
- Generate a docs.mdx file
## Context
- Components live in `/components`
- Stories live alongside components
- Docs use MDX format
## Constraints
- Use TypeScript
- Follow existing naming conventions
- Include at least one example usage
This example gets you mostly there. The AI knows what to do, but it still has to infer how to do it. We want to minimize the decisions AI has to make because that’s where things can drift. This is where templates start to matter. Instead of relying on the AI to generate structure from scratch, you provide guidance and guardrails. Below are real templates I created to ensure components are design-system ready.
Example: Storybook Stories Template (testComponent.stories.tsx)
import type { Meta, StoryObj } from "@storybook/react-vite";
import TestComponent from "./testComponent.tsx";
const meta: Meta<typeof TestComponent> = {
title: "TestComponent",
component: TestComponent,
argTypes: {
exampleProp: {
control: "text",
description: "This is the example text prop for the test component",
}
},
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
exampleProp: "This is an example prop value",
},
};
Example: React Component
export default function TestComponent({
exampleProp
}:{
exampleProp: string
}){
return (
<div>
{exampleProp}
</div>
);
}
Docs (docs.mdx)
import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
import * as TestComponent from './testComponent.stories';
<Meta name="Docs" of={TestComponent} />
# Test Component
The TestComponent template for the agent skill.
## Overview
This component renders a test component.
## Props
- `exampleProp`: The example text
## Usage
```tsx
import TestComponent from './testComponent';
<TestComponent exampleProp={"test"}/>
```
## Example
<Canvas of={TestComponent.Default} />
Now that we have some templates, we need to update our skill to reference the template. If we don’t reference it, we can’t guarantee the agent will know to use our freshly minted templates. This is also the perfect time to add guardrails for when not to use the skill. In the skill below, we provide specifications on what to do when the skill is not used.
# Design System Skill
## Overview
This skill provides a design system for the agent to use when rendering components. It creates a story for Storybook based on the testComponent.stories.tsx file and documentation based on the docs.mdx file.
## Instructions
1. Create a new stories file for the mentioned React component (such as testComponent.tsx). This should be named in the following format: [component-name].stories.tsx. This file should export a default object with the component's metadata and at least one story that renders the component with some example props.
2. Create a new documentation file for the mentioned React component (such as testComponent.tsx). This documentation file should be named "docs.mdx". This file should include a title, an overview of the component, a list of its props, usage instructions, and a section titled "Example" and Canvas block with the component.
## Notes
If the component you are creating a story and documentation for already has a story and documentation, you should error, not overwrite the existing story and documentation, and ask the user to update the existing story and documentation instead. You should provide recommended updates to the existing story and documentation in this case.
Now the AI isn’t guessing—it’s following a system. As you can see, we strayed from the original skill format, and that’s ok. The original skills template is a great place to get started, but you’re not obligated to follow.
Where This Leaves Us
Pipelines helped us reduce redundancy. Node scripts gave us more control. AI skills add flexibility and intent. And for design systems, that’s a meaningful shift. While the goal is to generate files faster, it’s also to make every contribution feel consistent, predictable, and aligned with the system, even as the team grows and changes.
AI skills don’t replace everything that came before. They don’t replace designers or engineers. They do change how we think about the problem. They take out the guesswork and ease the monotony. Instead of asking, “How do we automate this step?” We start asking, “What is the standard we want and how do we employ it?” That’s a subtle shift, but it’s the one that’s been sticking with me.