frontend-design

Name: frontend-design
Availability: InStock
Author: telagod

Standardize frontend UI decisions with a structured design playbook.

238|30|Updated Feb 2, 2026

Search Tags:#design #ui #frontend #tokens #ux #aesthetics #design-system

Ready to run

npx skills add https://github.com/telagod/code-abyss --skill frontend-design-telagod

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/telagod/code-abyss/tree/main/skills/domains/frontend-design
Command: npx skills add https://github.com/telagod/code-abyss --skill frontend-design-telagod

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a centralized, structured playbook for frontend design, helping teams achieve consistent UI aesthetics, component patterns, and UX principles across projects.

Core Features & Use Cases

Knowledge topics covering UI aesthetics, component patterns, UX principles, frontend engineering, and accessibility.
Design style systems including Claymorphism, Glassmorphism, Neubrutalism, Liquid Glass for consistent visuals.
Use cases include building a design system, conducting UI/UX reviews, and guiding component library development.

Quick Start

Review the knowledge sections in this skill to start applying frontend-design patterns in your project.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I build a design system for consistent UI aesthetics?▼

A UI/UX review ensures frontend design consistency by checking component patterns, accessibility, and UX principles against a structured playbook covering tokens, typography, and responsive behaviors.

What are design tokens and how do they standardize frontend UI decisions?▼

Design tokens standardize frontend UI decisions by centralizing color, typography, and spacing values into a structured playbook, ensuring consistent component patterns and visual governance across projects.

Can I use this to apply Neubrutalism or Glassmorphism styles to a component library?▼

Yes, you can apply Neubrutalism, Glassmorphism, Claymorphism, or Liquid Glass styles to a component library using the included design style systems to maintain consistent visual aesthetics.

What is the best way to ensure accessibility considerations in frontend design?▼

Ensure accessibility in frontend design by enforcing specific accessibility considerations within a structured playbook that guides component library development and UI governance.

How do I enforce responsive patterns for web applications?▼

Enforce responsive patterns for web applications by utilizing a structured design playbook that defines specific requirements for responsive behaviors alongside typography and color tokens.