skills.rest
whchi
whchiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-taste-frontend

Enforce deterministic typography, single-accent color, and responsive layout rules for frontend UI.

Updated Mar 9, 2026
Search Tags:#design#ui#accessibility#frontend#guidelines#ux#motion
One-click install
npx skills add https://github.com/whchi/agentic-coding --skill design-taste-frontend-whchi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/whchi/agentic-coding/tree/main/skills/design-taste-frontend
Command: npx skills add https://github.com/whchi/agentic-coding --skill design-taste-frontend-whchi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides design teams to enforce premium UI engineering standards while resisting biased AI rendering, ensuring consistent, accessible, and performant interfaces.

Core Features & Use Cases

  • Deterministic typography and single-accent-color governance for dashboards and apps.
  • Layout variance controls and motion guidelines to deliver premium experiences while maintaining accessibility.
  • Reusable design primitives and a strict architecture to streamline prototyping and production UI.

Quick Start

Apply the design-taste-frontend guidelines to a new UI screen by enforcing the deterministic typography, single-accent color palette, and responsive grid layout described above.

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 deterministic typography and single-accent color rules across a frontend component library?▼

Apply deterministic typography and single-accent color governance by enforcing strict frontend design rules across component libraries. This ensures consistent, accessible, and performant interfaces while resisting biased AI rendering and maintaining premium UI engineering standards.

What's the best way to maintain accessibility standards while adding motion constraints to responsive dashboards?▼

Maintain accessibility standards by applying layout variance controls and motion guidelines to responsive dashboards. This approach delivers premium experiences while preserving accessibility across frontend workstreams and handling responsive breakpoints effectively.

Can I use strict frontend design guidelines for rapid prototyping across marketing pages and apps?▼

Yes, strict frontend design guidelines support rapid prototyping across marketing pages and apps. Reusable design primitives and strict architecture streamline production UI while handling content variation and responsive breakpoints.

How do premium UI governance rules handle responsive breakpoints and content variation in Client/Server Component contexts?▼

Premium UI governance handles responsive breakpoints and content variation within Client/Server Component contexts by applying deterministic layout rules and performance considerations. This preserves accessibility and ensures consistent rendering across frontend workstreams.

Why does my frontend UI lose visual consistency when scaling from dashboards to marketing pages?▼

Frontend UI loses visual consistency when scaling from dashboards to marketing pages due to lacking deterministic typography and single-accent color governance. Enforcing reusable design primitives and strict architecture resolves this while maintaining accessibility standards.

Related Skills

Explore More Design & Creative Skills→
lync-cyberlync-cyber
133

ui-design

Define UI design specifications from product requirements with design tokens and responsive rules.

Community
Advanced
sandalsoftsandalsoft

clean-web-design

Standardize React/Tailwind frontend design with token-based dark-mode-ready UI primitives.

Community
Advanced
VoTruongDanhVoTruongDanh

web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Community
Intermediate
caobingshengcaobingsheng
1

design-md

Analyze Stitch projects to generate DESIGN.md files documenting design systems.

Community
Advanced