skills.rest
BenWork17
BenWork17COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Identify UI design direction using front-end design guidelines for web interfaces.

Updated Jan 12, 2026
Search Tags:#typography#accessibility#design-principles#ui-design#ux#frontend-design#color-system
One-click install
npx skills add https://github.com/BenWork17/VeXeViet --skill frontend-design-benwork17
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/BenWork17/VeXeViet/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/BenWork17/VeXeViet --skill frontend-design-benwork17

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design decisions are often inconsistent and time-consuming; this Skill provides a principled framework to guide UI decisions across components, layouts, color, and typography.

Core Features & Use Cases

  • Design-thinking guidance for UI components, layouts, color schemes, and typography.
  • Embedded references to UX psychology, color systems, typography, and visual effects to inform decisions.
  • Optional scripts for UX audits that help validate design decisions against accessibility and usability standards.

Quick Start

Create a cohesive frontend design concept for a new web app by applying the design principles outlined in this Skill.

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 cohesive frontend design for a new web app?▼

To create a cohesive frontend design, apply principled guidelines for component layout, color schemes, and typography. This ensures your web interface aligns with brand goals while maintaining visual consistency across all UI elements.

What principles should guide UI color and typography decisions?▼

UI color and typography decisions should be guided by modular scale, contrast, and visual rules. Referencing established color systems and typography frameworks ensures accessible, readable, and visually balanced web interfaces.

How do I ensure accessibility compliance in my web interface design?▼

Ensure accessibility compliance by validating design decisions against usability standards through UX audits. Applying contrast rules and typography guidelines helps meet accessibility requirements for web interfaces.

Can I use this approach for existing component layouts, or is it only for new web apps?▼

You can apply these design principles to both existing component layouts and new web apps. The framework guides UI decisions across layouts, color schemes, and typography to improve consistency at any project stage.

What is the best way to align frontend UI decisions with brand goals?▼

The best way to align UI decisions with brand goals is applying a principled design framework. This scopes component layout, color systems, and typography to match your brand identity for web interfaces.

Why does my web interface design look inconsistent across components?▼

Your web interface design looks inconsistent because it lacks a principled framework. Applying structured guidelines for color, typography, and visual effects resolves these inconsistencies and speeds up UI decisions.

Related Skills

Explore More Design & Creative Skills→
tsunami28tsunami28

elaboration-upsert-prd-document

Create Product Requirements Documents with goals, scope, and success criteria.

Community
Advanced
zacjones93zacjones93

design

Assess UI/UX design problems across screens, layouts, typography, and accessibility.

Community
Basic
mklozmkloz

animation-designer

Automate web animations, transitions, and motion designs with Framer Motion and CSS.

Community
Advanced
manutejmanutej
61

ux-principles

Codify UX principles for designing and evaluating user-centered interfaces.

Community
Advanced