skills.rest
metric-space-ai
metric-space-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-skill

Creates visual, content and interaction theses for UI projects.

2|Updated Apr 12, 2026
Search Tags:#design#ui#frontend#motion#visual-design#landing-page
One-click install
npx skills add https://github.com/metric-space-ai/ctox --skill frontend-skill-metric-space-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-skill
Source: https://github.com/metric-space-ai/ctox/tree/main/skills/packs/development/frontend-skill
Command: npx skills add https://github.com/metric-space-ai/ctox --skill frontend-skill-metric-space-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers need a principled approach to visually strong interfaces that communicate brand and hierarchy. This skill applies to landing pages, websites, apps, prototypes, demos, and game UI across product domains. It enforces a restrained composition, image-led structure, cohesive copy, and tasteful motion while avoiding clutter.

Core Features & Use Cases

  • Structured approach to craft a visual thesis, content plan, and interaction thesis before building.
  • Emphasis on strong imagery, concise copy, disciplined spacing, and restrained motion to achieve premium UI.
  • Applicable to landing pages, product sites, apps, demos, and interactive prototypes.

Quick Start

Define a visual thesis, a content plan, and an interaction thesis before starting the UI project and apply them to your design task.

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?▼

To design a premium landing page, establish a visual thesis and content plan first. Apply restrained composition, image-led structure, concise copy, and disciplined spacing to achieve a visually strong interface.

What is a visual thesis and interaction thesis in frontend UI design?▼

A visual thesis defines the core aesthetic direction, while an interaction thesis specifies motion principles. Both are structured frameworks created before building UI to ensure cohesive brand communication and avoid clutter.

Can I use this approach for game UI and interactive prototypes?▼

Yes, this UI design approach applies to game UI, interactive prototypes, apps, and demos across product domains. It enforces restrained composition and cohesive copy regardless of the specific interface type.

What's the best way to avoid clutter in website and app UI design?▼

The best way to avoid clutter is enforcing restrained composition and disciplined spacing. By leading with strong imagery and applying a cohesive content plan, you maintain visual hierarchy without unnecessary elements.

Do I need specific frameworks to achieve tasteful motion in frontend design?▼

No specific frameworks are required. You achieve tasteful motion by defining an interaction thesis beforehand, applying restrained animation principles to your UI prototypes and landing pages directly.

Why does my landing page UI lack a premium feel despite having good content?▼

Your landing page lacks a premium feel because it misses a structured visual thesis. Without image-led structure, cohesive copy, and disciplined spacing, strong content alone cannot establish visual hierarchy.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
IPADS-SAIIPADS-SAI
44

frontend-design

Create production-grade frontend interfaces with cohesive typography, color, and motion.

Official
Intermediate
gavin100305gavin100305
1

userinterface-wiki

Enforce web UI best practices for motion, styling, accessibility, and UX heuristics during code review.

Community
Intermediate
Maccio-huangMaccio-huang

web-prototype-taste-brutalist

Generate web prototypes with Swiss industrial-print Brutalist design elements.

Community
Intermediate