skills.rest
adokce
adokceCOMMUNITY
Explore all skills by this author →
𝕏@adokceGitHub

frontend-skill

Design landing pages and UI components with visual hierarchy and restrained composition.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams craft landing pages and UI with strong visual hierarchy and restrained composition, avoiding clutter while maintaining brand presence.

Core Features & Use Cases

  • Establish a dominant visual thesis for brands, apps, and marketing sites.
  • Build hero-first layouts with careful typography, spacing, and motion to guide user focus.
  • Provide design guidance for consistent branding, layout systems, and scalable UI components.

Quick Start

Provide a brand brief and content outline, then outline a visual thesis, content plan, and interaction ideas before beginning the build.

Frequently Asked Questions about frontend-skill

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

FAQPage Schema
How do I design a premium landing page with strong visual hierarchy?▼

To design a premium landing page with strong visual hierarchy, establish a dominant visual thesis and apply careful typography, spacing, and color economy to guide user focus and avoid clutter.

What is visual hierarchy in UI design and why does it matter for branding?▼

Visual hierarchy in UI design organizes elements like typography and spacing to establish a dominant visual thesis, ensuring clear focal points and a cohesive brand voice across marketing sites.

How do I build hero-first layouts that maintain a cohesive brand voice?▼

Build hero-first layouts by combining restrained composition with motion guidelines, ensuring typography and color economy guide user focus while maintaining brand presence across feature blocks.

What's the best way to structure a UI component system for marketing sites?▼

The best way to structure a UI component system for marketing sites is to apply restrained composition and layout systems, ensuring scalable UI blocks maintain a premium aesthetic without clutter.

Can I use restrained composition for app design as well as landing pages?▼

Yes, you can use restrained composition for app design as well as landing pages. The approach ensures clear focal points and premium aesthetics across both apps and marketing sites.

Why does my landing page design feel cluttered despite having brand guidelines?▼

Your landing page design feels cluttered if it lacks a dominant visual thesis and color economy. Applying motion guidelines and careful spacing ensures clear focal points and a cohesive brand voice.

Related Skills

Explore More Design & Creative Skills→
peteanderson80peteanderson80

frontend-skill

Plan landing pages and UI with visual thesis, content plan, and interaction thesis.

Community
Intermediate
timequitytimequity
6

frontend-design

Design production-grade frontend interfaces with bold aesthetic direction.

Official
Advanced
vvedantbvvedantb
99

brandkit

Generate a cohesive brand-kit board with a 3×3 grid and consistent color palette.

Community
Advanced
AIDotNetAIDotNet
602

frontend-skill

Design frontend landing pages and app prototypes with visual hierarchy and restrained composition.

Official
Advanced