Skills DirectoryCurated open-source Skills from GitHub
English

design-taste-frontendcommit af8a897SKILL.md · UI & Interaction

Taste Skill: Frontend Art Direction

Web art direction distilled from a study of 247 curated sites: deals design directions, checks pages in a real browser and runs a look-and-fix loop.

The scripts need Node 22+ and an installed Chrome, Edge or Chromium.

npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
Permissions
  • read-repo
  • write-files
  • shell
  • network
Compatible with
Claude Code, Codex
GitHub
107.3k
Source
Community · Leon Lin
Status
Scan passed
License
MIT
Category
UI & Interaction
Repository
github.com/Leonxlnx/taste-skill/skills/taste-skill

Core rule

Directions are dealt from a library and the idea comes from the subject; customers, quotes and statistics are never invented.

Execution Phases

  1. Phase 01Read the brief

    Decide whether it is a scrolling page or an app screen, then read the project and available image sources.

  2. Phase 02Draw a direction

    draw.mjs deals three of twenty researched directions; the chosen one gets a type system, palette, hero and section compositions.

  3. Phase 03Build to the blueprint

    Build tokens and the hero first, then each section from its blueprint with real imagery of the subject's world and a live element.

  4. Phase 04Gate and look

    inspect.mjs checks the rules in a real browser; screenshots at three widths are judged against a rubric and fixed until no FAILs remain.

  5. Phase 05Add motion and report

    Add one signature move, section entrances and control feedback; report only checks that were actually run.

Permissions (summarised from SKILL.md)

CapabilityNeededDetails
File writesRequiredEdits the project's page code; working files land in .taste-skill/ at the project root.
Command executionLimitedRuns the skill's own Node scripts (draw, inspect, assets and others) and a local Chrome, Edge or Chromium for screenshots; installs nothing.
Network outboundLimitedOnly assets.mjs uses the network, to fetch open-collection imagery; no API keys are used.

SKILL.md frontmatter (YAML)

SKILL.md frontmatter (YAML)commit af8a897
---
name: design-taste-frontend
description: >-
  tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of
  247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions
  (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict
  no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use
  this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site,
  portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML/CSS, React,
  Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated,
  "AI-made", sloppy, or asks to make it look designed, premium, award-level or less like every other
  site. Also for app screens: dashboards, admin and analytics views, settings, inboxes and other screens
  people work in, with their own run and rules.
---

Related skills

A rule scan cannot catch every risk. Read this skill's SKILL.md and check its permissions before installing.
Markdown version GitHub