PluginBench
Skill
Pass
Audit score 90

minimal

bergside/awesome-design-skills

Stripped-back design system emphasizing whitespace, clean typography, and restrained color for maximum clarity.

What is minimal?

A minimal design-system skill for creating clean, accessible interfaces with semantic tokens, deliberate spacing, and restrained color palettes. Use this when authoring design guidelines that prioritize clarity, focus, and WCAG 2.2 AA compliance.

  • Generate design-system guidance with defined tokens (color, typography, spacing) and component rules
  • Enforce accessibility standards (WCAG 2.2 AA, keyboard-first, visible focus states) at the system level
  • Specify component anatomy, states (default, hover, focus, active, disabled, loading, error), and interaction behavior
  • Create implementation-ready rules anchored to tokens and thresholds, not subjective language
  • Document anti-patterns, migration paths, and QA checklists for code review
  • Define responsive behavior, edge cases, and content-writing tone standards

How to install minimal

npx skills add https://github.com/bergside/awesome-design-skills --skill minimal
Claude Code
Cursor
Windsurf
Cline

How to use minimal

  1. 1.Install the skill using the provided npm command
  2. 2.Restate your design intent in one sentence before proposing rules
  3. 3.Define tokens (color, typography, spacing) and foundational constraints first
  4. 4.Specify component anatomy, required states, and interaction behavior for keyboard, pointer, and touch
  5. 5.Include accessibility acceptance criteria and content-writing standards with examples
  6. 6.Document anti-patterns and migration guidance for existing inconsistent UI
  7. 7.Generate a QA checklist for code-review validation

Use cases

Good for
  • Author design-system documentation for a new product with minimal aesthetic and accessibility requirements
  • Create component guidelines (buttons, inputs, cards) with explicit state definitions and keyboard interaction rules
  • Establish token-based constraints (spacing scale 4/8/12/16/24/32, color palette, typography weights) across a design system
  • Review and refactor inconsistent UI by identifying anti-patterns and providing migration guidance
  • Generate QA checklists to validate design-system compliance during code review
Who it's for
  • Design-system authors and leads defining guidelines for engineering teams
  • Product designers building accessible, minimal interfaces
  • Engineers implementing design systems who need testable, unambiguous rules
  • Teams adopting WCAG 2.2 AA compliance and keyboard-first interaction patterns

minimal FAQ

What design style does this skill enforce?

Minimal, clean, bold design with emphasis on whitespace, semantic tokens, and restrained color. It uses Open Sans (primary), Inter (display), and Inconsolata (mono) with a neutral-dominant palette and WCAG 2.2 AA accessibility.

Can I customize the color palette and typography?

Yes. The skill provides default tokens (primary=#0C0C09, secondary=#312C85, success=#16A34A, etc.) and a spacing scale (4/8/12/16/24/32), but you can adapt these to your brand while maintaining the semantic-token approach and accessibility standards.

What accessibility standards does this enforce?

WCAG 2.2 AA compliance with keyboard-first interactions, visible focus states, and no low-contrast text. Every accessibility rule must be testable in implementation.

How do I handle component states and variants?

Define required states explicitly: default, hover, focus-visible, active, disabled, loading, and error (as relevant). Specify spacing, typography, and color-token usage for each state, plus interaction behavior for keyboard, pointer, and touch.

What if aesthetics conflict with accessibility?

The skill prioritizes accessibility over novelty. Flag conflicts explicitly, then choose the accessible option. Use the QA checklist to validate compliance during code review.

Full instructions (SKILL.md)

Source of truth, from bergside/awesome-design-skills.


name: minimal description: Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus. license: MIT metadata: author: typeui.sh

<!-- TYPEUI_SH_MANAGED_START -->

Minimal Design Design System Skill (Universal)

Mission

You are an expert design-system guideline author for minimal design. Create practical, implementation-ready guidance that can be directly used by engineers and designers.

Brand

Style Foundations

  • Visual style: minimal, clean, bold
  • Typography scale: desktop-first expressive scale | Fonts: primary=Open Sans, display=Inter, mono=Inconsolata | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
  • Color palette: primary, neutral, success, warning, danger | Tokens: primary=#0C0C09, secondary=#312C85, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#F4F4F1, text=#0C0C09
  • Spacing scale: 4/8/12/16/24/32

Accessibility

WCAG 2.2 AA, keyboard-first interactions, visible focus states

Writing Tone

concise, confident, helpful

Rules: Do

  • prefer semantic tokens over raw values
  • preserve visual hierarchy
  • keep interaction states explicit

Rules: Don't

  • avoid low contrast text
  • avoid inconsistent spacing rhythm
  • avoid ambiguous labels

Expected Behavior

  • Follow the foundations first, then component consistency.
  • When uncertain, prioritize accessibility and clarity over novelty.
  • Provide concrete defaults and explain trade-offs when alternatives are possible.
  • Keep guidance opinionated, concise, and implementation-focused.

Guideline Authoring Workflow

  1. Restate the design intent in one sentence before proposing rules.
  2. Define tokens and foundational constraints before component-level guidance.
  3. Specify component anatomy, states, variants, and interaction behavior.
  4. Include accessibility acceptance criteria and content-writing expectations.
  5. Add anti-patterns and migration notes for existing inconsistent UI.
  6. End with a QA checklist that can be executed in code review.

Required Output Structure

When generating design-system guidance, use this structure:

  • Context and goals
  • Design tokens and foundations
  • Component-level rules (anatomy, variants, states, responsive behavior)
  • Accessibility requirements and testable acceptance criteria
  • Content and tone standards with examples
  • Anti-patterns and prohibited implementations
  • QA checklist

Component Rule Expectations

  • Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
  • Describe interaction behavior for keyboard, pointer, and touch.
  • State spacing, typography, and color-token usage explicitly.
  • Include responsive behavior and edge cases (long labels, empty states, overflow).

Quality Gates

  • No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
  • Every accessibility statement must be testable in implementation.
  • Prefer system consistency over one-off local optimizations.
  • Flag conflicts between aesthetics and accessibility, then prioritize accessibility.

Example Constraint Language

  • Use "must" for non-negotiable rules and "should" for recommendations.
  • Pair every do-rule with at least one concrete don't-example.
  • If introducing a new pattern, include migration guidance for existing components.
<!-- TYPEUI_SH_MANAGED_END -->