skills.rest
barbosakjn
barbosakjnCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Apply structured design thinking to unify web UI decisions across components, layouts, color, and typography.

1|Updated Dec 28, 2025
Search Tags:#typography#accessibility#design-systems#web-ui#design-thinking#color-system#ux-principles
One-click install
npx skills add https://github.com/barbosakjn/finance-app --skill frontend-design-barbosakjn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/barbosakjn/finance-app/tree/main/.agent/workflows/.agent/skills/frontend-design
Command: npx skills add https://github.com/barbosakjn/finance-app --skill frontend-design-barbosakjn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle with inconsistent UI outcomes and fragmented decision making; this Skill provides a structured framework of design-thinking and decision-making for web UI to unify approach across components, layouts, color, and typography.

Core Features & Use Cases

  • Principled decision-making: Apply design-thinking, decision trees, and context-driven guidelines to components, layouts, color systems, and typography.
  • Context-driven templates: Provides decision trees, layout guidelines, and typography/color frameworks that adapt to product context (SaaS dashboards, landing pages, e-commerce).
  • Educational focus: Emphasizes principles over fixed values to empower teams to tailor UI to their brand.

Quick Start

Provide a project brief and ask for a principled web UI plan, including the problem, goals, and a single prompt to generate a cohesive design direction.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I fix inconsistent web UI decisions across design teams?▼

Fix inconsistent web UI decisions by applying structured design thinking and decision trees. This framework unifies approaches across components, layouts, color systems, and typography to resolve fragmented design outcomes.

What UX principles should I follow when planning a web UI layout?▼

Plan web UI layouts by adhering to core UX laws like Hick's and Fitts', managing cognitive load, and applying trust-building practices. These principles guide component design and layout planning for effective interfaces.

How do I create a color and typography system that adapts to different product contexts?▼

Create adaptive color and typography systems by using context-driven frameworks and decision trees tailored to your product context, such as SaaS dashboards, landing pages, or e-commerce platforms.

Does this web UI design approach provide fixed values or design principles?▼

This web UI approach provides design principles rather than fixed values. It emphasizes an educational focus to empower teams to tailor typography, color systems, and components to their specific brand needs.

How do I start building a cohesive web UI design direction from a project brief?▼

Start a cohesive web UI design direction by providing a project brief with the problem and goals. The framework generates a principled plan spanning layout, color, typography, and accessibility.

When should I consider ethical persuasive design in web UI?▼

Consider ethical persuasive design in web UI when structuring component decisions and user flows. The framework integrates ethical considerations alongside accessibility and cognitive load management to build user trust.

Related Skills

Explore More Design & Creative Skills→
richardaumrichardaum

design-brief

Generate markdown design briefs from codebase analysis and user input.

Community
Intermediate
acastillo9acastillo9

frontend-design

Generate production-grade frontend interfaces with unique aesthetic directions.

Community
Advanced
freekmurzefreekmurze
997

frontend-design

Guide frontend development with typography, color, motion, and layout guidelines.

Community
Advanced
Mohamed-ElkahefMohamed-Elkahef

frontend-enhancer

Enhance Next.js frontends with pre-built UI components and design system resources.

Community
Intermediate