Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
bergside avatar

Enterprise

  • 481 installs
  • 2.2k repo stars
  • Updated June 28, 2026
  • bergside/awesome-design-skills

enterprise is a Claude Code design-system skill that authors dark-themed cloud-platform UI guidelines with modular grids and WCAG 2.2 AA rules for developers building B2B SaaS dashboards.

About

enterprise is an MIT-licensed universal design-system skill from typeui.sh that produces implementation-ready guidance for dark cloud-platform dashboards inspired by Heroku, Vercel, and GitHub aesthetics. Style foundations specify IBM Plex Sans typography at scales 12/14/16/20/24/32, an 8pt baseline grid, glass-like panels, and semantic color tokens including primary #0C5CAB on surface #09090b. Accessibility targets WCAG 2.2 AA with keyboard-first interactions, 44px+ touch targets, reduced-motion support, and testable acceptance criteria. The required output structure spans seven sections from context and tokens through anti-patterns and a code-review QA checklist. Developers reach for enterprise when scaffolding admin consoles, data-dense tables, role-aware navigation, or audit-friendly forms that must feel reliable to B2B SaaS buyers without improvising tokens ad hoc.

  • Dense data tables
  • Role-based navigation
  • Conservative enterprise palette
  • Multi-step form wizards
  • Audit-friendly status patterns

Enterprise by the numbers

  • 481 all-time installs (skills.sh)
  • Ranked #605 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/bergside/awesome-design-skills --skill enterprise

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs481
repo stars2.2k
Last updatedJune 28, 2026
Repositorybergside/awesome-design-skills

How do you design enterprise B2B SaaS dashboards?

Implement enterprise-grade UI—dense tables, role-aware nav, audit-friendly forms, and conservative branding—for B2B SaaS buyers expecting reliability, compliance, and power-user efficiency.

Who is it for?

Developers and designers building dark-themed B2B SaaS admin dashboards who need token-anchored, WCAG 2.2 AA design-system documentation.

Skip if: Developers who need sci-fi glow aesthetics, mobile consumer apps, or backend API design without UI system guidelines.

When should I use this skill?

The user needs enterprise-grade dense tables, role-aware navigation, audit-friendly forms, or cloud-platform dashboard design tokens.

What you get

Design-system guidance with semantic tokens, component anatomy rules, accessibility criteria, anti-patterns, and a code-review QA checklist.

  • Design token definitions
  • Component state specifications
  • Accessibility QA checklist

By the numbers

  • Typography scale uses 6 sizes: 12/14/16/20/24/32
  • Specifies 8pt baseline spacing grid
  • Required output structure contains 7 documented sections

Files

SKILL.mdMarkdownGitHub ↗

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

Everything you need – data, apps, and AI in an intuitive drag and drop interface to automate your workflows.

Style Foundations

  • Visual style: clean, high-contrast, enterprise
  • Typography scale: desktop-first expressive scale | Fonts: primary=Ubuntu, display=Oswald, mono=Ubuntu Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
  • Color palette: primary, success, warning, danger | Tokens: primary=#072C2C, secondary=#FF5F03, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#EDEADE, text=#111827
  • Spacing scale: comfortable density mode
  • patterns
  • images

Accessibility

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

Writing Tone

confident, helpful, friendly, professional

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

Related skills

How it compares

Pick enterprise for dark B2B SaaS dashboard tokens and dense data hierarchy rather than the futuristic skill's sci-fi light-theme aesthetic.

FAQ

What typography does the enterprise skill use?

The enterprise skill specifies IBM Plex Sans at scales 12/14/16/20/24/32 with weights 100–900 for primary, display, and mono roles on dark cloud-platform dashboards.

What accessibility standard does enterprise target?

The enterprise skill requires WCAG 2.2 AA compliance with keyboard-first interactions, visible focus states, semantic HTML, screen-reader labels, reduced-motion support, and 44px minimum touch targets.

What output structure does enterprise require?

The enterprise skill mandates seven sections: context and goals, design tokens, component rules, accessibility criteria, content tone, anti-patterns, and a QA checklist executable during code review.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.