skills.rest
gabi-agent
gabi-agentCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design distinctive frontend interfaces with typography, color, motion, and accessibility.

Updated Feb 26, 2026
Search Tags:#design#ui#frontend#prototyping#component#ux#aesthetics
One-click install
npx skills add https://github.com/gabi-agent/openretro --skill frontend-design-gabi-agent
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/gabi-agent/openretro/tree/main/skills/frontend-design
Command: npx skills add https://github.com/gabi-agent/openretro --skill frontend-design-gabi-agent

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to escape generic AI aesthetics and inconsistent quality. This skill provides a structured approach to delivering distinctive, production-grade frontend interfaces with intentional design and robust implementation.

Core Features & Use Cases

  • Design thinking guidance to establish a bold aesthetic direction and align with user goals.
  • Implementation guidance for HTML/CSS/JS or modern frameworks (React, Vue) with accessible, responsive layouts.
  • Deliverables such as typographic systems, cohesive color schemes, motion, and reusable UI components.

Quick Start

Provide a detailed frontend brief and implement a ready-to-run component or page that embodies the chosen aesthetic direction.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design distinctive frontend UI that avoids generic AI aesthetics?▼

To design distinctive frontend UI, establish a bold aesthetic direction with intentional typography and cohesive color schemes. This approach ensures production-grade interfaces avoid generic aesthetics by applying structured design thinking to component and page layouts.

Can I use this approach for building accessible and responsive components in React?▼

Yes, you can build accessible and responsive components in React. The implementation guidance supports modern frameworks like React and Vue, ensuring layouts meet accessibility requirements while maintaining your chosen aesthetic direction.

What's the best way to create a cohesive typographic system and color scheme for a web application?▼

The best way to create a cohesive typographic system and color scheme is to align them with a clearly defined aesthetic direction. This structured design thinking delivers reusable patterns and distinctive visual identities across your application.

How do I implement motion and reusable UI components in plain HTML and CSS?▼

You implement motion and reusable UI components in plain HTML and CSS by following structured implementation guidance. This ensures your deliverables include responsive layouts and accessible interactions that embody your specified aesthetic direction.

Does this frontend design method work for both component-level and full-page implementation?▼

Yes, this frontend design method works for both component-level and full-page implementation. It is applicable to building components, pages, or complete applications across React, Vue, or plain HTML/CSS with robust implementation.

Related Skills

Explore More Design & Creative Skills→
csim-sgcsim-sg

frontend-design

Design and implement frontend interfaces with cohesive aesthetic direction.

Community
Intermediate
EmaRimoldiEmaRimoldi

frontend-design

Generate production-ready frontend interfaces with distinctive aesthetics across HTML/CSS/JS, React, or Vue.

Community
Advanced
civictechdccivictechdc
1

visual-design-foundations

Creates visual systems with typography, color, spacing, and iconography guidelines.

Official
Intermediate
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate