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.