skills.rest
rapyuta-robotics
rapyuta-roboticsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/rapyuta-robotics/agent-ai --skill frontend-design-rapyuta-robotics
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
avgarciaavgarcia

ui-from-mockup

Convert HTML/CSS mockups into Angular Material 3 components.

Community
Advanced
novoleinovolei

frontend-design

Translate design requirements into polished HTML, CSS, and JavaScript interfaces.

Community
Advanced
fanguyunfanguyun

gsap-react

Integrate GSAP animations into React components using the useGSAP hook.

Community
Intermediate
timothyfroehlichtimothyfroehlich

pinpoint-ui

Create accessible shadcn/ui interfaces with Tailwind CSS v4 patterns.

Community
Basic