tyler-web-design-taste

Applies Tyler's anti-slop editorial design rules to web and HTML builds.

Updated Aug 21, 2026
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill tyler-web-design-taste-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tyler-web-design-taste
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/design/tyler-web-design-taste
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill tyler-web-design-taste-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web builds for Tyler keep shipping generic AI-looking aesthetics (gradient meshes, glassmorphism, cursor glow, indigo accents) that he explicitly rejects as slop, and bundled design skills cannot be patched to carry his preferences. ## Core Features & Use Cases - Hard-rejection list: Blocks gradient-mesh backgrounds, decorative glassmorphism, cursor-follow glow, magnetic buttons, and neon indigo/violet accents. - Editorial defaults: Enforces Fraunces serif display plus Space Grotesk body, warm off-white paper palette with a single terracotta accent, asymmetric composition, and subtle scroll reveals. - Real image sourcing: Documents a working Wikimedia Commons API thumbnail fetch technique with honest "photo pending" placeholders when no free image exists. - Use Case: When asked to build a landing page or portfolio site for Tyler, load this alongside claude-design so the output uses editorial typography and layout instead of the default dark-glass gradient look. ## Quick Start Build a landing page for Tyler using his design taste rules with editorial typography and no gradient or glass effects.

Frequently Asked Questions about tyler-web-design-taste

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

FAQPage Schema
How do I avoid AI-slop aesthetics in landing page design?▼

Avoid animated gradient-mesh backgrounds, decorative glassmorphism, cursor-follow glow, magnetic buttons, and default indigo accents with neon shadows. Default to editorial craft: serif display type, warm off-white palette, one restrained accent, and asymmetric composition.

What typography and color palette does this design system use?▼

It uses Fraunces as a characterful serif display face with Space Grotesk for body text, never Inter alone. The palette is warm off-white paper around #f4f1ea, near-black warm ink, and one terracotta accent around #9c4a2f.

How do I fetch real product images from Wikimedia Commons when thumbnails are blocked?▼

Query the Commons API at api.php with action=query, prop=imageinfo, and iiurlwidth to get a thumburl, then download it with a browser User-Agent. Direct Special:FilePath and /thumb/ URLs are bot-blocked and return HTML error pages.

Does this skill work with claude-design and premium-web-refs?▼

Yes, it is designed to load alongside claude-design and popular-web-designs, overriding their default dark-glass gradient lean. Those skills are protected and cannot be patched, so this skill carries the Tyler-specific taste rules separately.

What should I do when no free product photo exists for a build?▼

Use a clean typographic placeholder clearly labeled "photo pending" and state image sources honestly in an Image-credits modal. Never substitute a misleading generic manufacturer image or fabricate one.