skills.rest
sami-abdul
sami-abdulCOMMUNITY
Explore all skills by this author →
𝕏@BoringBuilderAIGitHub

frontend-design

Outline and implement bold frontend design systems with typography, color, motion, and CSS.

3|2|Updated Feb 10, 2026
Search Tags:#typography#design#ui#accessibility#frontend#aesthetics#design-systems
One-click install
npx skills add https://github.com/sami-abdul/claude-predev-setup --skill frontend-design-sami-abdul
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/sami-abdul/claude-predev-setup/tree/main/scaffold/.claude/skills/frontend-design
Command: npx skills add https://github.com/sami-abdul/claude-predev-setup --skill frontend-design-sami-abdul

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive frontend UI direction is often missing, leading to generic, AI-like designs; this Skill provides a repeatable framework for bold frontend design decisions.

Core Features & Use Cases

  • Bold aesthetic directions to define UI identity (Brutalist, Maximalist, Retro-futuristic, Editorial, Organic, Glassmorphism).
  • Typography and color systems with rules, recommended pairings, and accessibility considerations.
  • Implementation guidance including CSS custom properties, mobile-first approach, and semantic HTML for robust components.

Quick Start

Define a bold aesthetic direction for your project and lock typography and color choices before implementing UI components.

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 bold frontend design system that avoids generic UI?▼

To create a bold frontend design system, define a distinctive aesthetic direction like Brutalist or Maximalist, then lock typography and color rules before implementing UI components to ensure a unique identity.

What typography and color rules should I follow for accessible web design?▼

Accessible web design requires typography and color systems with explicit rules, recommended pairings, and accessibility considerations to maintain readability and contrast across all UI components.

How do I implement a design system using CSS custom properties and semantic HTML?▼

Implement a design system using CSS custom properties for tokens, a mobile-first approach for responsiveness, and semantic HTML to ensure robust and accessible UI component structures.

Can I apply a retro-futuristic or glassmorphism aesthetic to an existing component library?▼

Yes, you can apply aesthetic directions like Retro-futuristic or Glassmorphism to existing component libraries by enforcing spatial composition, motion guidelines, and design-to-code workflows.

When should I lock typography and color choices during the UI design process?▼

Lock typography and color choices at the beginning of the UI design process, right after defining your bold aesthetic direction, to prevent generic outcomes and streamline component implementation.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
qodex-aiqodex-ai
39

component-interface-design

Design accessible UIs with component libraries and generate React code with Tailwind CSS.

Official
Intermediate
synqingsynqing
1

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS or modern frameworks.

Community
Advanced
eniosales08-AIeniosales08-AI

frontend-design

Generate production-grade frontend UI code with cohesive aesthetic guidelines.

Community
Advanced