skills.rest
stacksjs
stacksjsOFFICIAL
Explore all skills by this author →
Website𝕏@stacksjsGitHub

stacks-design-brutalist

Implement industrial and brutalist user interfaces for Stacks applications with predefined visual archetypes.

2|Updated Jul 2, 2026
Search Tags:#dashboard design#stacksjs#stx#crosswind#brutalist ui#swiss typography#telemetry interface
One-click install
npx skills add https://github.com/stacksjs/status --skill stacks-design-brutalist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stacks-design-brutalist
Source: https://github.com/stacksjs/status/tree/main/.claude/skills/stacks-design-brutalist
Command: npx skills add https://github.com/stacksjs/status --skill stacks-design-brutalist

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating consistent, high-impact industrial and brutalist user interfaces for Stacks applications requires manual configuration of strict design rules, custom typography scales, rigid grid systems, and analog degradation effects, which is time-consuming and prone to inconsistency without a standardized guide.

Core Features & Use Cases

  • Two Pre-Defined Visual Archetypes: Choose between Swiss Industrial Print (light mode, heavy sans-serif typography, high-contrast red accents) or Tactical Telemetry/CRT Terminal (dark mode, monospace telemetry, scanline effects) for your project, with strict rules to avoid mixing modes.
  • Comprehensive Design Specifications: Detailed guidance for macro/micro typography, no-radius rigid layouts, ASCII symbology, color systems, and post-processing effects like halftones and mechanical noise.
  • Seamless Stacks Integration: Composes natively with existing Stacks skills including stacks-design-taste, stx, Crosswind, and stacks-ui for end-to-end implementation.
  • Use Case: Ideal for building uptime monitoring dashboards, status pages, technical portfolios, or editorial sites that need a raw, functional, high-data-density aesthetic that stands apart from generic consumer UI.

Quick Start

Use the stacks-design-brutalist skill to design a dark-mode tactical telemetry dashboard for your Stacks status page app with rigid 1px grid dividers, monospace metadata rows, and subtle CRT scanline overlay effects.

Frequently Asked Questions about stacks-design-brutalist

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

FAQPage Schema
How do I build a brutalist UI dashboard for a Stacks app?▼

You can build a brutalist UI dashboard by applying pre-defined visual archetypes, rigid modular grids, and monospace telemetry rules. This approach enforces strict grid determinism and semantic DOM structure for high-data-density telemetry interfaces.

What is Swiss typography in industrial dashboard design?▼

Swiss typography in industrial dashboard design utilizes heavy sans-serif fonts, high-contrast accents, and strict macro/micro typography scales within a rigid modular grid. It provides a high-data-density aesthetic without relying on rounded UI components.

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

No, you cannot mix light and dark brutalist design modes. You must choose either the Swiss Industrial Print light mode or the Tactical Telemetry dark mode for your project, as strict rules prohibit mixing these visual archetypes.

How do I add CRT scanline and analog degradation effects to a status page?▼

Add CRT scanline and analog degradation effects to a status page by configuring the Tactical Telemetry dark mode archetype. This applies post-processing effects like scanlines, halftones, and mechanical noise over monospace telemetry data.

Does this brutalist design system require Crosswind and stx templating?▼

Yes, compliant implementation requires using Crosswind for theme token configuration and utility classes, stx for templating, and Stacks UI components. These integrate natively to enforce the strict layout constraints and no-radius rigid layouts.

When should I not use a brutalist UI for my web application?▼

You should not use a brutalist UI for generic consumer applications requiring soft, rounded user experiences. It is specifically designed for technical portfolios, status pages, and data-heavy dashboards needing a raw, functional aesthetic with rigid 1px grid dividers.

Related Skills

Explore More Design & Creative Skills→
bughqbughq
2

stacks-ui

Develop reactive accessible Stacks UI components with Crosswind CSS.

Official
Advanced
bughqbughq
2

stacks-design-brutalist

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

Official
Advanced
bughqbughq
2

stacks-image-to-code

Generate Stacks frontend components from visual design references.

Official
Advanced
MMA-Marketing-ProMMA-Marketing-Pro
1

industrial-brutalist-ui

Create industrial brutalist web interfaces with rigid grids and technical typography.

Official
Advanced