frontend-design

Design and implement frontend interfaces with editorial aesthetics and typography.

1|Updated Jan 29, 2026
One-click install
npx skills add https://github.com/AMontagu/news-from-historical-people --skill frontend-design-amontagu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/AMontagu/news-from-historical-people/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/AMontagu/news-from-historical-people --skill frontend-design-amontagu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to design and implement with consistent aesthetics across platforms; this skill provides a structured approach to deliver bold, polished UI with intentional typography, color, and motion.

Core Features & Use Cases

  • Establish a bold, cohesive aesthetic direction before coding, including purpose, tone, constraints, and differentiation.
  • Implement working code (HTML/CSS/JS, React, Vue, or other frameworks) that is visually striking, accessible, and performant, with meticulous attention to typography, color, spacing, and motion.
  • Use cases include building web components, pages, dashboards, landing pages, or full applications that require a memorable UI aligned with a unique design language.

Quick Start

Provide a production-grade frontend component or page that matches the chosen aesthetic direction and delivers polished, accessible UI.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build production-grade frontend interfaces with a distinctive aesthetic?▼

Production-grade frontend interfaces require a structured approach to establish a bold aesthetic direction with intentional typography, color, and motion before coding. This delivers visually striking, accessible, and performant working code across React, Vue, or plain HTML/CSS.

Can I use this skill to design React components and dashboards?▼

Yes, you can design React components and dashboards. The skill implements working code for web components, pages, applications, and dashboards across React, Vue, or plain HTML/CSS with meticulous attention to spacing and motion.

What is the best way to establish a cohesive UI design language before coding?▼

The best way to establish a cohesive UI design language is to define the purpose, tone, constraints, and differentiation of the aesthetic direction upfront. This ensures bold, polished UI aligned with a unique visual identity.

Does this frontend design approach handle accessibility and performance budgets?▼

Yes, the frontend design approach explicitly handles accessibility considerations and performance budgets. It delivers clean, maintainable code that is visually striking while meeting strict accessibility and performance standards.

When do I need an editorial design focus for frontend web components?▼

You need an editorial design focus when building web components, landing pages, or visual UI systems that require a memorable UI. This approach emphasizes nuanced typography and distinctive aesthetics to deliver polished, production-grade interfaces.

What frameworks are supported for implementing production-grade frontend UX?▼

Supported frameworks include React, Vue, and plain HTML/CSS. The skill implements visually striking, accessible, and performant working code with meticulous attention to typography, color, spacing, and motion across these platforms.