frontend-design

Guide frontend interface creation from design brief to HTML/CSS/JS implementation.

231|24|Updated Apr 11, 2026

Search Tags:#accessibility #css #component #ui-ux #aesthetics #frontend-design #react-vue

Ready to run

npx skills add https://github.com/LichAmnesia/lich-skills --skill frontend-design-lichamnesia

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/LichAmnesia/lich-skills/tree/main/skills/frontend-design
Command: npx skills add https://github.com/LichAmnesia/lich-skills --skill frontend-design-lichamnesia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design is often inconsistent, resulting in underwhelming user experiences. This Skill guides the creation of distinctive, production-grade frontend interfaces with a strong aesthetic direction, ensuring code quality and visual polish from concept to implementation.

Core Features & Use Cases

Design thinking-driven aesthetics: establish a bold visual direction and translate it into concrete UI components, pages, or apps.
Production-grade implementation: deliver working HTML/CSS/JS patterns, reusable components, and accessible interfaces aligned with modern frameworks (React, Vue, etc.).
Use Case: when you need a cohesive, memorable frontend for a product landing page, admin dashboard, or complex UI requiring consistent typography, color, and motion.

Quick Start

Start by providing a design brief and a starter component structure to generate a polished frontend interface.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I build production-grade frontend interfaces with React or Vue?▼

To build production-grade frontend interfaces, this Skill translates your design brief into polished UI components using React or Vue. It ensures visual consistency, accessible HTML/CSS/JS patterns, and bold aesthetics from concept to implementation.

What's the best way to create a distinctive UI design for a web application?▼

The best way to create a distinctive UI design is by applying design thinking to establish a bold visual direction. This Skill translates that direction into concrete frontend components with consistent typography, color, and motion for memorable user experiences.

Can I generate accessible HTML/CSS/JS components from a design brief?▼

Yes, you can generate accessible HTML/CSS/JS components directly from a design brief. By providing a starter component structure, this Skill outputs ready-to-run interfaces with polished interactions and aligned accessibility standards.

Does this frontend design approach work for both landing pages and admin dashboards?▼

This frontend design approach works for both landing pages and admin dashboards. It delivers cohesive, production-grade interfaces for complex web UIs requiring consistent typography, color schemes, and polished motion across various application contexts.

How do I ensure visual consistency across complex frontend components?▼

To ensure visual consistency across complex frontend components, this Skill applies aesthetic guidelines and concrete coding practices. It translates a cohesive visual direction into reusable HTML/CSS/JS patterns and framework-aligned components.