design-taste-brutalism

Generates brutalist React and Next.js interfaces with poster-led layouts and hard structural hierarchy.

Updated Mar 26, 2026
One-click install
npx skills add https://github.com/javiruu/viru-air --skill design-taste-brutalism-javiruu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-brutalism
Source: https://github.com/javiruu/viru-air/tree/main/.codex/skills/taste-skill/brutalism
Command: npx skills add https://github.com/javiruu/viru-air --skill design-taste-brutalism-javiruu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated frontend pages often default to generic SaaS templates with purple gradients, centered heroes, and interchangeable card grids. This Skill enforces a disciplined brutalist design system so generated interfaces feel authored, severe, and visually distinct instead of statistically average. ## Core Features & Use Cases - Brutalist Style Engine: Applies tuned baseline dials (DESIGN_VARIANCE 6, MOTION_INTENSITY 2, VISUAL_DENSITY 3) plus detailed rules for typography, color, layout, materiality, and motion specific to poster, editorial, and industrial brutalism. - Anti-Pattern Guardrails: Explicitly bans AI tells such as purple-blue branding, gradient headline text, template section ordering, nested cards, and emoji decoration. - Component Recipe Routing: Points to shared component libraries (GSAP, Aceternity, React Bits, 21st.dev) and a brutalism section in style-recipes.md so builds reuse vetted patterns adapted to the style. - Use Case: Ask for a landing page for an industrial design studio and receive a Next.js page with a poster-scale headline slab, a large documentary image plate, one signal accent color, hard block reveals, and production-ready Tailwind code. ## Quick Start Ask the AI to build a brutalist landing page for your product using this skill, and it will produce a poster-led React or Next.js interface following the brutalism design rules.

Frequently Asked Questions about design-taste-brutalism

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

FAQPage Schema
How do I generate a brutalist landing page with AI?▼

Invoke this skill with a request for a brutalist, industrial, or poster-style page. It applies a tuned baseline (variance 6, motion 2, density 3) and produces a React or Next.js layout built from large blocks, image plates, and one signal accent color.

What design rules does a brutalist UI skill enforce?▼

It enforces hard block composition, one dominant accent color, condensed display typography paired with readable body text, minimal abrupt motion, and mandatory real imagery in the hero. It bans gradients, purple-blue branding, nested cards, and template section ordering.

Does this skill work with Next.js and Tailwind CSS?▼

Yes, it defaults to React or Next.js with Server Components and Tailwind CSS for styling. It checks package.json before importing libraries, isolates heavy interactivity in client components, and uses min-h-[100dvh] for viewport-safe heroes.

Can I adjust the motion or density of the generated design?▼

Yes, the three dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) adapt dynamically when you explicitly request a calmer, denser, or more animated result. Without overrides, the skill uses its brutalist baseline values.

When should I not use brutalist design for a website?▼

Avoid it when the product needs a friendly, soft, or luxury brand feel, since the style is blunt and industrial by intent. It also avoids data-heavy dashboard layouts unless the user explicitly requests operational or control-room software.