skills.rest
nkabbara
nkabbaraCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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

Related Skills

Explore More Design & Creative Skills→
billydeeii136billydeeii136

ui-styling

Generate UI components using shadcn/ui and Tailwind CSS utility classes.

Community
Intermediate
anouar1991anouar1991
1

responsive-design-tester

Audit web pages across six viewports for responsive design issues.

Community
Advanced
laravellaravel
3.6k

tailwindcss-development

Apply Tailwind CSS v4 utilities for styling and responsive layouts.

Official
Intermediate
v24kuonv24kuon

frontend-design

Generate custom CSS and responsive layouts with intentional design choices.

Community
Advanced