skills.rest
ingbyr
ingbyrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Convert high-level frontend requirements into production-grade React, Vue, or HTML/CSS interfaces.

2|Updated Apr 3, 2026
Search Tags:#design#ui#frontend#react#css#components
One-click install
npx skills add https://github.com/ingbyr/lzcode --skill frontend-design-ingbyr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ingbyr/lzcode/tree/main/packages/desktop/src-tauri/lz-assets/skills/frontend-design
Command: npx skills add https://github.com/ingbyr/lzcode --skill frontend-design-ingbyr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the creation of distinctive, production-grade frontend interfaces from high-level ideas, eliminating design-to-code delays.

Core Features & Use Cases

  • End-to-end frontend development: HTML/CSS/JS, React, Vue, or vanilla stacks.
  • Aesthetic direction: bold, unique design language with accessible, responsive UI.
  • Deliverables: fully functional components, pages, dashboards, posters, or apps with documentation.

Quick Start

Provide your frontend requirements and aesthetic direction to generate a production-grade UI.

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 from high-level requirements?▼

To generate production-grade React UI, provide your high-level frontend requirements and aesthetic direction. This Skill translates them directly into ready-to-deploy code, architectural guidance, and styling guidelines for your components.

Can I build a frontend dashboard using Vue and vanilla HTML/CSS?▼

Yes, you can build a frontend dashboard using Vue, vanilla HTML/CSS, or React. The Skill converts your high-level requirements into functional, responsive dashboards with accessible UI across these supported stacks.

What is the best way to create a distinctive aesthetic for a web app interface?▼

The best way to create a distinctive aesthetic for a web app interface is to specify a bold, unique design language as your aesthetic direction. The Skill then generates production-grade UI code aligning with that chosen visual style.

How do I get ready-to-deploy code for a landing page?▼

To get ready-to-deploy code for a landing page, supply your frontend requirements and desired aesthetic. The Skill outputs fully functional pages with documentation, eliminating design-to-code delays.

Does this frontend design approach support building a complete UI library?▼

Yes, this frontend design approach supports building a complete UI library. It generates fully functional components and architectural guidance across React, Vue, or vanilla HTML/CSS, ensuring accessible and responsive deliverables.

Do I need to provide styling guidelines to get accessible and responsive UI?▼

You do not need to provide styling guidelines to get accessible and responsive UI. You only need to provide your frontend requirements and aesthetic direction, and the Skill generates the matching styling guidelines and code.

Related Skills

Explore More Design & Creative Skills→
optionioptioni

frontend-design

Design and code distinctive frontend interfaces with specific aesthetic requirements.

Official
Advanced
tianguzhetianguzhe
1

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, and React components.

Community
Advanced
RUSHYOPRUSHYOP

frontend-design

Generate production-grade frontend interfaces with design constraints and UX guidelines.

Community
Advanced
MClaudioMClaudio

frontend-design

Generates frontend interfaces from vague UI requests using React or HTML/CSS.

Community
Advanced