anvil-ui-brutalist

Generates brutalist web interfaces combining Swiss typographic print and military terminal aesthetics.

1|Updated Aug 27, 2026
One-click install
npx skills add https://github.com/rogerznts/anvil --skill anvil-ui-brutalist-rogerznts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: anvil-ui-brutalist
Source: https://github.com/rogerznts/anvil/tree/main/anvil/.claude/skills/anvil-ui-brutalist
Command: npx skills add https://github.com/rogerznts/anvil --skill anvil-ui-brutalist-rogerznts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial identity is hard when default UI patterns all look the same. This Skill provides a complete design system for building raw, mechanical interfaces that fuse Swiss typographic print with military terminal aesthetics. ## Core Features & Use Cases - Two Visual Archetypes: Choose between Swiss Industrial Print (light, blueprint-style) or Tactical Telemetry (dark, CRT terminal) and commit to one per project. - Typographic Architecture: Extreme scale contrast with fluid macro-typography via CSS clamp(), tight tracking, and monospace micro-typography for data and metadata. - Utilitarian Color System: Strict palettes with carbon ink or white phosphor foregrounds and a single hazard-red accent; gradients and border-radius are prohibited. - Analog Degradation Effects: Halftone dithering, CRT scanlines via repeating-linear-gradient, and SVG noise filters to simulate physical media. - Use Case: Build a data-dense monitoring dashboard that looks like a declassified military terminal, with monospace telemetry readouts, ASCII bracket framing, crosshair grid markers, and scanline overlays. ## Quick Start Use the anvil-ui-brutalist skill to design a dark tactical telemetry dashboard for my server monitoring page with monospace data readouts and scanline effects.

Frequently Asked Questions about anvil-ui-brutalist

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a brutalist website design with CSS?▼

Use strict CSS Grid layouts with visible 1px borders, extreme typographic scale contrast via clamp() for headers, and monospace fonts for data. Reject border-radius, gradients, and shadows, and commit to either a light print or dark terminal palette.

What fonts work best for brutalist and terminal UI design?▼

Use heavy neo-grotesque sans-serifs like Inter Black, Archivo Black, or Monument Extended for macro-typography. For data and telemetry, use monospace fonts like JetBrains Mono, IBM Plex Mono, or VT323 at small sizes with generous letter-spacing.

How do I add CRT scanline effects to a webpage?▼

Apply a repeating-linear-gradient background such as repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px) to simulate horizontal electron beam sweeps on dark terminal interfaces.

Can I mix light and dark modes in a brutalist interface?▼

No. The design system requires choosing one substrate palette per project: either Swiss Industrial Print (light, off-white paper) or Tactical Telemetry (dark, near-black). Mixing both within the same interface breaks the visual coherence.

When should I not use a brutalist design approach?▼

Avoid brutalism for consumer products needing conventional usability patterns, soft friendly aesthetics, or accessibility-sensitive audiences. The style deliberately discards familiar UI conventions in favor of raw mechanical density, which suits portfolios, dashboards, and editorial sites.