skills.rest
ElbertePlinio
ElbertePlinioCOMMUNITY
Explore all skills by this author →
Website𝕏@ElbertePlinioGitHub

frontend-design

Apply design principles to build responsive web interfaces with consistent spacing and typography.

Updated Jul 13, 2026
Search Tags:#accessibility#web-development#ui-ux#responsive-design#landing-pages#frontend-design#css-styling
One-click install
npx skills add https://github.com/ElbertePlinio/dotfiles --skill frontend-design-elberteplinio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ElbertePlinio/dotfiles/tree/main/private_dot_factory/plugins/marketplaces/factory-plugins/plugins/droid-evolved/skills/frontend-design
Command: npx skills add https://github.com/ElbertePlinio/dotfiles --skill frontend-design-elberteplinio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the guesswork and inconsistency of building web interfaces that are either functional but visually unappealing, or generic and forgettable when generated with AI, providing clear, actionable design principles for any frontend task.

Core Features & Use Cases

  • Provides actionable guidance on core design systems including consistent spacing scales, typography hierarchies, minimal color palettes, and 12-column layout grids
  • Covers standard UI pattern implementation for cards, forms, navigation, empty states, and loading states
  • Includes requirements for responsive mobile-first design, accessibility compliance, and tactics to avoid generic AI-generated "slop" aesthetics
  • Use cases include building new web apps, landing pages, one-off utility tools, and improving the visual quality of existing frontend projects

Quick Start

Use the frontend-design skill to build a responsive landing page for a new SaaS product with a professional tone, accessible form elements, and a consistent 8px spacing system.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I avoid generic AI aesthetics when building web interfaces?▼

To avoid generic AI aesthetics in web interfaces, apply consistent spacing scales, typography hierarchies, minimal color palettes, and standard UI patterns rather than relying on default generation outputs. This Skill enforces those core design principles to produce polished, functional layouts.

What is the best way to build a responsive landing page with accessible forms?▼

The best way to build a responsive landing page with accessible forms is to use a mobile-first layout grid, ensure proper color contrast, and apply an 8px consistent spacing system across all UI elements.

How do I set up a consistent spacing system and typography hierarchy for a web app?▼

Set up a consistent spacing system and typography hierarchy for a web app by applying actionable design principles like 8px spacing scales, defined typographic levels, and 12-column layout grids to ensure visual consistency.

Does this frontend design approach work for one-off utility tools and existing UI improvements?▼

Yes, this frontend design approach works for one-off utility tools and existing UI improvements by applying core design principles to satisfy requirements for responsive layouts, accessibility compliance, and standard UI pattern implementation across any frontend task.

What standard UI patterns should I implement to prevent empty states and loading states from looking generic?▼

Implement standard UI patterns for cards, forms, navigation, empty states, and loading states to prevent generic aesthetics by applying structured design systems that ensure functional, polished, and user-friendly web interfaces.

Related Skills

Explore More Design & Creative Skills→
jasonkneenjasonkneen
471

frontend-design

Construct frontend UIs with HTML, CSS, and JavaScript for responsive layouts.

Community
Intermediate
FAeN399FAeN399

html-static-design

Design semantic, accessible static HTML/CSS pages with responsive mobile-first styling.

Community
Basic
sanky369sanky369
29

accessibility-excellence

Audit web applications for WCAG compliance and accessibility gaps.

Community
Basic
aminianpaminianp

design-themes

Generate Tailwind themes from user preferences for design systems.

Community
Intermediate