skills.rest
rchiarino
rchiarinoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generate production-grade frontend interfaces with unique aesthetics and refined design.

Updated Feb 10, 2026
Search Tags:#design#ui#web development#frontend#react#html/css#aesthetics
One-click install
npx skills add https://github.com/rchiarino/AgentHarmony --skill frontend-design-rchiarino
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/rchiarino/AgentHarmony/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/rchiarino/AgentHarmony --skill frontend-design-rchiarino

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating visually distinctive and high-quality frontend interfaces that avoid generic, uninspired AI aesthetics. It empowers users to build production-ready web components, pages, and applications with a strong emphasis on unique design and polished execution.

Core Features & Use Cases

  • Unique Aesthetic Generation: Develops interfaces with a clear, bold design direction, moving beyond common AI-generated looks.
  • Production-Grade Code: Generates functional HTML, CSS, and JavaScript (or framework-specific code like React) that is ready for deployment.
  • Detailed Design Refinement: Focuses on typography, color, motion, and spatial composition to create memorable and cohesive user experiences.
  • Use Case: A user wants to design a landing page for a new SaaS product. They can use this skill to generate a visually striking page with a retro-futuristic theme, complete with custom fonts, animated elements, and an unconventional layout.

Quick Start

Use the frontend-design skill to build a React component for a product dashboard with a brutalist 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 a React component with a unique UI design?▼

To generate a React component with a unique UI design, provide a clear conceptual direction like a brutalist or retro-futuristic aesthetic. The skill handles meticulous refinement in typography, color, and spatial composition to produce distinctive, production-grade frontend code.

Why does my AI-generated web frontend look generic?▼

AI-generated web frontends often look generic due to uninspired aesthetics. This skill solves this by focusing on high design quality, bold conceptual directions, and detailed motion refinement to create visually striking, memorable user interfaces.

Can I use this to build a complete SaaS landing page in HTML and CSS?▼

Yes, you can build a complete SaaS landing page in HTML, CSS, or React. The skill generates production-ready web pages and applications, emphasizing cohesive user experiences through custom fonts, animated elements, and unconventional layouts.

What's the best way to refine typography and motion for web components?▼

The best way to refine typography and motion for web components is to specify a bold aesthetic direction upfront. This skill meticulously refines spatial composition and animation alongside typography to avoid common AI styles and ensure polished execution.

Do I need a specific framework to generate production-grade UIs?▼

No specific framework is strictly required as dependencies are minimal, but the skill supports framework-specific code like React alongside standard HTML and CSS. You need to provide a clear conceptual direction to achieve the desired high-quality aesthetic result.

Related Skills

Explore More Design & Creative Skills→
bryanvillamilpragmabryanvillamilpragma
3

frontend-design

Generate production-grade HTML/CSS/JS frontend interfaces from design preferences.

Community
Advanced
C-Jay69C-Jay69

frontend-design

Generate accessible React/TypeScript components with design tokens and dark mode.

Community
Advanced
sandeshbagmaresandeshbagmare

design-system-patterns

Generate design tokens and implement theme switchers for web and mobile UIs.

Community
Advanced
hookvibehookvibe
3

ui-ux-pro-max

Generate UI/UX design systems with color palettes and typography guidelines.

Official
Basic