# taste-skill | Leon Lin | Knowledge Base | Instagit

Taste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop 

GitHub Stars: 20.5k

Repository: https://github.com/Leonxlnx/taste-skill

---

## Articles

### [How to Configure the MOTION_INTENSITY Dial in Taste Skill](/Leonxlnx/taste-skill/how-to-configure-motion-intensity-dial)

Learn how to configure the MOTION_INTENSITY dial in the Taste Skill. Set values from 1-10 and understand the requirements for higher settings like prefers-reduced-motion.

- Tags: how-to-guide
- Published: 2026-06-06

### [Difference Between Soft-Skill, Minimalist-Skill, and Brutalist-Skill in Taste Skill](/Leonxlnx/taste-skill/difference-between-soft-skill-minimalist-skill-brutalist-skill)

Discover the distinct aesthetics of Soft-Skill, Minimalist-Skill, and Brutalist-Skill in Taste Skill. Learn about luxury, editorial, and brutalist design principles.

- Tags: deep-dive
- Published: 2026-06-06

### [How the Output-Skill Prevents Truncated Output in the Taste-Skill Framework](/Leonxlnx/taste-skill/how-does-output-skill-prevent-truncated-output)

Learn how the output-skill in Taste-Skill prevents truncated output. It locks scope, bans placeholders, and uses deterministic markers for complete generation.

- Tags: internals
- Published: 2026-06-06

### [What Is the Eyebrow Restraint Rule in Taste Skill?](/Leonxlnx/taste-skill/what-is-the-eyebrow-restraint-rule)

Understand the Eyebrow Restraint rule in Taste Skill. Learn how this AI layout principle limits uppercase labels to one per three sections, ensuring visual variety and preventing repetitive rhythms.

- Tags: deep-dive
- Published: 2026-06-06

### [How to Use Image Generation Skills with ChatGPT Images in Taste Skill](/Leonxlnx/taste-skill/how-to-use-image-generation-skills-with-chatgpt-images)

Learn to generate high-fidelity UI mockups in ChatGPT using Taste Skill's image generation. Install the skills and follow structured output rules for powerful design capabilities.

- Tags: how-to-guide
- Published: 2026-06-06

### [Bento Grid Cell Count Rule in Taste Skill: A Mandatory Design Constraint](/Leonxlnx/taste-skill/what-is-the-bento-grid-cell-count-rule)

Understand the bento grid cell count rule in Taste Skill, a mandatory 1:1 ratio ensuring no empty tiles and preventing layout waste. Learn this essential design constraint.

- Tags: deep-dive
- Published: 2026-06-06

### [How to Use the Redesign-Skill for Existing Projects with Taste Skill](/Leonxlnx/taste-skill/how-to-use-redesign-skill-for-existing-projects)

Upgrade existing codebases with the redesign-skill for Taste Skill. Audit, diagnose, and fix projects without framework migration or breaking functionality. Learn how now.

- Tags: how-to-guide
- Published: 2026-06-06

### [Taste Skill Hero Layout Rules and the 2-Line Iron Rule Explained](/Leonxlnx/taste-skill/what-are-hero-layout-rules-and-2-line-iron-rule)

Master Taste Skill hero layout rules and the 2-line iron rule. Ensure your hero headlines fit above the fold with this essential guide for effective UI design.

- Tags: deep-dive
- Published: 2026-06-06

### [How Reduced Motion Accessibility Works in Taste Skill: CSS, Hooks, and Motion Intensity Policies](/Leonxlnx/taste-skill/how-reduced-motion-accessibility-functions)

Learn how Taste Skill implements reduced motion accessibility using CSS and the useReducedMotion hook. Discover how animation intensity policies ensure a better user experience for those with motion sensitivities.

- Tags: deep-dive
- Published: 2026-06-06

### [Alternatives to the Premium-Consumer Palette Ban in Taste Skill: 7 Approved Palettes](/Leonxlnx/taste-skill/alternatives-to-premium-consumer-palette-ban)

Discover 7 approved alternatives to the premium-consumer palette ban in Taste Skill. Explore Cold Luxury, Forest, Black and Tan, and more for your next project.

- Tags: deep-dive
- Published: 2026-06-06

### [How to Implement the Horizontal-Pan Scroll Pattern in Taste Skill](/Leonxlnx/taste-skill/how-to-implement-horizontal-pan-scroll-pattern)

Learn to implement the horizontal-pan scroll pattern in Taste Skill. Pin containers with GSAP ScrollTrigger and animate x position for smooth horizontal scrolling, respecting reduced-motion.

- Tags: how-to-guide
- Published: 2026-06-06

### [What AI Tell Patterns Does Taste Skill Ban? The Complete Anti-Slop Reference](/Leonxlnx/taste-skill/what-ai-tell-patterns-does-taste-skill-ban)

Discover the 30+ AI tell patterns Taste Skill bans to prevent frontend "AI slop". Learn about forbidden clichés like em-dashes and Inter font in this comprehensive anti-slop reference.

- Tags: api-reference
- Published: 2026-06-06

### [How Anti-Center Bias Works in Taste Skill Layout Design](/Leonxlnx/taste-skill/how-anti-center-bias-works-in-layout-design)

Learn how the anti-center bias in Taste Skill layout design avoids defaulting to a centered hero or H1, ensuring visual variance for your project.

- Tags: deep-dive
- Published: 2026-06-06

### [What Icon Libraries Are Recommended vs Discouraged in Taste Skill](/Leonxlnx/taste-skill/what-icon-libraries-are-recommended-vs-discouraged)

Discover recommended and discouraged icon libraries for Leonxlnx/taste-skill. Learn why Phosphor Icons is prioritized and Lucide Icons is discouraged for visual consistency.

- Tags: best-practices
- Published: 2026-06-06

### [How to Implement GSAP Scroll Animations with the Sticky-Stack Pattern in Taste Skill](/Leonxlnx/taste-skill/how-to-implement-gsap-scroll-animations-sticky-stack-pattern)

Learn to implement GSAP scroll animations with the sticky-stack pattern in Taste Skill. Discover how to create engaging scroll effects for your web projects.

- Tags: how-to-guide
- Published: 2026-06-06

### [What Design Systems Are Supported by Taste Skill? The Complete List](/Leonxlnx/taste-skill/what-design-systems-are-supported-by-taste-skill)

Discover taste skill supported design systems including frontend UI and visual design tools. Install easily with npx skills add and enhance your projects today.

- Tags: getting-started
- Published: 2026-06-06

### [How the Brief Inference System in Taste Skill Operates: A 4-Stage Pipeline](/Leonxlnx/taste-skill/how-does-brief-inference-system-operate)

Explore the 4-stage pipeline of the brief inference system in Taste Skill. Learn how it extracts design signals, generates a design read, asks clarifying questions, and sets control dials.

- Tags: deep-dive
- Published: 2026-06-06

### [How to Use the Image-to-Code-Skill Workflow in Taste Skill](/Leonxlnx/taste-skill/how-to-use-image-to-code-skill-workflow)

Learn the image-to-code-skill workflow in Taste Skill. This three step process generates design images, analyzes visuals, and produces production ready HTML CSS JavaScript.

- Tags: how-to-guide
- Published: 2026-06-06

### [What Is the Difference Between Taste-Skill v1 and v2? A Complete Feature Breakdown](/Leonxlnx/taste-skill/what-is-the-difference-between-taste-skill-v1-and-v2)

Understand the difference between Taste-Skill v1 and v2. Explore v2's data-driven pipeline with brief inference and adjustable dials versus v1's static baseline for full feature clarity.

- Tags: comparison
- Published: 2026-06-06

### [How to Configure DESIGN_VARIANCE for Different Aesthetic Goals in Taste Skill](/Leonxlnx/taste-skill/how-to-configure-design-variance-for-aesthetic-goals)

Master DESIGN_VARIANCE in Leonxlnx/taste-skill to control layout asymmetry and achieve diverse aesthetic goals. Learn to dial in your desired look from 1 to 10.

- Tags: how-to-guide
- Published: 2026-06-06

### [How the Three-Dial System Works in Taste Skill: Variance, Motion, and Density Explained](/Leonxlnx/taste-skill/how-does-the-three-dial-system-work-in-taste-skill)

Master the three-dial system in Taste Skill. Understand how VARIANCE, MOTION, and DENSITY control your design experimentation, animation, and information density on a 1-10 scale.

- Tags: deep-dive
- Published: 2026-06-06

### [How to Implement Page Theme Locks to Prevent Light/Dark Flips in Next.js](/Leonxlnx/taste-skill/how-to-implement-page-theme-locks-to-prevent-light-dark-flips)

Learn how to implement page theme locks in Next.js to prevent light/dark mode flips. Ensure a consistent color scheme across your entire page.

- Tags: how-to-guide
- Published: 2026-06-05

### [Best Practices for Loading States and Skeleton Loaders: A taste-skill Design Guide](/Leonxlnx/taste-skill/what-are-best-practices-for-loading-states-and-skeleton-loaders)

Master loading states and skeleton loaders with taste-skill. Implement shimmer gradients, UI mirroring, and error fallbacks for an optimal user experience.

- Tags: best-practices
- Published: 2026-06-05

### [How to Troubleshoot Common AI Tell Patterns in Generated Designs](/Leonxlnx/taste-skill/how-to-troubleshoot-common-ai-tell-patterns-in-generated-designs)

Troubleshoot AI tell patterns in generated designs by cross-referencing markup against rule sets and adjusting dials. Learn to constrain stylistic variance and enforce justification comments.

- Tags: how-to-guide
- Published: 2026-06-05

### [How to Build Mobile-Responsive Layouts that Collapse Asymmetric Designs in Tailwind CSS](/Leonxlnx/taste-skill/how-to-build-mobile-responsive-layouts-that-collapse-asymmetric-designs)

Learn to build mobile-responsive layouts that collapse asymmetric designs using Tailwind CSS. Discover expert techniques for seamless adaptation from desktop to mobile.

- Tags: how-to-guide
- Published: 2026-06-05

### [Understanding Shape Consistency Rules and Corner‑Radius Systems in taste-skill](/Leonxlnx/taste-skill/understanding-shape-consistency-rules-and-corner-radius-systems-in-taste-skill)

Master shape consistency rules and corner-radius systems in taste-skill. Learn how the Shape Consistency Lock ensures uniform design across your pages.

- Tags: deep-dive
- Published: 2026-06-05

### [How to Create Horizontal Scroll Pan Animations with GSAP ScrollTrigger in React](/Leonxlnx/taste-skill/how-to-create-horizontal-scroll-pan-animations-with-gsap-scrolltrigger)

Learn to build horizontal scroll pan animations in React using GSAP ScrollTrigger. Pin a wrapper and translate an inner track based on scroll distance, inspired by the taste-skill repo.

- Tags: how-to-guide
- Published: 2026-06-05

### [Hero Section Discipline in taste-skill: 9 Architecture Rules for High-Converting Headers](/Leonxlnx/taste-skill/what-are-best-practices-for-hero-section-discipline-in-taste-skill)

Master taste-skill hero section discipline with 9 architecture rules. Prevent AI-default layouts and boost conversions with viewport constraints, element limits, and real assets. Learn best practices now.

- Tags: best-practices
- Published: 2026-06-05

### [How to Implement Magnetic Button Hover Physics with the Motion Library](/Leonxlnx/taste-skill/how-to-implement-magnetic-button-hover-physics-with-the-motion-library)

Implement magnetic button hover physics with the Motion library. Learn to use useMotionValue, useSpring, and useTransform for smooth, responsive button interactions.

- Tags: how-to-guide
- Published: 2026-06-05

### [Allowed Alternatives to Em‑Dashes in taste‑skill: Complete Typography Rules](/Leonxlnx/taste-skill/what-are-the-allowed-alternatives-to-em-dashes-in-taste-skill)

Discover taste-skill typography rules: learn which dash alternatives are allowed and why em-dashes are banned to ensure pre-flight validation success. Find the official guide.

- Tags: best-practices
- Published: 2026-06-05

### [How to Apply the Color Consistency Lock Across Multiple Sections in taste-skill](/Leonxlnx/taste-skill/how-to-apply-the-color-consistency-lock-across-multiple-sections)

Learn to apply Color Consistency Lock across multiple taste-skill sections. Global CSS properties and Tailwind tokens ensure uniform color. Audit your codebase for perfect harmonization.

- Tags: how-to-guide
- Published: 2026-06-05

### [How to Handle Token Limit Splits with Output-Skill Enforcement Rules in taste-skill](/Leonxlnx/taste-skill/how-to-handle-token-limit-splits-with-output-skill-enforcement-rules)

Learn how to manage token limit splits in Leonxlnx/taste-skill using output-skill enforcement rules. Achieve seamless generation with a pause-and-resume protocol that prevents content truncation.

- Tags: how-to-guide
- Published: 2026-06-05

### [How to Implement Reduced Motion Support for Accessibility in Taste-Skill](/Leonxlnx/taste-skill/how-to-implement-reduced-motion-support-for-accessibility)

Learn how to implement accessibility reduced motion support in Taste-Skill using the useReducedMotion hook and CSS media guards to enhance user experience for sensitive individuals.

- Tags: how-to-guide
- Published: 2026-06-05

### [Best Practices for Dark Mode Implementation with the Dark Mode Protocol: 7 Rules from Taste-Skill](/Leonxlnx/taste-skill/what-are-best-practices-for-dark-mode-implementation-with-the-dark-mode-protocol)

Implement dark mode effectively using the Taste-Skill Dark Mode Protocol. Discover 7 essential rules for accessible and brand-consistent dark themes, covering system-preference detection and semantic tokens.

- Tags: best-practices
- Published: 2026-06-05

### [How to Use the Brief Inference Section to Guide AI Design Decisions](/Leonxlnx/taste-skill/how-to-use-the-brief-inference-section-to-guide-ai-design-decisions)

Guide AI design decisions by using the Brief Inference section to analyze design briefs and generate a concise read. Prevent default styles and hallucinations in your AI.

- Tags: how-to-guide
- Published: 2026-06-05

### [Why Em-Dashes Are Banned in taste-skill and How to Avoid Them](/Leonxlnx/taste-skill/why-are-em-dashes-banned-in-taste-skill-and-how-to-avoid-them)

Discover why em-dashes are banned in taste-skill to avoid generic LLM output and rendering issues. Learn how to replace them for better content.

- Tags: best-practices
- Published: 2026-06-05

### [How to Implement GSAP Sticky-Stack Patterns with ScrollTrigger for Card Animations](/Leonxlnx/taste-skill/how-to-implement-gsap-sticky-stack-patterns-with-scrolltrigger-for-card-animations)

Learn to implement GSAP sticky-stack patterns with ScrollTrigger for dynamic card animations. Pin elements, drive tweens, and eliminate gaps for a seamless scroll effect. Master this technique now.

- Tags: how-to-guide
- Published: 2026-06-05

### [What Is the Difference Between Taste-Skill v2 and v1?](/Leonxlnx/taste-skill/what-is-the-difference-between-taste-skill-v2-and-v1)

Discover the key differences between Taste-Skill v2 and v1. Explore v2's data-driven pipeline, tunable dials, and anti-slop constraints versus v1's legacy static defaults. Optimize your projects today!

- Tags: deep-dive
- Published: 2026-06-05

### [Section-Layout-Repetition Rule and Layout Family Diversity Requirements](/Leonxlnx/taste-skill/section-layout-repetition-rule-layout-diversity)

Understand the Section-Layout-Repetition rule and layout family diversity requirements. Discover how this design guard ensures varied layouts on landing pages for better user experience.

- Tags: deep-dive
- Published: 2026-06-01

### [Serif Discipline Rules and Forbidden Default Fonts in the Taste Skill Design System](/Leonxlnx/taste-skill/typography-serif-discipline-rules-forbidden-fonts)

Discover the serif discipline rules and forbidden fonts in the Taste Skill Design System. Learn when serif typefaces are permitted and which generic fonts are banned.

- Tags: best-practices
- Published: 2026-06-01

### [How to Implement Magnetic Micro-Physics with Motion useMotionValue in Taste-Skill](/Leonxlnx/taste-skill/implement-magnetic-micro-physics-motion-usemotionvalue)

Learn to implement magnetic micro-physics using useMotionValue in Taste-Skill. Gain smooth cursor-following animations by avoiding useState and leveraging useSpring and useTransform.

- Tags: how-to-guide
- Published: 2026-06-01

### [What Is the Premium Consumer Palette Ban? Alternative Color Families Explained](/Leonxlnx/taste-skill/premium-consumer-palette-ban-alternative-colors)

Understand the Premium Consumer Palette Ban and explore alternative color families. Discover fresh aesthetics beyond generic AI designs for your brand.

- Tags: deep-dive
- Published: 2026-06-01

### [How to Create Bento Grid Layouts That Pass Rhythm and Cell Count Validation Rules](/Leonxlnx/taste-skill/create-bento-grid-layouts-validation-rules)

Learn to create bento grid layouts that pass validation rules. Ensure correct cell count and employ alternating tile patterns for optimal visual appeal in your projects.

- Tags: how-to-guide
- Published: 2026-06-01

### [How to Optimize Core Web Vitals (LCP, INP, CLS) for AI-Generated Landing Pages](/Leonxlnx/taste-skill/optimize-core-web-vitals-ai-landing-pages)

Boost AI landing page performance by optimizing Core Web Vitals. Learn to chain skills for faster LCP, INP, and CLS scores, ensuring a superior user experience.

- Tags: tutorial
- Published: 2026-06-01

### [How to Use Image-Generation Skills with ChatGPT Images: A Complete Guide to imagegen-frontend-web and brandkit](/Leonxlnx/taste-skill/use-image-generation-skills-chatgpt-images)

Master ChatGPT image generation with imagegen-frontend-web and brandkit. Use SKILL.md to enforce visual rules and palette discipline for perfect images every time.

- Tags: how-to-guide
- Published: 2026-06-01

### [Best Practices for Dark Mode Implementation with Tailwind and CSS Variables](/Leonxlnx/taste-skill/best-practices-dark-mode-tailwind-css-variables)

Learn best practices for dark mode implementation using Tailwind and CSS variables. Ensure accessibility and consistency with design tokens and page-level themes. Avoid common pitfalls.

- Tags: best-practices
- Published: 2026-06-01

### [How to Configure Reduced Motion Support Using the Motion Library and prefers-reduced-motion](/Leonxlnx/taste-skill/configure-reduced-motion-motion-library-prefers-reduced-motion)

Learn to implement reduced motion support using the motion library and prefers reduced motion media query in your React projects. Ensure accessibility and enhance user experience.

- Tags: how-to-guide
- Published: 2026-06-01

### [How the Taste-Skill Redesign Protocol Distinguishes Redesigns from Greenfield Builds](/Leonxlnx/taste-skill/redesign-protocol-redesigns-vs-greenfield)

Learn how the Taste-Skill Redesign Protocol distinguishes redesigns from greenfield builds. Discover its three-stage workflow for classifying projects and auditing assets.

- Tags: how-to-guide
- Published: 2026-06-01

### [Em-Dash Ban in Taste Skill: Rules and Replacements for AI‑Generated Content](/Leonxlnx/taste-skill/em-dash-ban-replacements-ai-content)

Understand the em-dash ban in Taste Skill and discover valid replacements for AI generated content. Learn formatting rules for consistency.

- Tags: deep-dive
- Published: 2026-06-01

### [When to Use Official Design Systems vs Custom CSS for AI-Generated Frontends: A Taste Skill Guide](/Leonxlnx/taste-skill/official-design-systems-vs-custom-css-ai-frontends)

Choose between official design systems or custom CSS for AI frontends. Learn when to use Fluent UI, Material, Carbon, or Tailwind for unique aesthetics.

- Tags: best-practices
- Published: 2026-06-01

### [How to Use the Motion Library with motion/react Import Path in taste-skill](/Leonxlnx/taste-skill/how-to-use-the-motion-library-formerly-framer-motion-with-motionreact-import-path-in-taste-skill)

Learn to use the Motion library with the motion/react import path in taste-skill for lightweight bundles, SSR compatibility, and consistent accessibility. Master efficient animations.

- Tags: how-to-guide
- Published: 2026-05-31

### [Taste‑Skill Section‑Layout‑Repetition Ban and Zigzag Alternation Cap Rules Explained](/Leonxlnx/taste-skill/what-are-the-taste-skill-section-layout-repetition-ban-and-zigzag-alternation-cap-rules)

Understand taste-skill section-layout-repetition ban and zigzag alternation cap rules. Learn how these design system principles prevent repetitive layouts and ensure visual variety for engaging content.

- Tags: explanation
- Published: 2026-05-31

### [How to Implement the Horizontal-Pan Pattern with GSAP ScrollTrigger in taste-skill](/Leonxlnx/taste-skill/how-to-implement-the-horizontal-pan-pattern-with-gsap-scrolltrigger-in-taste-skill)

Learn to implement the horizontal-pan pattern with GSAP ScrollTrigger. Discover the smooth vertical scroll to horizontal animation and use the ready-to-use React component from taste-skill.

- Tags: how-to-guide
- Published: 2026-05-31

### [Taste-Skill Variants Explained: Comparing v1, v2, gpt-taste, soft, minimalist, and brutalist](/Leonxlnx/taste-skill/what-are-the-differences-between-taste-skill-variants-v1-v2-gpt-taste-soft-minimalist-brutalist)

Discover the differences between taste skill variants v1, v2, gpt taste, soft, minimalist, and brutalist. Explore their unique motion engines, config systems, and visual styles. Learn more in Leonxlnx/taste-skill.

- Tags: deep-dive
- Published: 2026-05-31

### [How taste-skill Enforces a Color Consistency Lock Across a Page](/Leonxlnx/taste-skill/how-does-taste-skill-enforce-color-consistency-lock-across-a-page)

Discover how taste-skill enforces color consistency across your pages. Learn about its single accent color mandate, centralized design tokens, and automated audits to eliminate stray colors.

- Tags: how-to-guide
- Published: 2026-05-31

### [Taste-Skill Hero Discipline Rules for Headlines, Subtext, and CTAs](/Leonxlnx/taste-skill/what-are-the-taste-skill-hero-discipline-rules-for-headlines-subtext-and-ctas)

Discover taste-skill hero discipline rules: headlines 2 lines, subtext 20 words, and limited CTAs. Learn how to optimize content for the initial viewport and avoid scrolling for better user experience.

- Tags: best-practices
- Published: 2026-05-31

### [How to Implement Reduced Motion Accessibility with useReducedMotion() in Taste-Skill](/Leonxlnx/taste-skill/how-to-implement-reduced-motion-accessibility-with-usereducedmotion-in-taste-skill)

Implement reduced motion accessibility in taste-skill using useReducedMotion(). Detect user preferences and disable animations to ensure compliance with accessibility guardrails.

- Tags: how-to-guide
- Published: 2026-05-31

### [AI Tells and Forbidden Patterns Banned by taste-skill: A Complete Guide](/Leonxlnx/taste-skill/what-are-the-ai-tells-or-forbidden-patterns-banned-by-taste-skill)

Discover AI tells and forbidden patterns banned by taste skill. Learn how this guide helps you avoid LLM generated design and create human crafted art.

- Tags: how-to-guide
- Published: 2026-05-31

### [Which Icon Libraries Are Allowed in taste-skill? Phosphor, HugeIcons, Radix, Tabler vs. Lucide](/Leonxlnx/taste-skill/which-icon-libraries-are-allowed-in-taste-skill-phosphor-hugeicons-radix-tabler-and-which-are-discouraged-lucide)

Discover which icon libraries are allowed in taste-skill: Phosphor, HugeIcons, Radix, and Tabler. Learn why Lucide-react is discouraged. Optimize your project dependencies.

- Tags: best-practices
- Published: 2026-05-31

### [The Canonical GSAP Sticky-Stack Skeleton in taste-skill: Implementation Guide](/Leonxlnx/taste-skill/what-is-the-canonical-gsap-sticky-stack-skeleton-and-its-critical-points-in-taste-skill)

Explore the canonical GSAP sticky-stack skeleton in taste-skill. Learn this ScrollTrigger pattern for seamless card stacking and smooth exit animations, avoiding common bugs.

- Tags: implementation-guide
- Published: 2026-05-31

### [Taste-Skill Redesign Protocol for Existing Projects: Preserve vs. Overhaul Guide](/Leonxlnx/taste-skill/what-is-the-taste-skill-redesign-protocol-for-existing-projects-preserve-vs-overhaul)

Uncover the taste-skill redesign protocol for existing projects. Decide whether to Preserve or Overhaul your UI with our Scan Diagnose Fix workflow. Learn more at Leonxlnx/taste-skill.

- Tags: how-to-guide
- Published: 2026-05-31

### [How taste-skill Enforces Dark Mode by Default with Dual-Theme Support](/Leonxlnx/taste-skill/how-does-taste-skill-enforce-dark-mode-by-default-with-dual-theme-support)

Discover how taste-skill enforces dark mode by default using a three-layer architecture ensuring dual-theme support for all components and strict theming protocols.

- Tags: how-to-guide
- Published: 2026-05-31

### [Taste-Skill Mandatory Pre-Flight Check Requirements Before Shipping: A Complete Technical Guide](/Leonxlnx/taste-skill/what-are-the-taste-skill-mandatory-pre-flight-check-requirements-before-shipping)

Explore the taste-skill mandatory pre-flight check requirements before shipping. Leonxlnx/taste-skill ensures quality by validating typography and CTA rules automatically.

- Tags: how-to-guide
- Published: 2026-05-31

### [How Taste-Skill Enforces an Em-Dash Ban: A Two-Layer Defense Strategy](/Leonxlnx/taste-skill/how-does-taste-skill-enforce-an-em-dash-ban)

Discover how Taste-Skill enforces an em-dash ban using a two-layer defense: a design contract in SKILL.md and automated Pre-Flight Checks for forbidden Unicode characters. Secure your LLM outputs today.

- Tags: how-to-guide
- Published: 2026-05-31

### [How to Use Taste-Skill Design System Mapping for Official Packages Like Material and Fluent](/Leonxlnx/taste-skill/how-to-use-taste-skill-design-system-mapping-for-official-packages-like-material-or-fluent)

Learn how to use taste-skill design system mapping with Material and Fluent UI packages. Ensure a single UI language for your project with this powerful technique.

- Tags: how-to-guide
- Published: 2026-05-31

### [Shape Consistency Lock for Corner-Radius in Taste Skill: Implementation Guide](/Leonxlnx/taste-skill/shape-consistency-lock-corner-radius-taste-skill)

Learn to implement Shape Consistency Lock for corner-radius in Taste Skill. Enforce a unified radius scale and prevent visual inconsistencies in AI designs.

- Tags: how-to-guide
- Published: 2026-05-30

### [How to Manage the Eyebrow Restraint Rule in Taste Skill (Maximum 1 per 3 Sections)](/Leonxlnx/taste-skill/eyebrow-restraint-rule-taste-skill)

Master the eyebrow restraint rule in Taste Skill. Learn how to apply one uppercase eyebrow label per three sections to enhance AI layout clarity and rhythm. Avoid visual clutter effectively.

- Tags: how-to-guide
- Published: 2026-05-30

### [Understanding the Anti-Center Bias Layout Rule in Taste Skill](/Leonxlnx/taste-skill/anti-center-bias-layout-rule-taste-skill)

Discover the anti-center bias layout rule in Taste Skill. Learn how this design guardrail enforces asymmetric compositions like split-screens to enhance user experience.

- Tags: deep-dive
- Published: 2026-05-30

### [Strict Rules for Hero Section Layout, Typography, and Font Scaling in Taste Skill](/Leonxlnx/taste-skill/hero-section-rules-typography-font-scaling-taste-skill)

Discover Taste Skill's strict rules for hero section layout typography and font scaling. Learn about headline limits subtext constraints and padding caps ensuring content fits the viewport.

- Tags: best-practices
- Published: 2026-05-30

### [Using the redesign-skill in Taste Skill for Auditing Existing Projects](/Leonxlnx/taste-skill/how-to-use-redesign-skill-taste-skill-auditing)

Audit existing projects with the redesign-skill in Taste Skill. This framework-agnostic workflow upgrades codebases without breaking functionality. Learn more.

- Tags: how-to-guide
- Published: 2026-05-30

### [Taste Skill Icon Library Recommendations: Hierarchy, Policy, and Lucide Restrictions](/Leonxlnx/taste-skill/icon-library-recommendations-lucide-policy-taste-skill)

Understand Taste Skill icon library hierarchy, Phosphor Icons promotion, and Lucide React restrictions. Learn policy for visual consistency and smaller bundles.

- Tags: best-practices
- Published: 2026-05-30

### [How to Check Button Contrast for WCAG AA Compliance Using Taste Skill](/Leonxlnx/taste-skill/button-contrast-wcag-aa-taste-skill)

Learn how to check button contrast for WCAG AA compliance with Taste Skill. Ensure your UI meets accessibility standards like 4.5:1 or 3:1 ratios for best results.

- Tags: how-to-guide
- Published: 2026-05-30

### [How to Use Taste Skill's Image Generation Tools: imagegen-frontend-web and brandkit](/Leonxlnx/taste-skill/how-to-use-taste-skill-image-generation)

Learn to use Taste Skill's image generation tools imagegen-frontend-web and brandkit. Effortlessly create website mockups and brand identity boards from natural language briefs without code or API keys.

- Tags: how-to-guide
- Published: 2026-05-30

### [Understanding the Section-Layout-Repetition Ban in Taste Skill: Compliance Guide](/Leonxlnx/taste-skill/section-layout-repetition-ban-taste-skill-compliance)

Learn to comply with the Section-Layout-Repetition Ban in Taste Skill. Avoid visual monotony and ensure your skill pages are unique by understanding layout restrictions.

- Tags: compliance-guide
- Published: 2026-05-30

### [How to Ensure Accessibility for Reduced Motion Users with the Taste Skill](/Leonxlnx/taste-skill/reduced-motion-accessibility-taste-skill)

Learn how to ensure accessibility for reduced motion users with the Taste Skill. Discover how Taste Skill detects and respects user preferences for reduced motion with motion/react and CSS media queries.

- Tags: best-practices
- Published: 2026-05-30

### [Understanding the Premium-Consumer Palette Ban in Taste Skill: Rules and Alternatives](/Leonxlnx/taste-skill/premium-consumer-palette-ban-taste-skill-alternatives)

Discover the premium-consumer palette ban in Taste Skill. Learn about this design constraint and explore its seven approved color alternatives for luxury projects.

- Tags: deep-dive
- Published: 2026-05-30

### [Taste Skill Design System Mapping: When to Use Official Packages vs. Custom CSS](/Leonxlnx/taste-skill/taste-skill-design-system-mapping-packages-vs-css)

Learn when to use official Taste Skill design system packages versus custom CSS. Optimize your project by understanding framework alignment and custom token overrides.

- Tags: best-practices
- Published: 2026-05-30

### [7 Forbidden Animation Patterns in Taste Skill: A Complete Guide to Motion Anti-Patterns](/Leonxlnx/taste-skill/forbidden-animation-patterns-taste-skill)

Discover the 7 forbidden animation patterns in Taste Skill including infinite loops and raw scroll listeners. Master UI motion for performance and accessibility.

- Tags: how-to-guide
- Published: 2026-05-30

### [Implementing Dark Mode in Taste Skill: Dark Mode Protocol Best Practices](/Leonxlnx/taste-skill/implementing-dark-mode-taste-skill-protocol)

Learn dark mode protocol best practices for Taste Skill. Implement global themes using Tailwind or CSS custom properties to prevent mid-page switches.

- Tags: best-practices
- Published: 2026-05-30

### [How the Pre-Flight Check Process in Taste Skill Validates Frontend Code Before Shipping](/Leonxlnx/taste-skill/how-pre-flight-check-taste-skill-frontend-shipping)

Learn how the Taste Skill Pre-Flight Check process validates frontend code, ensuring all HTML, CSS, and JavaScript meet design, accessibility, and performance standards before shipping.

- Tags: how-to-guide
- Published: 2026-05-30

### [How to Utilize Brief Inference in Taste Skill to Guide Front-End Design Before Development](/Leonxlnx/taste-skill/how-to-use-brief-inference-taste-skill-design-guidance)

Learn how to use Brief Inference in Taste Skill to guide front-end design before development. Extract signals from briefs for declarative design and smarter decisions.

- Tags: how-to-guide
- Published: 2026-05-30

### [How Leonxlnx/taste-skill's Three-Dial System Controls AI Generation](/Leonxlnx/taste-skill/how-does-leonxlnx-taste-skill-three-dial-system-work)

Discover how Leonxlnx/taste-skill's three-dial system (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) controls AI generation by translating intuitive controls into concrete AI parameters.

- Tags: deep-dive
- Published: 2026-05-30

### [Branch Naming Conventions in Leonxlnx/taste-skill: What Contributors Need to Know](/Leonxlnx/taste-skill/are-there-any-specific-branch-naming-conventions-in-leonxlnx-taste-skill)

Discover branch naming conventions for Leonxlnx/taste-skill. Learn how contributors can organize branches effectively while main remains the default.

- Tags: best-practices
- Published: 2026-05-26

### [What Is the Taste Skill Primary Goal? Standardizing AI-Driven Frontend Design](/Leonxlnx/taste-skill/what-is-the-project-s-primary-goal-or-function)

Discover the Taste Skill project enabling AI agents to generate production-ready frontend designs and assets, eliminating boilerplate UI code. Explore its primary goal for efficient development.

- Tags: getting-started
- Published: 2026-05-26

### [How to Get the Latest Version of Leonxlnx/taste-skill: 3 Methods Explained](/Leonxlnx/taste-skill/how-to-get-the-latest-version-of-leonxlnx-taste-skill)

Discover three easy methods to get the latest Leonxlnx/taste-skill: clone from GitHub, download a tarball, or use npx skills add for instant updates.

- Tags: how-to-guide
- Published: 2026-05-26

### [Development Tools in Leonxlnx/taste-skill: React, Next.js, and Tailwind CSS v4](/Leonxlnx/taste-skill/what-tools-are-used-for-development-in-leonxlnx-taste-skill)

Explore the modern React stack in Leonxlnx/taste-skill, featuring Next.js, Tailwind CSS v4, Motion, GSAP, and state management for AI UI development.

- Tags: getting-started
- Published: 2026-05-26

### [Development Workflow for Leonxlnx/taste-skill: A Complete Guide](/Leonxlnx/taste-skill/what-is-the-development-workflow-for-leonxlnx-taste-skill)

Master the Leonxlnx/taste-skill development workflow. Edit SKILL.md files and validate locally with the Agent-Skills CLI. Zero compilation needed for a streamlined process.

- Tags: best-practices
- Published: 2026-05-26

### [How to Run Tests for Leonxlnx/taste-skill: Manual Verification Guide](/Leonxlnx/taste-skill/how-to-run-tests-for-leonxlnx-taste-skill)

Learn to run tests for Leonxlnx/taste-skill. This guide covers manual verification of skill definitions using the skill.sh script or npx skills add CLI.

- Tags: how-to-guide
- Published: 2026-05-26

### [What Types of Tests Are Included in Leonxlnx/taste-skill?](/Leonxlnx/taste-skill/what-kind-of-tests-are-included-in-leonxlnx-taste-skill)

Discover the types of tests in Leonxlnx/taste-skill. This repository contains no automated tests as it's a Markdown-based design-system specification.

- Tags: testing
- Published: 2026-05-26

### [Leonxlnx/taste-skill Example Usages: CLI Installation and Agent Prompts](/Leonxlnx/taste-skill/are-there-any-example-usages-for-leonxlnx-taste-skill)

Explore Leonxlnx/taste-skill example usages. Install via Vercel CLI and generate React/Next.js code with LLM prompts and SKILL.md files. Get production-ready code efficiently.

- Tags: tutorial
- Published: 2026-05-26

### [How Code Is Organized in Leonxlnx/taste-skill: A Documentation-First Skill Library](/Leonxlnx/taste-skill/how-is-the-code-organized-in-leonxlnx-taste-skill)

Discover how code is organized in Leonxlnx/taste-skill. Explore its flat, documentation-first structure with skills in separate folders and SKILL.md documentation.

- Tags: documentation
- Published: 2026-05-26

### [Main Modules and Components of Leonxlnx/taste-skill: Complete Architecture Guide](/Leonxlnx/taste-skill/what-are-the-main-modules-or-components-of-leonxlnx-taste-skill)

Explore the core modules and components of Leonxlnx/taste-skill. Understand the modular design, registry script, and supporting assets in this architecture guide.

- Tags: architecture
- Published: 2026-05-26

### [Complete Documentation for Leonxlnx/taste-skill: The Anti-Slop Frontend Framework](/Leonxlnx/taste-skill/where-can-i-find-documentation-for-leonxlnx-taste-skill)

Access complete documentation for Leonxlnx/taste-skill, the anti-slop frontend framework. Build cleaner, more efficient web applications with our comprehensive guide.

- Tags: documentation
- Published: 2026-05-26

### [How to Report Bugs in Leonxlnx/taste-skill: Issues, PRs, and Contact Options](/Leonxlnx/taste-skill/how-to-report-bugs-in-leonxlnx-taste-skill)

Learn how to report bugs effectively in Leonxlnx/taste-skill. Discover GitHub issue and PR procedures, plus direct contact options for swift resolution.

- Tags: how-to-guide
- Published: 2026-05-26

### [Leonxlnx/taste-skill License: MIT Terms and Compliance Guide](/Leonxlnx/taste-skill/what-is-the-license-for-leonxlnx-taste-skill)

Understand the MIT License terms for Leonxlnx/taste-skill. Learn about commercial use, modification, and distribution requirements for this permissive open-source license.

- Tags: licensing-guide
- Published: 2026-05-26

### [How to Contribute to the Leonxlnx/taste-skill Repository: A Complete Guide](/Leonxlnx/taste-skill/how-to-contribute-to-leonxlnx-taste-skill)

Learn how to contribute to Leonxlnx/taste-skill. Fork the repo, add your skill, update documentation, and submit a pull request with this complete guide.

- Tags: how-to-guide
- Published: 2026-05-26

### [Leonxlnx/taste-skill README: What It Explains and How to Use It](/Leonxlnx/taste-skill/is-there-a-readme-file-in-leonxlnx-taste-skill-and-what-does-it-explain)

Discover the Leonxlnx/taste-skill README. Learn about the "anti-slop" portable AI agent skills for high-quality front-end code, including installation and usage instructions.

- Tags: getting-started
- Published: 2026-05-26

### [How to Install Project Dependencies for Leonxlnx/taste-skill](/Leonxlnx/taste-skill/how-to-install-project-dependencies-for-leonxlnx-taste-skill)

Install Leonxlnx/taste-skill dependencies easily. Learn how to add agent skills from markdown files using Nodejs and npx skills CLI without traditional package installation. Get started now.

- Tags: how-to-guide
- Published: 2026-05-26

### [How to Build Leonxlnx/taste-skill: A Complete Installation Guide](/Leonxlnx/taste-skill/how-to-build-leonxlnx-taste-skill)

Learn to build Leonxlnx/taste-skill by installing SKILL definitions with the npx skills CLI. Get a straightforward installation guide for your AI agent environment.

- Tags: getting-started
- Published: 2026-05-26

### [Configuration Files in Leonxlnx/taste-skill: A Complete Guide](/Leonxlnx/taste-skill/are-there-any-configuration-files-in-leonxlnx-taste-skill)

Explore configuration files in Leonxlnx/taste-skill. Learn about opencode.json and other resources for AI configuration and skill development.

- Tags: how-to-guide
- Published: 2026-05-26

### [What Is the Purpose of the `src` Folder in the Leonxlnx/taste-skill Repository?](/Leonxlnx/taste-skill/what-is-the-purpose-of-the-src-folder-in-leonxlnx-taste-skill)

Discover why the Leonxlnx/taste-skill repo skips a src folder. Learn where to find skill logic and runtime assets in this unique project structure.

- Tags: how-to-guide
- Published: 2026-05-26

### [Main Directories in the Leonxlnx/taste-skill Repository Explained](/Leonxlnx/taste-skill/what-are-the-main-directories-in-the-leonxlnx-taste-skill-repository-structure)

Explore the main directories in the Leonxlnx/taste-skill repository. Understand how skills research examples assets and github configurations are organized within this codebase.

- Tags: architecture
- Published: 2026-05-26

### [What Programming Languages Are Used in Leonxlnx/taste-skill?](/Leonxlnx/taste-skill/what-programming-languages-are-used-in-leonxlnx-taste-skill)

Discover the programming languages in Leonxlnx/taste-skill: Bash, Markdown, TypeScript/TSX, JSON, and plain text. Learn about AI design skill definitions with no compiled runtime.

- Tags: getting-started
- Published: 2026-05-26

### [How to Set Up Leonxlnx/taste-skill Locally: Complete Installation Guide](/Leonxlnx/taste-skill/how-to-set-up-leonxlnx-taste-skill-locally)

Easily set up Leonxlnx/taste-skill locally with our comprehensive guide. Clone the repo and install skills using npx or the skill.sh script for a smooth development experience.

- Tags: how-to-guide
- Published: 2026-05-26