skills.rest
jia-wei-00
jia-wei-00COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Develop distinctive frontend interfaces and components with HTML/CSS, React, or Vue.

Updated Jan 18, 2026
Search Tags:#typography#css#ui-design#aesthetics#motion#frontend-design
One-click install
npx skills add https://github.com/jia-wei-00/expense-tracker --skill frontend-design-jia-wei-00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jia-wei-00/expense-tracker/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/jia-wei-00/expense-tracker --skill frontend-design-jia-wei-00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating distinctive, production-grade frontend interfaces without resorting to generic AI aesthetics, saving time and ensuring high-quality UI.

Core Features & Use Cases

  • Establish a bold, cohesive design language across components and pages.
  • Produce production-grade HTML/CSS/JS, React, or Vue code ready for production.
  • Use cases include landing pages, dashboards, component libraries with polished typography, motion, and accessibility.

Quick Start

Implement a polished frontend component or page following the provided aesthetic brief.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create production-grade frontend interfaces that avoid generic AI aesthetics?▼

Production-grade frontend interfaces require a clear aesthetic direction and cohesive design language. This skill generates bold, polished UI components using HTML/CSS, React, or Vue, ensuring the code is ready for production while maintaining distinctive visual identity.

Does this frontend design approach work with both React and Vue component libraries?▼

Yes, this frontend design approach supports React and Vue component libraries. It generates production-ready code for both frameworks, applying cohesive typography, motion guidelines, and accessibility standards across dashboards, landing pages, and UI components.

What's the best way to establish a cohesive design language across multiple UI components?▼

The best way to establish a cohesive design language is defining a clear aesthetic direction with unified typography and motion guidelines. This skill applies that bold design language across multiple frontend UI components, ensuring visual consistency and production-ready code output.

How do I build a landing page with polished typography and motion in CSS?▼

Building a landing page with polished typography and motion requires a cohesive aesthetic brief. This skill generates production-grade HTML/CSS code for landing pages, implementing distinctive typography, motion guidelines, and meeting accessibility and performance constraints.

Why does my frontend UI component look generic and lack a distinctive aesthetic?▼

Frontend UI components look generic when lacking a clear aesthetic direction and cohesive typography guidelines. This skill establishes a bold design language for components, producing distinctive, production-grade interfaces that intentionally avoid generic AI aesthetics.

Related Skills

Explore More Design & Creative Skills→
sertaoseracloudsertaoseracloud

frontend-design

Design and implement frontend interfaces with typography, color, and motion systems.

Community
Advanced
choub00choub00

frontend-design

Design production-grade frontend interfaces for React, Vue, or HTML/CSS workflows.

Community
Advanced
anonymouswhite07anonymouswhite07

minimalist-ui

Generate a minimalist UI protocol with strict typography and muted color rules for dashboards and editors.

Community
Advanced
eniosales08-AIeniosales08-AI

frontend-design

Generate production-grade frontend UI code with cohesive aesthetic guidelines.

Community
Advanced