skills.rest
telagod
telagodCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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
One-click install
npx skills add https://github.com/telagod/code-abyss --skill frontend-design-telagod
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
NammDevNammDev
2

ui-styling

Integrate shadcn/ui with Tailwind CSS for React UI styling.

Community
Intermediate
nattergabrielnattergabriel
2

normalize

Align UI components and pages to design system tokens and patterns.

Community
Advanced
lengo0951lengo0951

ui-styling

Style React user interfaces with shadcn/ui and Tailwind CSS.

Community
Advanced