frontend-skill

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

Updated Mar 22, 2026
One-click install
npx skills add https://github.com/peteanderson80/skills --skill frontend-skill-peteanderson80
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-skill
Source: https://github.com/peteanderson80/skills/tree/main/skills/frontend-skill
Command: npx skills add https://github.com/peteanderson80/skills --skill frontend-skill-peteanderson80

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams design landing pages and user interfaces that are visually strong yet restrained, focusing on hierarchy, imagery, and motion to reduce clutter.

Core Features & Use Cases

  • Visual thesis, content plan, and interaction thesis defined before building.
  • Enforces a premium, image-led composition with minimal copy, strong whitespace, and clear typography.
  • Use cases include landing pages, apps, prototypes, demos, and game UIs seeking deliberate branding and perceptual clarity.

Quick Start

Before building, write three things: visual thesis, content plan, and interaction thesis.

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 visually strong landing page without cluttering the UI?

Design visually strong landing pages by defining a visual thesis, content plan, and interaction thesis before building. This enforces premium, image-led composition with minimal copy, strong whitespace, and clear typography to reduce clutter.

What is a visual thesis and when do I need it for UI design?

A visual thesis is a pre-build artifact defining the core visual direction for UI design. You need it when creating landing pages, apps, prototypes, demos, or game UIs to ensure deliberate branding, perceptual clarity, and strong hierarchy.

Can I use this approach for game UI and prototype design?

Yes, you can use this approach for game UI and prototype design. It applies visual thesis, content plan, and interaction thesis to guide composition, imagery, typography, and motion toward a premium result across websites, apps, and games.

What's the best way to plan motion and interaction guidelines before building an app?

The best way to plan motion and interaction guidelines is by defining an interaction thesis alongside a visual thesis and content plan before building. This enforces design discipline and guides motion toward a premium, restrained result.

Why does my landing page UI feel cluttered despite using a design system?

Your landing page UI feels cluttered because it lacks a defined visual thesis and content plan before building. Enforcing pre-build artifacts ensures minimal copy, strong whitespace, and image-led composition, reducing visual noise.