frontend-design

Design and build frontend interfaces with distinctive aesthetics across HTML/CSS, React, or Vue.

Updated Aug 27, 2026

Search Tags:#design #ui #frontend #react #css #aesthetics

Ready to run

npx skills add https://github.com/tomrford/dotfiles --skill frontend-design-tomrford

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/tomrford/dotfiles/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/tomrford/dotfiles --skill frontend-design-tomrford

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating cohesive, production-grade frontend interfaces with distinctive aesthetics, replacing generic AI-generated visuals.

Core Features & Use Cases

Establish a bold aesthetic direction and translate it into working UI code (HTML/CSS/JS, React, Vue, etc.)
Produce polished layouts, typography, color systems, and motion that are cohesive across components and pages
Use Case: Build a landing page or dashboard that feels crafted and unique, not cookie-cutter AI design.

Quick Start

Provide a concise design brief and implement a ready-to-use frontend component or page that matches the requested aesthetic.

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 React components that avoid generic AI design?▼

Build production-grade React interfaces by providing a concise design brief to establish a bold aesthetic direction. This skill translates your brief into working code with cohesive typography, color systems, and motion that replaces cookie-cutter visuals.

What is the best way to create a cohesive design system for an HTML or Vue dashboard?▼

The best way to create a cohesive design system for HTML or Vue dashboards is to establish a bold aesthetic direction first. This approach ensures polished layouts, consistent typography, and unified color systems across all components and pages.

Can I use this frontend design approach for both marketing sites and web apps?▼

Yes, you can use this frontend design approach for marketing sites and web apps. It applies the same distinctive aesthetic principles across components, pages, and dashboards in frameworks like React, Vue, or HTML/CSS, ensuring visual consistency throughout.

Does this skill handle accessibility and performance requirements for frontend interfaces?▼

Yes, this skill handles accessibility and performance requirements for frontend interfaces. It ensures working code quality, design consistency, and compliance with accessibility standards while maintaining a distinctive aesthetic direction across your components.

How do I start crafting a distinctive UI layout from a basic design brief?▼

Start crafting a distinctive UI layout by providing a concise design brief outlining your desired aesthetic. The skill then implements a ready-to-use frontend component or page that matches your requested visual direction and establishes a cohesive design system.

Why does my generated frontend interface lack a distinctive aesthetic across different pages?▼

Your generated frontend interface lacks a distinctive aesthetic because it lacks a cohesive design system. This skill solves that by establishing a bold aesthetic direction first, then translating it into unified typography, color systems, and motion across all pages.