ui-design-system

Define and enforce a reusable UI design system for web interfaces.

Updated Dec 26, 2025

Search Tags:#typography #accessibility #aesthetic #ui-design #design-system #motion

Ready to run

npx skills add https://github.com/dthompsonfl/crispy-fishstick --skill ui-design-system-dthompsonfl

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/dthompsonfl/crispy-fishstick/tree/main/.agent/skills/ui-design-system
Command: npx skills add https://github.com/dthompsonfl/crispy-fishstick --skill ui-design-system-dthompsonfl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This design system provides a centralized, reusable UI language to ensure visual precision, accessibility, and consistency across all components.

Core Features & Use Cases

Establishes a consistent visual language with 1px borders, glass effects, and JetBrains Mono typography for technical content.
Enables rapid UI composition by composing atomic components from a shared design system, while maintaining accessibility and performance.
Use Case: Designers and developers implement cohesive dashboards and admin interfaces with predictable theming and motion behavior.

Quick Start

Apply the Engineered Hardware design system to new components by ensuring 1px borders, glass effects, JetBrains Mono typography for technical data, and accessible focus states.

Frequently Asked Questions about ui-design-system

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

FAQPage Schema

How do I establish a consistent UI design system for web interfaces?▼

A UI design system establishes visual consistency by defining reusable rules for typography, motion, and accessibility. This system provides a centralized UI language with 1px borders, glass effects, and JetBrains Mono to ensure predictable theming across components.

What's the best way to enforce WCAG-compliant contrast and accessibility in frontend development?▼

Enforce WCAG-compliant contrast and accessibility by applying a design system blueprint that includes inclusive motion guidelines and accessible focus states. This ensures UI components meet accessibility standards while maintaining aesthetic precision across web interfaces.

Can I use this design system for component library integration in admin dashboards?▼

Yes, this design system supports component library integration for cohesive dashboards and admin interfaces. It enables rapid UI composition by combining atomic components from a shared design system while maintaining accessibility and performance.

How do I apply glass aesthetics and precise typography to new UI components?▼

Apply glass aesthetics and precise typography by ensuring 1px borders, glass effects, and JetBrains Mono typography for technical data. This design system drives visual consistency and provides accessible focus states for new component implementation.

Does this UI design system require specific dependencies or frameworks to function?▼

No specific dependencies or frameworks are required to implement this UI design system. It functions as a standalone blueprint providing reusable UI language rules for visual precision, motion behavior, and accessibility across any frontend development task.

Why does my frontend UI lack visual consistency across different components?▼

Frontend UI lacks visual consistency when there is no centralized design system enforcing shared rules. Implementing a reusable UI language with standardized typography, 1px borders, and motion guidelines ensures predictable theming and visual precision across all components.