skills.rest
panamini
panaminiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-skill

Generates Tailwind? No, generates Tailwind-free HTML/CSS code for premium landing pages and mobile-first email layouts.

Updated May 4, 2026
Search Tags:#landing page#frontend#ui design#visual hierarchy#motion design#art direction#copy guidelines
One-click install
npx skills add https://github.com/panamini/pi-tooling --skill frontend-skill-panamini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-skill
Source: https://github.com/panamini/pi-tooling/tree/main/skills/frontend-skill
Command: npx skills add https://github.com/panamini/pi-tooling --skill frontend-skill-panamini

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the tendency to produce visually cluttered landing pages and app interfaces by enforcing clear hierarchy, restrained composition, and purposeful motion instead of generic card layouts.

Core Features & Use Cases

  • Visually strong composition rules: full-bleed hero guidance, disciplined typography hierarchy, narrow text columns, and controlled use of accents to prevent design drift.
  • Image-led narrative direction: requirements for real, stable imagery that supports scanning and keeps text readable without UI clutter.
  • Motion for hierarchy: intentional entrance, scroll/depth effects, and hover/reveal transitions (often via Framer Motion) that add presence without noise.

Quick Start

Use the frontend-skill skill to design a visually premium full-bleed landing page or restrained app UI from the brief, ensuring it follows hierarchy, imagery, copy, and motion rules described in the skill instructions.

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 clear visual hierarchy instead of cluttered card layouts?▼

To design a premium landing page with clear visual hierarchy, enforce full-bleed hero composition, restrained typography, narrow text columns, and image-led narrative direction to prevent generic UI clutter and design drift.

What's the best way to use motion design to support UI hierarchy in frontend development?▼

The best way to use motion design for UI hierarchy is applying intentional entrance, scroll depth, and hover reveal transitions that add presence without noise, ensuring motion aligns with structural hierarchy rather than pure decoration.

Does frontend UI design require specific typography and accent color limits to maintain art direction?▼

Frontend UI art direction requires limited typography hierarchy and controlled accent color usage. These restrained composition rules prevent visual drift and ensure scan-friendly copy remains legible across app interfaces.

Can I apply full-bleed hero composition rules to app workspace layouts and website CTA flows?▼

Full-bleed hero composition rules apply directly to website hero-to-CTA flows and app workspace layouts. They enforce image-led hierarchy and cardless defaults where UI quality depends on art direction rather than component count.

Why does my landing page UI look cluttered and how can copy guidelines fix it?▼

Landing page UI looks cluttered when it lacks scan-friendly copy guidelines and image-led narrative direction. Enforcing narrow text columns, real stable imagery, and disciplined typography hierarchy removes UI clutter and improves readability.

When should I avoid card layouts and use cardless defaults in frontend UI design?▼

You should avoid card layouts and use cardless defaults in frontend UI design when the scenario demands visually premium interfaces where art direction and image-led hierarchy matter more than displaying a high component count.

Related Skills

Explore More Design & Creative Skills→
ControlNetControlNet
9

frontend-codex

Create composition-first UI designs with full-bleed imagery and limited motion.

Community
Intermediate
AIDotNetAIDotNet
602

frontend-skill

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

Official
Advanced
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate
MMA-Marketing-ProMMA-Marketing-Pro
1

minimalist-ui

Design minimalist user interfaces with monochrome palettes and bento grid layouts.

Official
Advanced