skills.rest
yu-iskw
yu-iskwCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-skill

Develop a visual thesis, content plan, and interaction thesis before building.

Updated Dec 29, 2025
Search Tags:#typography#design#branding#frontend#ui-design#motion#landing-page
One-click install
npx skills add https://github.com/yu-iskw/dbt-artifacts-parser-ts --skill frontend-skill-yu-iskw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-skill
Source: https://github.com/yu-iskw/dbt-artifacts-parser-ts/tree/main/.codex/skills/frontend-skill
Command: npx skills add https://github.com/yu-iskw/dbt-artifacts-parser-ts --skill frontend-skill-yu-iskw

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides teams to design visually strong, intent-driven landing pages, websites, apps, and UI by prioritizing imagery, typography, spacing, and motion over clutter.

Core Features & Use Cases

  • Develops a visual thesis, content plan, and interaction thesis to align teams before building.
  • Provides rules for composition, typography, whitespace, motion, and layout to achieve premium, restrained UI.
  • Use Case: design a landing page for a product with a single dominant visual and concise copy.

Quick Start

Draft a visual thesis, a content plan, and an interaction thesis before starting the build.

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 typography and motion?▼

To design a premium landing page, start by drafting a visual thesis, content plan, and interaction thesis before building. This establishes rules for composition, typography, whitespace, and motion to ensure a restrained, high-quality UI.

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

A visual thesis in UI design defines the core visual direction prioritizing imagery, typography, and spacing over clutter. You need it when aligning teams to build intent-driven websites, apps, or marketing pages with consistent perceived quality.

Do I need design tokens to build consistent UI across multiple viewports?▼

Yes, you need clear design tokens and motion guidelines to ensure UI consistency across components and viewports. They provide the foundational rules for spacing, typography, and motion required for premium visual alignment.

How to plan content and interactions for a product marketing page before building?▼

Plan content and interactions by drafting a content plan alongside visual and interaction theses. This approach aligns teams on concise copy and layout rules, ensuring the marketing page features a single dominant visual without clutter.

What is the best way to align teams on UI composition and motion guidelines?▼

The best way to align teams is establishing clear design tokens and motion guidelines before development. This ensures consistent application of composition, whitespace, and typography rules across all UI components and viewports.

Related Skills

Explore More Design & Creative Skills→
thejordanleopoldthejordanleopold
4

design-system

Codify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.

Community
Advanced
peteanderson80peteanderson80

frontend-skill

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

Community
Intermediate
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
PMDevSolutionsPMDevSolutions
7

screenshot-intake

Convert website screenshots or live URLs into structured build specifications.

Official
Advanced