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.