Enhance Your App with Agent Skills: A Practical Guide

In my previous two blog posts I discuss my learning project of:-

* building an initial [Agentic SDLC demo] with Playwright
* extending the demo with Vibium

In this post, I detail how I added Agent Skills files and the difference this made to the quality of my app.

What are Agent Skills?

You can read all about agent skills here: https://www.anthropic.com/engineering/equipping-agents-for-the-real-world-with-agent-skills
but here is Anthropics definition:-

[Agent skills are] organized folders of instructions, scripts, and resources that agents can discover and load dynamically to perform better at specific tasks. Skills extend Claude’s capabilities by packaging your expertise into composable resources for Claude, transforming general-purpose agents into specialized agents that fit your needs.

How were Agent Skills useful in my context?

Given I now had a working basic demo, with accompanying test cases, I wanted to see if this could be improved using agent skills. I perused the existing Anthropic skills and saw there was a skill on frontend design. I wondered what difference this could make to my solution.
https://github.com/anthropics/skills/tree/main/skills

A screenshot from Anthropics Skills Git repo showing existing SKILLS.md files

I added the SKILLS.md file into my project under .cursor, as directed by the agent, along with a skill for webapp-testing:-

At the moment, agent skills can also be used in Visual code with any coding agent you wish e.g. Github Copilot.

What happened next?

Well, I span the solution up, so I could remember the “before” app:-

image of demo app before using Agent files.

Then I entered the following prompt:-

The results?

new design as a result of using Agent skills file

text shows cursor responding to list how the skills files assisted the redesign and test upgrade activities

Whilst there is clearly work to do here to refine this – e.g. not sure why we need to go all meta and talk about how the UI keeps focus, or include test workflows in the app itself – I do think the design aesthetics are a big improvement on what Cursor agent gave out of the box. Furthermore, I now have my own file that I can update which I can reuse to apply the same design every time I need to repeat this activity, without the same heavy token use.

Token use

I’m going to be paying more attention to this in future, but here are the headlines:-

Adding Vibium and updating tests – 146K tokens used

Using skills to redesign and upgrade tests – 54K tokens used

How are Agent skills different?

Previously, I’d been expoloring chatmodes, instructions, prompt.md files etc. to provide instructions for an agent to make a task more:-

repeatable
easier to complete with a simple prompt (as the heavy lifting instructions were abstracted away)
fewer token use (as files were only fully called when the user asks for a prompt for that specific activity e.g. create an accessible test case)

Copilot generated table showing key differences between different approaches

Summary

I would need to do far more experimenting to really understand how Agent skills can help me, but they definitely seem to be a useful thing to know about. Of course, doing is the best way to get your head around stuff, so if you wanted to check out my github repo then you can find it here:

https://github.com/askherconsulting/AI_SDLC_MCP