In your first hour you have one accessible, responsive component built from your tokens.
Front-end Dev Skills
Build what you designed.
Eight skills for turning designs into clean, accessible, responsive front-end code.
Claude Code
Codex
Cursor
Gemini CLI
One-time purchase. Works with Claude Code, Codex, Cursor and Gemini CLI.
You designed it carefully . The build comes back with the wrong spacing, no focus states and a layout that breaks at one particular width .
Or you build it yourself with an agent and the code works but nobody could maintain it. Markup that ignores assistive technology. Components with props nobody can explain.
These eight skills give your agent clear patterns for accessible, responsive, well-structured front-end code, so what you designed is what ships.
The build drifts from the design
Your agent builds from tokens and a component pattern
Accessibility is checked at the end
Semantic markup comes first
Components are written as one-offs
Components have clear props and one owner
See it work
An example conversation. Your output depends on your project.
front-end-dev
You9:41
Build the signup form from our design. It needs to work on a phone and with a screen reader.
AgentAgent9:41
Using Semantic and accessible HTML and Forms and validation. Building from your design tokens.
Agent is working
Signup form, draft 1
- Labelled fields with clear error messages
- A layout that holds from phone to desktop
- A short test plan for keyboard and screen reader
Caveats
Password rules are placeholders. Confirm them with your backend.
You9:48
Add the tests.
Quick start, 30 seconds
- 01
Download the files.
From your Methodloop library, in the format for your tool.
- 02
Drop them into your project.
Add them to your repo or your tool's skills folder.
- 03
Name the skill.
Tell your agent which one to use. Claude Code, Codex, Cursor and Gemini CLI all work.
What you will be able to do
By the end of the week your forms, layouts and states follow one set of patterns.
By next quarter new components start from your own architecture.
What is inside
Each one is a skill file you drop into your agent, so it works in Claude Code, Codex, Cursor and Gemini CLI.
- Claude Code
- Codex
- Cursor
- Gemini CLI
SKILL 01
Semantic and accessible HTML
Write markup that works with assistive technology.
Skill file for
SKILL 02
Responsive layout
Build flexible layouts with modern CSS.
Skill file for
SKILL 03
Component architecture
Structure reusable components with clear props and ownership.
Skill file for
SKILL 04
Design tokens to CSS
Turn design tokens into variables your code uses.
Skill file for
SKILL 05
Forms and validation
Build forms with clear states and helpful errors.
Skill file for
SKILL 06
Performance budget
Set limits and find what slows a page down.
Skill file for
SKILL 07
Motion with CSS
Implement transitions and animation without heavy libraries.
Skill file for
SKILL 08
Front-end testing
Plan and write tests for components and key flows.
Skill file for
Why this works
Each skill is a plain markdown file that tells your agent the steps, the questions to ask and the format to produce. The method is written down, so the output follows it.
Who wrote them
Anton has spent sixteen years doing this work inside Myer, Telstra Health and Flybuys. The methods in these files are the ones used on real projects. Two skills are free, so you can judge the quality before you spend anything.
Everything in the bundle
$249one time
Bought one at a time, $392.
The bundle is $249. You keep $143.
- All 8 skills
- Every skill in four formats: Claude Code, Codex, Cursor and Gemini CLI
- Example prompts for each skill
- A Methodloop library with every file in one place
- Updates while the skills are on sale
The One Real Project guarantee
Use the skills on one real component. If they do not save you time, ask within 14 days and I refund every dollar.
This is for you if:
- You design and write some of your own front end
- You are a founder building the first version alone
- You want your agent's code to follow a standard
This is probably not for you if:
- You have a front-end team with its own standards and reviews
- You need back-end or full-stack work
Fair questions.
The skills teach patterns that apply across frameworks. Your agent applies them to the stack in your project.
Treat it as a strong first draft. The skills include testing and performance checks, and you review what ships.
Basic knowledge helps. The skills explain the reasoning behind each pattern.
Claude Code, Codex, Cursor and Gemini CLI. Every purchase includes all four formats.
In your Methodloop library. Your account is created at checkout, or sign in if you already have one.
Yes, while the skills are on sale.
Ship the build you designed.
8 skills for $249, one time. Or start with the two that are free.
P.S. 8 skills for $249. Bought one at a time they come to $392.
P.S. Two skills are free. Start there and judge the work yourself.
P.S. At checkout you can add related material and save.