skills.rest
jaguarliuu
jaguarliuuCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate React or Vue frontend components with typography, color, motion, and layout guidance.

Updated Mar 15, 2026
Search Tags:#design#frontend#react#css#UI#vue#aesthetics
One-click install
npx skills add https://github.com/jaguarliuu/miniclaw --skill frontend-design-jaguarliuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jaguarliuu/miniclaw/tree/main/.miniclaw/skills/frontend-design
Command: npx skills add https://github.com/jaguarliuu/miniclaw --skill frontend-design-jaguarliuu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams create distinctive, production-grade frontend interfaces that move beyond generic AI aesthetics, delivering polished visuals and robust code.

Core Features & Use Cases

  • Aesthetic direction: Establish a bold, cohesive front-end vision (typography, color, motion, layout) and translate it into implementable UI artifacts.
  • Code-driven design: Generate ready-to-use UI components, pages, and patterns across frameworks such as React or Vue, with accessible and performant output.
  • Use Case: Build a showcase dashboard or marketing site that adheres to a chosen aesthetic direction and a cohesive design system.

Quick Start

Describe your frontend requirement (component, page, or UI goal) and the system will generate a production-grade, aesthetically cohesive implementation.

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 React UI components that avoid generic AI aesthetics?▼

To generate production-grade React UI components, you define an aesthetic direction covering typography, color, and motion. The system translates this vision into accessible, performant, and visually distinctive component code that moves beyond generic outputs.

Can I use this to build a cohesive design system for a Vue dashboard?▼

Yes, you can build a Vue dashboard using this system. It generates pages and patterns across frameworks like Vue, ensuring frontend aesthetics, accessibility, and performance align with your specified cohesive design system.

What is the best way to establish a cohesive frontend vision for a web UI project?▼

The best way to establish a cohesive frontend vision is to define your typography, color, motion, and layout requirements upfront. The system then translates these aesthetic directions into implementable UI artifacts and design guidance.

Does this frontend design tool generate accessible and performant code?▼

Yes, the frontend design tool generates accessible and performant code. It satisfies requirements for frontend aesthetics and performance by outputting ready-to-use UI components and patterns across supported frameworks like React and Vue.

What frontend requirements do I need to describe to get a production-grade UI implementation?▼

You need to describe your frontend requirement, such as a specific component, page, or UI goal. The system will then generate a production-grade, aesthetically cohesive implementation tailored to that specified aesthetic direction.

Related Skills

Explore More Design & Creative Skills→
tuantiensiutuantiensiu
1

frontend-aesthetics

Guide UI design teams in applying predefined aesthetic directions, typography, and color to landing pages, dashboards, and forms.

Community
Intermediate
ControlNetControlNet
9

frontend-claude

Create production-ready frontend interfaces with HTML, CSS, and JavaScript.

Community
Advanced
telagodtelagod
238

frontend-design

Standardize frontend UI decisions with a structured design playbook.

Community
Advanced
liauw-medialiauw-media
3

frontend-design

Develop distinctive frontend interfaces with production-grade code and cohesive aesthetics.

Community
Advanced