skills.rest
kegbi
kegbiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate production-grade frontend interfaces from user requirements.

1|Updated Mar 15, 2026
Search Tags:#design#ui#frontend#react#css#web
One-click install
npx skills add https://github.com/kegbi/monica-companion --skill frontend-design-kegbi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/kegbi/monica-companion/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/kegbi/monica-companion --skill frontend-design-kegbi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Core Features & Use Cases

  • Bold aesthetic direction and production-grade UI implementation from design brief.
  • Generate HTML/CSS/JS code, components, and layouts that align with accessibility and branding standards.
  • Use Case: When designing a unique front-end for a website or app, produce reusable components and a cohesive visual system.

Quick Start

Describe the target UI and audience, and constraints, then instruct the AI to implement a production-grade frontend design with a bold aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-grade React components with a distinctive UI?▼

Build production-grade React components by applying bold aesthetic direction and cohesive visual systems. This ensures web components meet high standards for typography, color governance, and accessibility while avoiding generic AI aesthetics.

What is the best way to create a web dashboard that avoids generic AI aesthetics?▼

Create a web dashboard avoiding generic AI aesthetics by implementing a design brief with bold aesthetic direction. This generates polished HTML/CSS/JS code and reusable components aligned with accessibility and branding standards.

Can I use this approach to style web pages with vanilla HTML and CSS?▼

Yes, you can style web pages with vanilla HTML and CSS. It generates creative, polished code and UI design layouts that align with accessibility standards and produce a cohesive visual system across your application.

Does this frontend design method support Vue framework applications?▼

Yes, this frontend design method supports Vue framework applications. It creates production-grade frontend interfaces across frameworks like React, Vue, or vanilla HTML/CSS, ensuring aesthetic direction, motion, and accessibility standards are met.

How do I start building a cohesive visual system for a landing page?▼

Start building a cohesive visual system by describing the target UI, audience, and constraints. Then generate HTML/CSS/JS code and reusable components that implement a production-grade frontend design with a bold aesthetic.

Related Skills

Explore More Design & Creative Skills→
kireevkit15-syskireevkit15-sys

shape

Run a structured discovery interview and generate a design brief.

Community
Advanced
mostafasudomostafasudo
3

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS, React, or Vue.

Community
Advanced
maurodf0maurodf0

webf-native-ui

Integrate Cupertino native UI components into React, Vue, or vanilla JS apps with TypeScript support.

Community
Advanced
resetreset

static-site-engineer

Develop front-end templates across Zola, Hugo, 11ty, Astro, and Eleventy sites.

Community
Advanced