skills.rest
kensaurus
kensaurusCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Define frontend design guidance for React, Next.js, and HTML/CSS interfaces.

8|Updated Feb 8, 2026
Search Tags:#typography#accessibility#frontend#css#ui-design#aesthetics
One-click install
npx skills add https://github.com/kensaurus/cursor-kenji --skill frontend-design-kensaurus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/kensaurus/cursor-kenji/tree/main/skills/frontend-design
Command: npx skills add https://github.com/kensaurus/cursor-kenji --skill frontend-design-kensaurus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams often struggle to escape generic AI aesthetics that produce bland, non-cohesive UI. This skill guides the creation of distinctive, production-grade frontend interfaces with intentional visual direction and token-based design systems.

Core Features & Use Cases

  • Establishes a bold visual direction with a cohesive design system (typography, color, spacing, motion) and translates it into reusable components.
  • Provides practical workflows for building landing pages, dashboards, and React components that look deliberate and refined.
  • Ensures accessibility and performance are baked in from the start, with token-based theming and design tokens applied across UI.

Quick Start

Describe your design direction and I will generate a production-ready frontend component scaffold that matches the aesthetic and accessibility standards.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build React components that avoid generic AI aesthetics?▼

To avoid generic AI aesthetics in React components, establish a bold visual direction with cohesive typography, color, and spacing. This approach translates intentional design systems into reusable, distinctive frontend UI components rather than bland outputs.

What is the best way to create a scalable design token system for a frontend UI?▼

A scalable design token system for frontend UI applies structured typography, color, spacing, and motion variables across components. This ensures cohesive theming and accessibility standards are baked in from the start.

Can I use this frontend design approach with plain HTML and CSS?▼

Yes, this frontend design approach works with plain HTML and CSS, alongside React and Next.js. It delivers production-grade UI components and pages across dashboards, marketing sites, and libraries.

How do I ensure accessibility when building a custom dashboard UI?▼

To ensure accessibility in a custom dashboard UI, apply accessibility best practices and token-based theming from the beginning. This bakes compliance and performance directly into the frontend design system.

Why does my Next.js landing page look visually inconsistent?▼

A Next.js landing page looks visually inconsistent when lacking a cohesive design system with shared typography, color, spacing, and motion. Establishing token-based theming across UI components creates a deliberate, refined aesthetic.

Related Skills

Explore More Design & Creative Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
DeliciousHouseDeliciousHouse
2

frontend-design

Design and implement React components, web layouts, dashboards, and landing pages.

Community
Advanced
csim-sgcsim-sg

daisy-ui

Build UI components with DaisyUI v5 and Tailwind CSS 4.

Community
Intermediate
impact-initiativesimpact-initiatives

frontend-design

Design production-grade frontend interfaces with cohesive CSS and UI patterns.

Official
Advanced