Guide · Agent skill
How to use the Editorial Tech Design Style agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The editorial-tech skill is a written visual style direction that you give to an AI agent. It tells the agent to design web pages with asymmetrical magazine-style layouts, wide cinematic image bands, small monospaced labels, thin divider lines and one restrained accent color. This guide is for people who have never installed an agent skill before. By the end you will know what the skill changes, how to add it, and how to ask for a page that uses it.
Editorial Tech Design StyleMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the editorial-tech ZIP from this page. It contains SKILL.md and the demo folder.
- 2Unzip into the skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project.
- 3Or upload in the Claude apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill.
- 4Write a clear request. Name the skill with $editorial-tech and describe the page purpose, content and feel.
- 5Review the result. Check the layout, contrast and accent use against the skill's avoid list.
- 6Refine with tuning controls. Ask for more or less asymmetry, technical density or media prominence if the first version is off.
What the editorial-tech skill makes the agent do
An agent skill is a folder containing a SKILL.md file with instructions that an AI agent reads when a task matches the skill. This skill's instructions cover a full design-system style: layout, typography, surfaces, media treatment, navigation and motion.
When it applies, the agent aims for a page that feels like a premium editorial spread combined with a high-end technology product interface, rather than a generic corporate template. The source describes this as sitting between narrative magazine composition and precise technical detailing.
- Layout: multi-column structure, offset alignment and editorial cropping instead of centered SaaS hero blocks.
- Typography: one display headline style, supported by clean sans-serif or mono text for labels, steps and timestamps.
- Media: cinematic horizontal bands or framed image regions that cut across the grid.
- Detailing: fine divider lines, grid traces, section rules and small technical markers.
- Color: a mostly dark or controlled light neutral palette with one accent color used sparingly.
- Motion: subtle masked text reveals, calm parallax or hover line brightening, never playful or bouncy.
Install the skill from the ZIP download
Download the ZIP for this skill from this page. The skill lives at agent-skills/web-design/editorial-tech in the MengTo/Skills repository and is licensed MIT.
To install it for your own user account, unzip the download into ~/.claude/skills/ so that the skill folder sits there with its SKILL.md file inside. To install it for a single project, unzip it into that project's .claude/skills/ folder instead. Project installation keeps the skill with that codebase only.
If you use the Claude apps rather than a local setup, you can upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project folder
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with a natural request
The skill is named editorial-tech. The demo prompts in the package refer to it as $editorial-tech, so you can name it explicitly at the start of a request. You can also describe the look you want and let the agent match it to the skill's description.
Good requests state the page purpose, the content and the feel you want. Mention the skill by name when you need certainty that it is used.
- Use $editorial-tech to design a landing page for a developer tools product with a hero headline and a wide image band.
- Use $editorial-tech to build a responsive standalone HTML product page for a component library.
- Design a product site with an editorial spread feel and mono utility labels, using the editorial-tech style.
Use $editorial-tech to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included reference.Use the demo files as a reference
The package includes demo/index.html, demo/PROMPT.md and demo/source.json alongside SKILL.md. PROMPT.md contains a minimal prompt and a longer recreate-the-demo brief. The demo is described in the prompt as a visual and interaction reference, so you can point the agent at it when you want a close match.
Read the demo prompt before reusing it, because it names a specific sample brand and product brief. Replace that brief with your own content if you are designing something else.
- demo/index.html: the reference page the agent can study.
- demo/PROMPT.md: example prompts, including a minimal one.
- demo/source.json: source data for the demo.
- SKILL.md: the style instructions the agent follows.
Adjust the look with tuning controls
The skill describes several tuning knobs you can mention in your request. They control how dramatic or product-like the result becomes. Ask for less of any of them if the page starts to feel overdesigned.
The skill also lists things to avoid, including neon, glassmorphism, bright multi-color palettes and using the accent color everywhere. State these in your request if you want a stricter result.
- Editorial intensity: how much asymmetry and overlap to use.
- Technical density: how many rules, markers and mono labels to add.
- Accent restraint: how sparse the accent color should be.
- Media prominence: how much imagery dominates compared with typography.
- Contrast: how readable the moody dark surfaces must stay.
Safety notes: scripts and network access
This skill is text-only style guidance. The listing states it runs no scripts and uses no network access, and it lists no required dependencies. Because it contains instructions rather than executable code, installing it does not run anything on your machine.
The agent that uses the skill may still write code or make changes in your project, so review the output as you would any generated code.
- Requires: nothing listed.
- Runs scripts: no.
- Uses network: no.
- Check the agent's generated code before deploying it.
What people use it for
- A landing page for a developer tool with an oversized headline beside compact supporting copy.
- A product site with a cinematic image band crossing a multi-column grid.
- A brand page for an engineered product where mono labels and step lists guide the reader.
- A prototype of a technical product overview that should feel more editorial than corporate.
Frequently asked questions
Is the editorial-tech agent skill free?
The skill is published under the MIT licence, as stated on this page. Check the licence file in the repository for the full terms before reuse.
What do I need to use the editorial-tech skill?
The listing says it requires nothing beyond an agent that supports skills. It runs no scripts and uses no network access.
Where do I install the editorial-tech skill?
Unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. You can also upload it under Settings → Capabilities → Skills in the Claude apps.
Does the skill include code or a component library?
No. It is style guidance written as text in SKILL.md. The skill does not provide a ready-made component library or code package, though the demo folder offers a reference page.
When is this skill not a good fit?
It is a poor choice for projects that need a conventional, accessible corporate or utility interface, because it avoids centered standard layouts and relies on subtle, low-contrast technical detail.
Why doesn't my agent use the skill?
Check that the folder is in the correct skills location and contains SKILL.md. Name the skill with $editorial-tech in your request so the agent knows to use it.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use editorial-tech if you want a premium editorial-meets-tech look for a landing or product page and do not want to write a design direction from scratch. Pick something else if you need a conventional, high-contrast corporate interface or ready-made components, since this skill is written style guidance only.
Download the skill