brutalist-academic-ui
Skriptoteket-specific brutalist/academic UI design. Use for Vue/Vite SPA and SSR templates when you want grid-based layouts, systematic typography, and high-contrast “academic” aesthetics, while staying compatible with Skriptoteket’s pure-CSS + HuleEdu token stack (no Tailwind).
Best use case
brutalist-academic-ui is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Skriptoteket-specific brutalist/academic UI design. Use for Vue/Vite SPA and SSR templates when you want grid-based layouts, systematic typography, and high-contrast “academic” aesthetics, while staying compatible with Skriptoteket’s pure-CSS + HuleEdu token stack (no Tailwind).
Teams using brutalist-academic-ui should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/brutalist-academic-ui/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How brutalist-academic-ui Compares
| Feature / Agent | brutalist-academic-ui | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Skriptoteket-specific brutalist/academic UI design. Use for Vue/Vite SPA and SSR templates when you want grid-based layouts, systematic typography, and high-contrast “academic” aesthetics, while staying compatible with Skriptoteket’s pure-CSS + HuleEdu token stack (no Tailwind).
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Brutalist Academic UI Opinionated design skill for interfaces where intellectual rigor, typographic precision, and structural honesty matter. ## Skriptoteket Compatibility (must follow) - **No Tailwind / utility CSS frameworks** (see `docs/adr/adr-0029-frontend-styling-pure-css-design-tokens.md`). - **Use HuleEdu tokens + component classes** (see `.agent/rules/045-huleedu-design-system.md` and `src/skriptoteket/web/static/css/huleedu-design-tokens.css`). - Prefer existing classes before inventing new ones: `.huleedu-btn`, `.huleedu-card`, `.huleedu-link`, `.huleedu-table`, `.huleedu-row`. ## When to Use Activate when user: - Builds websites, landing pages, dashboards, documentation sites - Needs institutional or academic visual language - Mentions: "brutalist", "academic", "minimal", "no gradients", "serious UI" - Wants to avoid AI-generated aesthetic (purple gradients, Roboto, pill buttons) ## I Need To... | Task | Read | |------|------| | Align with Skriptoteket tokens + button hierarchy | `.agent/rules/045-huleedu-design-system.md` | | Understand grid/typography/color principles | [fundamentals.md](fundamentals.md) | | Build page structure, layouts, navigation | [patterns.md](patterns.md) | | Create data tables, ledgers, state rows | [examples/tables-ledgers.md](examples/tables-ledgers.md) | | Build buttons, cards, interactions | [examples/components.md](examples/components.md) | ## Quick Reference ### Banned - Purple/startup gradients - Roboto, Open Sans, Lato, Inter - Tailwind / utility-first styling that bypasses tokens - `border-radius` > `var(--huleedu-radius-lg)` (8px) for containers - Decorative blobs, floating shapes - Soft shadows, backdrop blur - Scale/bounce hover animations ### Font Stack ```css /* Use HuleEdu token fonts (defined in src/skriptoteket/web/static/css/huleedu-design-tokens.css). */ font-family: var(--huleedu-font-serif); /* long-form reading */ font-family: var(--huleedu-font-sans); /* UI */ font-family: var(--huleedu-font-mono); /* code/ids */ ``` ### Spacing Scale ```css /* Representative spacing tokens (4px base scale). */ --huleedu-space-1: 4px; --huleedu-space-2: 8px; --huleedu-space-3: 12px; --huleedu-space-4: 16px; --huleedu-space-6: 24px; --huleedu-space-8: 32px; --huleedu-space-12: 48px; --huleedu-space-16: 64px; ``` ### Color Palette ```css /* Use HuleEdu tokens for all color decisions (no hardcoded hex). */ --huleedu-navy: #1C2E4A; /* ink */ --huleedu-canvas: #F9F8F2; /* paper */ --huleedu-burgundy: #4D1521; /* accent / CTA / attention */ --huleedu-warning: #D97706; --huleedu-error: #DC2626; ``` ## Core Principle The best interface is one where you notice the content, not the interface. Every element earns its place. Typography does the work. Whitespace is structure.
Related Skills
academic-reviewer
Expert guidance for reviewing academic manuscripts submitted to journals, particularly in political science, economics, and quantitative social sciences. Use when asked to review, critique, or provide feedback on academic papers, research designs, or empirical strategies. Emphasizes methodological rigor, causal identification strategies, and constructive feedback on research design.
academic-search
Search academic paper repositories (arXiv, Semantic Scholar) for scholarly articles in physics, mathematics, computer science, quantitative biology, AI/ML, and related fields
academic-data-integration
When the user needs to integrate multiple data sources (Canvas API, user memory, file systems) to create comprehensive academic reports. This skill combines course information, assignment details, submission status, and user context to generate actionable insights. Triggers include requests that involve cross-referencing multiple data sources or creating consolidated academic reports from disparate systems.
academic-course-setup-automator
When the user needs to set up multiple academic courses in a learning management system (Canvas/LMS) from structured data sources. This skill automates the entire workflow extracting course schedules from emails/attachments, matching instructors from CSV files, creating courses, enrolling teachers, publishing announcements with class details, uploading syllabi, enabling resource sharing for instructors teaching multiple courses, and publishing all courses. Triggers include course schedule setup, Canvas/LMS administration, academic term preparation, instructor assignment, syllabus distribution, and multi-course management.
academic-benchmark-researcher
When the user requests information about academic benchmarks, datasets, or research papers, particularly in machine learning, deep learning, or logical reasoning domains. This skill enables systematic research of academic benchmarks by searching web sources, downloading and analyzing arXiv papers, extracting key metadata (number of tasks, training availability, difficulty levels), and compiling comparative summaries. It triggers on requests involving dataset comparisons, benchmark analysis, or academic paper research for table creation.
academic-writing-style
Personalized academic writing assistant for university assignments in Chinese and English. Use when users need help writing/revising academic reports, project docs, technical analyses, research reviews, or case studies. Produces natural prose avoiding AI markers. Triggers: academic writing, assignment, report, technical analysis, research review, case study. | 个性化学术写作助手,适用于中英文大学作业。触发词:学术写作、作业、报告、技术分析、研究综述、案例研究、项目文档。
academic-writing-standards
Expert knowledge of academic writing standards for peer-reviewed papers, including citation integrity, style compliance, clarity, and scientific writing best practices. Use when reviewing or editing academic manuscripts, papers, or research documentation.
academic-research-writing
Use when writing CS research papers (conference, journal, thesis), reviewing scientific manuscripts, improving academic writing clarity, or preparing IEEE/ACM submissions. Invoke when user mentions paper, manuscript, research writing, journal submission, or needs help with academic structure, formatting, or revision.
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
Empirical Validation
Requires proof before marking work complete — no "trust me, it works"
dubstep
Dubstep composition specialist - genre knowledge, sound design, and production patterns for LMMS
dotnet-ui-testing-core
Tests UI across frameworks. Page objects, test selectors, async waits, accessibility.