skills.rest
gelsonsimoes
gelsonsimoesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Apply design-thinking principles to frontend UI components with color, typography, and accessibility patterns.

Updated Feb 22, 2026
Search Tags:#typography#accessibility#design-principles#frontend-design#color-system#ux-psychology
One-click install
npx skills add https://github.com/gelsonsimoes/wms-verticalparts --skill frontend-design-gelsonsimoes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/gelsonsimoes/wms-verticalparts/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/gelsonsimoes/wms-verticalparts --skill frontend-design-gelsonsimoes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Frontend design decisions are often inconsistent and time-consuming; this skill provides a principled framework to guide color, typography, layout, and accessibility across projects.

Core Features & Use Cases

  • Principled decision-making across color systems, typography, visual effects, and accessibility.
  • Design system development: scalable components, tokens, and guidelines for consistency.
  • UX psychology integration: apply core laws (Hick's Law, Fitts' Law, Miller's Law) and Don Norman's emotional design levels to inform interactions and branding.
  • Use cases include new product interfaces, redesigns, audits, and design-system rollouts.

Quick Start

Provide a concise project brief and context, and I'll generate a tailored frontend design plan.

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 frontend design system for web UI?▼

To create a consistent frontend design system, apply design-thinking principles to standardize scalable components, design tokens, and guidelines. This framework ensures consistency across color systems, typography, and accessibility patterns throughout your web interfaces.

What UX psychology principles should I apply to web interface design?▼

Apply core UX psychology principles like Hick's Law, Fitts's Law, and Miller's Law to inform interaction patterns. Integrating Don Norman's emotional design levels also guides branding and user interaction decisions across web interfaces.

How do I build an accessible color system and typography scale for dashboards?▼

Build accessible color systems and typography scales for dashboards by applying principled decision-making frameworks. This approach ensures proper contrast, readable visual effects, and consistent accessibility patterns across complex data interfaces.

Can I use design-thinking principles to audit an existing product interface?▼

Yes, design-thinking principles can audit existing product interfaces by evaluating current color systems, typography, and accessibility patterns. This identifies inconsistencies and generates a tailored redesign plan for improved UX.

What's the best way to standardize visual effects and accessibility patterns across marketing pages?▼

The best way to standardize visual effects and accessibility patterns is through a design-system approach. This method applies consistent guidelines and scalable components across marketing pages to ensure unified branding and compliance.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

impeccable

Guide design briefs and build production-grade frontend interfaces with UI/UX.

Community
Advanced
trielofftrieloff

frontend-design

Design and implement production-ready frontend interfaces with design tokens.

Community
Advanced
timequitytimequity
6

frontend-design

Design production-grade frontend interfaces with bold aesthetic direction.

Official
Advanced
darthlinuxerdarthlinuxer

frontend-design

Apply frontend design thinking to audit Web UI color, typography, layout, and UX psychology.

Community
Advanced