frontend-design

Guide React/Next.js frontend design with typography, color, motion, and accessibility.

2|Updated Apr 7, 2026

Search Tags:#design #accessibility #frontend #react #UI #nextjs #aesthetics

Ready to run

npx skills add https://github.com/wildanjr19/semar-kos-finder --skill frontend-design-wildanjr19

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/wildanjr19/semar-kos-finder/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/wildanjr19/semar-kos-finder --skill frontend-design-wildanjr19

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating frontend interfaces that are visually distinctive and technically robust is challenging; generic AI aesthetics and inconsistent UI patterns slow teams and degrade user experience.

Core Features & Use Cases

Clear design direction and an aesthetic strategy to guide implementation.
Production-grade guidance for HTML/CSS/JS, React components, and UI layouts with a focus on typography, color systems, motion, and accessibility.
Use Case: design dashboards, landing pages, or component libraries with cohesive visuals across devices and frameworks.

Quick Start

Provide your frontend requirements and preferred aesthetic direction, and this skill will generate a ready-to-implement design plan and starter code.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I design production-grade frontend UI with React and Next.js?▼

Production-grade frontend UI design applies cohesive typography, color systems, motion, and accessibility across React and Next.js components. You provide requirements and aesthetic direction to generate a ready-to-implement design plan and starter code.

Why does my AI-generated frontend interface look generic and inconsistent?▼

AI-generated frontend interfaces look generic when lacking a clear aesthetic strategy and cohesive design system. Applying distinctive design direction and enforcing consistent UI patterns across components resolves this visual inconsistency.

Can I use this frontend design approach for dashboards and marketing sites?▼

Yes, this frontend design approach works for web UI projects including dashboards, landing pages, marketing sites, and component libraries, delivering distinctive and cohesive visuals across devices and frameworks.

How do I build a cohesive component library with enforced accessibility?▼

Build a cohesive component library by applying a unified aesthetic strategy that enforces typography, color systems, motion, and accessibility criteria across HTML/CSS/JS and React components to produce ready-to-implement frontend solutions.

What's the best way to establish typography and color systems for a Next.js application?▼

The best way to establish typography and color systems is through a design thinking workflow that delivers a distinctive aesthetic strategy, guiding implementation across Next.js pages and components to ensure cohesive visuals and technical robustness.