neubrutalism

Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.

Quality

80%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

82%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A tight, highly actionable neubrutalism CSS reference with executable component examples, real token files, and thoughtful accessibility notes. Its main weaknesses are minor (a duplicated card snippet, no explicit ordered application workflow, and component examples that could optionally be externalized).

Suggestions

Remove the duplicate .nb-card block in the 'CSS Tokens' section (keep the fuller version under Component Examples) to tighten token efficiency.

Add a brief ordered 'How to apply' workflow at the top (import tokens.css → use .nb-* classes → verify contrast ≥ 4.5:1) to make usage sequence explicit.

Consider moving the per-component CSS examples into a references/components.css file and linking to it from SKILL.md to deepen progressive disclosure and keep the overview leaner.

Dimension	Reasoning	Score
Conciseness	The body is largely lean CSS with concise principle bullets and no padding about concepts Claude already knows, but the .nb-card snippet is duplicated across the 'CSS Tokens' and 'Component Examples' sections, a minor redundancy that could be trimmed, fitting 'efficient; minor instances of over-explanation that could be trimmed.'	4 / 5
Actionability	Provides complete, copy-paste-ready CSS for card, button, navbar, input, and badge, plus typography rules and a prefers-reduced-motion media query, all driven by an @imported real tokens.css file — fully executable guidance covering common cases.	5 / 5
Workflow Clarity	Usage is unambiguous via the explicit @import 'references/tokens.css' pattern followed by applying .nb-* classes/variables, giving a clear implicit sequence with no destructive or batch operations requiring validation checkpoints; minor gap is the lack of an explicit ordered 'how to apply' workflow.	4 / 5
Progressive Disclosure	Clear sections (Core Principles, CSS Tokens, Component Examples, Typography, Accessibility) with design tokens split into a real one-level-deep reference (references/tokens.css) clearly signaled by both a link and @import; the duplicate inline .nb-card example and inline-heavy component catalog are minor organization gaps versus the 'clear overview, well-signaled one-level-deep references' anchor.	4 / 5
	Total	17 / 20 Passed

Description

78%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A well-structured, third-person description that clearly states both purpose and explicit trigger conditions with concrete style cues. It is held back only by a generic action verb and slightly broad 'bold UI' phrasing that invites minor overlap with general design skills.

Suggestions

Replace the generic 'building bold UI' with concrete actions the skill performs, e.g. 'Applies neubrutalism design tokens and component styles (cards, buttons, navbars) to HTML/CSS.'

Add common synonyms like 'brutalist' or '90s/retro bold UI' to the trigger clause to broaden natural keyword coverage.

Tighten the 'Use when' clause to specify 'bold, high-contrast UI' to further reduce overlap with general design-system skills.

Dimension	Reasoning	Score
Specificity	Names the domain ('Neubrutalism design system skill') and lists concrete style attributes ('thick borders, offset solid shadows, high saturation colors, and minimal border radius'), but the only action verb is the generic 'building bold UI' rather than enumerated concrete actions, matching the 'names domain and 1-2 concrete actions, not comprehensive' anchor.	3 / 5
Completeness	Explicitly answers both what ('Neubrutalism design system skill') and when via a concrete 'Use when building bold UI with...' trigger clause listing specific style cues, matching the 'clearly and explicitly answers both what AND when with concrete trigger phrases' anchor.	5 / 5
Trigger Term Quality	Strong natural keywords ('neubrutalism', 'bold UI', 'thick borders', 'offset solid shadows', 'high saturation colors') that a user would plausibly say, but a few common synonyms (e.g. 'brutalist', 'retro/90s UI') are missing, fitting 'good keyword coverage; a few natural terms missing.'	4 / 5
Distinctiveness Conflict Risk	'Neubrutalism' plus the specific style descriptors carve a clear niche with minimal conflict, but the broad trigger 'building bold UI' leaves minor overlap risk with general UI/design skills, fitting 'mostly distinct; minor overlap risk with closely related skills.'	4 / 5
	Total	16 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: fengshao1227/ccg-workflow
Path: templates/skills/domains/frontend-design/neubrutalism/SKILL.md
Commit: f349e3d

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.