frontend-design

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

3|Updated Dec 18, 2025
One-click install
npx skills add https://github.com/NachoFLizaur/corvus --skill frontend-design-nachoflizaur
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/NachoFLizaur/corvus/tree/main/skill/frontend-design
Command: npx skills add https://github.com/NachoFLizaur/corvus --skill frontend-design-nachoflizaur

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics and deliver polished, usable code.

Core Features & Use Cases

  • Clear design direction and aesthetic governance for components, pages, or apps.
  • Practical guidelines on typography, color systems, motion, spacing, and accessibility.
  • Real-world use: design a reusable component library with consistent visuals across an enterprise dashboard.

Quick Start

Provide a design brief and component requirements to generate production-ready frontend code.

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-grade frontend interfaces that avoid generic aesthetics?

To generate production-grade frontend interfaces, provide a clear design brief with aesthetic direction and implementation guidelines. This produces ready-to-ship React, Vue, or vanilla HTML/CSS/JS code with bold visuals and high usability standards.

Can I use this frontend design approach with vanilla HTML and CSS or only React?

You can design distinctive frontend interfaces across React, Vue, or vanilla HTML/CSS/JS. The approach applies bold visual direction, accessibility, and performance standards to web components, pages, or full applications regardless of the chosen framework.

What do I need to provide to create a reusable component library with consistent visuals?

To create a reusable component library with consistent visuals, provide a design brief, component requirements, and practical guidelines covering typography, color systems, motion, and spacing. This ensures enterprise-grade aesthetic governance.

Does this frontend design process handle accessibility and motion guidelines?

Yes, the frontend design process explicitly handles accessibility and motion guidelines. It requires defined implementation guidelines for typography, color systems, motion, and layout to generate distinctive, accessible, and ready-to-ship code.

What's the best way to design an enterprise dashboard UI without generic AI aesthetics?

The best way to avoid generic AI aesthetics for an enterprise dashboard UI is to provide a clear design brief with an explicit aesthetic direction. This governs the visual output to deliver polished, distinctive, and production-grade code.