skills.rest
neilsanghrajka
neilsanghrajkaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-skill

Create landing pages and UI with restrained composition and image-led hierarchy.

Updated Jun 2, 2026
Search Tags:#typography#design#ui#frontend#motion#landing-page#visual-hierarchy
One-click install
npx skills add https://github.com/neilsanghrajka/drip --skill frontend-skill-neilsanghrajka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-skill
Source: https://github.com/neilsanghrajka/drip/tree/main/agent/codex-agent/.agents/skills/frontend-skill
Command: npx skills add https://github.com/neilsanghrajka/drip --skill frontend-skill-neilsanghrajka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides the creation of visually strong landing pages, websites, apps, prototypes, or game UI by enforcing restrained composition, image-led hierarchy, cohesive structure, and tasteful motion to avoid clutter.

Core Features & Use Cases

  • Enforces restrained composition and image-led hierarchy to elevate branding.
  • Guides typography, spacing, and motion to produce premium, cohesive results.
  • Use Case: design a flagship product page that communicates brand, product benefits, and conversion-ready layout with minimal chrome.

Quick Start

Describe a single-visual landing page concept with restrained typography and a dominant hero image, then translate it into a ready-to-build design.

Frequently Asked Questions about frontend-skill

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

FAQPage Schema
What is image-led visual hierarchy in landing page design?▼

Image-led visual hierarchy uses a dominant hero image to establish premium branding and clear structure, guiding typography and motion while keeping the layout clutter-free and conversion-ready.

How do I design a premium landing page with restrained composition?▼

Design a premium landing page by enforcing restrained composition, applying cohesive typography, and building an image-led hierarchy to deliver clear visual structure without clutter.

Can I use this approach for game UI and app prototypes?▼

Yes, this approach applies to game UI and app prototypes by enforcing cohesive structure, restrained typography, and tasteful motion to elevate branding and maintain a design-forward experience.

What is the best way to structure typography and motion for brand pages?▼

The best way to structure typography and motion for brand pages is satisfying strict spacing and motion constraints while maintaining a hero-focused layout and minimal chrome.

Does this design method work for product sites requiring minimal chrome?▼

Yes, this method works for product sites by communicating brand and product benefits through a conversion-ready layout that utilizes restrained composition and minimal chrome.

Related Skills

Explore More Design & Creative Skills→
minhnv0807minhnv0807
526

30-thiet-ke-master

Generate brand-consistent marketing design assets across eight modes.

Community
Advanced
arvindandarvindand
16

ui-ux-design

Translate design concepts into semantic HTML with responsive, accessible styling.

Community
Advanced
Maitreya04Maitreya04

emil-design-eng

Apply Emil Kowalski's design-engineering principles to UI reviews and motion decisions.

Community
Advanced
nicepkgnicepkg
276

font-pairing-suggester

Recommend Google Fonts pairings with visual hierarchy examples for design projects.

Official
Basic