skills.rest
nangyak4415-sudo
nangyak4415-sudoCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create production-grade frontend interfaces with responsive layout, accessible interactions, and OKLCH color systems.

Updated Mar 23, 2026
Search Tags:#typography#design#ui#accessibility#frontend#responsive#aesthetics
One-click install
npx skills add https://github.com/nangyak4415-sudo/Narumon-Website-V.1 --skill frontend-design-nangyak4415-sudo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/nangyak4415-sudo/Narumon-Website-V.1/tree/main/.cursor/skills/frontend-design
Command: npx skills add https://github.com/nangyak4415-sudo/Narumon-Website-V.1 --skill frontend-design-nangyak4415-sudo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates generic, templated "AI" aesthetics by guiding the creation of distinctive, production-grade frontend interfaces that are visually memorable, technically robust, and ready for shipping. It forces explicit project context gathering so designs are tailored to audience, brand personality, and real user jobs rather than inferred from code alone.

Core Features & Use Cases

  • Context-first design protocol: Requires target audience, use cases, and brand tone before any visual work, preventing generic outputs.
  • Production-quality code & patterns: Provides guidance for implementable React/HTML/CSS components with responsive container queries, fluid typography, OKLCH palettes, accessible focus states, and polished motion.
  • Aesthetic system guidelines: Concrete rules for typography, color, spacing, motion, interaction, and UX writing to ensure cohesion and avoid common AI artifacts.
  • Use Case: Craft a high-impact landing page and component library for a premium SaaS product that demands a bold visual identity, accessible interactions, and production-ready component implementations.

Quick Start

Design a production-ready responsive homepage for a boutique product that emphasizes a bold typographic system, OKLCH-based palette, accessible interactions, and implementable component code.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create frontend UIs that avoid generic AI aesthetics and look distinctive?▼

Distinctive frontend UIs require enforcing explicit project context like target audience and brand tone before visual work, then applying concrete aesthetic rules for typography, OKLCH color systems, and motion to prevent generic outputs.

What is the best way to build production-grade web components with responsive layout and accessibility?▼

Production-grade web components need responsive container queries, fluid typography, OKLCH-based palettes, WCAG contrast compliance, accessible focus states, and predictable motion with reduced-motion support to meet modern shipping standards.

How does an OKLCH-based color system improve UI design and accessibility?▼

An OKLCH-based color system improves UI design by providing perceptually uniform color mixing and consistent lightness across hues, ensuring WCAG contrast compliance while maintaining cohesive brand aesthetics.

Can I use this approach to build a complete landing page and component library for a SaaS product?▼

Yes, this approach supports crafting high-impact landing pages and full component libraries for SaaS products by applying bold typographic systems, accessible interactions, and implementable React or HTML and CSS component code.

What context do I need before designing a frontend interface to ensure it matches my brand personality?▼

Before designing a frontend interface, you need to define the target audience, specific use cases, and brand tone to ensure the visual personality and UX writing are tailored to real user jobs rather than inferred from code.

Does this frontend design method support fluid typography and container queries?▼

Yes, this frontend design method explicitly supports fluid typography and container queries as core production requirements, ensuring layouts adapt smoothly across viewport sizes and component containers.

Related Skills

Explore More Design & Creative Skills→
irahardiantoirahardianto

frontend-design

Generate React, Vue, or HTML/CSS frontend interfaces with design tokens and accessibility.

Community
Advanced
andronicsandronics
1

responsive-helper

Designs multi-device web layouts with breakpoints, fluid typography, container queries, and grid/pattern strategies.

Community
Intermediate
jtgironjtgiron

accessibility

Audit web pages and UI components against WCAG 2.2 accessibility criteria.

Community
Intermediate
microlinkhqmicrolinkhq
142

frontend-design

Create distinctive frontend interfaces with explicit design context and accessible code.

Official
Advanced