frontend-design

Design React/TypeScript frontend interfaces with distinctive visual direction and accessible, responsive layouts.

Updated Apr 16, 2026

Search Tags:#accessibility #design tokens #frontend design #react ui #ui typography #motion microinteractions

Ready to run

npx skills add https://github.com/jjmendezrodriguez/jm-claude-plugin --skill frontend-design-jjmendezrodriguez

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jjmendezrodriguez/jm-claude-plugin/tree/main/skills/frontend-design
Command: npx skills add https://github.com/jjmendezrodriguez/jm-claude-plugin --skill frontend-design-jjmendezrodriguez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents generic, forgettable UI output by forcing a bold, coherent visual direction that still ships as production-ready, accessible, and performant frontend design.

Core Features & Use Cases

Distinctive aesthetic direction: Commit to an extreme tone and build a cohesive look across typography, color, composition, and motion.
Production-grade UI quality: Prioritize functionality, accessibility (WCAG contrast and focus/hover states), mobile-first responsiveness, and reduced-motion support.
Uncommon visual differentiation: Avoid predictable layouts and common “AI aesthetics” by using intentional type pairings, tokenized color systems, spatial composition, and layered depth techniques.

Quick Start

Use the frontend-design skill to design a landing-page UI that feels memorable and non-generic while remaining accessible and responsive on mobile, tablet, and desktop.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I design a React UI that doesn't look like generic AI output?▼

To design a React UI that avoids generic AI aesthetics, commit to a bold, distinctive aesthetic direction using intentional type pairings, tokenized color systems, and spatial composition to create a cohesive, memorable visual identity.

What's the best way to build accessible frontend design tokens for web components?▼

Building accessible frontend design tokens requires defining a coherent color system that enforces WCAG contrast standards, while explicitly mapping tokens to accessible interaction states like focus and hover for production-grade web components.

How do you handle motion microinteractions and reduced-motion compliance in frontend design?▼

Handling motion microinteractions requires implementing layered depth techniques and movement that enhances user experience, while strictly providing reduced-motion support to ensure accessibility compliance across all responsive layouts.

Can I use this approach for building mobile-first responsive dashboards and landing pages?▼

Yes, this frontend design approach is built for mobile-first responsive layouts, directly applying to the creation of production-grade React and TypeScript web pages, dashboards, and landing screens requiring strong visual polish.

Why does my frontend UI typography feel forgettable and lack visual polish?▼

Frontend UI typography feels forgettable when it lacks a committed aesthetic direction; fixing this requires using uncommon visual differentiation through intentional type pairings and coherent typography systems across the interface.

When should I avoid using a standardized design token system for React components?▼

You should avoid standardized design token systems if your project cannot commit to a cohesive, extreme tone across typography, color, and composition, as forcing tokens without a unified aesthetic direction yields generic results.