frontend-design

Generate frontend interfaces with HTML/CSS/JS, React, or Vue from user requirements.

Updated Feb 27, 2026
One-click install
npx skills add https://github.com/nawab69/pouch-monorepo --skill frontend-design-nawab69
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/nawab69/pouch-monorepo/tree/main/apps/mobile/.agents/skills/frontend-design
Command: npx skills add https://github.com/nawab69/pouch-monorepo --skill frontend-design-nawab69

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers need fast, production-grade frontend outputs that respect a strong aesthetic direction and accessibility, without compromising code quality.

Core Features & Use Cases

  • Generate polished UI components, pages, dashboards, or full interfaces with a distinctive design system.
  • Provide HTML/CSS/JS or framework-ready code (React, Vue) aligned to an aesthetic brief, typography, and motion guidelines.
  • Use Case: a startup needs a bold landing page and reusable components that fit a unique brand identity.

Quick Start

Describe the aesthetic direction and requirements, then generate production-ready frontend code that matches the brief.

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 from a design brief?

To generate production-grade frontend interfaces, describe your aesthetic direction and requirements to get ready-to-implement code. The output includes cohesive design systems with distinct typography and motion, formatted as HTML/CSS/JS or framework-ready React and Vue components.

Can I use this to create React and Vue components for a custom UI system?

Yes, you can generate React and Vue components for custom UI systems. The tool outputs framework-ready code with distinct aesthetic directions, ensuring your components maintain a bold, cohesive design system while remaining accessible and high-performance.

What is the best way to build a bold landing page with a unique brand identity?

The best way to build a bold landing page is to provide an aesthetic brief detailing your brand identity. This generates production-grade frontend code featuring cohesive typography, motion guidelines, and accessible UI components tailored to your specific visual requirements.

Does the generated frontend code include accessibility and performance optimizations?

Yes, the generated frontend code includes accessibility and performance optimizations. Every output ensures high-performance delivery and accessible interfaces, whether you are generating single UI components, full dashboards, or complete page layouts.

How do I design dashboards with cohesive typography and motion guidelines?

To design dashboards with cohesive typography and motion, specify your aesthetic direction in the initial brief. The tool produces a complete UI system with production-ready code, applying consistent visual guidelines across all dashboard components.

What are the limitations of generating frontend code from an aesthetic brief?

The limitations of generating frontend code depend on the clarity of your aesthetic brief. While the tool outputs production-ready HTML/CSS/JS or React and Vue code, you must provide detailed requirements regarding typography, motion, and design direction to ensure the output matches your specific brand identity.