skills.rest
yg2224
yg2224COMMUNITY
Explore all skills by this author →
GitHub

app-shell-ui

Generate macOS-style desktop utility interfaces with dual-theme tokens and component recipes.

30|2|Updated Jul 10, 2026
Search Tags:#ui#frontend#dashboard#component#macos#theme
One-click install
npx skills add https://github.com/yg2224/app-shell-ui --skill app-shell-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: app-shell-ui
Source: https://github.com/yg2224/app-shell-ui/tree/main
Command: npx skills add https://github.com/yg2224/app-shell-ui --skill app-shell-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the problem of inconsistent, low-quality frontend generation by providing a standardized, reusable visual language for desktop-style applications.

Core Features & Use Cases

  • Standardized Chrome: Provides a consistent layout with sidebars, content canvases, and raised cards.
  • Dual-Theme Support: Automatically generates both light and dark mode tokens for a professional, system-integrated look.
  • Use Case: Use this Skill to generate a high-fidelity settings page, a system dashboard, or an AI workbench that feels like a native macOS utility rather than a generic web landing page.

Quick Start

Use the app-shell-ui skill to generate a dark-themed settings page with a left-hand navigation sidebar and a list of toggle switches.

Frequently Asked Questions about app-shell-ui

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

FAQPage Schema
How do I build a macOS-style desktop utility interface for a web dashboard?▼

This Skill standardizes macOS-style desktop utility interface generation by enforcing consistent layouts with sidebars, content canvases, and raised cards for a professional aesthetic.

What is the best way to create a settings page with persistent light and dark theme switching?▼

The best way to create a settings page with light and dark theme switching is using this Skill's dual-theme token system, which automatically generates professional, system-integrated mode tokens.

How do I generate equal-height side-by-side columns for a frontend workbench application?▼

To generate equal-height side-by-side columns for a workbench application, this Skill enforces specific layout recipes that maintain structural consistency across the content canvas.

Can I use this to generate a native macOS settings UI instead of a generic web landing page?▼

Yes, this Skill applies a standardized visual language, stroke-icon-first design, and dual-theme tokens to generate high-fidelity interfaces that feel like native macOS settings pages rather than generic web pages.

Do I need external UI component libraries to build a dashboard with this macOS theme?▼

No, you do not need external UI component libraries to build a dashboard with this macOS theme, as this Skill operates without dependencies and provides built-in component recipes for sidebars and toggles.

Why does my generated frontend dashboard lack a professional and restrained aesthetic?▼

Your generated frontend dashboard may lack a professional aesthetic due to missing standardized visual language; this Skill solves inconsistent generation by enforcing restrained chrome and stroke-icon-first design.

Related Skills

Explore More Design & Creative Skills→
legoutlegout
3

using-streamlit-layouts

Structure Streamlit application interfaces with columns, containers, and sidebars.

Community
Intermediate
ScientiaCapitalScientiaCapital
28

data-analysis

Compute SaaS metrics and generate Streamlit dashboards from ingested data.

Community
Advanced
zaid-khan-codezaid-khan-code
3

shadcn-ui-setup

Set up Shadcn UI components with dark mode in Next.js.

Community
Intermediate
HayatelinHayatelin
3

minimalist-ui

Create editorial minimalism UI designs with typography, restrained color, and quiet motion.

Community
Advanced