skills.rest
alaminmain
alaminmainCOMMUNITY
Explore all skills by this author →
𝕏@alaminmainGitHub

frontend-design

Guide frontend design decisions using principles-based frameworks for color, typography, and UX.

Updated Dec 22, 2025
Search Tags:#typography#design#frontend-design#design-thinking#color-system#web UI#ux-principles
One-click install
npx skills add https://github.com/alaminmain/DoorAuthServer --skill frontend-design-alaminmain
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/alaminmain/DoorAuthServer/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/alaminmain/DoorAuthServer --skill frontend-design-alaminmain

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill guides frontend design decisions by teaching principled thinking rather than fixed values.

Core Features & Use Cases

  • Principles-based guidance for color, typography, layout, and UX psychology.
  • Decision frameworks and reference materials to inform design decisions across components, grids, and interactions.
  • Real-world scenario: design a dashboard UI with clear visual hierarchy and accessible color contrast.

Quick Start

Run a quick review of your UI by reading ux-psychology.md, color-system.md, and typography-system.md; then apply these guidelines to your current project.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a consistent color system for web UI dashboards?▼

To build a consistent color system for web UI, apply principled design frameworks that enforce accessible color contrast rules and reference materials rather than relying on fixed values.

What are the key UX psychology principles for effective frontend design?▼

Key UX psychology principles for frontend design guide user interactions and visual hierarchy across web apps and marketing sites, ensuring interfaces remain accessible and consistent through established rules.

How do I establish visual hierarchy and typography rules for a web app?▼

Establish visual hierarchy and typography rules for a web app by applying decision frameworks and reference files that enforce consistent, accessible font systems across all components and layouts.

Can I apply design-thinking frameworks to existing marketing site components?▼

Yes, you can apply design-thinking frameworks to existing marketing site components by reviewing reference guidelines for UX psychology, color, and typography, then enforcing those rules across your layouts.

Does this frontend design approach work without fixed styling values?▼

This frontend design approach works without fixed styling values by teaching principled thinking and providing lightweight scripts alongside reference files to guide consistent, accessible interface decisions.

Related Skills

Explore More Design & Creative Skills→
srivtxsrivtx

popular-web-designs

Provide HTML/CSS templates from real-world design systems.

Community
Basic
DriveConnect-alphaDriveConnect-alpha
1

frontend-design

Apply design thinking frameworks to UI layout, color, typography, and usability audits.

Official
Intermediate
darthlinuxerdarthlinuxer

frontend-design

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

Community
Advanced
softbreezeesoftbreezee

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, and JavaScript.

Community
Advanced