Guide · Agent skill
How to use the Documentary Brutalist Agency Site agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The documentary-brutalist-agency skill is a set of instructions that tells an AI agent how to design or redesign a website for a creative agency, production studio, architecture firm, culture organization, or portfolio. It sets a specific look: billboard-scale headlines, hard black and warm-white sections, exposed grid lines, square corners, and documentary-style photo collages. This guide explains what a skill is, how to install this one, how to ask for it, and what to check in the result.
Documentary Brutalist Agency SiteMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the documentary-brutalist-agency ZIP from the directory page. The licence is MIT.
- 2Unzip into a skills folder. Place the folder in ~/.claude/skills/ for personal use or in your project's .claude/skills/ folder for one project.
- 3Or upload in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Prepare your real content. Gather your project names, photography, approved copy, and links so the agent can replace placeholders.
- 5Make the request. Start with $documentary-brutalist-agency or describe an agency, studio, architecture, culture, or portfolio site in the bold editorial style.
- 6Check the output. Run the validation list: DOM order, keyboard use, headline wrapping, contrast, reduced motion, and invented content.
What is an agent skill and what does this one do?
An agent skill is a folder containing a SKILL.md file with instructions that an AI agent reads when you ask for a matching task. You do not write code to use it; you describe what you want, and the agent follows the skill's rules while it works.
When this skill is active, the agent builds pages in a defined style. It opens with a large positioning line, cuts into selected work on black, uses a sparse white philosophy section, and places one documentary collage in the middle of the page. It uses CSS Grid, keeps image boxes reserved before media loads, and limits parallax to shallow movement capped below 5%.
The skill also sets interaction rules. Menus and FAQ items should use semantic buttons or native details and summary elements, update aria-expanded, keep focus handling correct, and work with reduced motion turned on. It tells the agent to remove invented clients, quotes, awards, and results, so placeholder content is replaced rather than published.
- Billboard-style hero headline with minimal navigation
- Black work chapters and warm-white philosophy chapters
- Irregular documentary collage that keeps narrative DOM order
- Accessible menu and FAQ controls with reduced-motion fallbacks
- Validation checklist covering 320px width, 200% zoom, contrast, and failed media
Install the skill by downloading the ZIP
Download the ZIP of the skill from the directory page. The skill lives at agent-skills/web-design/documentary-brutalist-agency in the MengTo/Skills repository, and the licence is MIT.
To install it for all of your projects, unzip the download into your personal skills folder at ~/.claude/skills/. To install it for a single project, unzip it into that project's .claude/skills/ folder instead. After unzipping, the documentary-brutalist-agency folder should contain SKILL.md.
If you use the Claude apps rather than a local folder, you can upload the skill instead. Open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal install: ~/.claude/skills/documentary-brutalist-agency/
- Project install: your-project/.claude/skills/documentary-brutalist-agency/
- Claude apps: Settings → Capabilities → Skills
~/.claude/skills/documentary-brutalist-agency/SKILL.mdTrigger the skill with a request
You can name the skill directly with a dollar sign, as the demo prompts do. Starting a request with $documentary-brutalist-agency tells the agent to use these rules for the whole task.
You can also describe the job in plain language. Mention an agency, studio, architecture firm, culture organization, or portfolio, and ask for a bold editorial or brutalist look. The skill's description is written around those terms, so requests that use them are the most likely to match.
Give the agent your real material up front: names, projects, photography, and approved copy. The skill tells the agent to replace placeholders, but it cannot know your facts.
- Use $documentary-brutalist-agency to create an original agency portfolio with compressed billboard typography and accessible brutalist navigation.
- Redesign our architecture studio homepage with hard black and warm-white chapters and a documentary photo collage. Here is our project list and approved copy.
- Build a production studio landing page in the documentary brutalist style. Keep the FAQ accessible and the parallax subtle.
Review the result against the validation list
The skill includes a validation section that you can use as a review checklist. Read the page in DOM order with CSS and motion disabled, then test the menu, FAQ, collage captions, and project links with keyboard and touch.
Check the compressed headline at 320px, tablet, desktop, and 200% zoom. Verify image dimensions, alt text, contrast, focus visibility, reduced motion, and what happens when an image fails to load.
Finally, search the output for any project names, client names, quotes, awards, or figures you did not supply. Replace or delete anything you cannot verify.
- Keyboard-only navigation of the menu and FAQ
- Headline wrapping at 320px and 200% zoom
- Alt text, contrast, and visible focus
- Reduced motion and failed-image states
- Removal of invented claims
Use the demo files as a reference
The skill folder includes a demo directory with index.html and PROMPT.md. PROMPT.md contains a minimal prompt and a longer prompt for recreating the included demo as a standalone index.html. The demo's design notes describe a near-black first screen with hairline rules, a two-line billboard headline, and a warm-white philosophy chapter.
A REFERENCES.md file lists two external Drük references for the look. Treat them as visual references only, and do not copy their content into your site.
- demo/index.html: example output of the style
- demo/PROMPT.md: minimal and full prompts
- REFERENCES.md: external visual references
Safety notes: scripts and network access
This skill does not run scripts and does not use the network, according to its listing. It is made up of written instructions and example files. You should still read SKILL.md and the demo files before installing any skill, and check the code the agent produces before deploying it.
Because the skill controls presentation rather than verifying facts, the responsibility for accurate content stays with you. Do not publish quotes, awards, or client claims that you have not checked.
- Runs scripts: no
- Uses network: no
- Requirements listed: none
- You supply and verify all real content
What people use it for
- A small design studio building a portfolio homepage with a bold editorial look
- An architecture firm redesigning its project index with strong typography and restrained motion
- A production studio creating a landing page with a documentary photo collage and an accessible FAQ
- A culture organization building an event or programme site with black and warm-white chapters
- A front-end developer starting an accessible, brutalist-style layout that they will later refine
Frequently asked questions
How do I install the documentary brutalist agency skill?
Download the ZIP from the directory page and unzip it into ~/.claude/skills/ for personal use or into your project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings, then Capabilities, then Skills.
Does this skill need anything else installed?
The listing states that it requires nothing. It does not run scripts and does not use the network, so no extra tools are listed as necessary.
Is the documentary brutalist agency skill free?
The skill is published under the MIT licence, as stated on its listing. Check the licence file in the repository for the full terms.
What kinds of websites is this skill not suited for?
It is not suited to soft, rounded, or glossy SaaS-style designs, because the skill explicitly avoids those styles. It is also a poor fit for sites that need to publish quotes, awards, or client claims without verifying them, since the skill focuses on presentation.
How is this different from a general website prompt?
This skill gives the agent a fixed visual system and interaction rules: billboard type, hard black and warm-white chapters, exposed grids, documentary collages, and accessible menus and FAQs. A general prompt usually leaves these choices open.
Why does the agent keep removing names and quotes from my draft?
The skill tells the agent to replace source names, projects, people, quotes, claims, and links with real material. Give the agent your verified content so it does not need to remove or invent anything.
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 this skill if you are a designer, small studio, or front-end developer who wants a bold editorial portfolio or agency homepage with accessible menus and FAQs. Pick a different style if you want soft, rounded, or glossy SaaS visuals, or if you need a tool that checks factual claims for you.
Download the skill