PluginBench
Skill
Pass
Audit score 90

enterprise

bergside/awesome-design-skills

Dark-themed cloud-platform design system for enterprise dashboards with modular grids and data hierarchy.

What is enterprise?

Enterprise is a design-system skill that provides guidance for building dark-themed, cloud-platform interfaces optimized for productivity dashboards. Use it when creating complex data-visualization UIs that require strong visual hierarchy, accessibility compliance, and consistent component patterns.

  • Defines a complete design-token system (typography, color, spacing, shadows) anchored to IBM Plex Sans and an 8pt grid
  • Specifies component anatomy, interaction states (default, hover, focus, active, disabled, loading, error), and responsive behavior
  • Enforces WCAG 2.2 AA accessibility standards with keyboard-first interactions and 44px+ touch targets
  • Provides anti-pattern guidance and QA checklists for design-system consistency
  • Documents glass-like panels, soft shadows, and subtle gradients for modern cloud-platform aesthetics
  • Includes content-writing tone standards (concise, confident, action-oriented) and empty/loading/error state patterns

How to install enterprise

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

How to use enterprise

  1. 1.Review the Style Foundations section to understand the color palette, typography scale, and spacing baseline
  2. 2.Reference the design tokens (primary=#0C5CAB, success=#10b981, etc.) when building components
  3. 3.Follow the component rule expectations to define anatomy, states, and interaction behavior for each UI element
  4. 4.Apply the accessibility requirements (keyboard navigation, focus states, semantic HTML, screen-reader labels)
  5. 5.Use the guideline authoring workflow when creating new component guidance
  6. 6.Run the QA checklist during code review to ensure consistency

Use cases

Good for
  • Building a monitoring or analytics dashboard for a SaaS platform
  • Designing a cloud-infrastructure management interface (Heroku/Vercel/GitHub-style)
  • Creating a complex data-visualization UI with multiple interactive components
  • Establishing design consistency across a large engineering team
  • Implementing accessible dark-mode interfaces for productivity tools
Who it's for
  • Design system authors and maintainers
  • Product engineers building enterprise dashboards
  • UX/UI designers working on cloud-platform products
  • Teams needing WCAG 2.2 AA compliance
  • Engineering teams standardizing component libraries

enterprise FAQ

What design tokens should I use for text and backgrounds?

Use semantic tokens: primary=#0C5CAB for interactive elements, surface=#09090b for backgrounds, text=#fafafa for foreground text. Pair with IBM Plex Sans at weights 100–900 and a 12/14/16/20/24/32 typography scale.

How do I ensure keyboard accessibility?

Implement keyboard-first interactions, visible focus states, semantic HTML before ARIA, and 44px+ touch targets. Test with screen readers and ensure reduced-motion support is enabled.

What should I do for empty, loading, and error states?

Design explicit states for each component. The skill requires documenting all interaction states (default, hover, focus-visible, active, disabled, loading, error) and their visual treatment.

Can I use decorative motion and animations?

No. Avoid decorative motion without purpose. All animations must serve a functional goal and respect reduced-motion preferences.

How do I handle long labels and overflow in components?

Define responsive behavior and edge cases (long labels, empty states, overflow) at the component level. Preserve visual hierarchy and ensure text remains readable and accessible.

Full instructions (SKILL.md)

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


name: enterprise description: Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards. license: MIT metadata: author: typeui.sh

<!-- TYPEUI_SH_MANAGED_START -->

Enterprise Design System Skill (Universal)

Mission

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

Brand

Enterprise design emphasizes grids, modular components, and strong visual hierarchy to present complex data in a clear and accessible way. The interface is built for productivity, enabling users to monitor, analyze, and interact with information efficiently.

Style Foundations

  • Visual style: modern, clean, cloud-platform aesthetic (Heroku/Vercel/GitHub inspired), dark theme, subtle gradients, soft shadows, glass-like panels, rounded components
  • Typography scale: 12/14/16/20/24/32 | Fonts: primary=IBM Plex Sans, display=IBM Plex Sans, mono=IBM Plex Sans | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
  • Color palette: primary, neutral, success, warning, danger | Tokens: primary=#0C5CAB, secondary=#0a4a8a, success=#10b981, warning=#f59e0b, danger=#ef4444, surface=#09090b, text=#fafafa
  • Spacing scale: 8pt baseline grid

Accessibility

WCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, screen-reader tested labels, reduced-motion support, 44px+ touch targets, high-contrast support

Writing Tone

concise, confident, helpful, clear, friendly, professional, action-oriented, low-jargon

Rules: Do

  • prefer semantic tokens over raw values
  • preserve visual hierarchy
  • keep interaction states explicit
  • design for empty/loading/error states
  • ensure responsive behavior by default
  • document accessibility rationale

Rules: Don't

  • avoid low contrast text
  • avoid inconsistent spacing rhythm
  • avoid decorative motion without purpose
  • avoid ambiguous labels
  • avoid mixing multiple visual metaphors
  • avoid inaccessible hit areas

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