skills.rest
thesammykins
thesammykinsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-taste-frontend

Define premium UI design systems with strict typography, color, and layout rules.

Updated Oct 31, 2024
Search Tags:#framer-motion#design-systems#frontend-design#motion-design#ui-architecture#ux-guidelines
One-click install
npx skills add https://github.com/thesammykins/dotfiles --skill design-taste-frontend-thesammykins
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/thesammykins/dotfiles/tree/main/.agents/skills/taste-skill
Command: npx skills add https://github.com/thesammykins/dotfiles --skill design-taste-frontend-thesammykins

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured approach for designing high-end UI systems that override common LLM biases, enforce strict component architecture, and apply advanced motion and styling guidelines to deliver premium, consistent interfaces.

Core Features & Use Cases

  • Establish baseline configuration for design variance, motion intensity, and visual density to ensure consistent visuals across products.
  • Enforce deterministic typography stacks, single-accent color schemes, mindful layout strategies, and robust interactive state patterns.
  • Provide actionable guidance for teams building production dashboards, design systems, and creative interfaces that stay on-brand while remaining accessible and performant.
  • Real-world example: A design team uses these rules to build a premium admin panel with consistent typography, responsive layouts, and motion that feels deliberate rather than gratuitous.

Quick Start

Use a design brief to initialize a premium UI system that follows the listed directives and starts generating layout primitives, typography tokens, and motion patterns.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I establish a consistent premium UI design system for a production dashboard?▼

A premium UI design system uses strict typography, single-accent color schemes, and deterministic layout rules to ensure consistent, high-end interfaces across production dashboards. It establishes baseline configurations for visual density and motion intensity.

What is the best way to control motion intensity in frontend design without hurting performance?▼

Motion intensity is controlled by applying advanced motion guidelines that satisfy performance constraints while maintaining accessible, deliberate animations. This approach ensures motion enhances the interface rather than acting as gratuitous decoration.

Does this frontend design guidance work for creative apps requiring brand-aligned UI?▼

Yes, the design guidance applies to creative apps requiring brand-aligned UI by enforcing strict component architecture and visual variance rules. It delivers robust interactive state patterns tailored for high-end, accessible interfaces.

How do I override common LLM biases when generating UI architecture?▼

To override LLM biases in UI architecture, apply structured design directives that enforce deterministic typography stacks and strict layout rules. This approach ensures generated components follow consistent, premium styling rather than generic patterns.

How do I start generating layout primitives and typography tokens for an analytics tool?▼

Initialize the system using a design brief to generate layout primitives, typography tokens, and motion patterns. This establishes the deterministic design rules needed for consistent, high-end analytics tool interfaces.

Related Skills

Explore More Design & Creative Skills→
Chinmay-23-cpuChinmay-23-cpu

design-taste-minimalism

Generate minimal document-like UI/UX designs with baseline configurations for variance, motion, and density.

Community
Advanced
timequitytimequity
6

frontend-design

Design production-grade frontend interfaces with bold aesthetic direction.

Official
Advanced
xingBaGanxingBaGan

framer-motion

Implement Disney's 12 animation principles in React with Framer Motion.

Community
Advanced
himanshu231204himanshu231204
2

design-system

Generate design systems and audit visual consistency across web UIs.

Community
Intermediate