taste-skill-v1

Name: taste-skill-v1
Author: Leonxlnx

66kstars4.6kforks

How to install taste-skill-v1?

leonxlnx/taste-skill/taste-skill-v1

$npx -y skills add Leonxlnx/taste-skill --skill taste-skill-v1

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# High-Agency Frontend Skill
2
3	## 1. ACTIVE BASELINE CONFIGURATION
4	* DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
5	* MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)
6	* VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)
7
8	AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.
9
10	## 2. DEFAULT ARCHITECTURE & CONVENTIONS
11	Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency:
12
13	* DEPENDENCY VERIFICATION [MANDATORY]: Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. Never assume a library exists.
14	* Framework & Interactivity: React or Next.js. Default to Server Components (`RSC`).
15	* RSC SAFETY: Global state works ONLY in Client Components. In Next.js, wrap providers in a `"use client"` component.
16	* INTERACTIVITY ISOLATION: If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with `'use client'` at the very top. Server Components must exclusively render static layouts.
17	* State Management: Use local `useState`/`useReducer` for isolated UI. Use global state strictly for deep prop-drilling avoidance.
18	* Styling Policy: Use Tailwind CSS (v3/v4) for 90% of styling.
19	* TAILWIND VERSION LOCK: Check `package.json` first. Do not use v4 syntax in v3 projects.
20	* T4 CONFIG GUARD: For v4, do NOT use `tailwindcss` plugin in `postcss.config.js`. Use `@tailwindcss/postcss` or the Vite plugin.
21	* ANTI-EMOJI POLICY [CRITICAL]: NEVER use emojis in code, markup, text content, or alt text. Replace symbols with high-quality icons (Radix, Phosphor) or clean SVG primitives. Emojis are BANNED.
22	* Responsiveness & Spacing:
23	* Standardize breakpoints (`sm`, `md`, `lg`, `xl`).
24	* Contain page layouts using `max-w-[1400px] mx-auto` or `max-w-7xl`.
25	* Viewport Stability [CRITICAL]: NEVER use `h-screen` for full-height Hero sections. ALWAYS use `min-h-[100dvh]` to prevent catastrophic layout jumping on mobile browsers (iOS Safari).
26	* Grid over Flex-Math: NEVER use complex flexbox percentage math (`w-[calc(33%-1rem)]`). ALWAYS use CSS Grid (`grid grid-cols-1 md:grid-cols-3 gap-6`) for reliable structures.
27	* Icons: You MUST use exactly `@phosphor-icons/react` or `@radix-ui/react-icons` as the import paths (check installed version). Standardize `strokeWidth` globally (e.g., exclusively use `1.5` or `2.0`).
28
29
30	## 3. DESIGN ENGINEERING DIRECTIVES (Bias Correction)
31	LLMs have statistical biases toward specific UI cliché patterns. Proactively construct premium interfaces using these engineered rules:
32
33	Rule 1: Deterministic Typography
34	* Display/Headlines: Default to `text-4xl md:text-6xl tracking-tighter leading-none`.
35	* ANTI-SLOP: Discourage `Inter` for "Premium" or "Creative" vibes. Force unique character using `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`.
36	* TECHNICAL UI RULE: Serif fonts are strictly BANNED for Dashboard/Software UIs. For these contexts, use exclusively high-end Sans-Serif pairings (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`).
37	* Body/Paragraphs: Default to `text-base text-gray-600 leading-relaxed max-w-[65ch]`.
38
39	Rule 2: Color Calibration
40	* Constraint: Max 1 Accent Color. Saturation < 80%.
41	* THE LILA BAN: The "AI Purple/Blue" aesthetic is strictly BANNED. No purple button glows, no neon gradients. Use absolute neutral bases (Zinc/Slate) with high-contrast, singular accents (e.g. Emerald, Electric Blue, or Deep Rose).
42	* COLOR CONSISTENCY: Stick to one palette for the entire output. Do not fluctuate between warm and cool grays within the same project.
43
44	Rule 3: Layout Diversification
45	* ANTI-CENTER BIAS: Centered Hero/H1 sections are strictly BANNED when `DESIGN_VARIANCE > 4`. Force "Split Screen" (50/50), "Left Aligned content/Right Aligned asset", or "Asymmetric White-space" structures.
46
47	Rule 4: Materiality, Shadows, and "Anti-Card Overuse"
48	* DASHBOARD HARDENING: For `VISUAL_DENSITY > 7`, generic card containers are strictly BANNED. Use logic-grouping via `bo

People who liked this also viewed

6 picks

Type

taste-skill-v1

66kstars4.6kforks

View on GitHub

How to install taste-skill-v1?

leonxlnx/taste-skill/taste-skill-v1

$npx -y skills add Leonxlnx/taste-skill --skill taste-skill-v1

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# High-Agency Frontend Skill
2
3	## 1. ACTIVE BASELINE CONFIGURATION
4	* DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
5	* MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)
6	* VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)
7
8	AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.
9
10	## 2. DEFAULT ARCHITECTURE & CONVENTIONS
11	Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency:
12
13	* DEPENDENCY VERIFICATION [MANDATORY]: Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. Never assume a library exists.
14	* Framework & Interactivity: React or Next.js. Default to Server Components (`RSC`).
15	* RSC SAFETY: Global state works ONLY in Client Components. In Next.js, wrap providers in a `"use client"` component.
16	* INTERACTIVITY ISOLATION: If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with `'use client'` at the very top. Server Components must exclusively render static layouts.
17	* State Management: Use local `useState`/`useReducer` for isolated UI. Use global state strictly for deep prop-drilling avoidance.
18	* Styling Policy: Use Tailwind CSS (v3/v4) for 90% of styling.
19	* TAILWIND VERSION LOCK: Check `package.json` first. Do not use v4 syntax in v3 projects.
20	* T4 CONFIG GUARD: For v4, do NOT use `tailwindcss` plugin in `postcss.config.js`. Use `@tailwindcss/postcss` or the Vite plugin.
21	* ANTI-EMOJI POLICY [CRITICAL]: NEVER use emojis in code, markup, text content, or alt text. Replace symbols with high-quality icons (Radix, Phosphor) or clean SVG primitives. Emojis are BANNED.
22	* Responsiveness & Spacing:
23	* Standardize breakpoints (`sm`, `md`, `lg`, `xl`).
24	* Contain page layouts using `max-w-[1400px] mx-auto` or `max-w-7xl`.
25	* Viewport Stability [CRITICAL]: NEVER use `h-screen` for full-height Hero sections. ALWAYS use `min-h-[100dvh]` to prevent catastrophic layout jumping on mobile browsers (iOS Safari).
26	* Grid over Flex-Math: NEVER use complex flexbox percentage math (`w-[calc(33%-1rem)]`). ALWAYS use CSS Grid (`grid grid-cols-1 md:grid-cols-3 gap-6`) for reliable structures.
27	* Icons: You MUST use exactly `@phosphor-icons/react` or `@radix-ui/react-icons` as the import paths (check installed version). Standardize `strokeWidth` globally (e.g., exclusively use `1.5` or `2.0`).
28
29
30	## 3. DESIGN ENGINEERING DIRECTIVES (Bias Correction)
31	LLMs have statistical biases toward specific UI cliché patterns. Proactively construct premium interfaces using these engineered rules:
32
33	Rule 1: Deterministic Typography
34	* Display/Headlines: Default to `text-4xl md:text-6xl tracking-tighter leading-none`.
35	* ANTI-SLOP: Discourage `Inter` for "Premium" or "Creative" vibes. Force unique character using `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`.
36	* TECHNICAL UI RULE: Serif fonts are strictly BANNED for Dashboard/Software UIs. For these contexts, use exclusively high-end Sans-Serif pairings (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`).
37	* Body/Paragraphs: Default to `text-base text-gray-600 leading-relaxed max-w-[65ch]`.
38
39	Rule 2: Color Calibration
40	* Constraint: Max 1 Accent Color. Saturation < 80%.
41	* THE LILA BAN: The "AI Purple/Blue" aesthetic is strictly BANNED. No purple button glows, no neon gradients. Use absolute neutral bases (Zinc/Slate) with high-contrast, singular accents (e.g. Emerald, Electric Blue, or Deep Rose).
42	* COLOR CONSISTENCY: Stick to one palette for the entire output. Do not fluctuate between warm and cool grays within the same project.
43
44	Rule 3: Layout Diversification
45	* ANTI-CENTER BIAS: Centered Hero/H1 sections are strictly BANNED when `DESIGN_VARIANCE > 4`. Force "Split Screen" (50/50), "Left Aligned content/Right Aligned asset", or "Asymmetric White-space" structures.
46
47	Rule 4: Materiality, Shadows, and "Anti-Card Overuse"
48	* DASHBOARD HARDENING: For `VISUAL_DENSITY > 7`, generic card containers are strictly BANNED. Use logic-grouping via `bo

People who liked this also viewed

6 picks

Type