Web UI Design System
CommunityCohesive dark UI system with glassmorphism.
Design & Creative#accessibility#glassmorphism#design-system#dark-mode#frontend-design#component-library#UI-patterns
Authordmcguire80
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: Web UI Design System Download link: https://github.com/dmcguire80/The-Forge/archive/main.zip#web-ui-design-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.