stacks-design-brutalist

Architect industrial and brutalist user interfaces for Stacks-based applications using rigid modular grids and high-contrast typography.

2|Updated Jul 8, 2026
One-click install
npx skills add https://github.com/bughq/bughq --skill stacks-design-brutalist-bughq
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stacks-design-brutalist
Source: https://github.com/bughq/bughq/tree/main/.claude/skills/stacks-design-brutalist
Command: npx skills add https://github.com/bughq/bughq --skill stacks-design-brutalist-bughq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of maintaining a cohesive, high-density, and industrial aesthetic in web applications by providing a structured design system that rejects conventional consumer UI patterns in favor of mechanical precision.

Core Features & Use Cases

  • Visual Archetypes: Provides strict presets for Swiss Industrial Print or Tactical Telemetry interfaces.
  • Typographic Architecture: Enforces rigid scale, tracking, and leading rules for both macro-headers and micro-telemetry data.
  • Layout Engineering: Implements a bimodal density system using CSS Grid and border-based compartmentalization to ensure a mathematically engineered look.
  • Use Case: Use this skill when building a data-heavy dashboard or a technical terminal interface that requires a raw, utilitarian, and high-contrast aesthetic.

Quick Start

Apply the stacks-design-brutalist skill to the current project to initialize the industrial design tokens and component structure.

Frequently Asked Questions about stacks-design-brutalist

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

FAQPage Schema
How do I design a brutalist UI for a data-heavy dashboard?

Design a brutalist UI by enforcing rigid modular grids and high-contrast typography to maintain mechanical precision. This approach uses bimodal density systems and border-based compartmentalization to handle high-density technical telemetry data.

What is the best way to build an industrial telemetry display interface?

The best way to build an industrial telemetry display is applying strict typographic architecture with rigid scale, tracking, and leading rules for macro-headers and micro-data. This ensures a mathematically engineered look for technical environments.

Can I use CSS grid layouts for brutalist web design?

Yes, CSS grid layouts are essential for brutalist web design, implementing bimodal density systems and border-based compartmentalization. This structural engineering ensures the rigid modular grids required for a cohesive mechanical aesthetic.

Do I need to know Stacks and Crosswind to build a brutalist UI?

Yes, building this brutalist UI requires mastery of stx, Crosswind utilities, and CSS grid-based layout engineering. These dependencies are necessary to maintain structural integrity within Stacks-based applications.

When should I use brutalist design patterns for web interfaces?

Use brutalist design patterns when building data-heavy dashboards, technical telemetry displays, or editorial sites requiring a raw, utilitarian aesthetic. This approach rejects conventional consumer UI patterns in favor of mechanical precision.

How does brutalist typography architecture handle high-density data?

Brutalist typography architecture handles high-density data by enforcing rigid scale, tracking, and leading rules for both macro-headers and micro-telemetry data. This creates strict visual archetypes like Swiss Industrial Print or Tactical Telemetry interfaces.