skills.rest
Max-Loo
Max-LooCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend

Enforce deterministic typography, single accent color, and responsive grid rules in React dashboards.

2|Updated Oct 13, 2025
Search Tags:#typography#accessibility#frontend#react#design-system#motion
One-click install
npx skills add https://github.com/Max-Loo/multi-chat --skill design-taste-frontend-max-loo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/Max-Loo/multi-chat/tree/main/.agents/skills/design-taste-frontend
Command: npx skills add https://github.com/Max-Loo/multi-chat --skill design-taste-frontend-max-loo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Surfaces a comprehensive design engineering framework that curbs AI bias in UI decisions, enforces strict component architecture, and optimizes performance and accessibility for modern web interfaces.

Core Features & Use Cases

  • Deterministic typography and color policies ensuring consistent branding across dashboards and apps.
  • Layout conventions with responsive grids and asymmetric compositions when variance is high.
  • Motion and interaction guidelines using Framer Motion with strict performance guardrails.
  • Anti-emoji policy and accessibility considerations integrated into UI components.
  • Glassmorphism and micro-interactions guidelines to create premium experiences while maintaining accessibility.

Quick Start

Apply the design-taste-frontend guidelines to a React project to set typography, color, layout, motion, and accessibility rules per the documented baselines.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I enforce consistent typography and a single accent color in a React dashboard?▼

Apply deterministic design system policies to your React dashboard to enforce consistent typography and a single accent color, establishing a strict baseline configuration that removes variable UI styling across components.

What is the best way to standardize frontend component architecture and eliminate emoji from UI?▼

Standardize frontend component architecture by applying a strict baseline configuration and an anti-emoji policy, ensuring deterministic UI decisions and consistent visual rules across your React application.

How do I add Framer Motion micro-interactions to a React app without hurting performance?▼

Add Framer Motion micro-interactions by applying motion and interaction guidelines with strict performance guardrails, ensuring animations maintain premium accessibility without degrading client-side state isolation.

Does this frontend design framework support responsive grid systems with asymmetric layouts?▼

Yes, the frontend design framework supports responsive grid systems and asymmetric compositions, applying layout conventions that adapt high-variance UI structures while maintaining strict accessibility and performance baselines.

How do I prevent AI bias from generating inconsistent frontend interfaces?▼

Prevent AI bias from generating inconsistent frontend interfaces by applying a comprehensive design engineering framework that enforces deterministic typography, layout conventions, and strict component architecture baselines.

Related Skills

Explore More Design & Creative Skills→
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-frontend-code-gen

Generate React/TypeScript/Tailwind frontend scaffolds from brand guidelines and design systems.

Community
Advanced
nangyak4415-sudonangyak4415-sudo

normalize

Normalize UI components and styles to match a project's design system.

Community
Intermediate
nonputtipongnonputtipong

frontend-developer

Develop React components and responsive layouts with Next.js and TypeScript.

Community
Advanced
stephanjstephanj
9

design-system-starter

Create design systems with design tokens, atomic components, and WCAG 2.1 AA compliance.

Community
Advanced