skills.rest
daniel-heydari-dev
daniel-heydari-devCOMMUNITY
Explore all skills by this author →
GitHub

interface-design

Enforce UI design standards for spacing, color, typography, and responsive patterns.

Updated Feb 11, 2026
Search Tags:#design#ui#frontend#components#styling#ux
One-click install
npx skills add https://github.com/daniel-heydari-dev/personal-ai-skills --skill interface-design-daniel-heydari-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interface-design
Source: https://github.com/daniel-heydari-dev/personal-ai-skills/tree/main/templates/skills/interface-design
Command: npx skills add https://github.com/daniel-heydari-dev/personal-ai-skills --skill interface-design-daniel-heydari-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of creating generic, inconsistent user interfaces by providing a structured approach to modern UI design, ensuring visual consistency, and improving user experience.

Core Features & Use Cases

  • Design Principles: Enforces rules for visual hierarchy, spacing, color, and typography.
  • Component Architecture: Guides the use of patterns like Atomic Design for modularity.
  • Responsive Design: Provides strategies and examples for building adaptable interfaces across devices.
  • Use Case: When building a new SaaS dashboard, use this Skill to establish a consistent design language, ensuring all components from buttons to forms adhere to defined spacing, color, and typography rules, leading to a professional and cohesive user experience.

Quick Start

Apply the interface design skill to establish a 8px grid system and semantic color palette for the project.

Frequently Asked Questions about interface-design

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

FAQPage Schema
How do I establish a consistent spacing and typography system for frontend UI design?▼

Establish a consistent frontend UI design system by applying an 8px grid system and defining semantic color palettes. This enforces standardized visual hierarchy, spacing, and typography rules across all components for a cohesive user experience.

What is the best way to structure component architecture for a SaaS dashboard?▼

The best way to structure component architecture for a SaaS dashboard is using Atomic Design patterns for modularity. This approach ensures visual consistency and adherence to defined design principles across all UI elements.

How does dark mode implementation work with semantic color palettes?▼

Dark mode implementation works by defining semantic color palettes that map to interaction states. This ensures visual consistency and accessibility standards are maintained when switching between light and dark UI themes.

Can I use these UI design guidelines for responsive design across different devices?▼

Yes, these UI design guidelines provide specific strategies and examples for building adaptable responsive interfaces across devices. They enforce standards for accessibility, interaction states, and visual hierarchy in frontend development.

Why does my user interface look inconsistent and generic?▼

Your user interface looks inconsistent and generic when lacking a structured approach to modern UI design. Establishing defined spacing systems, color palettes, and typography rules ensures visual consistency and improves user experience.

Related Skills

Explore More Design & Creative Skills→
julianromlijulianromli
182

make-interfaces-feel-better

Apply structured design principles to align UI polish and consistency.

Community
Advanced
ArnavPuriArnavPuri
3

ui-design

Generate UI components and styles using atomic design and Tailwind CSS.

Community
Advanced
ihlamuryihlamury
73

hugging-face-ui-skills

Enforce Hugging Face design constraints for dark mode, Inter font, and 4px grid.

Community
Intermediate
projectedanxprojectedanx
1

design-md

Manage design tokens and component specifications in machine-readable DESIGN.md files.

Community
Intermediate