skills.rest
dthompsonfl
dthompsonflCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/dthompsonfl/crispy-fishstick --skill ui-design-system-dthompsonfl
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
yusifengyusifeng
192

formax-web-style-system

Apply token-based desktop web styling to harmonize frontend visuals.

Community
Advanced
augustoheissaugustoheiss

agency-ui-designer

Create tokenized UI design systems with WCAG AA accessibility and developer handoff packages.

Community
Advanced
pelcherspelchers

ensuring-accessibility

Implement WCAG 2.1 AA-compliant accessibility patterns for web interfaces.

Community
Advanced
pengelbrechtpengelbrecht
6

frontend-design

Design production-grade frontend interfaces with cohesive typography, theming tokens, and accessibility.

Community
Advanced