frontend-skill

Coordinate visual direction and motion for image-led landing pages and UI.

182|28|Updated Nov 29, 2025
One-click install
npx skills add https://github.com/julianromli/ai-skills --skill frontend-skill-julianromli
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-skill
Source: https://github.com/julianromli/ai-skills/tree/main/skills/frontend-skill
Command: npx skills add https://github.com/julianromli/ai-skills --skill frontend-skill-julianromli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Coordinate visual direction, content plan, and motion to deliver premium, deliberate interfaces such as landing pages, websites, apps, and prototypes with restrained composition and strong imagery.

Core Features & Use Cases

  • Visual thesis, content plan, and interaction thesis to guide design direction.
  • Strong image-led composition with restrained typography, thoughtful spacing, and motion to create premium UI.
  • Use cases include branding-focused landing pages, product demos, and UI explorations where hierarchy and clarity matter.

Quick Start

Before building, write three things: a visual thesis, a content plan, and an 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 premium landing page with strong visual hierarchy?

Design a premium landing page by establishing a visual thesis, content plan, and interaction thesis before building. Enforce a lightweight design system with constraints like two typefaces maximum and one accent color to ensure restrained composition and clear hierarchy.

What is the best way to coordinate motion and UI design for product demos?

Coordinate motion and UI design for product demos by aligning visual direction with an interaction thesis. This approach ensures deliberate interfaces with thoughtful spacing, restrained typography, and image-led composition for premium results.

How do I apply branding constraints to app UI without losing visual impact?

Apply branding constraints to app UI by enforcing a lightweight design system with a maximum of two typefaces and one accent color. This restriction creates strong, image-led composition while maintaining clear hierarchy and visual impact.

Can I use this approach for game UI and prototypes where imagery matters?

Yes, you can use this visual design approach for game UI and prototypes where imagery matters. It coordinates visual direction, content plans, and motion to deliver deliberate interfaces with strong hierarchy and clarity.

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

Your website UI feels cluttered if the design system lacks strict constraints. Enforce a lightweight system with minimal copy, a maximum of two typefaces, and one accent color to achieve restrained composition and clear visual hierarchy.

How to start building a branding-focused landing page from scratch?

Start building a branding-focused landing page by writing three things: a visual thesis, a content plan, and an interaction thesis. This coordinates visual direction and motion to deliver premium, image-led interfaces.