design

Apply ui.sh design guidelines to web projects using Tailwind CSS.

Updated Jan 29, 2026

Search Tags:#responsive design #Tailwind CSS #ui design #ui development #design guidelines

Ready to run

npx skills add https://github.com/nkabbara/dotfiles --skill design-nkabbara

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design
Source: https://github.com/nkabbara/dotfiles/tree/main/exact_dot_agents/exact_skills/exact_ui.sh/exact_design
Command: npx skills add https://github.com/nkabbara/dotfiles --skill design-nkabbara

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation of UIs by adhering to a comprehensive design guideline system, reducing design inconsistencies and speeding up development.

Core Features & Use Cases

Design Consistency: Follows a standardized set of UI design guidelines for consistent user experience across platforms.
Responsive Design: Ensures UI adaptability from mobile to desktop, with responsive breakpoint classes and container queries.
Component Reusability: Provides a repository of reusable UI components and assets to speed up development.
Use Case: When building a new feature or product page, this Skill can help create UI elements that are visually consistent and easy to use.

Quick Start

Use the design skill to apply the UI design guidelines to the new feature page 'feature.html'.

Frequently Asked Questions about design

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

FAQPage Schema

How do I maintain UI design consistency across responsive web platforms?▼

To maintain UI design consistency, apply a standardized design guideline system using Tailwind CSS and responsive breakpoint classes. This ensures uniform user experiences across mobile and desktop platforms while reducing design inconsistencies during web development.

What is the best way to create reusable UI components with Tailwind CSS?▼

The best way to create reusable UI components is using a standardized UI design guideline system that provides a repository of assets. This approach speeds up development by leveraging Tailwind CSS principles and responsive design patterns for consistent component reusability.

How do I apply design guidelines to a new feature page using Tailwind CSS?▼

To apply design guidelines to a new feature page, implement the ui.sh design system rules using Tailwind CSS. This involves applying responsive breakpoint classes and container queries to ensure the feature page is visually consistent and adaptable across platforms.

Do I need to know responsive design patterns to use a UI component library?▼

Yes, you need prior knowledge of responsive design patterns and UI component libraries. Implementing standardized UI design guidelines requires understanding how to apply responsive breakpoints and container queries effectively to ensure cross-platform adaptability.

When do I need container queries for responsive UI development?▼

You need container queries for responsive UI development when building features or product pages that must adapt to different parent container sizes rather than just viewport widths. This ensures UI adaptability and consistent user experience from mobile to desktop platforms.