frontend-design

Designs production-grade frontend interfaces with cohesive visual systems and accessible HTML/CSS/JS.

Updated Mar 30, 2026
One-click install
npx skills add https://github.com/zyx77550/RESIDUAL-MISHKAT --skill frontend-design-zyx77550
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/zyx77550/RESIDUAL-MISHKAT/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/zyx77550/RESIDUAL-MISHKAT --skill frontend-design-zyx77550

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to design and implement consistently; this skill guides teams to avoid generic AI aesthetics while delivering polished, working code.

Core Features & Use Cases

  • Clear aesthetic direction with a bold, cohesive design system (typography, color, motion) applied to components, pages, dashboards, or apps.
  • Produce production-ready HTML/CSS/JS or framework-specific components (React, Vue) that match the defined aesthetic direction.
  • Real-world use cases include building a landing page with a unique visual language, a design-system-driven dashboard, or reusable UI components that can be themed quickly.

Quick Start

Provide a requirements brief outlining the component, page, or application to build, and I will generate a complete production-grade frontend design solution.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design frontend interfaces that avoid generic AI aesthetics?▼

To design distinctive frontend interfaces, you must establish a defined aesthetic direction with cohesive typography, color, and motion systems. This approach ensures production-ready HTML, CSS, and JS components that avoid generic AI aesthetics while delivering polished UX.

Can I build framework-specific components like React or Vue for a design-system dashboard?▼

Yes, you can generate production-ready React or Vue components for a design-system-driven dashboard. The system translates your requirements into reusable, accessible UI components that match the defined aesthetic direction and cohesive visual language.

What do I need to start building accessible HTML or CSS pages with a cohesive visual system?▼

To start building accessible HTML/CSS/JS pages, you need a defined design direction including typography and color systems. Providing a requirements brief for your component or page yields a complete production-grade frontend design solution with reusable UI components.

Does this approach work for creating reusable UI components that can be themed quickly?▼

Yes, this approach works for creating reusable UI components that can be themed quickly. By applying a bold, cohesive design system with specific typography and color rules, it generates accessible framework-specific components adapted for rapid theming.

What is the best way to translate requirements into production-ready frontend code?▼

The best way to translate requirements into production-ready frontend code is to provide a detailed requirements brief outlining the target component or application. This yields accessible HTML/CSS/JS or framework-specific components matching a cohesive visual system and polished UX.