Can I customize the themes?

Yes, the system uses semantic CSS variables for brand colors and supports both light and dark mode out of the box.

What frameworks are supported?

This skill specifically generates code for React 18+ environments using Tailwind CSS for styling.

What is the Backstage Design System?

It is a design language optimized for developer tools and internal applications, focusing on clarity, consistency, and professional aesthetics.

Is the generated code type-safe?

Absolutely. The skill generates TypeScript code with strict typing and uses CVA for type-safe component variants.

Does this skill support accessibility?

Yes, it uses Radix UI primitives and ARIA patterns to ensure all generated components meet high accessibility standards.

Backstage Web Design System Generator

Name: Backstage Web Design System Generator
Author: kuse-ai

bykuse-ai

0•

デザインツール

Generates enterprise-grade, accessibility-first web applications and admin dashboards using the Backstage Design System, Radix UI, and Tailwind CSS.

This skill empowers developers to scaffold high-quality internal tools and developer portals with a consistent, professional aesthetic. It leverages a modern tech stack—including React 18, TypeScript, and Radix UI primitives—to produce responsive, themeable, and WCAG-compliant interfaces. By implementing standardized patterns like compound components, variant-based styling with CVA, and robust form handling with Zod, it ensures that generated code is not only beautiful but also maintainable and scalable for enterprise environments.

主な機能

01Built-in Dark and Light mode support with semantic color tokens

02Accessible-first design patterns with full ARIA support

030 GitHub stars

04Comprehensive UI library based on Radix UI and Tailwind CSS

05Type-safe component variants using Class Variance Authority (CVA)

06Responsive sidebar and layout configurations for mobile and desktop

ユースケース

01Building internal developer portals and service catalogs

02Creating professional admin dashboards and data management tools

03Rapidly prototyping enterprise-grade SaaS interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kuse-ai/kuse-skills backstage-style-web

For use in Claude.ai and ChatGPT

Download Skill