brutalism

Standardize brutalist design-system guidance with WCAG 2.2 AA accessibility rules.

Updated May 13, 2026
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill brutalism-superpollo02
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brutalism
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/brutalism
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill brutalism-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of producing consistent, implementation-ready UI guidance for a brutalist design aesthetic while maintaining accessibility and interaction quality.

Core Features & Use Cases

  • Brutalist foundations to tokens: Defines typography, spacing, and a concrete color system (including explicit primary/secondary/surface/text and functional state colors).
  • Operational accessibility rules: Enforces WCAG 2.2 AA expectations with keyboard-first interaction and visible focus requirements.
  • Component-ready guidance: Specifies how to structure rules for component anatomy, states, variants, and quality gates so engineers can implement without ambiguity.

Quick Start

Use the brutalism skill to generate design-system instructions for a new set of components (e.g., buttons and inputs) that match the brutalist palette, typography, spacing rhythm, and required accessibility states.

Frequently Asked Questions about brutalism

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

FAQPage Schema
How do I build a brutalist design system that meets WCAG 2.2 AA accessibility standards?▼

To build an accessible brutalist design system, you standardize UI component rules, interaction states, and token-aligned styling using explicit typography, spacing, and color foundations. This enforces WCAG 2.2 AA keyboard-first behavior and visible focus requirements across all interface elements.

What is the best way to define interaction states for brutalist UI components?▼

The best way to define interaction states for brutalist UI components is to specify explicit focus, hover, active, disabled, error, and loading states. This approach uses token-anchored do/don't constraints to ensure consistent, accessible component behavior across the design system.

Can I use brutalist design tokens for both engineering and AI UI generation?▼

Yes, you can use brutalist design tokens for both engineering and AI teams. The system standardizes brutalist design-system guidance into implementation-ready UI instructions, allowing both human engineers and AI to produce consistent, accessible component-level rules without ambiguity.

How do I structure component anatomy and variants for an accessible brutalist UI library?▼

You structure component anatomy and variants for an accessible brutalist UI library by defining token-anchored do/don't constraints and explicit quality gates. This provides engineers with unambiguous, implementation-ready guidance that aligns with the brutalist palette and required accessibility states.

Does a brutalist design system require explicit keyboard-first interaction behavior?▼

Yes, a brutalist design system requires explicit keyboard-first interaction behavior. The system enforces WCAG 2.2 AA expectations, ensuring all components have visible focus requirements and operational accessibility rules for users navigating via keyboard.