frontend-skill

Plan and implement front-end UI designs with hierarchy, spacing, and motion.

779|80|Updated Jun 20, 2025
One-click install
npx skills add https://github.com/Haohao-end/openagent --skill frontend-skill-haohao-end
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-skill
Source: https://github.com/Haohao-end/openagent/tree/main/api/internal/core/skills/catalog/frontend-skill
Command: npx skills add https://github.com/Haohao-end/openagent --skill frontend-skill-haohao-end

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create front-end pages where visual hierarchy, spacing, and motion feel intentional instead of cluttered or generic.

Core Features & Use Cases

  • Visual thesis & layout-first planning: Translate a vague UI request into a clear composition before adding components.
  • Interaction feel refinement: Propose interaction ideas that change perceived quality (not just functionality).
  • Quality-focused critique or implementation guidance: Support both build plans and design review by focusing on hierarchy, whitespace, and clutter control.

Quick Start

Use the frontend-skill to plan and implement a premium landing page with a clear hero/support/details structure and subtle motion that makes the first viewport memorable.

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 landing page with clear visual hierarchy and spacing?

Design a landing page by establishing a composition-first plan with a clear hero, support, and details structure. Prioritize readable primary messaging, limit color and decoration, and add subtle motion to make the first viewport memorable.

What's the best way to improve perceived UI quality without adding more components?

Refine interaction feel and visual hierarchy to improve perceived UI quality without adding components. Focus on intentional spacing, clutter control, and motion proposals that change perceived quality rather than simply increasing functionality.

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

Yes, you can apply this approach to game UI and prototype design. The method supports any app surface, demo, or prototype where perceived visual quality and clear hierarchy matter more than component count.

Why does my front-end UI feel cluttered and generic despite having all the right elements?

Your front-end UI feels cluttered when visual hierarchy, spacing, and motion lack intention. Translate vague requests into a clear composition first, limit decoration, and apply quality-focused critique to control clutter.

How do I critique a UI design for visual hierarchy and whitespace?

Critique a UI design by evaluating its layout-first composition, checking if primary messaging is readable, and assessing whether whitespace and motion feel intentional. Focus on hierarchy and clutter control to guide actionable improvements.

Does front-end UI design require a layout-first plan before adding components?

Yes, front-end UI design requires a layout-first plan before adding components. Translating a vague UI request into a clear visual thesis ensures hierarchy, spacing, and composition feel intentional instead of generic.