Hubbestaiskill.com

Home / All Skills / Design & Motion / design-taste-frontend-v1

Design & Motion · leonxlnx/taste-skill

design-taste-frontend-v1

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessWrite FileDual-pass Audit

Author leonxlnxGitHub leonxlnx/taste-skill ↗Stars 87309License MIT（仓库根 LICENSE，Copyright (c) 2026 Leonxlnx；GitHub API spdx_id=MIT）Commit ccbc15639c

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Acts as a "frozen original version": preserves v1's dial-driven philosophy, anti-slop rules, and pattern nomenclature library as-is for legacy projects requiring pinned versions to maintain exact behavior.

CHANGELOG.md

The original release. Dial-driven philosophy, anti-slop rules, reference vocabulary of pattern names.

Both CHANGELOG and README treat v2 as the new default and this file as compatibility insurance. The value of this skill lies not in innovation but in "reproducible behavior"—projects where upgrading to v2 might break established workflows should explicitly install design-taste-frontend-v1.

Drives rule branches throughout the entire document using three 1–10 dials (DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY) with fixed baselines at 8/6/4, strictly forbidding users from modifying files and only accepting dynamic overrides via chat dialogue.

skills/taste-skill-v1/SKILL.md

The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file.

§6 defines three-tier brackets (1–3 / 4–7 / 8–10) for each dial (e.g., VARIANCE 8–10 = Masonry, fractional unit grids, 2fr 1fr 1fr, padding-left: 20vw), and §3 triggers rules conditionally based on dial tiers—forming the core of v1's "parametric design discipline".

Mandates dependency governance as an upfront prerequisite: package.json must be read before importing any third-party library, requiring installation commands to be printed first if packages are missing, and strictly prohibiting the assumption of existing libraries.

skills/taste-skill-v1/SKILL.md

**DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`.

The same section includes a Tailwind version lock (v3 projects must not use v4 syntax; v4 must not use the tailwindcss plugin in postcss.config.js, but must use @tailwindcss/postcss or Vite plugins)—a rare "build configuration correctness" constraint in this repository.

Framework-level conventions: defaults to React/Next.js and RSC, requiring interactive components to be extracted into leaf components marked with 'use client', while restricting global state to only bypassing deep prop drilling.

skills/taste-skill-v1/SKILL.md

* **State Management:** Use local `useState`/`useReducer` for isolated UI.

§2 simultaneously dictates RSC SAFETY (providers must be wrapped with 'use client') and INTERACTIVITY ISOLATION (interactive UI must be extracted when §4/§7 are active), embedding runtime viability into the rules rather than leaving it to model improvisation.

Anti-AI bias rules are formalized into six actionable design directives (deterministic typography, color calibration, layout decentralization, materiality & decardification, full lifecycle interactive states, form patterns), each accompanied by default class strings.

skills/taste-skill-v1/SKILL.md

**ANTI-CENTER BIAS:** Centered Hero/H1 sections are strictly BANNED when `DESIGN_VARIANCE > 4`.

For example, Rule 1 explicitly specifies "Default to `text-4xl md:text-6xl tracking-tighter leading-none`", and Rule 6 specifies "Use a standard `gap-2` for input blocks"—reducing aesthetic choices down to copy-pasteable class names.

Enforces technical implementation standards for creative autonomy: micro-magnetic physics must use Framer Motion's useMotionValue/useTransform to decouple from the React render cycle, strictly forbidding useState for driving continuous animations.

skills/taste-skill-v1/SKILL.md

**CRITICAL:** NEVER use React `useState` for magnetic hover or continuous animations.

§4 also dictates layout/layoutId shared element transitions and requires staggerChildren parents and children to share the same Client Component tree—tightly binding creative effects with performance constraints, illustrating v1's more "engineering-heavy" nature compared to v2.

Prohibits mixed animation stacks: GSAP/ThreeJS and Framer Motion must not coexist within the same component tree; GSAP/ThreeJS are reserved strictly for full-page scroll-driven narratives and require rigorous useEffect cleanup.

skills/taste-skill-v1/SKILL.md

**CRITICAL:** Never mix GSAP/ThreeJS with Framer Motion in the same component tree.

This contrasts sharply with gpt-taste in the same repository (which fully migrates to GSAP): v1 defaults to Framer Motion, treating GSAP solely as an exceptional path for full-page scroll storytelling.

Enumerates an AI tells blacklist across five dimensions (Visual/CSS, Typography, Layout Spacing, Content Data, External Resources & Components), explicitly banning fake names (John Doe/Sarah Chan), fake metrics (99.99%/50%), fake brands (Acme/Nexus/SmartFlow), and generic marketing fluff.

skills/taste-skill-v1/SKILL.md

**NO Broken Unsplash Links:** Do not use Unsplash. Use absolute, reliable placeholders like `https://picsum.photos/seed/{random_string}/800/600` or SVG UI Avatars.

This blacklist is v1's hallmark: deconstructing "looking like AI-generated output" into explicitly named patterns, serving as the source corpus inherited by later v2 and gpt-taste iterations.

§8 establishes an "advanced interaction terminology library" (spanning seven categories: navigation, layout, cards, scroll, gallery, typography, micro-interactions, with dozens of pattern names) for models to source from rather than improvising on the fly.

skills/taste-skill-v1/SKILL.md

## 9. THE "MOTION-ENGINE" BENTO PARADIGM

§9 further translates the Bento paradigm into actionable construction specs: #f9fafb background, pure white card surface with border-slate-200/50, rounded-[2.5rem], explicit spread shadow values, and mandatory placement of labels outside and below cards; it also provides concrete micro-animations for 5 card types (Smart List, Command Input, Live Status, Broad Data Stream, Ambient Context UI).

Concludes by institutionalizing pre-delivery verification via a 7-point pre-flight checklist, covering global state, mobile collapsible handling, 100dvh, useEffect cleanup, empty/loading/error states, decardification, and CPU-intensive animation isolation.

skills/taste-skill-v1/SKILL.md

- [ ] Do full-height sections safely use `min-h-[100dvh]` instead of the bugged `h-screen`?

The checklist is formatted with checkboxes for easy step-by-step verification by the model; items like 100dvh and useEffect cleanup appear both in §2/§5 rules and in the checklist, serving as dual reinforcement.

2Core Capabilities

01Three-tier parametric design discipline (VARIANCE 8 / MOTION 6 / DENSITY 4) with dial-conditional rule branching

02Upfront dependency and build configuration correctness checks (package.json verification, Tailwind v3/v4 syntax locking, emitting installation commands for missing packages)

03React/Next.js RSC architectural conventions and interactive component isolation ('use client' leaf components, throttled global state)

04Six anti-AI bias engineering directives (typography, color, layout decentralization, decardification, interaction states, form patterns)

05Advanced motion paradigms and performance redlines (useMotionValue magnetic physics, layout transitions, stagger choreography, prohibition of animating top/left/width/height)

06Five-dimensional AI tells blacklist (fake names, fake metrics, fake brand names, marketing jargon, broken Unsplash links, 3-column equal-width cards, neon glow, pure black)

07Advanced interaction terminology library (dozens of pattern names across navigation, layout, cards, scroll, gallery, typography, and micro-interactions)

08Motion-Engine Bento specifications (concrete color palettes, border radius, shadow metrics + micro-animation specs for 5 card archetypes) with a 7-point pre-flight checklist

3External Dependencies

Kind	Dependency / Endpoint
network	picsum.photos（禁用 Unsplash 后指定的占位图源）
package	Framer Motion（默认动效库，含 useMotionValue/useTransform/layout/AnimatePresence）
package	@phosphor-icons/react 或 @radix-ui/react-icons（唯一允许的图标包）
package	Tailwind CSS v3/v4（90% 样式来源，含版本锁与 v4 postcss 守则）
package	shadcn/ui（允许使用但禁止默认态）
package	GSAP（ScrollTrigger）与 ThreeJS/WebGL（仅限整页滚动叙事/画布背景，禁与 Framer Motion 混用）
package	lucide-react / zustand（被点名作为需先校验是否已安装的示例库）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Declare allowed domains and key scope

For Administrators

Least privilege keys, retain request logs

Evidence & Triggers (File Paths & Excerpts)

网络端点: Declared external network access: picsum.photos — the skill itself does not initiate network requests, but dictates generated pages to use https://picsum.photos/seed/{random
本地工作目录: File I/O and artifact output: the skill instructs the agent to write source files (React/Next components, etc.) inside the user's project—standard file generation for deliverables; additionally requires reading the user's package.json.

Audit Notes: Pure prompt-based instruction skill: contains no executable scripts, initiates no outbound network calls, and performs no credential access. It only performs standard coding agent behaviors like "reading package.json to verify dependencies + writing source code files", where dependency reading is explicitly mandated as a correctness check (preventing assumptions of uninstalled libraries). External touchpoints are strictly limited to placeholder images via picsum.photos and frontend packages that users must install themselves. Note two aspects: ① As a frozen v1 release, it no longer receives bug fixes; defects already addressed in upstream v2 will persist here; ② The pattern library contains third-party UI product terms (Dock, Gooey Menu, etc.) strictly as design pattern references, posing no trademark risks.

5Second-Pass Verification

[ok] 『保留 v1 兼容』的定位是否有仓库级依据 — CHANGELOG 'The original release. Dial-driven philosophy, anti-slop rules, reference vocabulary of pattern names.' 与 README 'preserved for projects depending on its exact behavior' 双重印证；README 还给出钉版安装命令与 install name。
[discrepancy] 安装名与目录名不一致（易用性坑） — 目录为 skills/taste-skill-v1，但 frontmatter name 与安装用的 install name 是 design-taste-frontend-v1。README 明确 'Install a single skill by its **install name** (the `name:` field inside the SKILL frontmatter, not the folder name)'——两者不一致是官方设计，但对用户是实际坑点，已记录。
[ok] 外部依赖清单完整性 — token 扫描命中项全部核实为包名/图片源/工具类，无遗漏的隐藏端点：picsum.photos（§7）、framer-motion/lucide-react/zustand（§2 依赖校验示例）、@phosphor-icons/react 与 @radix-ui/react-icons（§2 Icons）、Tailwind v3/v4 与 @tailwindcss/postcss（§2 版本锁）、shadcn/ui（§7）、GSAP/ThreeJS（§8）。npm install 仅作为『缺包时需输出的命令』示例，非 skill 自行执行。
[ok] 是否真的会读用户文件（file_writes/读取面） — §2 要求先检查 package.json 与已安装版本（只读），属技能明示的正确性前置；文中无其它文件读写指令。写入面全部是产物源码。
[ok] 与批1 的 design-taste-frontend（v2）是否重复 — 同一 repo 两个不同 skill：v2 位于 skills/taste-skill（install name design-taste-frontend，brief 推断 + 设计系统映射 + 暗色模式/重设计协议/区块库），v1 位于 skills/taste-skill-v1（三档参数 + 名词库 + Framer Motion 栈）。CHANGELOG 视 v2 为 'substantial rewrite'；本次结论只对 pin commit 内的 v1 文件有效，不推广到 v2。
[ok] 动画栈规定是否前后矛盾 — §4 强制 Framer Motion 用于 UI/Bento，§8 允许 GSAP/ThreeJS 但限定于整页滚动叙事/画布背景且禁止与 Framer Motion 同树混用——两处口径互补，无矛盾（与 gpt-taste 全面 GSAP 路线不同，属版本差异）。
[ok] 元数据（license / stars / last_push / 路径 / commit） — gh api：MIT、87309 stars、pushed_at 2026-08-24T15:23:56Z；git ls-files 确认 skills/taste-skill-v1/SKILL.md；HEAD == origin/main == ccbc15639c97057cbfcf32ecebc38ef716e4bb37。

6Verdict & Scenarios

Compatibility insurance with reproducible behavior: legacy projects can explicitly pin v1 to avoid breaking changes from the v2 rewrite.

Mature parametric discipline: three 1–10 dials drive all document rule branching with human-readable three-tier brackets, allowing dial adjustments without altering the rule structure.

Engineering correctness baked into rules: dependency verification, Tailwind version locking, RSC/use client isolation, and useEffect cleanup drastically minimize "looks good but fails to run" output.

Creative freedom bundled with performance constraints: magnetic physics must decouple from the render loop via useMotionValue, infinite animations must be memoized and isolated into micro-components, and animating layout properties is strictly forbidden.

7-point checkbox-based pre-flight inspection covering responsive collapse, 100dvh, state completeness, decardification, and animation isolation.

Best for: Teams with established production workflows built on v1 that must not be disrupted by v2 rewrites (pinning versions to guarantee exact behavior); frontend engineers requiring deterministic constraints via "three dials + pattern library" and favoring the Framer Motion stack; practitioners using the blacklist as an anti-AI artifact checklist (banned items like fake names, fake metrics, marketing fluff, 3-column cards, and neon glow are directly reusable); educational scenarios serving as primary source material to understand the evolution of this skill lineage.

Not for: New projects (should directly use default design-taste-frontend v2, or opt for gpt-taste's GSAP approach as needed); dashboard or data-dense enterprise UIs (explicitly oriented towards landing pages, portfolios, and redesigns); tech stacks not using React/Next + Tailwind (strongly coupled to §2 architectural conventions); CI workflows requiring programmatic enforcement of aesthetic linting; small-context models (incurs 21 KB instruction and terminology library overhead).

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload design-taste-frontend-v1.tar.gz

sha256: 470ab18897944ef0…

Option B · Copy Guide for Agent

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit ccbc15639c.