skills.rest
KYRIE66nb
KYRIE66nbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-skill

Design interfaces with a visual thesis, content plan, and interaction thesis.

Updated Apr 8, 2026
Search Tags:#typography#frontend#ui-design#design-system#motion#visual-design#landing-page
One-click install
npx skills add https://github.com/KYRIE66nb/codex-omx-public-config --skill frontend-skill-kyrie66nb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-skill
Source: https://github.com/KYRIE66nb/codex-omx-public-config/tree/main/home/.codex/skills/frontend-skill
Command: npx skills add https://github.com/KYRIE66nb/codex-omx-public-config --skill frontend-skill-kyrie66nb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides designers and developers to deliver visually strong, cohesive user interfaces by prioritizing layout, typography, spacing, and motion over clutter and generic components.

Core Features & Use Cases

  • Visual thesis, content plan, and interaction thesis before building to align teams and outcomes.
  • Clear defaults for typography, spacing, and motion to ensure premium, consistent UI across pages and apps.
  • Applicable to landing pages, apps, prototypes, and design systems to accelerate production without sacrificing quality.

Quick Start

Before building, write a visual thesis, a content plan, and an interaction thesis, then apply the design rules to produce a cohesive 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 visually strong landing pages with good typography?▼

To design visually strong landing pages, establish a visual thesis, content plan, and interaction thesis before building to ensure disciplined composition and typography over generic components.

What is a visual thesis in UI design and when do I need it?▼

A visual thesis in UI design is a working model that defines a single focal visual and restrained copy for your interface. You need it when building landing pages, apps, or prototypes to align teams and ensure cohesive outcomes.

How do I maintain consistent typography and spacing across a design system?▼

Maintain consistent typography and spacing across a design system by applying codified defaults for layout and motion, ensuring premium, cohesive UI across all pages and apps without sacrificing production quality.

Can I use this approach for both app prototypes and full design systems?▼

Yes, you can use this approach for app prototypes and full design systems because it codifies defaults for typography, spacing, and motion to accelerate production while maintaining premium visual quality.

What's the best way to structure interaction and motion for a cohesive UI?▼

The best way to structure interaction and motion for a cohesive UI is to write an interaction thesis that prescribes deliberate motion and clear defaults, ensuring premium consistency across your interfaces.

Why does my landing page UI look generic despite using standard components?▼

Your landing page UI looks generic because standard components often lack a single focal visual and restrained copy. Defining a visual thesis and applying disciplined typography overrides generic defaults for a stronger composition.

Related Skills

Explore More Design & Creative Skills→
cshyangcshyang

gsd:workflow:discovery-phase

Plan and execute a project discovery phase to define requirements and scope.

Community
Intermediate
mchien15mchien15

frontend-design

Convert design references into reusable HTML/CSS/JS components and design tokens.

Community
Advanced
hisazumihisazumi
4

thesis-review

Evaluate LaTeX and Word theses for formatting readiness and content quality.

Community
Intermediate
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate