skills.rest
sonhaicoder
sonhaicoderCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Apply a codified frontend design formula to HTML/CSS/JS web UI tasks.

Updated May 5, 2026
Search Tags:#typography#layout#frontend#glassmorphism#ui-design#color-palette#motion-design
One-click install
npx skills add https://github.com/sonhaicoder/haiclaudeskill --skill frontend-design-sonhaicoder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/sonhaicoder/haiclaudeskill/tree/main/skills/frontend-design
Command: npx skills add https://github.com/sonhaicoder/haiclaudeskill --skill frontend-design-sonhaicoder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Frontend Design Formula provides a codified approach to delivering consistent, high-quality web UI work across landing pages, storefronts, admin dashboards, components, and themes. It streamlines design decisions and ensures alignment with a unified visual system.

Core Features & Use Cases

  • Typography layering with 3 scales and deliberate tracking to create editorial rhythm.
  • Color system using warm neutrals with restrained accents to maintain a luxury tone.
  • Liquid glass treatment and noise overlay to achieve premium UI aesthetics without heavy borders.
  • Motion system guidelines (GSAP/Lenis) for editorial-paced entrances and scroll-driven interactions.
  • Spacing and layout rules for sections, hero, grid gaps, and responsive rhythm.
  • Thematic patterns and layout choices that avoid generic SaaS templates.
  • Self-check rules to validate coherence before ship.

Quick Start

Apply the frontend design formula to any web UI task when creating or updating pages, components, or themes.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I standardize web UI design across landing pages and admin dashboards?▼

Apply a codified frontend design formula to standardize web UI design across landing pages and admin dashboards. It enforces typography layering, color rules, and spacing rhythm to maintain a cohesive visual system.

What is the best way to achieve a liquid glass treatment for premium UI aesthetics?▼

Achieve liquid glass treatment for premium UI aesthetics by applying specific overlay techniques and noise textures instead of heavy borders. This method maintains a luxury tone using warm neutrals and restrained accents.

How do I implement motion system guidelines for scroll-driven interactions in HTML?▼

Implement motion system guidelines for scroll-driven interactions in HTML using GSAP and Lenis. The system defines editorial-paced entrances and scroll-driven interactions to standardize frontend animation behavior.

Can I use this frontend design formula for theming and component refactoring?▼

Yes, you can use this frontend design formula for theming and component refactoring. It triggers on file edits or requests to build or refactor UI, applying self-check rules to validate coherence before shipping.

Why does my web UI design look like a generic SaaS template and how can I avoid it?▼

Web UI design looks like a generic SaaS template when lacking thematic patterns and deliberate editorial rhythm. Avoid this by applying a codified formula with 3 typography scales, deliberate tracking, and cohesive hero layout patterns.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
sigitpoerwosigitpoerwo

expert-frontend

Generate production-ready frontend UI architectures with Tailwind, Framer Motion, and accessible markup.

Community
Advanced
wyrmspirewyrmspire

video-to-website

Convert video files into scroll-driven animated websites with FFmpeg, GSAP, and Lenis.

Community
Advanced
antony-jipantony-jip

ckm:ui-styling

Create responsive user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced