skills.rest
dmcguire80
dmcguire80COMMUNITY
Explore all skills by this author →
GitHub

Web UI Design System

Design reusable dark-first UI systems with glassy components for web dashboards.

Updated Aug 23, 2026
Search Tags:#accessibility#glassmorphism#design-system#dark-mode#frontend-design#component-library#UI-patterns
One-click install
npx skills add https://github.com/dmcguire80/The-Forge --skill web-ui-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Web UI Design System
Source: https://github.com/dmcguire80/The-Forge/tree/main/skills/web-ui-design-system
Command: npx skills add https://github.com/dmcguire80/The-Forge --skill web-ui-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This design system provides a single, reusable set of UI tokens, patterns, and components for Bill Tracking and similar apps, ensuring a cohesive look and faster delivery.

Core Features & Use Cases

  • Dark-first design with glassmorphism and strong contrast for readability across devices.
  • Component patterns including cards, buttons, inputs, modals, and forms that enforce consistency.
  • Layout and typography tokens for responsive, accessible interfaces across apps and dashboards.
  • Use Case: Rapidly bootstrap a new dashboard with a unified theme for a bill-tracking application.

Quick Start

Copy the color tokens and component patterns into your project, apply the provided CSS variables, and start building UI components that adhere to the design system.

Frequently Asked Questions about Web UI Design System

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

FAQPage Schema
How do I design a dark mode UI system with glassmorphism for web dashboards?▼

To design a dark mode UI system with glassmorphism, adopt a reusable set of color tokens, typography scales, and component patterns to build cohesive, responsive web dashboard interfaces.

What are the essential UI component patterns for a bill tracking application dashboard?▼

Essential UI component patterns for a bill tracking dashboard include cards, buttons, inputs, modals, and forms, which enforce visual consistency and strong contrast across different screens and devices.

Can I use these glassmorphism design tokens to build responsive and accessible web interfaces?▼

Yes, you can use these glassmorphism design tokens to build accessible web interfaces by applying the provided CSS variables and typography scales to ensure strong contrast and readability across devices.

What is the best way to bootstrap a new frontend design system for a bill tracking app?▼

The best way to bootstrap a frontend design system for a bill tracking app is to copy the provided color tokens and component patterns into your project and apply the CSS variables to start building UI components.

Does this dark-first component library support accessibility requirements for web apps?▼

Yes, this dark-first component library supports accessibility requirements by enforcing strong contrast and readable typography scales within its UI patterns, ensuring accessible interfaces across various screens and devices.

Related Skills

Explore More Design & Creative Skills→
blockmatic-iceboxblockmatic-icebox
4

Tailwind v4 + shadcn/ui

Convert Tailwind v4 design tokens into a CSS-variable theming system for React apps.

Official
Advanced
dankoflydankofly

tailwind-patterns

Provide Tailwind CSS component patterns for responsive layouts and dark mode.

Community
Advanced
involvexinvolvex

frontend-ui-dark-ts

Develop dark-themed React applications with Tailwind CSS, Framer Motion, and Vite.

Community
Intermediate
AI-Foundry-CoreAI-Foundry-Core
4

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 design tokens and CVA components.

Official
Advanced