skills.rest
pratikrath126
pratikrath126COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide frontend design decisions with UX psychology, typography, and color theory.

42|3|Updated Feb 13, 2026
Search Tags:#typography#accessibility#ui-design#design-system#design-thinking#color-system#ux psychology
One-click install
npx skills add https://github.com/pratikrath126/ai-image-detector --skill frontend-design-pratikrath126
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/pratikrath126/ai-image-detector/tree/main/.agent/kit-skills/frontend-design
Command: npx skills add https://github.com/pratikrath126/ai-image-detector --skill frontend-design-pratikrath126

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides a structured approach to designing web user interfaces by applying design-thinking, UX psychology, typography, color theory, and visual systems to decisions rather than following trendy visuals.

Core Features & Use Cases

  • Thoughtful UI decision framework for components, layouts, and interactions based on fundamental design principles.
  • Color, typography, and accessibility guidance to create cohesive, inclusive interfaces across a range of projects.
  • Design-system alignment: ensures consistency, reusability, and scalable patterns across teams.

Quick Start

Begin by examining the UX psychology and typography resources in the provided guides and start applying them to your current UI task.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I apply UX psychology to UI components and layouts?▼

Build a cohesive color system for web interfaces by applying structured color theory alongside accessibility guidance. This ensures inclusive visual designs that maintain consistency and scalability across real-world frontend workflows.

How do I align my typography decisions with a design system?▼

Align typography with a design system by following established typography resources and visual system rules. This ensures text scalability, structural consistency, and reusability across UI components and team workflows.

What is the best way to structure frontend design decisions for accessibility?▼

Structure frontend design decisions for accessibility by integrating inclusive color and typography checks into your design-thinking workflow. This approach systematically addresses accessibility considerations alongside visual layout planning.

Can I ensure design-system alignment when building new web layouts?▼

Yes, you can ensure design-system alignment by applying structured reasoning to UI components and layouts. This enforces consistency, reusability, and scalable patterns across your web projects and team workflows.

Why does my UI design lack cohesion across different components?▼

Your UI design lacks cohesion because decisions are likely based on trendy visuals rather than fundamental principles. Applying structured UX psychology, color theory, and typography rules creates cohesive, inclusive interfaces.

Related Skills

Explore More Design & Creative Skills→
wshobsonwshobson
38.6k

visual-design-foundations

Apply typography, color, spacing, and iconography principles to create design tokens and style guides.

Community
Intermediate
DayMoonDevelopmentDayMoonDevelopment
68

frontend-design

Design and implement bold frontend interfaces across React and HTML/CSS.

Official
Advanced
beemanbeeman
12

web-design-guidelines

Evaluate web UI components against Web Interface Guidelines for compliance.

Community
Intermediate
shirulotshirulot

ui-design

Define visual systems, color palettes, typography scales, and layout patterns for web UI.

Community
Advanced