skills.rest
wildanjr19
wildanjr19COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/wildanjr19/semar-kos-finder --skill frontend-design-wildanjr19
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
notquenotque
415

distinctive-frontend-design

Generate a complete frontend design specification with typography, color, and animation.

Community
Advanced
Kin3XcKin3Xc

frontend-design

Transform vague UI requirements into token-based frontend code for React, Vue, Svelte, and Next.js.

Community
Advanced
DITEKmaxDITEKmax

frontend-design

Create production-ready frontend interfaces with cohesive typography, color, motion, and responsive layouts.

Community
Advanced
lth0lth0

frontend-design

Generate production-grade HTML/CSS/JS frontend interfaces with cohesive typography, color, and motion.

Community
Advanced