skills.rest
gesmith0606
gesmith0606COMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend

Enforce deterministic design rules for React/Next.js dashboards and component libraries.

Updated Aug 15, 2025
Search Tags:#ui#architecture#frontend#react#design-system#motion#bias-aware
One-click install
npx skills add https://github.com/gesmith0606/nfl_data_engineering --skill design-taste-frontend-gesmith0606
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/gesmith0606/nfl_data_engineering/tree/main/.claude/skills/taste-skill
Command: npx skills add https://github.com/gesmith0606/nfl_data_engineering --skill design-taste-frontend-gesmith0606

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating consistent, high-agency frontend experiences by enforcing strict design rules and architecture, eliminating drift from teams and BI biases.

Core Features & Use Cases

  • Deterministic baseline configuration for typography, spacing, motion, and component conventions.
  • Architecture & conventions: client/server component guidance, strict state and styling discipline, anti-emoji policy and accessibility guardrails.
  • Real-world use case: Use this to scaffold a new dashboard with consistent typography, motion, and layout policies across pages.

Quick Start

Apply the taste-skill baseline to a new React/Next.js project to initialize layout, typography, and motion rules.

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 frontend design rules in a React dashboard?▼

Enforce consistent frontend design rules in a React dashboard by applying a deterministic taste policy that sets strict typography, spacing, motion, and component conventions to eliminate visual drift across pages.

What is a bias-aware frontend design system?▼

A bias-aware frontend design system is a strict set of architecture and motion rules that prevents subjective team or BI biases from causing UI inconsistencies in premium component libraries.

How do I scaffold a Next.js project with strict accessibility and motion constraints?▼

Scaffold a Next.js project with strict accessibility and motion constraints by initializing a baseline configuration that enforces deterministic architecture, client/server component guidance, and performance guardrails.

Can I use this to establish an anti-emoji policy and styling discipline for my component library?▼

Yes, you can use this to establish an anti-emoji policy and styling discipline for your component library, as it enforces strict state and styling rules alongside accessibility constraints.

What's the best way to prevent UI drift in premium frontend architecture?▼

The best way to prevent UI drift in premium frontend architecture is to enforce deterministic architecture foundations and motion details that override subjective design choices.

Related Skills

Explore More Design & Creative Skills→
mcj-codermcj-coder
1

greenfield-baseline

Automate project scaffolding with quality gates, CI/CD, and repository structure.

Community
Advanced
ahmadawaisahmadawais

design-taste-frontend

Enforce rule-based design constraints on frontend UI generation.

Community
Advanced
devkenidevkeni
1

design-taste-frontend

Enforces design-system compliant frontend UIs for React/Next.js dashboards and admin interfaces.

Community
Advanced
hendrax5hendrax5

design-taste-frontend

Architect bias-aware React/Next.js interfaces with strict component and design constraints.

Community
Advanced