taste-skill

Sponsors

	interfaces.dev · A design engineering magazine by Jakub Krehel
	React Bits · animated React components for creative interfaces
	IMG.LY · CreativeEditor SDK
	Sent.dm · messaging APIs for SMS, WhatsApp, and RCS

_{Become a sponsor}

Taste Skill (tasteskill 2.5.1) is an Agent Skill that makes coding agents build professional company websites at the figma.com and x.ai level instead of assembling a generic landing page. Every build uses plain copy, one design system, one section per screen, equal left and right edges, real photographs (licensed stand-ins when the client has none), real brand icons and real product UI, a hero entrance and one or two dealt moments on every page, quiet micro-interactions, and shader effects and scroll scenes kept strictly for tech, gaming and software pages, all verified in a real browser by a checker and a finish gate that enforce the rules.

Pages built from a single brief in earlier v2 runs:

The photographs are real, found in open archives and credited by the skill (credits). Watch the launch film.

Install

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

That installs the skill with the npx skills CLI.

The skill runs its scripts with Node 22+ and an installed Chrome, Edge or Chromium (set CHROME_PATH if it is in a non-standard place). Optional: ffmpeg on the PATH, for WebP output and the phone crop of a hero photograph in photos.mjs. It installs nothing and needs no API keys. Bundled Wikimedia Commons photographs work offline; fetching additional photographs or icons uses network access.

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

Already have the skill? Run the install command again; the install name did not change. Looking for one of the older skills? See Moved skills.

How 2.5 works

Use it by asking your agent to build or redesign a company site; the agent loads the skill, copies assets/ into the project, starts from assets/starter.html and runs the checker before it hands the page over. Every build starts by classifying the client's business (software, gaming, tech, product, service or place) and planning the page screen by screen before writing markup:

1. Deal tokens and layout. scripts/start.mjs deals a palette made for the trade and a Google Fonts pairing for the page kind (library/palettes.json, library/type.json), and assets/layout/deal.mjs deals a hero layout (split, centred, product, photo, place, collage, editorial, word, film, statement or triptych).
2. Start from one system. assets/starter.html, assets/system.css and assets/layout/layout.css enforce one section per screen at desktop (1440x900), equal left and right content edges, a fixed navigation bar and a single-screen closing footer (footer.closing).
3. Show real product UI and real photographs. Software and tech pages populate lit feature cards (assets/ui/cards.css) with rewritten HTML UI fragments (assets/ui/) and node-and-line diagrams (assets/diagrams/), with real brand and interface SVGs resolved locally by scripts/icons.mjs. Place, shop, hospitality and non-technical product pages lead with curated photographs (scripts/photos.mjs, assets/photos/), typography and flat colour, crediting sources in one expandable footer line with no captions under images.
4. Keep effects for tech and gaming pages. Shader grounds (scripts/effects.mjs), scroll scenes (assets/scenes/) and procedural 3D prints (assets/objects/) are dealt only on software, tech and gaming pages within a four-context WebGL cap, with static fallbacks for phones and reduced motion. Every page gets a hero entrance and one or two moments from scripts/moments.mjs; cafes, hotels, shops, studios and services get only the photo- and type-led ones, and zero WebGL.
5. Check in a real browser over HTTP. scripts/consistency.mjs, assets/layout/check.mjs, scripts/perf.mjs and scripts/shoot.mjs render the built page in headless Chrome across 1440, 1024, 768 and 390, catching empty visuals, broken shaders, contrast drops, misaligned columns, section-height drift, placeholder text, invented street numbers and slow-network image gaps before the build ships. scripts/gate.mjs then holds the finish until no fixable FAIL is left, three rounds at most.

Details of what changed from 2.1.x are in the changelog.

The tools

Everything is a plain Node 22+ script in the skill folder; none installs anything.

First run, from the project folder (a deal also arms the finish gate there): node scripts/start.mjs deal --page software (kinds: software, gaming, tech, product, service, place). Check a built page with node scripts/consistency.mjs <url or file> --page <kind>.

Moved skills

This repo holds one skill, design-taste-frontend. The others moved to repos of their own and kept their install names:

Install a moved skill from its new repo under the same name:

npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "high-end-visual-design"

Common Questions

What does the skill need?
Node 22 or newer and Chrome, Edge or Chromium; ffmpeg is optional (WebP photographs and the phone crop of a hero photograph). It installs nothing and uses no API keys. Bundled Commons photographs are stored locally; network access is used only when downloading additional photographs, Google Fonts or brand icons.

Where do the pictures come from, and can I use them?
From the skill's vetted photograph library (assets/photos/photos.json, including bundled Wikimedia Commons WebP sets and Unsplash photographs) dealt by scripts/photos.mjs. Library frames are used for trade and material details (or marked explicitly as draft stand-ins when the client has no photographs yet), never passed off as the client's own room, staff or product, and credited in one expandable footer line (photos.mjs credits).

Does it work with React, Vue, Svelte, plain HTML?
An empty folder gets a static page from assets/starter.html. An existing React, Vue, Svelte, Astro or Tailwind project is built in its own stack, with the kit served from its public folder; a Next.js brief is built as a static export. The browser checks run on the served or built page.

When does a page get shaders or scroll effects?
Shaders only on software, tech (technical hardware) and gaming pages, and always within a four-context WebGL budget with static phone and reduced-motion fallbacks. Places, shops, cafes, hotels, studios, services and everyday physical products stay calm: photographs, sharp typography and flat colour, with a hero entrance and one or two photo- or type-led moments in their own sections.

Support the project

If Taste Skill helps you, consider sponsoring:

Sponsor on GitHub

Open Source Supporters

	Get a Kimi API key: taste-skill users get 10% bonus API credits on their first purchase.

Community Sponsors

_{Feedback: open an issue or pull request, DM @lexnlin or @blueemi99, or email hello@tasteskill.dev.}

_{Taste Skill has no official token, coin, or crypto project. Any token using my name, image, or project is unaffiliated and not endorsed by me.}

License

MIT License · Copyright (c) 2026 Leonxlnx