# Taste Skill 프론트엔드 (design-taste-frontend)

> 엄선된 247개 사이트 연구에 기반한 웹 아트 디렉션. 방향을 뽑고 실제 브라우저로 검사하며 화면을 보고 고칩니다.

- 카테고리: [UI·인터랙션](https://www.myskills.tools/ko/categories/ui-interaction/)
- 출처: 커뮤니티 · Leon Lin
- 저장소: 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
- 설치 명령: `npx skills add Leonxlnx/taste-skill --skill design-taste-frontend`
- 라이선스: MIT
- 호환 도구: Claude Code, Codex
- 권한: read-repo ✓, write-files ✓, shell ✓, network ✓
- 상태: 스캔 통과
- 규칙 스캔으로 모든 위험을 찾을 수는 없습니다. 설치 전에 이 스킬의 SKILL.md를 읽고 권한을 확인하세요.
- ⚠ 스크립트에는 Node 22 이상과 Chrome·Edge·Chromium 중 하나가 필요합니다.

## 핵심 규칙

방향은 라이브러리에서 뽑고 아이디어는 주제 자체에서 얻으며, 고객·후기·수치는 지어내지 않습니다.

## 실행 단계

1. **요구와 프로젝트 읽기** — 스크롤해 읽는 페이지인지 앱 화면인지 먼저 정하고, 프로젝트와 쓸 수 있는 이미지 출처를 확인합니다.
2. **방향 뽑기** — draw.mjs로 연구된 20개 방향 중 3개를 뽑고, 고른 방향에 글꼴·팔레트·히어로·섹션 구성을 배정합니다.
3. **블루프린트대로 구축** — 토큰과 히어로부터 만들고 각 섹션을 블루프린트대로 구현하며, 주제의 실제 사진과 살아 있는 요소를 넣습니다.
4. **검사와 확인** — inspect.mjs로 실제 브라우저에서 규칙을 검사하고 세 가지 폭의 스크린샷을 기준으로 고쳐 FAIL이 없을 때까지 반복합니다.
5. **모션 추가 후 보고** — 대표 모션, 섹션 등장, 컨트롤 피드백을 더하고 실제로 실행한 검사만 보고합니다.

## 권한 설명 (SKILL.md 기준)

| 기능 | 필요 여부 | 설명 |
|---|---|---|
| 파일 쓰기 | 필요 | 프로젝트의 페이지 코드를 수정하고, 작업 파일은 프로젝트 루트의 .taste-skill/에 씁니다. |
| 명령 실행 | 일부 필요 | 스킬에 포함된 Node 스크립트(draw, inspect, assets 등)를 실행하고 로컬 Chrome/Edge/Chromium으로 캡처하며, 의존성은 설치하지 않습니다. |
| 네트워크 송신 | 일부 필요 | 네트워크는 공개 이미지 자료를 가져오는 assets.mjs만 사용하며 API 키는 쓰지 않습니다. |

## SKILL.md 프런트매터(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.
---
```

홈: https://www.myskills.tools/ko/ · URL: https://www.myskills.tools/ko/skills/design-taste-frontend/