skills.rest
MoisesAldas
MoisesAldasCOMMUNITY
Explore all skills by this author →
GitHub

industrial-premium-design

...

1|Updated Mar 17, 2026
Search Tags:#typography#design#accessibility#tailwind#design-system#color-palette#ui-guidelines
One-click install
npx skills add https://github.com/MoisesAldas/OficiosYA --skill industrial-premium-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-premium-design
Source: https://github.com/MoisesAldas/OficiosYA/tree/main/.agents/industrial-premium-design
Command: npx skills add https://github.com/MoisesAldas/OficiosYA --skill industrial-premium-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The design guidelines provide a consistent visual identity for OficiosYa, reducing design drift and speeding up UI decisions.

Core Features & Use Cases

  • Visual Identity: Color palettes, typography, and component patterns to enforce brand consistency.
  • Reusable Patterns: Glass panels, overlapping cards, and banner cards for common screens.
  • Implementation Guidance: Tailwind utility usage, accessibility considerations, and design-to-code handoff.

Quick Start

Apply the Industrial Premium guidelines to a new screen by selecting the amber palette, slate surfaces, and glass components to ensure visual consistency.

Frequently Asked Questions about industrial-premium-design

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

FAQPage Schema
How do I create a consistent dark-industrial UI design system using Tailwind?▼

To create a dark-industrial UI design system, standardize visual language by defining amber color palettes, slate surfaces, typography, spacing, and reusable patterns like glass panels and overlapping cards using Tailwind utility classes.

What is the best way to prevent design drift across mobile UI screens?▼

The best way to prevent design drift is by enforcing front-end consistency through defined design tokens for color, typography, and spacing, alongside standardized component patterns like glass panels for all mobile screens.

How do I apply accessibility considerations and color palettes to UI components?▼

Apply accessibility considerations to UI components by enforcing contrast rules within your selected amber color palette, utilizing defined design tokens, and following established UI guidelines for consistent pattern usage.

Does the industrial design system include reusable patterns for mobile screens?▼

Yes, the industrial design system includes reusable patterns specifically for mobile screens, featuring amber and slate glass panels, overlapping cards, and banner cards to accelerate and standardize UI decisions.

Can I use these UI guidelines for design-to-code handoff with existing Tailwind projects?▼

Yes, you can use these UI guidelines for design-to-code handoff with existing Tailwind projects, as they provide specific Tailwind utility usage guidance and design tokens to bridge design and development.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
derekhu0002derekhu0002

liquid-glass-design

Implement Liquid Glass UI patterns across SwiftUI, UIKit, and WidgetKit.

Community
Advanced
baotoqbaotoq

design-web-guidelines

Review UI code for compliance with Web Interface Guidelines.

Community
Basic
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate