ui

Create production-grade frontend interfaces with HTML, CSS, JavaScript, React, or Vue.

Updated Jun 4, 2026
One-click install
npx skills add https://github.com/Seva-Eats/seva-web --skill ui-seva-eats
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/Seva-Eats/seva-web/tree/main/.agents/skills/ui
Command: npx skills add https://github.com/Seva-Eats/seva-web --skill ui-seva-eats

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create frontend interfaces that feel intentional, memorable, and production-ready instead of generic or bland. It is designed for situations where visual quality, interaction design, and implementation detail all matter.

Core Features & Use Cases

  • Distinctive Interface Design: Choose a strong aesthetic direction and translate it into a cohesive web experience.
  • Production-Grade Frontend Code: Build real, functional components or pages in HTML, CSS, JavaScript, React, Vue, or similar stacks.
  • Polished Presentation: Use typography, color, motion, composition, and atmosphere to create interfaces that stand out.
  • Use Case: A startup needs a landing page, dashboard, or product surface that looks premium and feels carefully crafted rather than template-driven.

Quick Start

Ask for a frontend component or page, name the product goal and audience, and specify the aesthetic direction you want the skill to execute.

Frequently Asked Questions about ui

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

FAQPage Schema
How do I build a React frontend interface that looks premium instead of generic?

To build a premium React frontend interface, specify your product goal, audience, and desired aesthetic direction. The skill translates strong visual identity into cohesive web experiences with production-grade code across typography, color, motion, and composition.

What's the best way to create production-grade web components with polished interaction design?

The best way to create production-grade web components with polished interaction design is to define a clear aesthetic direction. The skill generates framework-ready code implementing intentional typography, color, motion, and responsive composition for memorable user experiences.

Can I use this skill to design a dashboard with distinctive visual identity in Vue?

Yes, you can use this skill to design a dashboard with distinctive visual identity in Vue. It builds real, functional components or pages across HTML, CSS, JavaScript, React, Vue, or similar stacks with carefully crafted, template-free presentation.

How does motion design factor into creating memorable user experiences for web applications?

Motion design creates memorable user experiences for web applications by adding intentional, polished interaction design. The skill integrates motion alongside typography, color, composition, and atmosphere to ensure interfaces feel carefully crafted rather than bland.

Do I need to specify an aesthetic direction to generate frontend code for a landing page?

Yes, you need to specify an aesthetic direction to generate frontend code for a landing page. Naming the product goal, audience, and visual style ensures the resulting interface has a cohesive aesthetic direction and strong visual identity rather than appearing generic.

Does this approach handle accessibility alongside visual design and motion?

Yes, this approach handles accessibility alongside visual design and motion. The skill requires working implementation details across typography, color, motion, accessibility, and framework-ready code to ensure the production-grade interface is both distinctive and inclusive.