Does it support dark mode?

Yes, it includes full support for dark and light themes out of the box using CSS variables and semantic design tokens.

What design system does this skill use?

It uses the Backstage Design System, a standard for developer portals, built on Radix UI and Tailwind CSS for highly accessible, enterprise-grade interfaces.

Can I build mobile-responsive dashboards with this?

Yes, the skill follows a mobile-first responsive strategy, including adaptive sidebar patterns and grid systems that work across all device sizes.

Is the generated code type-safe?

Absolutely. The skill generates TypeScript code using strict typing and Class Variance Authority (CVA) for type-safe component variants.

Which form library is integrated?

It comes pre-integrated with React Hook Form and Zod for robust, type-safe form validation and management.

Backstage Web Generator

Name: Backstage Web Generator
Author: kuse-ai

bykuse-ai

•

デザインツール

Generates enterprise-grade, accessible web applications and dashboards following the Backstage Design System principles.

This skill enables developers to quickly scaffold professional internal tools, developer portals, and admin dashboards using the Backstage Design System. It automates the creation of React components integrated with Tailwind CSS and Radix UI, ensuring accessibility, dual-theme support, and a consistent design language. By leveraging patterns like compound components and type-safe variants, it reduces the friction of building complex, data-heavy enterprise interfaces while maintaining high standards for mobile responsiveness and performance. It is ideal for teams needing to build standardized developer tooling or internal management consoles with a polished, professional look.

主な機能

01Fully accessible UI components powered by Radix UI primitives.

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

03Comprehensive form architecture with React Hook Form and Zod validation.

041 GitHub stars

05Enterprise React scaffolding with TypeScript and React 18+.

06Built-in dark and light mode support with semantic color tokens.

ユースケース

01Building internal developer portals and administrative dashboards.

02Rapidly prototyping accessible, themeable React applications with a consistent design system.

03Creating data-rich management interfaces for enterprise software-as-a-service.

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