skills.rest
jjmendezrodriguez
jjmendezrodriguezCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/jjmendezrodriguez/jm-claude-plugin --skill frontend-design-jjmendezrodriguez
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
bkywksjbkywksj
309

ui-frontend

Define standardized React UI patterns for Tauri desktop apps.

Community
Intermediate
ils15ils15
10

frontend-analyzer

Extract typography, colors, layout, spacing, and design tokens from React/Next.js code.

Community
Basic
secondskysecondsky
204

aceternity-ui

Provide animated React components for Next.js applications with Tailwind CSS and Framer Motion.

Community
Advanced
abeldotamabeldotam
13

frontend-design

Create production-grade frontend interfaces from design concepts.

Community
Advanced