skills.rest
satriadhm
satriadhmCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create frontend interfaces with typography, color, motion, and accessibility.

Updated Aug 23, 2026
Search Tags:#typography#design#ui#accessibility#frontend#components#color
One-click install
npx skills add https://github.com/satriadhm/padelism --skill frontend-design-satriadhm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/satriadhm/padelism/tree/main/.qwen/skills/frontend-design
Command: npx skills add https://github.com/satriadhm/padelism --skill frontend-design-satriadhm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creates distinctive, production-grade frontend interfaces with high design quality, ensuring UI components, pages, posters, or applications avoid generic AI aesthetics.

Core Features & Use Cases

  • Delivers cohesive, brand-aligned UI components, pages, and templates with strong typography, color, motion, and accessibility.
  • Supports design-driven development for dashboards, marketing pages, and editorial interfaces with a bold aesthetic.
  • Guides implementation with a clear design system approach, balancing aesthetics, performance, and accessibility.

Quick Start

Describe the target interface and brand guidelines, then ask the AI to generate a polished frontend component or page with a distinctive, production-grade aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create frontend interfaces that avoid generic AI aesthetics?▼

Production-grade frontend interfaces require a cohesive design system that enforces strong typography, accessible color contrast, responsive behavior, and motion patterns, ensuring components deliver a cohesive user experience without generic AI aesthetics.

How do I build accessible UI components with a strong design system?▼

Build accessible UI components by applying a design system approach that integrates accessibility patterns and responsive behavior directly into the frontend, ensuring typography and color choices meet performance and design standards.

Can I use this for designing marketing pages and dashboards?▼

Yes, this supports design-driven development for dashboards, marketing pages, and editorial interfaces. It delivers a bold aesthetic with production-grade quality by applying cohesive design systems to these specific contexts.

What is the best way to generate brand-aligned web components?▼

The best way to generate brand-aligned web components is to provide target interface descriptions and brand guidelines, allowing the system to craft components with strong typography, color, and motion that follow a cohesive design system.

Does generating production-grade frontend code require specific frameworks?▼

Generating production-grade frontend code does not require specific frameworks. It relies on a clear design system approach to ensure responsive behavior, accessibility patterns, and performance considerations are met across implementations.

Related Skills

Explore More Design & Creative Skills→
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced
aah-stackaah-stack

frontend-design

Create distinctive frontend interfaces with intentional typography, styling systems, and responsive layouts.

Community
Advanced
davidrrowleydavidrrowley

frontend-design-review

Review frontend interfaces for design quality and WCAG accessibility compliance.

Community
Intermediate
min-hintharmin-hinthar

frontend-design

Design and implement distinctive frontend interfaces with HTML, CSS, and JavaScript.

Community
Advanced