skills.rest
sapatamuku-creator
sapatamuku-creatorCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create production-grade frontend interfaces with intentional typography, color palettes, and responsive layouts.

Updated May 13, 2026
Search Tags:#typography#accessibility#frontend#responsive design#color palette#ui design#micro-interactions
One-click install
npx skills add https://github.com/sapatamuku-creator/mastersapatamuku --skill frontend-design-sapatamuku-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/sapatamuku-creator/mastersapatamuku/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/sapatamuku-creator/mastersapatamuku --skill frontend-design-sapatamuku-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web interfaces built without design guidance often end up with generic AI aesthetics, inconsistent typography, poor color choices, and broken responsive behavior across devices. ## Core Features & Use Cases - Intentional Typography: Pair distinctive display fonts with readable body fonts and enforce consistent scale, hierarchy, and line heights. - Tailored Color Palettes: Apply curated palettes with warm undertones, dark modes, and subtle surface elevations instead of generic primary colors. - Motion & Responsive Fidelity: Add purposeful micro-animations (150ms-250ms transitions) and verify layouts across desktop, tablet, and mobile viewports. - Use Case: When building a landing page or dashboard component, use this Skill to generate a polished UI with WCAG AA contrast, hover/focus states, and verified behavior at all three viewport breakpoints. ## Quick Start Use the frontend-design skill to build a responsive pricing page with distinctive typography and a dark-mode color palette.

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 responsive web UI that works on desktop, tablet, and mobile?▼

Design and verify layouts in three viewport buckets: desktop at 1024px and above, tablet from 768px to 1023px, and mobile below 768px. Test typography scale, spacing, and interactive states at each breakpoint before shipping.

How to choose typography pairings for web interfaces?▼

Pair a distinctive display font with a readable body font, such as Lora with Plus Jakarta Sans. Maintain a clear type scale with optical sizing and proportional line heights so hierarchy stays consistent across the interface.

What transition timing works best for UI micro-animations?▼

Keep transitions between 150ms and 250ms using the cubic-bezier(.32, .72, 0, 1) easing curve for snappy, purposeful feedback. Always respect the prefers-reduced-motion media query for users who disable animations.

Does this design approach support accessibility requirements?▼

Yes, the verification checklist requires contrast meeting WCAG AA standards and hover plus focus states on all interactive elements. It also mandates prefers-reduced-motion support for animation-sensitive users.

Why do AI-generated interfaces look generic and how to avoid it?▼

Generic aesthetics come from default primary colors, system fonts, and missing interaction states. Avoid them by using curated palettes with warm undertones and dark modes, distinctive font pairings, and deliberate micro-animations on interactive elements.

Related Skills

Explore More Design & Creative Skills→
Tea-4-LifeTea-4-Life

frontend-design

Create production-grade frontend interfaces with cohesive design systems and accessible tokens.

Official
Advanced
ACGSpgpACGSpgp

kpi-dashboard-design

Design KPI dashboards with metric selection frameworks and visualization best practices.

Official
Intermediate
baphledbaphled
1

accessibility

Implement WCAG principles, keyboard navigation, and screen reader support in terminal applications.

Community
Intermediate
emilneuraz-aiemilneuraz-ai

web-component-design

Standardize reusable UI component patterns across React, Vue, and Svelte.

Community
Intermediate