skills.rest
raphaelandrews
raphaelandrewsCOMMUNITY
Explore all skills by this author →
Website𝕏@_andrewsshGitHub

frontend-design

Generate production-grade frontend interfaces with coherent design direction across HTML/CSS/JS, React, and Vue.

1|1|Updated May 15, 2025
Search Tags:#design#ui#frontend#react#css#components#aesthetics
One-click install
npx skills add https://github.com/raphaelandrews/fsx --skill frontend-design-raphaelandrews
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/raphaelandrews/fsx/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/raphaelandrews/fsx --skill frontend-design-raphaelandrews

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides the creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics and emphasize precise design decisions.

Core Features & Use Cases

  • Production-grade UI components, pages, dashboards, and posters with a coherent aesthetic direction.
  • Framework-agnostic guidance and implementation options for HTML/CSS/JS, React, Vue, etc.
  • Design directions focused on typography, color, motion, and spatial composition with emphasis on accessibility.

Quick Start

Describe a target frontend design direction and I will generate production-grade UI components that embody that aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate React UI components that avoid generic AI aesthetics?▼

To generate React UI components that avoid generic AI aesthetics, describe a specific design direction and the skill will produce production-grade UI code emphasizing precise typography, color, and motion decisions.

What is the best way to build production-grade frontend interfaces across different frameworks?▼

The best way to build production-grade frontend interfaces is using framework-agnostic guidance that delivers polished UI code for HTML/CSS/JS, React, Vue, or other frameworks with coherent aesthetic direction.

Can I use this to create dashboards and pages with strong visual quality and accessibility?▼

Yes, you can create dashboards and pages with strong visual quality and accessibility by specifying your frontend design requirements, which generates components focused on spatial composition and accessible interactions.

Does this frontend design approach work with plain HTML and CSS or only React?▼

This frontend design approach works with plain HTML and CSS as well as React and Vue, providing framework-agnostic implementation guidance and options to ensure polished UI code across your chosen stack.

Why do my generated UI components look like generic AI slop and lack a coherent aesthetic?▼

Generated UI components look like generic AI slop because they lack precise design direction; applying specific typography, color, and motion decisions ensures your frontend interfaces avoid generic aesthetics and achieve production-grade quality.

Related Skills

Explore More Design & Creative Skills→
MinhAnh-CorpMinhAnh-Corp

frontend-design

Generates frontend interfaces with production-ready code from user requirements.

Official
Advanced
MonosenMonosen

frontend-design

Design distinctive frontend interfaces with production-grade code quality.

Community
Advanced
mgd34msumgd34msu
4

storybook

Develop, document, and test UI components in isolation with Storybook.

Community
Intermediate
TonyQ-AITonyQ-AI
9

ui-design

Generate UI/UX designs with design tokens and WCAG-compliant accessibility.

Community
Advanced