skills.rest
kompassdev
kompassdevOFFICIAL
Explore all skills by this author →
GitHub

frontend-skill

Design art-directed landing pages with visual hierarchy, motion, and minimal clutter.

9|2|Updated Mar 9, 2026
Search Tags:#branding#landing page#UI design#visual hierarchy#motion design#art direction
One-click install
npx skills add https://github.com/kompassdev/kompass --skill frontend-skill-kompassdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-skill
Source: https://github.com/kompassdev/kompass/tree/main/.agents/skills/frontend-skill
Command: npx skills add https://github.com/kompassdev/kompass --skill frontend-skill-kompassdev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the need to design high-quality, art-directed user interfaces, websites, and landing pages that communicate brand value and engage users visually.

Core Features & Use Cases

  • Visual Thesis Development: Define mood, material, and energy through a clear one-sentence statement.
  • Content Planning: Outline key sections like hero, support, detail, and call-to-action for effective layouts.
  • Interaction Design: Generate motion ideas to enhance hierarchy and user experience in visual work.
  • Use Case: Craft a sleek landing page with a bold hero visual, supporting features, atmospheric detail, and engaging motion effects, suitable for product launches or brand storytelling.

Quick Start

Use this skill to formulate a visual thesis, plan content structure, and suggest interactions before building a compelling UI or landing page.

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 strong visual hierarchy and minimal clutter?▼

To design a landing page with strong visual hierarchy, define a clear visual thesis to establish mood and energy, then outline key sections like hero, support, and call-to-action to ensure minimal clutter and premium aesthetics.

What is art direction in UI design and how does it improve branding?▼

Art direction in UI design establishes a cohesive visual thesis that defines mood, material, and energy, ensuring branding and marketing pages communicate brand value through deliberate, premium user experiences.

How do I plan content and motion design for a product launch landing page?▼

Plan content by outlining hero, support, detail, and call-to-action sections, then generate interaction design ideas that use motion to enhance visual hierarchy and engage users for product launches.

Can I use this approach to create a visual thesis before building marketing UI?▼

Yes, formulating a one-sentence visual thesis clarifies mood, material, and energy, serving as a deliberate foundation for building visually compelling marketing UI and cohesive brand storytelling.

What is the best way to structure a premium landing page for brand storytelling?▼

The best way to structure a premium landing page is planning distinct content sections—hero, supporting features, and atmospheric detail—while integrating motion design to guide user experience and reinforce brand storytelling.

Related Skills

Explore More Design & Creative Skills→
packetalienpacketalien

art-bible

Coordinate the Cursor art bible workflow across Phases 1–9 to draft visual standards.

Community
Advanced
peteanderson80peteanderson80

frontend-skill

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

Community
Intermediate
bonnguyenitcbonnguyenitc
19

copywriter

Generate audience-aware copy for landing pages, emails, and app-store descriptions.

Community
Intermediate
lichong-alichong-a

ric-imagegen-frontend-web

Generate design-focused website reference images for landing pages and marketing sites.

Community
Advanced