frontend-design

Name: frontend-design
Availability: InStock
Author: phuhao

Generate production-ready frontend code with distinct aesthetic direction.

12|3|Updated Jun 17, 2026

Search Tags:#frontend #react #css #web-development #ui-design #design-systems

Ready to run

npx skills add https://github.com/phuhao00/bony-agent --skill frontend-design-phuhao00

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the issue of generic, uninspired AI-generated web interfaces by providing a framework for creating visually striking, context-aware, and highly polished frontend components.

Core Features & Use Cases

Aesthetic Directioning: Implements specific design languages ranging from brutalist and maximalist to refined minimalism.
Production-Ready Code: Generates functional, accessible, and performant code (HTML/CSS/JS/React) with advanced styling techniques.
Use Case: Use this skill to build a high-impact landing page for a new product, a custom dashboard with unique data visualizations, or a bespoke React component that requires a specific, non-generic brand identity.

Quick Start

Use the frontend-design skill to create a brutalist-style landing page for a modern coffee shop that features a dark theme and bold typography.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I generate production-ready React components with a unique aesthetic direction?▼

You can generate production-ready React components with a unique aesthetic direction by applying specific design languages like brutalism or minimalism, ensuring cohesive typography, spatial composition, and motion design for a distinct visual identity.

How do I build a high-impact landing page that avoids generic AI-generated web interfaces?▼

Build a high-impact landing page avoiding generic AI-generated web interfaces by using this skill to create visually striking, context-aware frontend code with advanced styling techniques and a bespoke brand identity.

Does this skill support creating web UIs with brutalist or minimalist design systems?▼

Yes, this skill supports creating web UIs with brutalist or minimalist design systems by implementing specific aesthetic directions that range from brutalist and maximalist to refined minimalism for your frontend components.

Can I use this to create custom dashboards with unique data visualizations in CSS and HTML?▼

Yes, you can use this to create custom dashboards with unique data visualizations in CSS and HTML, generating functional, accessible, and performant code tailored for modern web frameworks and interactive interfaces.

What is the best way to ensure cohesive typography and motion design in web development?▼

The best way to ensure cohesive typography and motion design in web development is to generate frontend code using a framework that applies specific design languages and enforces strict spatial composition rules.

Why does my generated frontend code lack a distinct design identity for interactive interfaces?▼

Your generated frontend code lacks a distinct design identity because it relies on generic outputs, whereas this skill provides a framework for creating visually striking, context-aware components with specific aesthetic directioning.