enterprise-frontend-design

Automate token-driven design systems for React, Vue, Svelte, and Next.js projects.

Updated Jan 27, 2026
One-click install
npx skills add https://github.com/Brmbobo/Lead-Gen --skill enterprise-frontend-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: enterprise-frontend-design
Source: https://github.com/Brmbobo/Lead-Gen/tree/main/.claude/agents/enterprise-frontend-design
Command: npx skills add https://github.com/Brmbobo/Lead-Gen --skill enterprise-frontend-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides an end-to-end enterprise-grade frontend design system, delivering reusable tokens, theming, accessibility patterns, and production-ready UI foundations to ensure consistency, performance, and scalability.

Core Features & Use Cases

  • W3C design tokens (primitive, semantic, component) with multi-brand theming and Figma variables integration.
  • Accessibility-first design patterns (WCAG 2.2 AA, i18n, RTL, RBAC).
  • Framework-agnostic guidance with React, Vue, Svelte, and Next.js 15 patterns.
  • Design-system-driven component architecture and token-driven styling for scalable products.
  • Use Case: Build a multi-brand admin dashboard with tokens, roles, and internationalization.

Quick Start

Use the enterprise-frontend-design skill to scaffold tokens, theming, and enterprise UI patterns for a new project. Example: user: "Create a multi-brand dashboard with tokens and RBAC".

Frequently Asked Questions about enterprise-frontend-design

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

FAQPage Schema
How do I build a multi-brand design system with W3C design tokens?▼

To build a multi-brand design system with W3C design tokens, you define primitive, semantic, and component tokens, applying them across themes. This approach enables consistent multi-brand theming and integrates with Figma variables for scalable UI foundations.

How do I implement accessibility patterns and RBAC in a frontend design system?▼

Implementing accessibility patterns and RBAC in a frontend design system involves enforcing WCAG 2.2 AA compliance, semantic HTML, and role-based access control. This ensures accessible, secure user interfaces across different roles and internationalization needs.

Does this enterprise frontend design guidance work with Vue and Svelte?▼

Yes, this enterprise frontend design guidance works with Vue and Svelte. It provides framework-agnostic guidance with specific patterns for React, Vue, Svelte, and Next.js 15, ensuring token-driven styling and component architecture across multiple frameworks.

What is the best way to scaffold tokens and internationalization for an enterprise dashboard?▼

The best way to scaffold tokens and internationalization for an enterprise dashboard is to automate token creation, apply W3C design tokens, and integrate i18n with RTL support. This creates a scalable, multi-brand admin dashboard with accessible UI patterns.

How do design tokens enforce performance budgets in frontend applications?▼

Design tokens enforce performance budgets in frontend applications by standardizing primitive, semantic, and component-level styling values. This token-driven architecture ensures consistent rendering, reduces style bloat, and maintains strict performance budgets across React and Vue projects.