# Taste Skill: Frontend Art Direction (design-taste-frontend)

> 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.

- Category: [UI & Interaction](https://www.myskills.tools/en/categories/ui-interaction/)
- Source: Community · Leon Lin
- Repository: https://github.com/Leonxlnx/taste-skill/tree/main/skills/taste-skill (commit af8a897)
- SKILL.md: https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md
- Install command: `npx skills add Leonxlnx/taste-skill --skill design-taste-frontend`
- License: MIT
- Compatible with: Claude Code, Codex
- Permissions: read-repo ✓, write-files ✓, shell ✓, network ✓
- Status: Scan passed
- A rule scan cannot catch every risk. Read this skill's SKILL.md and check its permissions before installing.
- ⚠ The scripts need Node 22+ and an installed Chrome, Edge or Chromium.

## 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. **Read the brief** — Decide whether it is a scrolling page or an app screen, then read the project and available image sources.
2. **Draw a direction** — draw.mjs deals three of twenty researched directions; the chosen one gets a type system, palette, hero and section compositions.
3. **Build 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. **Gate 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. **Add motion and report** — Add one signature move, section entrances and control feedback; report only checks that were actually run.

## Permissions (summarised from SKILL.md)

| Capability | Needed | Details |
|---|---|---|
| File writes | Required | Edits the project's page code; working files land in .taste-skill/ at the project root. |
| Command execution | Limited | Runs the skill's own Node scripts (draw, inspect, assets and others) and a local Chrome, Edge or Chromium for screenshots; installs nothing. |
| Network outbound | Limited | Only assets.mjs uses the network, to fetch open-collection imagery; no API keys are used. |

## SKILL.md frontmatter (YAML)

```yaml
---
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.
---
```

Home: https://www.myskills.tools/en/ · URL: https://www.myskills.tools/en/skills/design-taste-frontend/