Tastegate
Build or fix a frontend (landing page, marketing site, dashboard, app screen, component) so it looks designed, not AI-generated, and prove it in a real browser before calling it done. Picks a design direction first (taste), builds on a craft floor (impeccable-style rules), then runs scripts/gate.py, which renders the page at phone and desktop width and fails on overlapping text, sideways scroll, low contrast, tiny tap targets, AI purple gradients, gradient text, emoji icons, eyebrow labels, default fonts, three-equal-card grids and placeholder copy. Use for any UI build, redesign, polish or "m
Install
npx skills add stas4000/tastegate --skill tastegategit clone --depth 1 https://github.com/stas4000/tastegate.git /tmp/tastegate
mkdir -p ~/.claude/skills
cp -r /tmp/tastegate/tastegate ~/.claude/skills/tastegatePersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# tastegate Two skills in one, plus the part both leave to the model: proof. 1. **Taste** decides what the page should be before any code (from taste-skill, MIT). 2. **The craft floor** holds the mechanics every page must meet (from impeccable, Apache-2.0). 3. **The gate** renders the page in a real browser at phone and desktop width and refuses "done" while any hard finding is open. A model that wrote the CSS cannot see that its hero overlaps its nav at 390px. The browser can. Work through the four steps in order. Do not announce the checklists; apply them. ## Step 1. Read the room (2 minutes, before code) Write one line before building: > Reading this as: <page kind> for <audience>, in a <vibe> language, built on <type pairing> + <palette family> + <one signature detail>. - The audience picks the look, not your habit. A B2B buyer, a design-savvy consumer and a public-sector visitor need three different pages. - Set three dials from the read (1 to 10): **variance** (symmetry to art), **motion** (still to cinematic), **density** (gallery to cockpit). Default landing page: 7 / 6 / 4. Trust-first or regulated: 3 / 2 / 5. - Name one **signature detail** the page will be remembered by: a type treatment, a material, an interaction, a way the product is shown. One, done well. - If the brief pins fonts, colors or an era, the brief wins over every rule here. Full direction rules: [references/direction.md](references/direction.md). ## Step 2. Build on the craft floor
Details
- Skill name
tastegate- Repository
- stas4000/tastegate
- Path
tastegate/SKILL.md- License
- MIT
- Repo updated
- 2 October 2026
- Listed in
- karanb192/awesome-claude-skills
FAQ
What does the Tastegate skill do?
Build or fix a frontend (landing page, marketing site, dashboard, app screen, component) so it looks designed, not AI-generated, and prove it in a real browser before calling it done. Picks a design direction first (taste), builds on a craft floor (impeccable-style rules), then runs scripts/gate.py, which renders the page at phone and desktop width and fails on overlapping text, sideways scroll, low contrast, tiny tap targets, AI purple gradients, gradient text, emoji icons, eyebrow labels, default fonts, three-equal-card grids and placeholder copy. Use for any UI build, redesign, polish or "m
How do I install the Tastegate skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add stas4000/tastegate --skill tastegate. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Tastegate popular?
It lives in stas4000/tastegate, which has 2 GitHub stars and 0 forks, and is included in 1 curated skill list.
Related skills
Anti Slop Design
2wwewtech/anti-slop-design
Autonomous Principal Design Technologist and Anti-AI-Slop Specialist. Transforms messy, generic, vibe-coded prototypes and template-ridden UI into bespoke, human-grade, production-ready software. Use whenever building, styling, refactoring, or auditing web apps, SaaS dashboards, landing pages, mobile interfaces, Tailwind CSS, component systems, or when asked to "fix my UI", "make it look professional", "clean up AI slop", "improve UX", or "review frontend design".
Scrollytelling Brand Site
2abdelrhman2007/scrollytelling-brand-site
Build an award-level, scroll-told company website with a story told through scroll, a WebGL "layer by layer" 3D print scene, pinned sections, per-service 3D models, a projects gallery, an About page, an optional .NET + SQL Server CMS with contact inbox and private QR contact cards, tuned to near-zero idle CPU/GPU and fully responsive. Use when the user asks for an amazing, premium, Awwwards-style, scrollytelling or 3D website for a company or brand, wants "a site like the Demo House of Prototyping site", or gives a company profile or deck to turn into an immersive site.
Build with Better Design
1better-designs/better-design-plugin
Build or redesign a web or mobile interface on a Better Design design system. Use when the user asks for an app, site, page, dashboard or component and wants it built on Better Design, or asks to choose, create or install a design system.
Visual Identity Designer
5ali4o/visual-identity-designer
Build a professional, precise visual identity (brand identity) for a project, startup, or business — logo direction, color system, typography, application mockups — via a structured 9-stage agency workflow ending in two polished deliverables — a Brand Identity Guide and a Design Language System (built with the docx skill, in the user's chosen language). Trigger any time the user attaches, pastes, or describes a project idea/brief and asks for a "visual identity", "brand identity", "logo", "branding", "brand kit", "brand guide", "design language system", "هوية بصرية", or similar — even without
Keyword Icons
1ruthless-coder-ai/keyword-icons
Generate clean monochrome PNG icons from a keyword — three distinct concepts per keyword, 1:1 aspect ratio, transparent background, recolorable, ready to drop into PowerPoint, Keynote, or docs. Use this whenever the user asks for an icon, pictogram, or "a simple graphic that represents X" (hospital, growth, contract, security, teamwork…), in any language, even if they never say the word "icon". Also use it when the user wants to recolor, resize, or tweak an icon made earlier.
UI Design Intelligence
5DevvNirvana/tvastar-design-claude-code-skill
World-class UI/UX design intelligence — Tvastar v4.0. TRIGGER on: /design /preview /approved /apply /review /ship /component /heal /tokens /dark /a11y /cro /color /typography /motion /extract /storybook, build page, build component, landing page, hero section, dashboard, nav, card, animation, dark mode, layout, color palette, typography, redesign, make it look better, add animations, style this, improve UI, add polish, professional look, modern design, review my code, check before deploy, is this ready to ship.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.