Does this skill support Tailwind CSS?

No, this skill specifically prohibits Tailwind and other utility-first frameworks in favor of Skriptoteket’s pure-CSS architecture and HuleEdu design tokens.

What defines the 'Brutalist Academic' aesthetic in this skill?

It is characterized by structural honesty, grid-based layouts, no gradients or soft shadows, and a focus on high-contrast colors like Navy and Burgundy to evoke a sense of intellectual rigor.

Is it compatible with modern frontend frameworks?

Yes, it is designed for use with Vue/Vite SPA and SSR templates, provided they follow the pure-CSS styling conventions of the HuleEdu system.

Can I use this skill for non-Skriptoteket projects?

While it is optimized for the Skriptoteket ecosystem, the principles of minimal, typographic-first design can be applied to any project requiring a serious, scholarly interface.

How does the skill handle typography?

It utilizes a specific HuleEdu font stack that uses serif for long-form reading, sans for UI navigation, and mono for identifiers and code, ensuring clear information hierarchy.

Brutalist Academic UI Design

Name: Brutalist Academic UI Design
Author: paunchygent

bypaunchygent

Design Tools

Generates high-contrast, grid-based academic interfaces using Skriptoteket’s pure-CSS design tokens and typographic principles.

About

The Brutalist Academic UI skill enables Claude to architect and style sophisticated frontend interfaces for educational and institutional applications within the Skriptoteket ecosystem. It enforces a rigorous design language centered on typographic precision, structural honesty, and grid-based layouts while strictly adhering to the HuleEdu design token stack. This skill is ideal for developers building documentation sites, dashboards, or scholarly tools who want to avoid generic 'startup' aesthetics in favor of a serious, minimalist, and accessible user experience that prioritizes content over decoration.

Key Features

Enforces HuleEdu pure-CSS design tokens and component classes without Tailwind dependency
Optimizes typography using specific serif, sans, and mono stacks for maximum readability
Restricts UI elements to high-contrast academic color palettes like Navy, Canvas, and Burgundy
Implements brutalist-inspired grid layouts and systematic spacing based on a 4px scale
0 GitHub stars
Provides pre-configured patterns for complex data tables, ledgers, and state rows

Use Cases

Developing data-heavy interfaces where structural clarity and accessibility are paramount
Building institutional landing pages and dashboards for educational tools
Creating clean, information-dense documentation sites that prioritize text over visuals

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add paunchygent/skriptoteket brutalist-academic-ui

For use in Claude.ai and ChatGPT

Download Skill

GitHub