skills.rest
dmmulroy
dmmulroyCOMMUNITY
Explore all skills by this author →
Website𝕏@dillon_mulroyGitHub

frontend-design

Creates production-grade frontend interfaces with HTML/CSS/JS, React, or Vue, featuring typography, color systems, motion, and accessibility.

232|14|Updated Jan 26, 2026
Search Tags:#design#ui#accessibility#frontend#react#css#aesthetics
One-click install
npx skills add https://github.com/dmmulroy/overseer --skill frontend-design-dmmulroy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/dmmulroy/overseer/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/dmmulroy/overseer --skill frontend-design-dmmulroy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics and deliver polished, real working code with meticulous attention to detail.

Core Features & Use Cases

  • Establish a bold aesthetic direction and translate it into functional UI across HTML/CSS/JS, React, Vue, or other frameworks.
  • Produce production-grade components, pages, dashboards, or applications with thoughtful typography, color systems, motion, and accessibility.
  • Use-case: build a landing page with a unique visual identity or develop a React component library that adheres to the chosen aesthetic.

Quick Start

Provide a bold frontend concept as input and receive a ready-to-ship UI implementation that matches the selected aesthetic direction.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create frontend interfaces that avoid generic AI aesthetics?▼

Generate distinctive frontend interfaces by providing a bold visual concept, which translates into production-grade UI featuring typography-focused design, cohesive color themes via CSS variables, and responsive motion enhancements.

Can I use this to build a React component library with a specific visual identity?▼

Yes, you can build a React component library with a specific visual identity. The skill generates production-grade components for HTML/CSS/JS, React, or Vue that adhere to your chosen aesthetic direction.

Does it support Vue and HTML/CSS/JS or is it only for React?▼

It supports Vue and HTML/CSS/JS alongside React. You can generate accessible, production-grade pages, dashboards, or components across these frameworks while maintaining a cohesive aesthetic direction and typography-focused design.

How do I ensure my generated CSS is responsive and accessible?▼

Ensure responsive and accessible CSS by utilizing CSS variables for cohesive color themes, applying thoughtful typography, and integrating motion-enhanced UI that adheres to accessibility standards across your chosen framework.

What's the best way to translate a bold aesthetic concept into functional UI?▼

Translate a bold aesthetic concept into functional UI by defining the aesthetic direction upfront, allowing the system to generate ready-to-ship code with cohesive color systems, typography, and motion for your website or dashboard.

Why does my generated frontend design lack a cohesive visual identity?▼

Your frontend design lacks a cohesive visual identity when a bold aesthetic direction is not established upfront. Defining this direction ensures the generated code utilizes consistent typography, CSS variable color themes, and motion.

Related Skills

Explore More Design & Creative Skills→
IwatsukaYuraIwatsukaYura

frontend-design

Define and enforce a cohesive visual system for frontend interfaces.

Community
Advanced
eralvarezeralvarez

frontend-design

Generate frontend interfaces from user briefs using React, Vue, or Svelte.

Community
Advanced
nicholasgriffintnnicholasgriffintn
2

performance-optimisation

Identify and fix performance bottlenecks across frontend, backend, and database layers.

Community
Basic
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate