frontend-design

Automates frontend UI design and implementation in React, HTML/CSS, and modern frameworks.

Updated Aug 27, 2026

Search Tags:#React #frontend #UI design #design-system #component-library #HTML-CSS

Ready to run

npx skills add https://github.com/rapyuta-robotics/agent-ai --skill frontend-design-rapyuta-robotics

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides designers and developers to create distinctive, production-grade frontend interfaces with a clear aesthetic direction, reducing visual sameness and iteration waste.

Core Features & Use Cases

Design system guidance: establish typography, color, spacing, and component rules for cohesive UIs.
UI implementation: build components, pages, and dashboards in React, HTML, and CSS that are visually distinctive.
Use Case: craft a SaaS dashboard with a bold, consistent visual language across widgets, forms, and navigation to accelerate delivery.
Use Case: convert a low-fidelity mock into a pixel-perfect frontend that adheres to accessibility and performance targets.

Quick Start

Start by defining a bold aesthetic direction, then implement a production-grade frontend in React or vanilla HTML/CSS to demonstrate the concept.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I build a React UI with a consistent design system?▼

Yes, you can convert low-fidelity mocks into pixel-perfect frontend code. The implementation enforces accessibility standards, responsiveness, and performance targets while adhering to your established design system in React or HTML/CSS.

What's the best way to establish a distinctive visual identity for a web app?▼

The best way to establish a distinctive visual identity is to define a bold aesthetic direction early. This guides the implementation of cohesive, production-grade UIs across components, reducing visual sameness in your web application.

Does this frontend design approach work with vanilla HTML and CSS?▼

Yes, this frontend design approach works with vanilla HTML and CSS, as well as React. It applies production-grade code quality, accessibility, and responsiveness standards across modern frameworks to deliver polished user interfaces.

How do I create a SaaS dashboard with a cohesive visual language?▼

Create a SaaS dashboard with a cohesive visual language by applying a unified design system across widgets, forms, and navigation. This enforces consistent typography and spacing rules to accelerate delivery of a polished interface.