skills.rest
costa-marcello
costa-marcelloCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Guide frontend UI design with typography, color, and accessibility standards.

2|1|Updated Feb 9, 2026
Search Tags:#typography#accessibility#ui-ux#design-systems#color-palette#frontend-design#aesthetic-guidelines
One-click install
npx skills add https://github.com/costa-marcello/skillkit --skill frontend-design-costa-marcello
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/costa-marcello/skillkit/tree/main/skills/frontend-design
Command: npx skills add https://github.com/costa-marcello/skillkit --skill frontend-design-costa-marcello

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to achieve with generic AI outputs; this skill provides structured guidance, typography/color tokens, and UX rules to elevate UI work.

Core Features & Use Cases

  • Creates production-grade frontend interfaces with a bold, distinctive aesthetic
  • Provides style/color/typography guides by industry, 30+ UX rules, 25+ chart types, and 10 tech stacks
  • Use for designing components, building pages, selecting palettes, implementing UI patterns, or improving existing interfaces

Quick Start

Design a production-ready frontend interface following the bold aesthetic direction while upholding accessibility and performance standards.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a production-grade frontend design system with accessible typography and color tokens?▼

To create a production-grade frontend design system, implement structured workflows that generate accessible typography and color tokens, ensuring UI components comply with defined aesthetic and accessibility standards.

What makes a frontend interface visually distinctive while maintaining accessibility compliance?▼

Distinctive frontend interfaces require structured aesthetic guidelines that balance bold visual design with accessible color palettes and typography, preventing generic outputs while upholding performance and UX standards.

Can I use this frontend design workflow for selecting color palettes and designing page layouts?▼

Yes, the frontend design workflow applies directly to UI tasks including component creation, page layouts, palette selection, and design-token documentation across 10 tech stacks and various industries.

What's the best way to document design tokens for a UI component library?▼

The best way to document design tokens is through a structured workflow that enforces typography, color, motion, and accessibility standards, generating production-ready guidelines for component libraries.

Why does my AI-generated UI lack a distinctive aesthetic and fail accessibility checks?▼

AI-generated UIs often lack distinctive aesthetics and fail accessibility because they miss structured design-token enforcement, requiring a production-grade workflow with 30+ UX rules to ensure compliance.

Related Skills

Explore More Design & Creative Skills→
Marcus-Mok-GHMarcus-Mok-GH

project-initialization-phase

Guide users through a questionnaire and generate 8 design documents.

Community
Advanced
trielofftrieloff

frontend-design

Design and implement production-ready frontend interfaces with design tokens.

Community
Advanced
zhongjiszhongjis

recharts-patterns

Generate reusable React component patterns for Recharts data visualizations.

Community
Intermediate
LikheetLikheet

frontend-design

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

Community
Basic