skills.rest
gaos6e
gaos6eCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Standardize frontend UI design decisions across layout, theming, typography, animation, and accessibility.

Updated Mar 19, 2026
Search Tags:#typography#accessibility#frontend#ui-design#responsive-design#design-patterns
One-click install
npx skills add https://github.com/gaos6e/MyOpenclaw --skill frontend-design-gaos6e
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/gaos6e/MyOpenclaw/tree/main/workspace/skills/superdesign
Command: npx skills add https://github.com/gaos6e/MyOpenclaw --skill frontend-design-gaos6e

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web teams often struggle to maintain consistency in frontend UI design, leading to duplicated decisions and rework.

Core Features & Use Cases

  • Design Workflow: Layout design, theming, typography, animation, accessibility, and responsive patterns to guide UI decisions.
  • Implementation Guidelines: Provide rules for color systems, typography scales, spacing tokens, and component patterns to ensure consistency.
  • Use Case: When starting a new product page, apply these guidelines to align UI components, navigation, and accessibility from the outset.

Quick Start

Review and implement these guidelines at project kickoff to ensure cohesive UI across components.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I standardize frontend UI design to reduce inconsistency and rework?▼

Standardize frontend UI design by applying documented guidelines for layout patterns, theming, typography, animation, accessibility, and responsive behavior to align components and reduce rework from project kickoff.

What is the best way to establish typography scales and spacing tokens for modern web apps?▼

Establish typography scales and spacing tokens by following implementation guidelines that define color systems, accessible contrast, and CSS variables to ensure cohesive UI consistency across modern web apps.

How do I design responsive layouts that maintain accessible contrast and correct UI components?▼

Design responsive layouts with accessible contrast by applying responsive tokens and color theory guidelines, ensuring navigation and UI components align correctly across different viewport sizes.

When do I need to implement animation patterns and CSS variables for frontend UI decisions?▼

Implement animation patterns and CSS variables when starting a new product page or project kickoff to align UI components, establish theming, and enforce accessibility from the outset.

Can I use these frontend design guidelines for existing web apps or only new product pages?▼

These frontend design guidelines apply to both new product pages and existing web apps, providing rules for component patterns, spacing scales, and theming to correct inconsistencies and reduce duplicated decisions.

What are the limitations of relying on design patterns for frontend UI standardization?▼

Relying on design patterns for frontend UI standardization requires strictly following the documented workflow and guidelines for color theory and spacing scales; skipping this process risks continued inconsistency and duplicated decisions.

Related Skills

Explore More Design & Creative Skills→
ShubhamX-AIShubhamX-AI

ui-ux-premium

Apply premium UI/UX guidelines to existing components and pages.

Community
Intermediate
zhu637882-stackzhu637882-stack

glassmorphism-ui

Define glassmorphism design tokens and components for finance mobile apps.

Community
Advanced
yonetim258852yonetim258852

image-to-code

Translate visual design images into modular HTML, CSS, and JavaScript code.

Community
Advanced
andronicsandronics
1

color-tools

Generate accessible color palettes and validate WCAG contrast for UI designs.

Community
Intermediate