skills.rest
DaFum
DaFumCOMMUNITY
Explore all skills by this author →
GitHub

convention-keeper-brutalist-ui

Audit UI components for brutalist conventions and design-system alignment.

1|Updated Jan 6, 2026
Search Tags:#design-system#css-variables#import-order#tailwind-v4#ui-conventions#code-refactor#brutalist
One-click install
npx skills add https://github.com/DaFum/neurotoxic-game --skill convention-keeper-brutalist-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convention-keeper-brutalist-ui
Source: https://github.com/DaFum/neurotoxic-game/tree/main/.agents/skills/convention-keeper-brutalist-ui
Command: npx skills add https://github.com/DaFum/neurotoxic-game --skill convention-keeper-brutalist-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforce brutalist UI conventions across components to ensure consistency, naming alignment, and predictable import order during UI refactors.

Core Features & Use Cases

  • Verify CSS variable usage (no hardcoded colors) and ensure Tailwind v4 syntax.
  • Encourage reuse of shared components from src/ui/shared/ and maintain consistent naming conventions.
  • Produce a violation checklist with file paths and suggested fixes during UI refactors or design-system alignment.

Quick Start

Run the Brutalist UI audit to verify components align with CSS variable usage, Tailwind v4 syntax, and import order.

Frequently Asked Questions about convention-keeper-brutalist-ui

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

FAQPage Schema
How do I enforce brutalist UI conventions during a component refactor?▼

Auditing brutalist UI components verifies CSS variable usage and Tailwind v4 syntax to catch hardcoded colors and naming inconsistencies. It produces a violation checklist with file paths and suggested fixes for proper design-system alignment.

Can I check for hardcoded colors and Tailwind v4 syntax errors in my codebase?▼

Running a brutalist UI audit checks for hardcoded colors by verifying CSS variable usage and validates Tailwind v4 syntax. It outputs a violation checklist with file paths and suggested fixes to correct codebase inconsistencies.

Does the brutalist UI audit check shared component reuse and import order?▼

The brutalist UI audit checks shared component reuse by verifying imports from the shared UI directory and enforces proper import ordering. It outputs a violation checklist with file paths and suggested fixes to correct structural inconsistencies.

What is the best way to align a codebase with brutalist design-system rules?▼

Aligning a codebase with brutalist design-system rules requires running an audit during UI refactors. It checks CSS variables, Tailwind v4 syntax, and shared component reuse to produce a violation checklist with file paths and suggested fixes.

Why does my brutalist UI audit produce a violation checklist with file paths?▼

The brutalist UI audit produces a violation checklist with file paths to pinpoint exact design-system misalignments. It identifies hardcoded values, incorrect Tailwind v4 syntax, and import order issues, providing suggested fixes for each violation.

When should I run a brutalist UI convention check on my components?▼

Run a brutalist UI convention check during UI refactors, redesigns, and codebase cleanups. It verifies CSS variable usage, Tailwind v4 syntax, and import ordering to ensure design-system alignment and outputs a violation checklist with suggested fixes.

Related Skills

Explore More Software Engineering Skills→
ProjectEuropaProjectEuropa
4

tailwind-patterns

Create CSS-first Tailwind v4 design systems with @theme blocks and container queries.

Community
Intermediate
wredziowredzio

using-react-component-pattern

Enforce React component patterns with Props interfaces and named exports.

Community
Basic
LiinkiingLiinkiing
6

frontend-guidelines

Standardize frontend component placement and reuse in a Next.js monorepo.

Community
Basic
imsaifimsaif
3

design-audit

Scan Tailwind UI components for hardcoded colors and design token violations.

Community
Advanced