frontend-design

Coordinate frontend design decisions for consistent, accessible UI.

Updated Jan 29, 2026
One-click install
npx skills add https://github.com/rahlplx/New-Smile-Savers --skill frontend-design-rahlplx
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/rahlplx/New-Smile-Savers/tree/main/smile-savers-site/.agent/skills/frontend-design
Command: npx skills add https://github.com/rahlplx/New-Smile-Savers --skill frontend-design-rahlplx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web design decisions are often inconsistent and time-consuming; this guide provides a principled framework to guide decision-making in UI design to achieve cohesive, accessible interfaces across components, layouts, color systems, and typography.

Core Features & Use Cases

  • Principled decision-making: Apply core design principles to color, typography, spacing, layout, and UX psychology.
  • Design system alignment: Ensure consistency across components and pages by following shared guidelines and decision trees.
  • Accessibility & usability: Prioritize accessible patterns and predictable behavior to improve usability for all users.

Quick Start

Describe a design direction for a web UI component (e.g., login form) using the outlined design principles.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a consistent web UI design system for components and layouts?

You coordinate frontend design decisions by applying explicit principles to components, layouts, color systems, and typography. This framework ensures consistent, accessible UI and design-system alignment through practical checklists and predictable patterns.

What principles guide accessible color and typography choices in frontend design?

Accessible color and typography choices are guided by core design principles and UX psychology. Prioritizing accessible patterns and predictable behavior improves usability for all users and ensures accessibility compliance across the interface.

How do I apply UX psychology to real-world frontend design projects?

You apply UX psychology to frontend design projects by integrating psychological principles into layout and component decisions. This framework uses practical checklists to ensure design choices result in predictable behavior and improved usability.

What is the best way to ensure design-system alignment across multiple web pages?

The best way to ensure design-system alignment is to follow shared guidelines and decision trees for spacing, typography, and color. This approach maintains consistency across components and pages by applying explicit design principles.

When should I use a principled framework for frontend design decisions?

You should use a principled framework for frontend design decisions when web design becomes inconsistent and time-consuming. It provides a structured approach to achieve cohesive, accessible interfaces across color systems, typography, and layouts.