skills.rest
Oscar-Ivan-Salas
Oscar-Ivan-SalasCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide web UI design decisions using design-thinking frameworks and reusable patterns.

Updated Jan 27, 2026
Search Tags:#typography#frontend#color#design-principles#ui-design#ux#design-system
One-click install
npx skills add https://github.com/Oscar-Ivan-Salas/PILi_Quarts_Doc --skill frontend-design-oscar-ivan-salas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Oscar-Ivan-Salas/PILi_Quarts_Doc/tree/main/PILi_Quarts_V3.0/.agent/skills/frontend-design
Command: npx skills add https://github.com/Oscar-Ivan-Salas/PILi_Quarts_Doc --skill frontend-design-oscar-ivan-salas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Applies design-thinking principles to web UI design to improve usability, aesthetics, and consistency by guiding decision-making rather than relying on memorized values.

Core Features & Use Cases

  • Design-thinking framework for web UI decisions (components, layouts, color, typography, aesthetics)
  • Reusable patterns and governance that scale across projects and brands
  • Use cases include design reviews, audits, and ongoing design-system governance

Quick Start

Provide a design plan for a web UI using design-thinking principles and reusable patterns from 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 web UI design plan using design-thinking principles?▼

To create a web UI design plan, apply design-thinking principles that guide decision-making for components, layouts, color, and typography. This skill provides reusable patterns and structured workflows to generate a scalable UI design plan.

What is the best way to maintain UI consistency across multiple web projects?▼

Maintain UI consistency by enforcing structured workflows, checklists, and reusable patterns for visual systems. This approach scales governance across projects and brands, ensuring consistent choices without relying on memorized values.

How do I conduct a UI design audit for an existing web application?▼

Conduct a UI design audit using structured checklists and decision frameworks provided by this skill. It evaluates usability, aesthetics, and consistency in components, layouts, color, and typography to identify areas for improvement.

Can I use these design principles to scale a design system across different brands?▼

Yes, you can scale a design system across different brands by applying the skill's reusable patterns and governance frameworks. These principles adapt to varying contexts, enabling consistent visual systems across multiple product lines.

Why does my web UI design lack consistency despite using a component library?▼

Your web UI design lacks consistency because component libraries alone do not enforce decision-making for color, typography, and layouts. This skill provides structured frameworks and governance to guide choices rather than relying on memorized values.

Related Skills

Explore More Design & Creative Skills→
gelsonsimoesgelsonsimoes

frontend-design

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

Community
Advanced
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic
JochenYangJochenYang
21

frontend-design

Create production-grade frontend interfaces with typography, color, motion, and accessibility.

Community
Advanced
TinkerbellsTinkerbells
1

storybook

Create and maintain Vue component stories using CSF3 syntax in Storybook.

Community
Intermediate