skills.rest
Yoraexe
YoraexeCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Align frontend interfaces with design intent using token-based theming and accessibility guidelines.

Updated Mar 18, 2026
Search Tags:#typography#accessibility#frontend#responsive#ui-design#aesthetics#color-palette
One-click install
npx skills add https://github.com/Yoraexe/ceobe --skill frontend-design-yoraexe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Yoraexe/ceobe/tree/main/skills/frontend-design
Command: npx skills add https://github.com/Yoraexe/ceobe --skill frontend-design-yoraexe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Eliminate inconsistencies between design intent and implemented frontend interfaces.

Core Features & Use Cases

  • Guidelines for typography, color systems, spacing, and motion to ensure consistent design.
  • Practical patterns like color palettes, responsive grids, and glassmorphism to achieve modern aesthetics.
  • Example: use a design system to quickly assemble UI components that meet accessibility and performance standards.

Quick Start

Adopt these guidelines to craft premium UI components by applying typography, color palette, and responsive grid patterns outlined above.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I ensure responsive UI consistency between design and frontend implementation?▼

Ensure responsive UI consistency by adopting guidelines for typography, color systems, spacing, and motion. This eliminates inconsistencies between design intent and implemented frontend interfaces across components, pages, and design systems.

What is the best way to build a modern CSS architecture with token-based theming?▼

Build a modern CSS architecture using token-based theming to standardize color palettes and typography. This approach ensures consistent design application across web UI components while meeting accessibility standards.

How do I apply responsive grid patterns and glassmorphism to achieve modern web aesthetics?▼

Apply responsive grid patterns and glassmorphism using practical design guidelines to achieve modern aesthetics. These patterns help quickly assemble premium UI components that satisfy performance standards.

Does this frontend design approach support accessibility and motion guidelines?▼

Yes, this frontend design approach explicitly satisfies requirements for accessibility and motion guidelines. It provides standards for typography and color theming to ensure UI components meet modern accessibility criteria.

Can I use these design system guidelines to quickly assemble UI components?▼

Yes, you can use these design system guidelines to quickly assemble UI components. By applying the outlined typography, color palette, and responsive grid patterns, you craft premium components meeting accessibility and performance standards.

Why do inconsistencies occur between design intent and implemented frontend interfaces?▼

Inconsistencies occur between design intent and implemented frontend interfaces due to lacking standardized systems for color theming, typography, and spacing. Establishing modern CSS architecture with token-based theming resolves these alignment issues.

Related Skills

Explore More Design & Creative Skills→
markky21markky21

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and design tokens.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

jutsu-react-native:react-native-styling

Style React Native components with StyleSheet, Flexbox, and platform-aware design.

Official
Intermediate
timothyfroehlichtimothyfroehlich

pinpoint-ui

Create accessible shadcn/ui interfaces with Tailwind CSS v4 patterns.

Community
Basic
fusenginefusengine
22

designing-systems

Define OKLCH color palettes, CSS variables, and typography scales for Tailwind CSS v4 theming.

Community
Advanced