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

0•

デザインツール

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

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.

主な機能

01Enforces HuleEdu pure-CSS design tokens and component classes without Tailwind dependency

02Optimizes typography using specific serif, sans, and mono stacks for maximum readability

03Restricts UI elements to high-contrast academic color palettes like Navy, Canvas, and Burgundy

04Implements brutalist-inspired grid layouts and systematic spacing based on a 4px scale

050 GitHub stars

06Provides pre-configured patterns for complex data tables, ledgers, and state rows

ユースケース

01Developing data-heavy interfaces where structural clarity and accessibility are paramount

02Building institutional landing pages and dashboards for educational tools

03Creating 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

主な機能

01Enforces HuleEdu pure-CSS design tokens and component classes without Tailwind dependency

02Optimizes typography using specific serif, sans, and mono stacks for maximum readability

03Restricts UI elements to high-contrast academic color palettes like Navy, Canvas, and Burgundy

04Implements brutalist-inspired grid layouts and systematic spacing based on a 4px scale

050 GitHub stars

06Provides pre-configured patterns for complex data tables, ledgers, and state rows

ユースケース

01Developing data-heavy interfaces where structural clarity and accessibility are paramount

02Building institutional landing pages and dashboards for educational tools

03Creating clean, information-dense documentation sites that prioritize text over visuals