tasteskill v2.1.1 (#150 )

tasteskill v2.1.1: one skill to reach for
v2.1.1: one skill to reach for
2026-10-19 01:12:11 +02:00 · 2026-10-19 01:09:32 +02:00
32 changed files with 170 additions and 4814 deletions
@@ -1,6 +1,6 @@
 {
  "name": "taste-skill",
-  "description": "Taste skill library for Claude Code — frontend design, image-to-code, and aesthetic skills",
+  "description": "tasteskill: art direction for coding agents, for websites, product pages, dashboards and app screens, checked in a real browser.",
  "owner": {
    "name": "leonxlnx",
    "email": "hello@tasteskill.dev"
@@ -8,13 +8,41 @@
  "plugins": [
    {
      "name": "taste-skill",
-      "description": "tasteskill v2: art direction for coding agents, with a library of researched directions, real pictures from open collections and a real-browser inspector. Also image-generation, redesign and style skills.",
-      "version": "2.1.0",
+      "description": "tasteskill v2: art direction for websites, product pages, dashboards and app screens, with a library of researched directions, real pictures from open collections and a real-browser inspector.",
+      "version": "2.1.1",
      "source": "./",
+      "skills": ["./skills/taste-skill"],
      "author": {
        "name": "leonxlnx",
        "email": "hello@tasteskill.dev"
-      }
+      },
+      "homepage": "https://github.com/Leonxlnx/taste-skill",
+      "repository": "https://github.com/Leonxlnx/taste-skill",
+      "license": "MIT",
+      "keywords": ["skills", "frontend", "design", "taste", "ui", "dashboard"]
+    },
+    {
+      "name": "taste-skill-classics",
+      "description": "The classic taste-skill styles and earlier versions (soft, minimalist, brutalist, gpt-taste, Stitch, v1, v2-experimental). Opt-in: each runs only when called by name.",
+      "version": "2.1.1",
+      "source": "./",
+      "skills": [
+        "./skills/soft-skill",
+        "./skills/minimalist-skill",
+        "./skills/brutalist-skill",
+        "./skills/gpt-tasteskill",
+        "./skills/stitch-skill",
+        "./skills/taste-skill-v1",
+        "./skills/taste-skill-v2-experimental"
+      ],
+      "author": {
+        "name": "leonxlnx",
+        "email": "hello@tasteskill.dev"
+      },
+      "homepage": "https://github.com/Leonxlnx/taste-skill",
+      "repository": "https://github.com/Leonxlnx/taste-skill",
+      "license": "MIT",
+      "keywords": ["skills", "frontend", "design", "styles"]
    }
  ]
 }
@@ -1,19 +0,0 @@
-{
-  "name": "taste-skill",
-  "description": "tasteskill v2: art direction for coding agents, with a library of researched directions, real pictures from open collections and a real-browser inspector. Also image-generation, redesign and style skills.",
-  "version": "2.1.0",
-  "author": {
-    "name": "leonxlnx",
-    "email": "hello@tasteskill.dev"
-  },
-  "homepage": "https://github.com/leonxlnx/taste-skill",
-  "repository": "https://github.com/leonxlnx/taste-skill",
-  "license": "MIT",
-  "keywords": [
-    "skills",
-    "frontend",
-    "design",
-    "taste",
-    "ui"
-  ]
-}
@@ -1,7 +1,7 @@
 {
  "name": "taste-skill",
-  "version": "2.1.0",
-  "description": "tasteskill v2: art direction for coding agents, plus image-to-code, redesign, image-generation and style skills.",
+  "version": "2.1.1",
+  "description": "tasteskill v2: art direction for websites, product pages, dashboards and app screens, checked in a real browser. Classic styles included, opt-in.",
  "author": {
    "name": "leonxlnx",
    "url": "https://github.com/Leonxlnx"
@@ -19,8 +19,8 @@
  "skills": "./skills/",
  "interface": {
    "displayName": "Taste Skill",
-    "shortDescription": "Anti-slop frontend, image-to-code, and visual design skills.",
-    "longDescription": "Frontend and visual-design skills from Leonxlnx/taste-skill, packaged as one Codex marketplace plugin.",
+    "shortDescription": "Art direction for websites, dashboards and app screens.",
+    "longDescription": "tasteskill v2 from Leonxlnx/taste-skill: researched directions, real pictures and a real-browser inspector for websites, product pages, dashboards and app screens. The classic style skills are included and run only when called by name.",
    "developerName": "leonxlnx",
    "category": "Design",
    "capabilities": [],
@@ -28,7 +28,7 @@
    "defaultPrompt": [
      "Design a distinctive frontend without generic AI patterns.",
      "Redesign this interface while preserving its brand.",
-      "Turn this reference image into production-ready UI."
+      "Build the dashboard for this product with real data and charts."
    ]
  }
 }
@@ -4,6 +4,16 @@ All notable changes to taste-skill live here. The repo follows SemVer-ish discip

 ---

+## 2.1.1 - 2026-10-19
+
+One skill to reach for. Installing the repo no longer means an agent might pick an older skill for the job.
+
+- **The classic skills are opt-in.** soft, minimalist, brutalist, gpt-taste, Stitch, v1 and v2-experimental run only when called by name: `disable-model-invocation: true` for Claude Code, `allow_implicit_invocation: false` (`agents/openai.yaml`) for Codex, and descriptions that say so for every other agent.
+- **Redesigns are part of taste-skill.** `SKILL.md` has a full route for a redesign, restyle or review of an existing page or app screen: record the before in a real browser, keep the stack, the content and what works, change type, colour, the frame, states and stock components in that order, prove it with before and after. `redesign-existing-projects` is retired and points there.
+- **The image-generation skills moved** to their own repo, [Leonxlnx/imagegen-skills](https://github.com/Leonxlnx/imagegen-skills): `imagegen-frontend-web`, `imagegen-frontend-mobile`, `brandkit`, `image-to-code`. Same install names; the folders here point there.
+- **`full-output-enforcement` is removed.**
+- **Two Claude Code plugins:** `taste-skill` carries only the default skill; `taste-skill-classics` carries the classic skills for whoever wants them.
+
 ## 2.1.0 - 2026-10-19

 ### The scroll-scene engine
@@ -81,29 +81,25 @@ The photographs are real, found in open archives and credited by the skill ([cre

 ## Install

-```bash
-npx skills add https://github.com/Leonxlnx/taste-skill
-```
-
-That installs every skill in this repo with the [`npx skills`](https://github.com/vercel-labs/agent-skills) CLI. To install one, pass its install name:
-
 ```bash
 npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
 ```

+That installs the skill with the [`npx skills`](https://github.com/vercel-labs/agent-skills) CLI. Without `--skill` you also get the [classic skills](#classic-skills), which stay out of the way: they run only when you call them by name.
+
 The default skill runs its scripts with **Node 22+** and an installed **Chrome, Edge or Chromium**. It installs nothing and needs no API keys. Finding pictures needs network access.

 <details>
 <summary>Claude Code plugin</summary>

-Run these inside Claude Code. Every skill is namespaced under `taste-skill:`, so they do not collide with your other skills.
+Run these inside Claude Code. The skill is namespaced under `taste-skill:`, so it does not collide with your other skills.

 ```
 /plugin marketplace add Leonxlnx/taste-skill
 /plugin install taste-skill@taste-skill
 ```

-`/plugin update` upgrades it later.
+`/plugin update` upgrades it later. The classic skills are a separate plugin, `taste-skill-classics@taste-skill`, if you want them.

 </details>

@@ -122,11 +118,11 @@ Start a new Codex session afterwards so the skills are loaded.
 <details>
 <summary>From a clone, linked instead of copied</summary>

-`./install.sh` symlinks the skills into Claude Code (`--codex` for Codex, `--all-agents` for both), so a `git pull` updates them in place. `./install.sh --list` shows every install name.
+`./install.sh design-taste-frontend` symlinks the skill into Claude Code (`--codex` for Codex, `--all-agents` for both), so a `git pull` updates it in place. `./install.sh --list` shows every install name.

 </details>

-Already have the skill? Run the install command again. The install name did not change, and the older versions stay available under their own names (see [Skills](#skills)).
+Already have the skill? Run the install command again. The install name did not change, and the older versions stay available under their own names (see [Classic skills](#classic-skills)).

 ## How v2 works

@@ -147,68 +143,39 @@ v2.1 also checks the frame of every page (a clear title on the first screen, equ

 ## Skills

-Each skill does one job. You do not need all of them. The **install name** is the value you pass to `--skill`.
-
 | Skill | Install name | What it does |
 | --- | --- | --- |
-| **[taste-skill](skills/taste-skill/SKILL.md)** | `design-taste-frontend` | v2. Art direction for landing pages, marketing sites, portfolios and product pages, and since v2.1 for dashboards and app screens, in any stack. Works as described above. |
+| **[taste-skill](skills/taste-skill/SKILL.md)** | `design-taste-frontend` | Art direction for landing pages, marketing sites, portfolios, product pages, dashboards and app screens, in any stack. New builds, redesigns and reviews of existing pages. Works as described above. |
+
+Want design images first and code second? The image-generation skills (`imagegen-frontend-web`, `imagegen-frontend-mobile`, `brandkit`, `image-to-code`) now live in their own repo: **[Leonxlnx/imagegen-skills](https://github.com/Leonxlnx/imagegen-skills)**. Same install names.
+
+### Classic skills
+
+The skills this repo shipped before v2, kept for projects that depend on them. They are opt-in: an agent never picks one by itself, it runs only when you call it by name (`/high-end-visual-design` in Claude Code, `$minimalist-ui` in Codex).

 <details>
-<summary>Skills for a specific job (8)</summary>
-
-| Skill | Install name | What it does |
-| --- | --- | --- |
-| **[redesign-skill](skills/redesign-skill/SKILL.md)** | `redesign-existing-projects` | Existing projects: audit the UI first, then fix layout, spacing, hierarchy and styling. |
-| **[image-to-code-skill](skills/image-to-code-skill/SKILL.md)** | `image-to-code` | Generate site references, analyse them, then build the frontend to match. |
-| **[gpt-tasteskill](skills/gpt-tasteskill/SKILL.md)** | `gpt-taste` | A stricter variant for GPT and Codex: more layout variance, stronger motion direction. |
-| **[soft-skill](skills/soft-skill/SKILL.md)** | `high-end-visual-design` | Calm, polished UI: soft contrast, whitespace, spring motion. |
-| **[minimalist-skill](skills/minimalist-skill/SKILL.md)** | `minimalist-ui` | Editorial product UI with a restrained palette and crisp structure. |
-| **[brutalist-skill](skills/brutalist-skill/SKILL.md)** | `industrial-brutalist-ui` | Hard mechanical language: Swiss type, sharp contrast, experimental layout. |
-| **[stitch-skill](skills/stitch-skill/SKILL.md)** | `stitch-design-taste` | Rules for Google Stitch, with an optional `DESIGN.md` export. |
-| **[output-skill](skills/output-skill/SKILL.md)** | `full-output-enforcement` | For when the model ships half-finished work: full output, no placeholder comments. |
-
-</details>
-
-<details>
-<summary>Image generation skills (3)</summary>
-
-These produce design images only, no code. Use them with ChatGPT Images, Codex image mode or any agent that generates images, then hand the frames to your coding agent.
-
-| Skill | Install name | What it does |
-| --- | --- | --- |
-| **[imagegen-frontend-web](skills/imagegen-frontend-web/SKILL.md)** | `imagegen-frontend-web` | Website comps: hero, landing page, multi-section. |
-| **[imagegen-frontend-mobile](skills/imagegen-frontend-mobile/SKILL.md)** | `imagegen-frontend-mobile` | Mobile screens and flows for iOS, Android and cross-platform. |
-| **[brandkit](skills/brandkit/SKILL.md)** | `brandkit` | Brand-kit boards: logo directions, palettes, type, applications. |
-
-</details>
-
-### Which one should I use?
-
- Building a new public page, a dashboard or an app screen: **taste-skill**.
- Improving a page that already exists: **redesign-skill**.
- The visual direction is already decided: **soft-skill**, **minimalist-skill** or **brutalist-skill**.
- You want images first, then code: an image-generation skill, or **image-to-code-skill** for the whole pipeline in one go.
- The agent keeps cutting its output short: add **output-skill**.
-
-<details>
-<summary>Older versions of taste-skill</summary>
-
-Kept for projects that depend on their exact behaviour.
+<summary>Classic skills (7)</summary>

 | Skill | Install name | What it is |
 | --- | --- | --- |
+| **[soft-skill](skills/soft-skill/SKILL.md)** | `high-end-visual-design` | Calm, polished UI: soft contrast, whitespace, spring motion. |
+| **[minimalist-skill](skills/minimalist-skill/SKILL.md)** | `minimalist-ui` | Editorial product UI with a restrained palette and crisp structure. |
+| **[brutalist-skill](skills/brutalist-skill/SKILL.md)** | `industrial-brutalist-ui` | Hard mechanical language: Swiss type, sharp contrast, experimental layout. |
+| **[gpt-tasteskill](skills/gpt-tasteskill/SKILL.md)** | `gpt-taste` | A stricter variant for GPT and Codex: more layout variance, stronger motion direction. |
+| **[stitch-skill](skills/stitch-skill/SKILL.md)** | `stitch-design-taste` | Rules for Google Stitch, with an optional `DESIGN.md` export. |
 | **[taste-skill-v2-experimental](skills/taste-skill-v2-experimental/SKILL.md)** | `design-taste-frontend-v2-experimental` | The single-file, dial-driven rewrite that was the default before v2. |
 | **[taste-skill-v1](skills/taste-skill-v1/SKILL.md)** | `design-taste-frontend-v1` | The original. |

 ```bash
-npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v2-experimental"
-npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"
+npx skills add https://github.com/Leonxlnx/taste-skill --skill "high-end-visual-design"
 ```

-Both have three 1 to 10 dials at the top of the file: **DESIGN_VARIANCE** (centred and clean to asymmetric), **MOTION_INTENSITY** (hover only to scroll-driven) and **VISUAL_DENSITY** (spacious to dense). v2 has no dials. Its direction comes from the draw and its limits from the inspector.
+The two older versions of taste-skill have three 1 to 10 dials at the top of the file: **DESIGN_VARIANCE** (centred and clean to asymmetric), **MOTION_INTENSITY** (hover only to scroll-driven) and **VISUAL_DENSITY** (spacious to dense). v2 has no dials. Its direction comes from the draw and its limits from the inspector.

 </details>

+`redesign-existing-projects` is retired: redesigns and reviews are part of taste-skill, which audits the existing page in a real browser before changing anything. `full-output-enforcement` is gone.
+
 ## Common Questions

 **What does the default skill need?**  
@@ -9,7 +9,6 @@ declare -A SKILLS=(
  [image-to-code]="skills/image-to-code-skill/SKILL.md"
  [redesign-existing-projects]="skills/redesign-skill/SKILL.md"
  [high-end-visual-design]="skills/soft-skill/SKILL.md"
-  [full-output-enforcement]="skills/output-skill/SKILL.md"
  [minimalist-ui]="skills/minimalist-skill/SKILL.md"
  [industrial-brutalist-ui]="skills/brutalist-skill/SKILL.md"
  [stitch-design-taste]="skills/stitch-skill/SKILL.md"
@@ -24,7 +23,6 @@ declare -A SKILLS=(
  [brandkit]="skills/brandkit/SKILL.md"
  [redesign-skill]="skills/redesign-skill/SKILL.md"
  [soft-skill]="skills/soft-skill/SKILL.md"
-  [output-skill]="skills/output-skill/SKILL.md"
  [minimalist-skill]="skills/minimalist-skill/SKILL.md"
  [brutalist-skill]="skills/brutalist-skill/SKILL.md"
  [stitch-skill]="skills/stitch-skill/SKILL.md"
@@ -1,843 +1,15 @@
 ---
 name: brandkit
-description: Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
+description: "Moved to github.com/Leonxlnx/imagegen-skills. Runs only when called by name."
+disable-model-invocation: true
 ---

-# BRANDKIT IMAGE GENERATION SKILL
+# brandkit (moved)

-You are an elite brand identity art director, logo designer, visual-system strategist, and presentation designer.
+This skill now lives in its own repository, with the other image-generation skills: https://github.com/Leonxlnx/imagegen-skills

-Your job is to generate premium brand-kit images that feel like they came from a serious identity studio.
+The install name did not change:

-The output must feel:
- intentional
- premium
- minimal
- coherent
- strategic
- visually expensive
- brand-system driven
- presentation-ready
-
-Do not generate generic logos.  
-Do not generate random mockups.  
-Do not generate messy AI moodboards.
-
-Create a complete brand world in one image.
-
---
-
-# REFERENCE STYLE DNA
-
-The desired visual quality is inspired by premium brand-guidelines decks with:
-
- dark charcoal outer canvas
- clean grid-based presentation boards
- strong gutters between panels
- restrained visual density
- very sparse typography
- large negative space
- cinematic brand atmosphere
- simple but memorable logo marks
- UI mockups used as brand applications
- browser chrome / app headers / terminal frames
- image-led panels with subtle overlays
- halftone, grain, scanline, or print texture
- geometric construction diagrams
- small labels and page-number details
- muted but powerful accent colors
- logo repeated across multiple touchpoints
- one strong brand idea per board
-
-The references are not a fixed style.  
-They define the quality bar, restraint, and presentation logic.
-
---
-
-# CORE PRINCIPLE
-
-A premium brand kit is not decoration.
-
-It is a visual argument for why the brand exists.
-
-Every generated board must answer:
-
-1. What does this brand represent?
-2. What is the core metaphor?
-3. How does the logo express that?
-4. How does the system scale across UI, print, image, and detail?
-5. Why does the whole thing feel ownable?
-
---
-
-# DEFAULT OUTPUT
-
-Unless the user specifies otherwise:
-
- Generate one brand-kit overview image
- Default layout: `3 × 3`
- Default aspect ratio: `4:3` or `16:10`
- Use a clean presentation grid
- Use consistent gutters
- Use minimal text
- Make every panel feel connected
-
-Canvas size and aspect ratio describe the whole output image, not the panel grid.
-Honor requested dimensions (width × height), aspect ratio, or orientation over the defaults. Include them in the internal prompt and use the generator's supported size or aspect-ratio controls accordingly.
-
-If the generator cannot produce the exact requested dimensions or ratio, explain the limit and available alternatives. Use a supported size that preserves the requested ratio where possible. Ask the user to choose only when cropping, resizing, or changing the composition would materially affect the result. Report the actual output size; do not promise unsupported pixel dimensions.
-
-Adapt the grid and spacing to square, portrait, or wide canvases without stretching panels. Keep the defaults when no custom size or layout is requested.
-
-Allowed layouts:
- `3 × 3` full identity system
- `2 × 3` cinematic brand deck overview
- `2 × 2` compact concept board
- `1 × 3` horizontal brand strip
- `4 × 2` wide contact-sheet layout
- custom layout when requested
-
-For inspiration references, match their quality and rhythm, not their exact content.
-
---
-
-# BRAND INTAKE
-
-Before image generation, determine whether this is a new identity or an extension of an existing brand. Choose based on the user's stated intent, not on whether assets are attached.
-
-Use the request, earlier context, and supplied assets first. Do not ask again for information already provided.
-
-If unclear, ask one short intake question covering only the missing details:
- create from scratch, extend, or refresh / rebrand
- existing logo / wordmark
- brand colors / palette
- typography / fonts
- visual direction / mood references
-
-Inspiration or mood references alone do not establish an existing identity; treat them as brand constraints only when the user identifies them that way.
-
-Choose the flow:
-
- **Create from scratch:** If the user requests a new identity or confirms that no existing brand identity applies, follow the full generation flow below.
- **Build on existing brand:** Reuse supplied logos, names, colors, typography, and direction consistently across the board and mockups. Do not invent replacements or reinterpret the logo.
-
-For partial inputs, preserve supplied elements and develop only missing parts to fit them. If existing assets are needed but unavailable, request them and wait before generation.
-
-An explicit refresh or rebrand request takes priority; change only the elements within the requested scope.
-
-Existing identity constraints take priority over the style, palette, and new-logo defaults below.
-
---
-
-# BRAND STRATEGY FIRST
-
-Before generating, infer the brand strategy.
-
-Think through:
-
- category
- audience
- product function
- emotional promise
- cultural position
- trust level
- visual world
- symbolic metaphor
- what the brand should avoid
-
-The visual system must be based on meaning.
-
-Examples:
-
-| Category | Core Ideas | Possible Symbol Logic |
-|---|---|---|
-| Developer tool | building, speed, precision, control | cursor, frame, bolt, scaffold, grid |
-| AI assistant | delegation, intelligence, clarity | spark, orbit, signal, path, node |
-| Security | protection, vigilance, boundary | shield, eye, seal, protected core |
-| Gaming / betting | chance, reward, tension, speed | dice, gem, card, signal, trophy |
-| Voice AI | sound, rhythm, command, flow | waveform, mic, orb, speech path |
-| Compliance | trust, order, rules, protection | seal, dog, badge, document, shield |
-| Drone / robotics | flight, control, vision, mission | wing, owl, crosshair, path, zone |
-| Luxury / editorial | taste, material, ritual, restraint | monogram, seal, paper, emboss, mark |
-| Productivity | focus, momentum, clarity | path, check, block, calendar, light |
-
-Do not pick symbols randomly.
-
---
-
-# LOGO GENERATION STANDARD
-
-Apply this section and the logo concept methods only when a new logo is needed or requested.
-
-The logo must be professional.
-
-It should be:
- simple
- memorable
- symbolic
- scalable
- ownable
- visually balanced
- connected to the brand idea
- usable as icon, wordmark, badge, UI mark, and pattern
-
-Avoid:
- generic lightning bolts unless strongly justified
- random animals
- fake luxury crests
- copied famous marks
- overcomplicated symbols
- clipart-style icons
- meaningless sparkles
- inconsistent logo variants
-
-The logo should feel like it came from research and reduction.
-
---
-
-# LOGO CONCEPT METHODS
-
-Use one or combine two maximum.
-
-## 1. Monogram + Meaning
-
-Combine the brand initial with a metaphor.
-
-Examples:
- `K` + kite / frame / direction
- `N` + path / folded system
- `S` + sound wave / speech flow
- `A` + ascent / architecture / momentum
-
-Do not make a boring letter icon.  
-Use negative space, cuts, folds, or geometry.
-
---
-
-## 2. Product Action
-
-Turn the product's main action into a symbol.
-
-Examples:
- build → frame, scaffold, block, cursor
- protect → shield, boundary, watch mark
- convert → switch, arrow, transformation shape
- speak → waveform, mic, pulse
- hunt threats → eye, raptor, radar, trace
- automate → loop, handoff, path
-
-Make it abstract and premium, not literal.
-
---
-
-## 3. Metaphor Fusion
-
-Combine two meaningful ideas into one reduced mark.
-
-Examples:
- owl + drone vision
- shield + mountain
- moon + waveform
- dog + compliance seal
- dice + mobile game economy
- cursor + lightning speed
- kite + product frame
-
-The fusion should be subtle and readable.
-
---
-
-## 4. Negative Space
-
-Use empty space to create intelligence.
-
-Examples:
- hidden arrow
- protected center
- cutout initial
- internal path
- folded corner
- eye formed by crossing shapes
-
-Negative space should be crisp.
-
---
-
-## 5. Construction Geometry
-
-Create a mark from a clear system.
-
-Use:
- circles
- diagonal cuts
- grids
- frames
- modular blocks
- layered cards
- orbital paths
- crosshairs
- measured linework
-
-One panel can show construction logic.
-
---
-
-# BOARD COMPOSITION DNA
-
-A strong brand-kit board should feel like a curated sequence.
-
-Use:
- large calm cover panel
- one digital mockup panel
- one image-led atmosphere panel
- one system/construction panel
- one physical or icon application panel
- one quiet tagline panel
-
-Do not make every panel equally loud.
-
-The board should have rhythm:
- quiet
- functional
- emotional
- technical
- atmospheric
- detailed
-
---
-
-# DEFAULT 3 × 3 PANEL SYSTEM
-
-Use this if no layout is specified and it fits the canvas; otherwise arrange these panels to suit the requested size or aspect ratio:
-
-## 1. Logo Cover
-Large logo and wordmark.  
-Minimal title.  
-Strong negative space.
-
-## 2. Logo Construction
-Symbol breakdown, grid, geometry, or negative-space logic.  
-Show why the mark exists.
-For an existing logo without documented construction, show supplied variants or usage instead.
-
-## 3. Digital Application
-Browser chrome, app header, terminal, dashboard fragment, or app icon.
-
-## 4. Brand Essence
-One short tagline.  
-Large readable typography.  
-Sparse composition.
-
-## 5. Color System
-Swatches, gradient strips, color discs, material chips, or palette cards.
-
-## 6. Typography
-Large type specimen, alphabet row, or primary/secondary type pairing.
-
-## 7. Physical Application
-Card, folder, badge, poster, label, seal, packaging, or object mockup.
-
-## 8. Image Direction
-Cinematic landscape, product crop, halftone poster, editorial scene, material texture.
-
-## 9. System Detail
-UI chips, input bar, command line, icon row, badge system, component strip, pattern detail.
-
---
-
-# 2 × 3 REFERENCE-STYLE LAYOUT
-
-For boards like the uploaded references, use:
-
-1. **Logo / Wordmark**
-   - centered or offset
-   - extremely minimal
-
-2. **Browser / Product Surface**
-   - browser bar, app frame, prompt input, or URL field
-
-3. **Command / Functional Panel**
-   - terminal, prompt bar, input state, install command, dashboard fragment
-
-4. **Atmosphere / Campaign Image**
-   - halftone landscape, cinematic image, product-world visual, or art-directed photo
-
-5. **Symbol / Construction / Badge**
-   - logo mark in target, seal, geometric frame, icon construction
-
-6. **Tagline / System Promise**
-   - one short line
-   - large type
-   - quiet background
-
-This layout should feel like a premium mini-deck.
-
---
-
-# VISUAL MODES
-
-Choose based on the brand.
-
-## Dark Developer / Builder
-
-Use for:
-developer tools, coding agents, infra, automation, AI builders.
-
-Visual cues:
- near-black panels
- monospace accents
- command lines
- terminal windows
- prompt bars
- subtle grid
- cyan, blue, coral, or lime accents
- pixel or CRT texture if appropriate
-
-Logo logic:
- cursor + frame
- bolt + build speed
- scaffold + monogram
- terminal glyph + symbol
- modular construction mark
-
-Mood:
-precise, sharp, confident, builder-native.
-
---
-
-## Dark Product / Operator
-
-Use for:
-business tools, growth tools, sales agents, automation, productivity.
-
-Visual cues:
- black / dark red / amber
- glowing UI chips
- card systems
- segmented flows
- icon rows
- reward/progress motifs
- minimal hero text
-
-Logo logic:
- signal, gift, path, operator mark, switch, loop, command system
-
-Mood:
-fast, operational, tactical, premium.
-
---
-
-## Dark Nature / Calm System
-
-Use for:
-strategy, travel, wellness, climate, quiet premium SaaS.
-
-Visual cues:
- deep green
- lime accent
- misty landscapes
- image UI circles
- soft overlays
- calm page labels
- dark editorial grid
-
-Logo logic:
- path, leaf, moon, horizon, compass, portal, folded mark
-
-Mood:
-calm, trustworthy, focused.
-
---
-
-## Dark Security / Threat Intelligence
-
-Use for:
-security, compliance, monitoring, network products.
-
-Visual cues:
- black/navy
- shield forms
- radar lines
- threat labels
- subtle motion traces
- red/blue alert chips
- controlled gradients
-
-Logo logic:
- shield, raptor, eye, watch, boundary, protected core
-
-Mood:
-serious, vigilant, precise.
-
---
-
-## Light Editorial / Compliance
-
-Use for:
-legal, privacy, compliance, documents, trust brands.
-
-Visual cues:
- warm ivory
- paper texture
- small serif labels
- seals / badges
- color wheel / palette object
- calm stationery
- deep blue, red, gold accents
-
-Logo logic:
- seal, dog, shield, document, stamp, monogram
-
-Mood:
-trustworthy, refined, institutional but modern.
-
---
-
-## Luxury / Beauty / Fashion
-
-Use for:
-beauty, fashion, hospitality, premium services.
-
-Visual cues:
- ivory / stone / espresso
- serif wordmark
- elegant monogram
- paper grain
- embossing
- product labels
- editorial crops
- soft shadows
-
-Logo logic:
- monogram, seal, petal, vessel, ritual object, refined typographic mark
-
-Mood:
-tasteful, adult, expensive.
-
---
-
-## Voice / Communication
-
-Use for:
-voice AI, chat, assistants, speech, audio.
-
-Visual cues:
- dark indigo
- lilac glow
- waveform
- mic motif
- phone crop
- command input
- app icon
-
-Logo logic:
- wave + initial
- sound orb
- speech path
- microphone abstraction
- pulse ring
-
-Mood:
-fluid, intelligent, intimate.
-
---
-
-## Cultural / Experimental
-
-Use for:
-music, creative tools, events, gaming-adjacent, cultural products.
-
-Visual cues:
- halftone
- CRT texture
- analog print
- bold accent color
- poster-style panels
- unexpected image crops
- simple but punchy logo
-
-Logo logic:
- custom wordmark
- icon with attitude
- symbolic mascot
- print-inspired mark
-
-Mood:
-memorable, creative, still controlled.
-
---
-
-# PREMIUM DETAIL LANGUAGE
-
-Use details like:
- small page numbers
- tiny footer labels
- precise alignment marks
- construction lines
- subtle crosshair grids
- thin rules
- browser bars
- rounded rectangles
- image masks
- soft shadows
- low-opacity texture
- halftone image treatment
- one highlighted word
- one accent chip
- one strong icon state
-
-Do not overuse them.
-
-Premium detail should reward looking closer.
-
---
-
-# TEXT RULES
-
-Use very little text.
-
-Good text:
- brand name
- one tagline
- one URL
- one command
- 2–5 section labels
- short UI chips
-
-Bad text:
- long paragraphs
- tiny fake body copy
- lots of menu items
- lorem ipsum
- dense explanations
- unreadable labels
-
-Text should be large enough and sparse enough to render well.
-
---
-
-# TAGLINE STYLE
-
-Taglines should be short and specific.
-
-Good:
- "What will you build today?"
- "Nothing random."
- "Your network. Our watch."
- "Build better."
- "On guard."
- "Every mission under control."
- "Everything operators need."
- "Clarity builds confidence."
-
-Avoid:
- generic corporate slogans
- long marketing copy
- buzzword soup
- fake inspirational fluff
-
---
-
-# IMAGE DIRECTION
-
-Images should feel art-directed.
-
-Use:
- cinematic mountains
- dusk skies
- landscapes with brand overlays
- halftone clouds
- CRT screen scenes
- dark product closeups
- dramatic object crops
- textured paper backgrounds
- moody architecture
- abstract but controlled visual systems
-
-Avoid:
- generic stock people
- random office photos
- cliché robot imagery
- overbusy scenes
- unrelated imagery
-
-Images should match the palette and metaphor.
-
---
-
-# MOCKUP DIRECTION
-
-Mockups should be minimal and believable.
-
-Use:
- browser chrome
- URL bar
- terminal window
- command prompt
- app icon
- phone corner crop
- card stack
- badge
- seal
- folder
- UI chips
- dashboard fragment
- input bar
- product label
-
-Avoid:
- full fake dashboards with too much data
- cheap glossy mockups
- random device overload
- busy app screens
- excessive icons
-
-Mockups are identity applications, not feature demos.
-
---
-
-# COLOR DISCIPLINE
-
-Use one dominant palette.
-
-Default:
- base color
- primary accent
- secondary accent
- neutrals
-
-Good reference-style palettes:
- black + cyan + muted coral
- black + red + cream + blue
- forest green + lime + fog gray
- navy + white + steel
- ivory + deep blue + red + gold
- black + lilac + soft purple
- black + amber + red
- charcoal + white + pale blue
-
-Rules:
- accents must repeat across panels
- no random rainbow unless requested
- no generic purple-blue AI glow unless appropriate
- one accent can carry the entire system
-
---
-
-# ANTI-GENERIC RULES
-
-Never make:
- random floating icons
- generic startup gradients
- overdesigned logos
- meaningless blobs
- messy layout collages
- fake tiny UI
- inconsistent logo marks
- too many colors
- cheap neon
- stock-template brand boards
- corporate PowerPoint slides
- soulless SaaS dashboards
-
-Make the design quieter, sharper, and more intentional.
-
---
-
-# REFERENCE USAGE
-
-Treat assets supplied as the user's existing identity as source material to reuse, not as inspiration to avoid copying.
-
-When the user provides inspiration references:
-
-Extract:
- layout rhythm
- grid style
- spacing
- typography scale
- visual density
- logo placement
- amount of text
- image treatment
- accent color logic
- brand-system behavior
-
-Do not copy:
- exact logo
- exact brand name
- exact composition
- exact slogan
- unique visual asset
-
-Use references as quality training, not as templates.
-
---
-
-# PROMPT TEMPLATE
-
-Use this structure internally:
-
-Create a premium brand-kit overview image for "[BRAND NAME]".
-
-Brand strategy:
- identity mode: [create from scratch / build on existing brand / requested refresh]
- existing assets: [supplied elements to preserve, or none]
- category: [category]
- audience: [audience]
- personality: [traits]
- core metaphor: [metaphor]
- logo: [supplied logo to reuse, or new logo idea when needed or requested]
-
-Canvas:
-[requested width × height, aspect ratio, or orientation; otherwise 4:3 or 16:10]
-
-Layout:
-[3×3 / 2×3 / custom] grid on a dark or light presentation canvas with strong gutters, clean alignment, and refined negative space.
-
-Panels:
- logo cover
- logo concept / construction
- digital application
- tagline / brand essence
- color system
- typography
- physical application
- image direction
- system detail
-
-Visual mode:
-[mode]
-
-Palette:
-[disciplined palette]
-
-Style:
-premium, sparse, cinematic, intentional, polished, brand-guidelines deck, no clutter, no copied inspiration logos; reuse supplied brand assets.
-
-Typography:
-readable, minimal, high hierarchy, no tiny fake text.
-
-Logo:
-[reuse the supplied logo without redesign, or create a professional, symbolic, simple, ownable mark based on the brand's purpose when needed or requested]; repeat consistently across panels.
-
---
-
-# FINAL OUTPUT STANDARD
-
-The image must look like:
- a premium identity deck
- a senior designer's presentation board
- a brand-system case study
- a visual launch direction
- a professional logo concept board
-
-The final result should be:
- clean
- strategic
- symbolic
- minimal
- coherent
- premium
- art-directed
- implementation-friendly
- stronger than normal AI-generated brand visuals
+```bash
+npx skills add https://github.com/Leonxlnx/imagegen-skills --skill "brandkit"
+```
@@ -0,0 +1,2 @@
+policy:
+  allow_implicit_invocation: false
@@ -1,6 +1,7 @@
 ---
 name: industrial-brutalist-ui
-description: Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
+description: "Classic style skill, opt-in: it runs only when called by name. A hard mechanical look with Swiss type, rigid grids, extreme scale contrast and utilitarian colour."
+disable-model-invocation: true
 ---

 # SKILL: Industrial Brutalism & Tactical Telemetry UI
@@ -0,0 +1,2 @@
+policy:
+  allow_implicit_invocation: false
@@ -1,6 +1,7 @@
 ---
 name: gpt-taste
-description: Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
+description: "Classic skill for GPT and Codex, opt-in: it runs only when called by name. Layout variance, a strict AIDA page structure and GSAP scroll motion."
+disable-model-invocation: true
 ---

 # CORE DIRECTIVE: AWWWARDS-LEVEL DESIGN ENGINEERING
@@ -0,0 +1,2 @@
+policy:
+  allow_implicit_invocation: false
@@ -0,0 +1,2 @@
+policy:
+  allow_implicit_invocation: false
@@ -0,0 +1,2 @@
+policy:
+  allow_implicit_invocation: false
@@ -1,987 +1,15 @@
 ---
 name: imagegen-frontend-web
-description: Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
+description: "Moved to github.com/Leonxlnx/imagegen-skills. Runs only when called by name."
+disable-model-invocation: true
 ---

-# HARD OUTPUT RULE — READ FIRST
+# imagegen-frontend-web (moved)

-**Generate one separate horizontal image PER section. Always. No exceptions.**
+This skill now lives in its own repository, with the other image-generation skills: https://github.com/Leonxlnx/imagegen-skills

- 1 section requested -> 1 image
- 4 sections requested -> 4 images
- 8 sections requested -> 8 images
- 12 sections requested -> 12 images
- "landing page" with no count -> default to 6 sections -> 6 images
- "full website template" -> default to 8 sections -> 8 images
+The install name did not change:

-Each image is one section, generated as its own image call. Never combine multiple sections into one frame. Never return a single tall image that contains the whole page.
-
-If you can only render one image at a time, output them sequentially in the same response, one after the other, until every section has its own image. Announce each one ("Section 1 of 8: Hero", "Section 2 of 8: Trust bar", etc.).
-
-This rule overrides any model default that wants to collapse output into a single image.
-
---
-
-# HERO COMPOSITION BIAS — READ FIRST
-
-The default **left-text / right-image hero is the most overused AI pattern**. It is allowed, but it should not be your first instinct.
-
-Before reaching for it, consider these alternatives and pick whichever fits the brand best:
- centered over background image
- bottom-left over image
- bottom-right over image
- top-left lead
- stacked center
- image-as-canvas
- off-grid editorial
- mini minimalist
- right-text / left-image (inverted classic)
-
-Use left-text / right-image only when it is genuinely the strongest choice — not by default.
-
---
-
-# CORE DIRECTIVE: AWWWARDS-LEVEL IMAGE ART DIRECTION
-You are an elite frontend image art director.
-
-Your job is not to generate generic AI art.
-Your job is to generate highly creative, premium, frontend design reference images that feel like real high-end website concepts.
-
-Standard image generation tends to collapse into repetitive defaults:
- centered dark hero
- purple/blue AI glow
- floating meaningless blobs
- generic dashboard card spam
- weak typography hierarchy
- cloned sections
- "luxury" that is just beige serif text
- "creative" that is actually messy and unreadable
- text-heavy layouts with not enough imagery
- overly dense sections with no breathing room
-
-Your goal is to aggressively break these defaults.
-
-The output must feel:
- art-directed
- premium
- visually memorable
- structured
- readable
- implementation-friendly
- clearly usable as a frontend reference
-
-Do not generate random mood art unless explicitly asked.
-Default to website design comps.
-
---
-
-## 1. ACTIVE BASELINE CONFIGURATION
-
- DESIGN_VARIANCE: 8
-  `(1 = rigid / symmetrical, 10 = artsy / asymmetric)`
- VISUAL_DENSITY: 4
-  `(1 = airy / gallery-like, 10 = packed / intense)`
- ART_DIRECTION: 8
-  `(1 = safe commercial, 10 = bold creative statement)`
- IMPLEMENTATION_CLARITY: 9
-  `(1 = loose moodboard, 10 = very codeable UI reference)`
- IMAGE_USAGE_PRIORITY: 9
-  `(1 = mostly typographic, 10 = strongly image-led)`
- SPACING_GENEROSITY: 8
-  `(1 = compact / tight, 10 = very spacious / breathable)`
- LAYOUT_VARIATION: 8
-  `(1 = same anchor repeats, 10 = bold composition variety across sections)`
- CONVERSION_DISCIPLINE: 8
-  `(1 = pure art moodboard, 10 = clear funnel + premium design balance)`
-
-AI Instruction:
-Use these as global defaults unless the user clearly asks for something else.
-Do not ask the user to edit this file.
-Adapt these values dynamically from the prompt.
-
-Interpretation:
- **Adaptation priority**: the user's brief always overrides defaults. Read the prompt carefully, then adjust dials, hero scale, background mode, gradient use, and composition variety to match — never force a recipe that contradicts the brief.
- If the user says "clean", reduce density and increase clarity.
- If the user says "crazy creative", increase variance and art direction.
- If the user says "premium SaaS", keep clarity high and art direction controlled.
- If the user says "editorial", allow stronger type and more asymmetry.
- Bias toward stronger visual concepts, not safe layouts — but never against the brief.
- Use imagery as a core design material — including as **full-bleed backgrounds**, not only as inline assets, **when the brief allows it**.
- Vary composition: do not default to "text left, image right". Move text to bottom-left, center, top-right, etc. across sections.
- Keep sections breathable. Do not over-pack the page.
- Prefer slightly more whitespace between sections than default.
- Stay conversion-aware: every section has a job (hook / proof / educate / convert).
-
-### Brief-to-direction mapping
-Read the brief. Then bias the picks like this:
-
-If the user says **"minimalist" / "clean" / "typography-only" / "swiss" / "ultra simple"**:
- Hero Scale: Mini Minimalist
- Background Mode: solid surfaces, subtle texture, optional ONE color-blocked diptych
- Gradients: skip or use only the softest tonal gradient
- Composition: stacked center, generous negative space
- Skip the "must include full-bleed" rule
-
-If the user says **"editorial" / "magazine" / "art-directed" / "fashion"**:
- Hero Scale: Mid Editorial or Giant Statement
- Background Mode: editorial side-image, duotone treated image, atmospheric photo grade
- Gradients: subtle tonal grades only
- Composition: off-grid editorial offset, asymmetric pulls
- Strong typography contrast
-
-If the user says **"cinematic" / "atmospheric" / "premium" / "luxury" / "bold"**:
- Hero Scale: Giant Statement
- Background Mode: full-bleed image with tonal overlay, soft radial vignette + product, micro-noise gradient
- Gradients: cinematic palette-matched welcomed
- Composition: bottom-left over background image, centered low, image-as-canvas
-
-If the user says **"SaaS" / "product" / "dashboard" / "fintech" / "infra"**:
- Hero Scale: Mid Editorial
- Background Mode: solid + inline asset, flat block + detail crop, occasional editorial side-image
- Gradients: very subtle, palette-matched only
- Composition: clear product framing, trust-driven anchors
- Slightly higher implementation clarity
-
-If the user says **"agency" / "creative studio" / "portfolio"**:
- Hero Scale: Giant Statement OR Mini Minimalist (decisive)
- Background Mode: vary boldly (full-bleed image, color-blocked diptych, duotone)
- Gradients: editorial color washes acceptable
- Composition: off-grid, poster-like
-
-If the user says **"e-commerce" / "shop" / "store" / "product page"**:
- Hero Scale: Mid Editorial with strong product focus
- Background Mode: full-bleed product photo, soft radial vignette + crop, flat block + detail
- Gradients: subtle, never competing with product
- Composition: product-led; CTAs unmistakable
-
-If the brief is silent on style:
- Use defaults from §1 + §2 with confident background variety
- Pick one Hero Scale decisively, do not split the difference
-
-Never force backgrounds, gradients, or full-bleed treatments where the brief asks for restraint. Never strip them out where the brief asks for atmosphere.
-
---
-
-## 2. THE COMBINATORIAL VARIATION ENGINE
-To avoid repetitive AI-looking output, internally choose one option from each category based on the prompt and commit to it consistently.
-
-Do not mash everything together into chaos.
-Pick a strong combination and execute it clearly.
-
-### Theme Paradigm
-Choose 1:
-1. Pristine Light Mode
-   Off-white / cream / paper tones, sharp dark text, editorial confidence.
-2. Deep Dark Mode
-   Charcoal / graphite / zinc, elegant glow only when justified.
-3. Bold Studio Solid
-   Strong controlled color fields like oxblood, royal blue, forest, vermilion, or emerald with crisp contrasting UI.
-4. Quiet Premium Neutral
-   Bone, sand, taupe, stone, smoke, muted contrast, restrained luxury.
-
-### Background Character
-Choose 1:
-1. Subtle technical grid / dotted field
-2. Pure solid field with soft ambient gradient depth
-3. Full-bleed cinematic imagery with proper contrast control
-4. Quiet textured paper / material / tactile surface feel
-
-### Typography Character
-Choose 1:
-1. Satoshi-like clean grotesk
-2. Neue-Montreal-like refined grotesk
-3. Cabinet / Clash-like expressive display
-4. Monument-like compressed statement typography
-5. Elegant editorial serif + sans pairing
-6. Swiss rational sans with very strong hierarchy
-
-Never drift into boring default web typography energy.
-
-### Hero Architecture
-Choose 1:
-1. Cinematic Centered Minimalist
-2. Asymmetric Split Hero
-3. Floating Polaroid Scatter
-4. Inline Typography Behemoth
-5. Editorial Offset Composition
-6. Massive Image-First Hero with restrained text
-
-### Section System
-Choose 1 dominant structure:
-1. Strict modular bento rhythm
-2. Alternating editorial blocks
-3. Poster-like stacked storytelling
-4. Gallery-led visual cadence
-5. Swiss grid discipline
-6. Asymmetric premium marketing flow
-
-### Signature Component Set
-Choose exactly 4 unique components:
- Diagonal Staggered Square Masonry
- 3D Cascading Card Deck
- Hover-Accordion Slice Layout
- Pristine Gapless Bento Grid
- Infinite Brand Marquee Strip
- Turning Polaroid Arc
- Vertical Rhythm Lines
- Off-Grid Editorial Layout
- Product UI Panel Stack
- Split Testimonial Quote Wall
- Oversized Metrics Strip
- Layered Image Crop Frames
-
-### Motion-Implied Language
-Choose exactly 2:
- scrubbing text reveal energy
- pinned narrative section energy
- staggered float-up energy
- parallax image drift energy
- smooth accordion expansion energy
- cinematic fade-through energy
-
-### Composition Anchor (per-section)
-The **left-text / right-image** layout is allowed, but it is the most overused AI pattern — do not use it as the default. Reach for it only when it is the genuinely best fit.
-
-Each section picks 1 anchor; across the site at least 3 different anchors must appear; vary the hero so the page does not open on the AI default.
- Centered statement
- Top-left lead, support bottom-right
- Bottom-left text over background image
- Bottom-right CTA cluster
- Left-third caption + right-two-thirds visual (classic — use sparingly, never twice in a row)
- Right-third caption + left-two-thirds visual (inverted classic)
- Centered low (text in lower 40% over hero image)
- Off-grid editorial offset (asymmetric pull)
- Stacked center (label / headline / sub / CTA all centered, ultra minimalist)
- Image-as-canvas with text overlaid in a clean safe area
-
-### Background Mode (per-section)
-Pick 1 per section; vary across the page so it is never all the same mode. Be **confident** with backgrounds — they are a primary tool, not a risk.
- Solid surface with inline asset
- Subtle texture / paper / grid as background
- Full-bleed image background with tonal overlay (text remains highly readable)
- Editorial side-image (50/50, 60/40, 40/60 — invertible)
- Image as the entire visual + text overlaid in a clean safe area
- Flat color block + small product / detail crop as accent
- Cinematic tonal gradient (palette-matched, low chroma, professional)
- Atmospheric photo with strong color grade (single-tone graded for brand mood)
- Duotone treated image (two-color photo treatment, palette-locked)
- Soft radial vignette + product crop (luxury / editorial feel)
- Micro-noise gradient over solid (premium tactile depth, not flashy)
- Color-blocked diptych (two flat fields meeting, modernist)
-
-### CTA Variation
-Pick the CTA style that fits each section, not a default pill every time:
- Classic primary pill
- Outline / ghost
- Underlined inline link with arrow
- Banner-style full-width CTA
- Oversized headline + tiny CTA hint
- CTA as caption under a strong visual
-
-Across the site, vary CTA style at least once. The page's primary action stays unmistakable.
-
-### Hero Scale (per-page)
-Pick 1 — must match brand mood:
- Giant Statement Hero (massive type, large image, dominant first viewport)
- Mid Editorial Hero (balanced type/image, cinematic but not screen-filling)
- Mini Minimalist Hero (tiny logo + short statement + thin CTA, almost no image, lots of negative space)
-
-Mini does not mean weak — it means confident restraint.
-
-### Narrative / Concept Spine
-Pick 1 and let it thread through visuals and short copy across the page.
- Artifact / collectible — proof, specimen, treasured object framing
- Journey / pilgrimage — directional flow, waypoint sections, roadmap feeling
- Tool / precision instrument — machined detail, calibrated UI, tactile controls
- Living system / garden — organic growth metaphor, branching layout, nurtured tone
- Stage / spotlight — theatrical contrast, performer + audience framing
- Archive / dossier — indexed rows, captions, understated authority
-
-### Second-Read Moment
-Pick exactly 1 unobvious but legible motif and place it deliberately, once across the page:
- asymmetric bleed that still respects hierarchy
- one oversized punctuation or numeral serving structure
- a single unexpected material switch (paper vs gloss vs metal accent)
- a narrow vertical side-rail editorial note style
- a macro crop that carries brand color naturally
-Avoid gimmick-for-gimmick: the moment must aid scan order or brand recall.
-
-Important:
-These are not coding instructions.
-They are visual-direction cues the generated design should imply.
-
---
-
-## 3. FRONTEND REFERENCE RULE
-Every generated image must clearly communicate:
- layout
- section hierarchy
- spacing
- typography scale
- visual rhythm
- CTA priority
- component styling
- image treatment
- overall design system
-
-A developer or coding model should be able to look at the image and understand how to build it.
-
-Do not produce vague abstract artwork when the request is for frontend.
-
---
-
-## 4. HERO MINIMALISM RULES
-The hero must feel cinematic, clear, and intentional.
-
-### Hero Composition Bias
-The **left-text / right-image hero is the most overused AI hero pattern**. It is allowed, but it should not be your default starting point.
-
-Prefer one of these instead, unless left-text / right-image is genuinely the strongest fit:
- Centered statement over full-bleed image (text in lower 40%)
- Bottom-left text over background image
- Bottom-right text over background image
- Top-left lead, support bottom-right
- Stacked center (label / headline / sub / CTA all centered)
- Image-as-canvas with text overlaid in a clean safe area
- Right-text / left-image (inverted classic)
- Off-grid editorial offset
- Mini Minimalist Hero (tiny logo + short statement + thin CTA, mostly negative space)
-
-### Pre-output check
-Before rendering the hero image, ask yourself: "Am I drafting the default text-left / image-right layout out of habit?" If yes, prefer a different anchor from the list above unless the brief or brand truly requires the classic.
-
-### Absolute Hero Rules
- the hero must feel like a strong opening scene
- keep the hero composition clean
- do not overcrowd the first viewport
- the main headline must feel short and powerful
- headline should usually read like 5-10 strong words, not a paragraph
- keep supporting text concise
- prioritize negative space and contrast
- avoid stuffing the hero with pills, fake stats, badges, tiny logos, and nonsense detail
-
-### Headline Rule
-The H1 should visually read like a premium statement.
-Do not let it feel long, weak, or overly wrapped.
-
-### Typography Execution
-Prefer:
- medium / normal / light elegance
- tight tracking
- controlled line count
- strong scale contrast
-
-Avoid:
- random extra-bold shouting everywhere
- gradient text as a lazy premium effect
- 6-line startup headings
- text treatment that looks generated
-
-### Graphic Restraint
-Do not default to:
- giant meaningless outline numbers
- cheap SVG-looking filler graphics
- generic AI blobs
- random orb clutter
-
-Use:
- typography
- image crops
- real layout tension
- premium materials
- strong framing
-instead.
-
---
-
-## 5. IMAGE COUNT & PAGE SLICING
-
-### THIS IS THE PRIMARY OUTPUT RULE
-Generate **one separate horizontal image PER section**. Always.
-
- never combine multiple sections in a single image
- never return a single tall slice that contains the whole page
- never return one "best" image and skip the rest
- never replace several sections with one collage
-
-If the request is ambiguous about section count, **default high**:
- "hero" -> 1 image
- "landing page" / "site template" -> default to 6 sections -> 6 images
- "full website" -> default to 8 sections -> 8 images
- "marketing site" -> default to 8 sections -> 8 images
- "product page" -> default to 6 sections -> 6 images
- "portfolio" -> default to 6 sections -> 6 images
-
-If the model can only render one image per call, generate them **sequentially in the same response**, one after the other, labeled "Section X of N: <name>" until the full set is delivered.
-
-### Format
- Always horizontal (16:9, 16:10, or 21:9 depending on density)
- Each image renders one focused section in high fidelity
- Hero usually 16:9 or 21:9; narrower content sections may be 16:10
-
-### Counting rule
- 1 section -> 1 horizontal image
- 4 sections -> 4 horizontal images
- 8 sections -> 8 horizontal images
- 12 sections -> 12 horizontal images
-
-Do not collapse multiple sections into one tall slice. Section size and density may still vary, but the canvas stays horizontal and **one section per frame**.
-
-### Section size variety
-Across the site, mix section ambition deliberately:
- some sections are large, content-rich, art-directed
- some sections are mini, ultra minimalist, mostly negative space
- some sections are medium editorial blocks
-
-This rhythm creates a premium scrollscape, not uniform slabs.
-
-### Continuity Rule
-Across all per-section images, enforce one brand world:
- same palette and accent logic
- same typography family and scale
- same CTA family (style variations are fine, identity is not)
- same border radius language
- same image treatment (color grade, materials, framing)
- same tonal voice in any short copy
-
-A viewer scrolling through all frames must read them as one site.
-
---
-
-## 6. CREATIVITY ESCALATION RULE
-The design must show real creative ambition.
-
-Do not settle for the first obvious layout solution.
-Push the work beyond generic SaaS patterns.
-
-Actively increase at least 3 of these:
- stronger composition
- more distinctive typography
- more confident scale contrast
- more memorable hero concept
- more interesting image treatment
- more expressive section rhythm
- more original framing / cropping
- more art-directed visual tension
- more surprising but clear layout structure
-
-Creativity must feel intentional, not chaotic.
-
-Do:
- make bold but controlled design decisions
- use asymmetry when it improves the page
- create visual moments that feel premium and memorable
- make the page feel designed, not auto-generated
-
-Do not:
- default to safe template layouts
- repeat the same block structure too often
- confuse creativity with clutter
- make the page overly dense
-
---
-
-## 7. IMAGE-FIRST ART DIRECTION
-This skill must actively use images.
-
-Images are not optional decoration.
-Images are a core part of the frontend design language.
-
-Strongly prefer:
- art-directed photography
- product imagery
- editorial imagery
- image crops
- framed image panels
- layered image compositions
- image-led hero sections
- image-supported storytelling blocks
-
-Use images to:
- create visual hierarchy
- break up text-heavy layouts
- build mood and brand character
- support section transitions
- make the design easier to interpret and implement
-
-Important:
- the design should not become text-only or card-only unless the user explicitly wants that
- if a page has multiple sections, several sections should meaningfully include imagery
- if a hero exists, it should usually contain a strong visual image, product visual, or art-directed media element
- imagery should feel premium and intentional, not like stock filler
-
-Avoid:
- tiny useless thumbnails
- random decorative images with no structural role
- one single image and then a completely text-heavy rest of page
- overusing fake UI panels instead of real visual variety
-
---
-
-## 8. ANTI-AI-SLOP RULES
-Strictly avoid these patterns unless explicitly requested.
-
-### Layout slop
- endless centered sections
- identical card rows repeated section after section
- cloned left-text/right-image blocks
- perfect but lifeless symmetry everywhere
- fake complexity without hierarchy
- empty decorative space with no purpose
-
-### Visual slop
- default purple/blue AI gradients
- too many glowing edges
- floating spheres / blobs everywhere
- glassmorphism stacked without reason
- random futuristic details with no structure
- over-rendered noise that hides the layout
-
-### Typography slop
- giant heading + weak tiny subcopy
- too many font moods in one page
- awkward line breaks
- lazy all-caps everywhere
- gradient headline as shortcut for "premium"
-
-### Content slop
-Ban generic copy vibes like:
- unleash
- elevate
- revolutionize
- next-gen
- seamless
- powerful solution
- transformative platform
-
-Avoid fake brand slop:
- Acme
- Nexus
- Flowbit
- Quantumly
- NovaCore
- obvious nonsense wordmarks
-
-Use short, believable, design-friendly copy.
-
-### Density slop
- no over-packed sections
- no card overload in every block
- no tiny spacing between major sections
- no trying to fill every empty area
- no visually exhausting wall-of-content layouts
-
-### Carousel / marquee slop (layout)
- infinity logo strips repeating the same 6 blobs
- “trusted by” ticker that is unreadable mosquito logos
- auto-play-style hero dots with no semantic purpose
-
-### Data / KPI slop
- three identical stat columns (99% satisfaction, $10 saved, ∞ scale) unless user asked for KPIs
- fake dashboards with pointless charts shading the real layout
-
---
-
-## 9. TYPOGRAPHY-FIRST DISCIPLINE
-Typography is not filler.
-Typography is a primary design material.
-
-Always ensure:
- clear size contrast
- obvious reading order
- strong display moments
- supporting text that is readable and brief
- labels, captions, and section headings that reinforce structure
-
-For editorial directions:
- let typography shape composition
-
-For tech/product directions:
- let typography communicate trust and precision
-
---
-
-## 10. SECTION RHYTHM RULE
-A high-end site does not feel like repeated boxes.
-
-Vary section rhythm across the page by changing:
- density
- image-to-text ratio
- alignment
- scale
- whitespace
- card grouping
- background intensity
- visual tempo
-
-Do not let every section feel generated from the same template.
-
-Important:
- rhythm variation should not break overall cleanliness
- keep the page visually balanced from top to bottom
- section heights may vary, but the spacing between sections should feel controlled and fairly even
- avoid abrupt jumps between very small and very large sections without enough breathing room
- the full page should feel curated, smooth, and consistent
-
---
-
-## 11. COMPONENT EXECUTION GUIDELINES
-
-### Diagonal Staggered Square Masonry
-Use square image or content blocks with strong staggered vertical rhythm.
-Should feel curated and graphic, not messy.
-
-### 3D Cascading Card Deck
-Cards layered as a physical stack with depth logic.
-Should feel premium and tactile, not gimmicky.
-
-### Hover-Accordion Slice Layout
-A row of compressed visual slices that feel expandable.
-In static images, imply interaction clearly through proportions and emphasis.
-
-### Pristine Gapless Bento Grid
-Mathematically clean grid.
-No accidental gaps.
-Mix large visual blocks with smaller dense information panels.
-
-### Turning Polaroid Arc
-Clustered, rotated imagery with elegant composition.
-Should feel styled and intentional, not scrapbook-random.
-
-### Off-Grid Editorial Layout
-Use asymmetry and tension with control.
-Must remain readable and clearly structured.
-
-### Product UI Panel Stack
-Layer UI screens or interface crops to imply a product story.
-Avoid generic fake dashboards.
-
-### Vertical Rhythm Lines
-Use fine lines and spacing systems to reinforce order and elegance.
-Never let them become decorative clutter.
-
---
-
-## 12. DENSITY & SPACING DISCIPLINE
-Do not make everything too dense.
-
-The page should breathe.
-Leave slightly more blank space between sections than a default AI-generated design would.
-
-Rules:
- use more even vertical spacing between major sections
- keep section-to-section spacing consistent unless there is a strong design reason not to
- avoid one section feeling very cramped while the next feels too empty
- prefer a clean, balanced cadence across the page
- allow negative space to create rhythm and emphasis
- separate denser sections with calmer sections
- avoid stacking too many cards, labels, and content blocks too tightly
- smaller sections should still receive enough surrounding space so the page feels polished and intentional
-
-A premium page should feel:
- open
- composed
- balanced
- confident
- breathable
-
-Not:
- cramped
- noisy
- uneven
- overfilled
- visually exhausted
-
-Section rhythm should alternate with control:
- some sections can be more content-rich
- some sections can be smaller and calmer
- but the overall spacing cadence should still feel even, clean, and deliberate
-
-Whitespace is a design tool.
-Use it deliberately.
-Do not let spacing become random.
-
---
-
-## 13. COLOR & MATERIAL RULES
-
-### Palette Discipline
-Use one controlled palette across the entire site:
- 1 primary (brand anchor)
- 1 secondary (supporting tone)
- 1 accent (used sparingly for CTA / highlight)
- a neutral scale (background, surface, text, hairline)
-
-Section-level mood shifts must reuse the same palette — no full theme swap per section.
-
-### Background-image harmony
-When using full-bleed image backgrounds:
- the image must tonally match the palette (not fight it)
- use overlays (dark, light, or color tint) to keep text fully readable
- the brand accent stays consistent regardless of background image
-
-### Gradient Discipline
-Gradients are **allowed and encouraged** when professional and subtle. They are not the same as AI slop gradients.
-
-Allowed (use confidently):
- low-chroma palette-matched tonal gradients (e.g. ink to graphite, cream to sand, ivory to warm grey)
- single-hue atmospheric grades behind hero photography
- soft vignettes and radial depth that direct the eye
- noise-textured gradients adding tactile depth without color noise
- editorial color washes that match brand mood
-
-Banned (AI gradient slop):
- rainbow / mesh blob gradients
- purple-to-blue "AI" defaults
- pink-to-orange "creator" defaults
- neon edges and glow halos with no purpose
- gradient text as a shortcut for "premium"
- gradients that compete with imagery instead of supporting it
-
-### Background Confidence Rule
-Do not retreat to plain white surfaces by default. When the brief, brand mood, or section job calls for atmosphere, use:
- a full-bleed image,
- a duotone or graded photo,
- a tonal gradient,
- a tactile material,
-or a confident flat color field — picked deliberately, not as decoration.
-
-### Strong guidance
- avoid rainbow randomness
- avoid over-neon unless requested
- keep contrast intentional
- match accent colors to the chosen theme paradigm
- gradients must always read as professional and intentional, never as visual noise
-
-### Materiality
-Where appropriate, add:
- paper feel
- glass feel
- brushed metal feel
- soft blur depth
- tactile matte surfaces
- editorial photo treatment
-
-But always keep the frontend structure readable.
-
---
-
-## 14. IMAGE / MEDIA DIRECTION
-If imagery is present, it must support the layout.
-
-Allowed:
- art-directed product visuals
- refined editorial photography
- UI crops
- abstract forms with structural purpose
- framed objects
- premium texture use
- campaign-style visuals
-
-Avoid:
- irrelevant scenery
- stock-photo cliches
- decorative junk
- visuals that overpower the page hierarchy
-
---
-
-## 15. DEFAULT SITE PACKS
-
-### 4-section pack
-1. Hero
-2. Features
-3. Social proof / testimonial
-4. CTA
-
-### 8-section pack
-1. Hero
-2. Trust bar
-3. Features
-4. Product showcase
-5. Benefits / use cases
-6. Testimonials
-7. Pricing
-8. CTA
-
-### 12-section pack
-1. Hero
-2. Trust bar
-3. Feature grid
-4. Product preview
-5. Problem / solution
-6. Benefits
-7. Workflow
-8. Metrics / proof / integration
-9. Testimonials
-10. Pricing
-11. FAQ
-12. CTA + footer
-
---
-
-## 16. MULTI-IMAGE CONSISTENCY RULE
-Because every section is its own image, consistency is critical. Across all per-section frames enforce:
- same brand world
- same type scale logic
- same spacing discipline
- same CTA family (style variations are fine, identity is not)
- same icon or illustration mood
- same image treatment (grade, framing, material vocabulary)
- same tonal language in any copy
-
-Variation IS allowed in:
- composition anchor (per section)
- background mode (per section)
- section size and density
- which "second-read" moment appears
-
-A viewer flipping through every per-section frame must still recognize one brand. Anything that breaks brand recall is over-variation.
-
---
-
-## 17. CLARITY CHECK
-Before finalizing, verify internally:
-
-1. Is the hierarchy obvious?
-2. Is the hero clean enough?
-3. Is the design visually distinctive?
-4. Is it free of obvious AI tells?
-5. Is it premium rather than template-like?
-6. Can someone code from this?
-7. If multiple images exist, do they clearly belong together?
-8. Is imagery used strongly enough (with variation, not one repeated crop)?
-9. Does the page breathe, or is it too dense?
-10. Is there enough spacing between sections?
-11. Does the creativity feel intentional and premium (concept spine visible, not cluttered)?
-12. Is the spacing between sections even and controlled?
-13. Do smaller sections still have enough surrounding space to feel clean?
-14. Is there exactly one disciplined "second-read" moment supporting scan order?
-15. Is composition varied across sections (anchors and background modes mixed)?
-16. Is the hero scale (giant / mid / mini) chosen and executed cleanly?
-17. Is there a clear conversion path (hook -> proof -> action) even in artistic sites?
-18. Is the palette consistent across all per-section images?
-19. Is each image horizontal and one-section-only?
-20. Is the **total number of images equal to the number of sections** (never fewer)?
-21. Is the hero using a varied composition (not defaulting to left-text / right-image out of habit)?
-
-If not, refine internally before output. If the count is wrong, regenerate the missing sections. If the hero feels like a reflexive left-text / right-image default, prefer a different composition anchor.
-
---
-
-## 18. EXTRA CREATIVITY & IMPLEMENTATION EDGE
-
-Apply unless the user opts out:
-
-### Cross-section contrast
-Across the slice, deliberately vary foreground/background intensity at least twice (lighter → richer → calmer) so the scroll feels paced, not monotonous slabs.
-
-### CTA specificity
-Prefer one unmistakable primary action per major viewport tier; secondary actions must look secondary (scale, outline, ghost), not clones of primary.
-
-### Image variety inside one comp
-Mix at least **two distinct image crops** where multiple sections exist — e.g. macro product + contextual environment, or portrait editorial + widescreen artifact — avoiding one repeated stock silhouette.
-
-### Data-viz restraint
-Charts, sparklines, and graphs appear only when the site type logically needs them (analytics, pricing, infra, observability brands). Else keep proof human (quotes, receipts, timelines, screenshots of real workflows).
-
-### Cultural / tonal alignment
-When the brief names an industry or region, steer palette and typographic temperament to match — don’t ship default “neutral SF startup” unless the brief is intentionally generic SaaS.
-
-### Mobile-implied fidelity (even for desktop mocks)
-Maintain tap-friendly hit sizes and readable caption sizes visually; stacking order should imply a sane single-column narrative.
-
-### Conversion focus
-Each section has a job. Even when the design is artistic, the page must read as a real product or brand site:
- the hero communicates value in seconds and offers one obvious next action
- proof sections (logos, quotes, metrics) feel earned, not stuffed
- pricing or CTA sections feel decisive, not buried
- the final section closes: a single strong CTA + supporting trust cue
-Avoid pure mood reels with no funnel logic.
-
-### Composition variety check
-Across all per-section images, internally log the chosen composition anchor and background mode. Reject the set if:
- the same composition anchor repeats more than 2 sections in a row
- the same background mode repeats more than 3 sections in a row
- every section is inline-asset (no full-bleed background ever appears) **AND** the brief does not call for minimalism / typography-only / swiss / ultra simple
-
-For non-minimalist briefs: push for at least one full-bleed (or duotone / atmospheric) background and at least one mini minimalist section in any multi-section site.
-
-For minimalist briefs: this rule is suspended. Restraint is the design.
-
---
-
-## 19. RESPONSE BEHAVIOR
-When the user asks for a frontend design:
-1. infer site type and primary conversion goal
-2. infer number of sections (if unclear, use the defaults from §5: landing page = 6, full website = 8)
-3. **commit out loud** to the section count and announce it ("Generating N horizontal images, one per section")
-4. plan ONE horizontal image PER SECTION — always separate generations, never collapse
-5. choose Hero Scale for the whole site (giant / mid / mini)
-5. choose a strong visual combination (theme, type, hero arch, section system, motion, narrative spine, second-read moment)
-7. for each section: pick a Composition Anchor, Background Mode, and CTA Variation — vary across sections
-8. choose 4 signature components used appropriately across sections
-9. enforce hero minimalism + section size variety (some giant, some mini)
-10. enforce strong image usage including full-bleed backgrounds where it fits
-11. lock one consistent palette across all images
-12. apply §18 EXTRA CREATIVITY & IMPLEMENTATION EDGE
-13. keep spacing generous, even, and clean
-14. remove AI slop (including marquee / fake KPI clichés unless requested)
-15. run §17 CLARITY CHECK
-16. **generate every per-section horizontal image, labeled "Section X of N: <name>"**, until the full set is delivered. Do not stop early. Do not summarize. Do not return only one image.
-
-Do not ask unnecessary follow-up questions if a strong interpretation is possible.
-
---
-
-## 20. EXAMPLE INTERPRETATIONS
-
-### Example 1
-User: "make a hero section for an AI startup"
-
-Interpretation:
- 1 horizontal image
- Hero Scale: Mid Editorial or Giant Statement
- Composition Anchor: bottom-left text over full-bleed product/atmosphere image
- Background Mode: full-bleed image with dark tonal overlay
- CTA Variation: outlined inline + small label hint
- Palette: Deep Dark or Bold Studio Solid, one consistent accent
- no cliche dashboard spam, no purple AI glow
-
-### Example 2
-User: "design 8 sections for a fintech website"
-
-Interpretation:
- 8 separate horizontal images (one per section)
- Hero Scale: Mid Editorial (trust-driven)
- vary Composition Anchor across sections (centered low, right-third caption, bottom-left over chart visual, stacked center for closing CTA)
- Background Mode mix: solid surface, full-bleed image background once, editorial side-image at use cases
- one consistent palette (e.g. ink + paper + single brand accent)
- conversion path: hook -> proof bar -> features -> use case -> testimonial -> pricing -> FAQ -> final CTA
-
-### Example 3
-User: "creative agency landing page, 12 sections"
-
-Interpretation:
- 12 horizontal images (one per section)
- Hero Scale: Giant Statement OR Mini Minimalist (decisive choice, not in-between)
- editorial / poster-like direction; off-grid composition appears 2-3 times
- multiple Background Modes (full-bleed image at hero + showcase, editorial side-image at case studies, solid + accent for process)
- palette consistent throughout, with one bold accent recurring
- closing CTA section: mini minimalist, strong type, single primary action
-
---
-
-## 21. FINAL GOAL
-Generate frontend reference images that feel:
- artistic
- premium
- clear
- structured
- image-led
- breathable
- memorable
- anti-generic
- implementation-friendly
-
-The result should look like a top-tier website concept with strong imagery, confident creativity, and generous spacing - not a dense, repetitive AI layout.
+```bash
+npx skills add https://github.com/Leonxlnx/imagegen-skills --skill "imagegen-frontend-web"
+```
@@ -0,0 +1,2 @@
+policy:
+  allow_implicit_invocation: false
@@ -1,6 +1,7 @@
 ---
 name: minimalist-ui
-description: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
+description: "Classic style skill, opt-in: it runs only when called by name. Editorial product UI with a warm monochrome palette, typographic contrast and flat bento grids."
+disable-model-invocation: true
 ---

 # Protocol: Premium Utilitarian Minimalism UI Architect
@@ -0,0 +1,2 @@
+policy:
+  allow_implicit_invocation: false
@@ -1,49 +0,0 @@
---
-name: full-output-enforcement
-description: Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
---
-
-# Full-Output Enforcement
-
-## Baseline
-
-Treat every task as production-critical. A partial output is a broken output. Do not optimize for brevity — optimize for completeness. If the user asks for a full file, deliver the full file. If the user asks for 5 components, deliver 5 components. No exceptions.
-
-## Banned Output Patterns
-
-The following patterns are hard failures. Never produce them:
-
-**In code blocks:** `// ...`, `// rest of code`, `// implement here`, `// TODO`, `/* ... */`, `// similar to above`, `// continue pattern`, `// add more as needed`, bare `...` standing in for omitted code
-
-**In prose:** "Let me know if you want me to continue", "I can provide more details if needed", "for brevity", "the rest follows the same pattern", "similarly for the remaining", "and so on" (when replacing actual content), "I'll leave that as an exercise"
-
-**Structural shortcuts:** Outputting a skeleton when the request was for a full implementation. Showing the first and last section while skipping the middle. Replacing repeated logic with one example and a description. Describing what code should do instead of writing it.
-
-## Execution Process
-
-1. **Scope** — Read the full request. Count how many distinct deliverables are expected (files, functions, sections, answers). Lock that number.
-2. **Build** — Generate every deliverable completely. No partial drafts, no "you can extend this later."
-3. **Cross-check** — Before output, re-read the original request. Compare your deliverable count against the scope count. If anything is missing, add it before responding.
-
-## Handling Long Outputs
-
-When a response approaches the token limit:
-
- Do not compress remaining sections to squeeze them in.
- Do not skip ahead to a conclusion.
- Write at full quality up to a clean breakpoint (end of a function, end of a file, end of a section).
- End with:
-
-```
-[PAUSED — X of Y complete. Send "continue" to resume from: next section name]
-```
-
-On "continue", pick up exactly where you stopped. No recap, no repetition.
-
-## Quick Check
-
-Before finalizing any response, verify:
- No banned patterns from the list above appear anywhere in the output
- Every item the user requested is present and finished
- Code blocks contain actual runnable code, not descriptions of what code would do
- Nothing was shortened to save space
@@ -1,181 +1,15 @@
 ---
 name: redesign-existing-projects
-description: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
+description: "Retired: redesigns, restyles and design reviews are part of design-taste-frontend. Runs only when called by name."
+disable-model-invocation: true
 ---

-# Redesign Skill
+# Redesign (retired)

-## How This Works
+This skill is retired. Redesigns, restyles and reviews of existing pages and app screens are part of **design-taste-frontend**, which audits the existing page in a real browser first, keeps its content and working behaviour, and then rebuilds the design to a dealt direction with before-and-after screenshots.

-When applied to an existing project, follow this sequence:
+If you were called by name, follow the design-taste-frontend skill (its "Redesign or review" route). If it is not installed:

-1. **Scan** — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.
-2. **Diagnose** — Run through the audit below. List every generic pattern, weak point, and missing state you find.
-3. **Fix** — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.
-
-## Design Audit
-
-### Typography
-
-Check for these problems and fix them:
-
- **Browser default fonts or Inter everywhere.** Replace with a font that has character. Good options: `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`. For editorial/creative projects, pair a serif header with a sans-serif body.
- **Headlines lack presence.** Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional.
- **Body text too wide.** Limit paragraph width to roughly 65 characters. Increase line-height for readability.
- **Only Regular (400) and Bold (700) weights used.** Introduce Medium (500) and SemiBold (600) for more subtle hierarchy.
- **Numbers in proportional font.** Use a monospace font or enable tabular figures (`font-variant-numeric: tabular-nums`) for data-heavy interfaces.
- **Missing letter-spacing adjustments.** Use negative tracking for large headers, positive tracking for small caps or labels.
- **All-caps subheaders everywhere.** Try lowercase italics, sentence case, or small-caps instead.
- **Orphaned words.** Single words sitting alone on the last line. Fix with `text-wrap: balance` or `text-wrap: pretty`.
-
-### Color and Surfaces
-
- **Pure `#000000` background.** Replace with off-black, dark charcoal, or tinted dark (`#0a0a0a`, `#121212`, or a dark navy).
- **Oversaturated accent colors.** Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming.
- **More than one accent color.** Pick one. Remove the rest. Consistency beats variety.
- **Mixing warm and cool grays.** Stick to one gray family. Tint all grays with a consistent hue (warm or cool, not both).
- **Purple/blue "AI gradient" aesthetic.** This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent.
- **Generic `box-shadow`.** Tint shadows to match the background hue. Use colored shadows (e.g., dark blue shadow on a blue background) instead of pure black at low opacity.
- **Flat design with zero texture.** Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile.
- **Perfectly even gradients.** Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades.
- **Inconsistent lighting direction.** Audit all shadows to ensure they suggest a single, consistent light source.
- **Random dark sections in a light mode page (or vice versa).** A single dark-background section breaking an otherwise light page looks like a copy-paste accident. Either commit to a full dark mode or keep a consistent background tone throughout. If contrast is needed, use a slightly darker shade of the same palette — not a sudden jump to `#111` in the middle of a cream page.
- **Empty, flat sections with no visual depth.** Sections that are just text on a plain background feel unfinished. Add high-quality background imagery (blurred, overlaid, or masked), subtle patterns, or ambient gradients. Use reliable placeholder sources like `https://picsum.photos/seed/{name}/1920/1080` when real assets are not available. Experiment with background images behind hero sections, feature blocks, or CTAs — even a subtle full-width photo at low opacity adds presence.
-
-### Layout
-
- **Everything centered and symmetrical.** Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content.
- **Three equal card columns as feature row.** This is the most generic AI layout. Replace with a 2-column zig-zag, asymmetric grid, horizontal scroll, or masonry layout.
- **Using `height: 100vh` for full-screen sections.** Replace with `min-height: 100dvh` to prevent layout jumping on mobile browsers (iOS Safari viewport bug).
- **Complex flexbox percentage math.** Replace with CSS Grid for reliable multi-column structures.
- **No max-width container.** Add a container constraint (around 1200-1440px) with auto margins so content doesn't stretch edge-to-edge on wide screens.
- **Cards of equal height forced by flexbox.** Allow variable heights or use masonry when content varies in length.
- **Uniform border-radius on everything.** Vary the radius: tighter on inner elements, softer on containers.
- **No overlap or depth.** Elements sit flat next to each other. Use negative margins to create layering and visual depth.
- **Symmetrical vertical padding.** Top and bottom padding are always identical. Adjust optically — bottom padding often needs to be slightly larger.
- **Dashboard always has a left sidebar.** Consider top navigation, a floating command menu, or a collapsible panel when it fits the project's navigation.
- **Desktop sidebar collapses to nothing.** For collapsible sidebars, keep expanded labels as the default and offer an opt-in icon rail around 56-72px wide, with one icon per destination. Keep the active item highlighted and replace group headings with thin dividers. Below the project's tablet breakpoint, use an off-canvas drawer instead of a rail.
- **Missing whitespace.** Double the spacing. Let the design breathe. Dense layouts work for data dashboards, not for marketing pages.
- **Buttons not bottom-aligned in card groups.** When cards have different content lengths, CTAs end up at random heights. Pin buttons to the bottom of each card so they form a clean horizontal line regardless of content above.
- **Feature lists starting at different vertical positions.** In pricing tables or comparison cards, the list of features should start at the same Y position across all columns. Use consistent spacing above the list or fixed-height title/price blocks.
- **Inconsistent vertical rhythm in side-by-side elements.** When placing cards, columns, or panels next to each other, align shared elements (titles, descriptions, prices, buttons) across all items. Misaligned baselines make the layout look broken.
- **Mathematical alignment that looks optically wrong.** Centering by the math doesn't always look centered to the eye. Icons next to text, play buttons in circles, or text in buttons often need 1-2px optical adjustments to feel right.
-
-### Interactivity and States
-
- **No hover states on buttons.** Add background shift, slight scale, or translate on hover.
- **No active/pressed feedback.** Add a subtle `scale(0.98)` or `translateY(1px)` on press to simulate a physical click.
- **Instant transitions with zero duration.** Add smooth transitions (200-300ms) to all interactive elements.
- **Missing focus ring.** Ensure visible focus indicators for keyboard navigation. This is an accessibility requirement, not optional.
- **No loading states.** Replace generic circular spinners with skeleton loaders that match the layout shape.
- **No empty states.** An empty dashboard showing nothing is a missed opportunity. Design a composed "getting started" view.
- **No error states.** Add clear, inline error messages for forms. Do not use `window.alert()`.
- **Dead links.** Buttons that link to `#`. Either link to real destinations or visually disable them.
- **No indication of current page in navigation.** Style the active nav link differently so users know where they are.
- **Icon-only navigation without names or usable targets.** Keep label text in the DOM, visually hidden in the rail, and show tooltips on hover and keyboard focus. Give rail items and the collapse/expand control targets of at least 44×44px. Use a button with an accessible name and `aria-expanded` for the control.
- **Scroll jumping.** Anchor clicks jump instantly. Add `scroll-behavior: smooth`.
- **Animations using `top`, `left`, `width`, `height`.** Switch to `transform` and `opacity` for GPU-accelerated, smooth animation.
-
-### Content
-
- **Generic names like "John Doe" or "Jane Smith".** Use diverse, realistic-sounding names.
- **Fake round numbers like `99.99%`, `50%`, `$100.00`.** Use organic, messy data: `47.2%`, `$99.00`, `+1 (312) 847-1928`.
- **Placeholder company names like "Acme Corp", "Nexus", "SmartFlow".** Invent contextual, believable brand names.
- **AI copywriting cliches.** Never use "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry", or "In the world of...". Write plain, specific language.
- **Exclamation marks in success messages.** Remove them. Be confident, not loud.
- **"Oops!" error messages.** Be direct: "Connection failed. Please try again."
- **Passive voice.** Use active voice: "We couldn't save your changes" instead of "Mistakes were made."
- **All blog post dates identical.** Randomize dates to appear real.
- **Same avatar image for multiple users.** Use unique assets for every distinct person.
- **Lorem Ipsum.** Never use placeholder latin text. Write real draft copy.
- **Title Case On Every Header.** Use sentence case instead.
-
-### Component Patterns
-
- **Generic card look (border + shadow + white background).** Remove the border, or use only background color, or use only spacing. Cards should exist only when elevation communicates hierarchy.
- **Always one filled button + one ghost button.** Add text links or tertiary styles to reduce visual noise.
- **Pill-shaped "New" and "Beta" badges.** Try square badges, flags, or plain text labels.
- **Accordion FAQ sections.** Use a side-by-side list, searchable help, or inline progressive disclosure.
- **3-card carousel testimonials with dots.** Replace with a masonry wall, embedded social posts, or a single rotating quote.
- **Pricing table with 3 towers.** Highlight the recommended tier with color and emphasis, not just extra height.
- **Modals for everything.** Use inline editing, slide-over panels, or expandable sections instead of popups for simple actions.
- **Avatar circles exclusively.** Try squircles or rounded squares for a less generic look.
- **Light/dark toggle always a sun/moon switch.** Use a dropdown, system preference detection, or integrate it into settings.
- **Footer link farm with 4 columns.** Simplify. Focus on main navigational paths and legally required links.
-
-### Iconography
-
- **Lucide or Feather icons exclusively.** These are the "default" AI icon choice. Use Phosphor, Heroicons, or a custom set for differentiation.
- **Rocketship for "Launch", shield for "Security".** Replace cliche metaphors with less obvious icons (bolt, fingerprint, spark, vault).
- **Inconsistent stroke widths across icons.** Audit all icons and standardize to one stroke weight.
- **Missing favicon.** Always include a branded favicon.
- **Stock "diverse team" photos.** Use real team photos, candid shots, or a consistent illustration style instead of uncanny stock imagery.
-
-### Code Quality
-
- **Div soup.** Use semantic HTML: `<nav>`, `<main>`, `<article>`, `<aside>`, `<section>`.
- **Collapsed navigation is inert or hidden.** Keep the rail and collapse/expand control outside hidden or `inert` ancestors, exposed to assistive technology and operable by pointer and keyboard, with visible focus indicators. Suppress focus and interaction in inactive expanded sidebar content with `inert`, `hidden`, or `display: none`; use explicit tab-stop and interaction management if a visual transition keeps it rendered. `aria-hidden="true"` alone does not remove descendants from the tab order.
- **Inline styles mixed with CSS classes.** Move all styling to the project's styling system.
- **Hardcoded pixel widths.** Use relative units (`%`, `rem`, `em`, `max-width`) for flexible layouts.
- **Missing alt text on images.** Describe image content for screen readers. Never leave `alt=""` or `alt="image"` on meaningful images.
- **Arbitrary z-index values like `9999`.** Establish a clean z-index scale in the theme/variables.
- **Commented-out dead code.** Remove all debug artifacts before shipping.
- **Import hallucinations.** Check that every import actually exists in `package.json` or the project dependencies.
- **Missing meta tags.** Add proper `<title>`, `description`, `og:image`, and social sharing meta tags.
-
-### Strategic Omissions (What AI Typically Forgets)
-
- **No legal links.** Add privacy policy and terms of service links in the footer.
- **No "back" navigation.** Dead ends in user flows. Every page needs a way back.
- **No custom 404 page.** Design a helpful, branded "page not found" experience.
- **No form validation.** Add client-side validation for emails, required fields, and format checks.
- **No "skip to content" link.** Essential for keyboard users. Add a hidden skip-link.
- **No cookie consent.** If required by jurisdiction, add a compliant consent banner.
-
-## Upgrade Techniques
-
-When upgrading a project, pull from these high-impact techniques to replace generic patterns:
-
-### Typography Upgrades
- **Variable font animation.** Interpolate weight or width on scroll or hover for text that feels alive.
- **Outlined-to-fill transitions.** Text starts as a stroke outline and fills with color on scroll entry or interaction.
- **Text mask reveals.** Large typography acting as a window to video or animated imagery behind it.
-
-### Layout Upgrades
- **Broken grid / asymmetry.** Elements that deliberately ignore column structure — overlapping, bleeding off-screen, or offset with calculated randomness.
- **Whitespace maximization.** Aggressive use of negative space to force focus on a single element.
- **Parallax card stacks.** Sections that stick and physically stack over each other during scroll.
- **Split-screen scroll.** Two halves of the screen sliding in opposite directions.
-
-### Motion Upgrades
- **Smooth scroll with inertia.** Decouple scrolling from browser defaults for a heavier, cinematic feel.
- **Staggered entry.** Elements cascade in with slight delays, combining Y-axis translation with opacity fade. Never mount everything at once.
- **Spring physics.** Replace linear easing with spring-based motion for a natural, weighty feel on all interactive elements.
- **Scroll-driven reveals.** Content entering through expanding masks, wipes, or draw-on SVG paths tied to scroll progress.
-
-### Surface Upgrades
- **True glassmorphism.** Go beyond `backdrop-filter: blur`. Add a 1px inner border and a subtle inner shadow to simulate edge refraction.
- **Spotlight borders.** Card borders that illuminate dynamically under the cursor.
- **Grain and noise overlays.** A fixed, pointer-events-none overlay with subtle noise to break digital flatness.
- **Colored, tinted shadows.** Shadows that carry the hue of the background rather than using generic black.
-
-## Fix Priority
-
-Apply changes in this order for maximum visual impact with minimum risk:
-
-1. **Font swap** — biggest instant improvement, lowest risk
-2. **Color palette cleanup** — remove clashing or oversaturated colors
-3. **Hover and active states** — makes the interface feel alive
-4. **Layout and spacing** — proper grid, max-width, consistent padding
-5. **Replace generic components** — swap cliche patterns for modern alternatives
-6. **Add loading, empty, and error states** — makes it feel finished
-7. **Polish typography scale and spacing** — the premium final touch
-
-## Rules
-
- Work with the existing tech stack. Do not migrate frameworks or styling libraries.
- Do not break existing functionality. Test after every change.
- Before importing any new library, check the project's dependency file first.
- If the project uses Tailwind, check the version (v3 vs v4) before modifying config.
- If the project has no framework, use vanilla CSS.
- Keep changes reviewable and focused. Small, targeted improvements over big rewrites.
+```bash
+npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
+```
@@ -0,0 +1,2 @@
+policy:
+  allow_implicit_invocation: false
@@ -1,6 +1,7 @@
 ---
 name: high-end-visual-design
-description: Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
+description: "Classic style skill, opt-in: it runs only when called by name. A calm, polished look with soft contrast, generous whitespace and spring motion."
+disable-model-invocation: true
 ---

 # Agent Skill: Principal UI/UX Architect & Motion Choreographer (Awwwards-Tier)
@@ -0,0 +1,2 @@
+policy:
+  allow_implicit_invocation: false
@@ -1,6 +1,7 @@
 ---
 name: stitch-design-taste
-description: Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
+description: "Classic skill for Google Stitch, opt-in: it runs only when called by name. Writes an agent-friendly DESIGN.md with strict type, colour and layout rules."
+disable-model-invocation: true
 ---

 # Stitch Design Taste — Semantic Design System Skill
@@ -0,0 +1,2 @@
+policy:
+  allow_implicit_invocation: false
@@ -1,6 +1,7 @@
 ---
 name: design-taste-frontend-v1
-description: The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2), which is a new skill. Use this v1 install name only if you need exact backward compatibility.
+description: "The original taste-skill v1, kept for projects that depend on its exact behaviour. Opt-in: it runs only when called by name."
+disable-model-invocation: true
 ---

 # High-Agency Frontend Skill
@@ -0,0 +1,2 @@
+policy:
+  allow_implicit_invocation: false
@@ -1,6 +1,7 @@
 ---
 name: design-taste-frontend-v2-experimental
-description: Old v2 (experimental) of taste-skill, the single-file dial-driven version, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2). Use this install name only if you need the earlier behavior. Anti-slop frontend rules for landing pages, portfolios, and redesigns, with real design systems when applicable, audit-first redesigns and a strict pre-flight check.
+description: "The single-file, dial-driven taste-skill that was the default before v2, kept for projects that depend on its exact behaviour. Opt-in: it runs only when called by name."
+disable-model-invocation: true
 ---

 # tasteskill: Anti-Slop Frontend Skill
@@ -0,0 +1,2 @@
+policy:
+  allow_implicit_invocation: false
@@ -457,9 +457,28 @@ onto the roles, and take only composition from the draw. The house rules still a
 itself requires a banned device (its logo sits in a gradient, its accent is violet), keep the brand
 asset, say so in the report, and pass `--allow <rule>` to the inspector for that rule only.

-**Redesign or review of an existing page.** Run `lint.mjs` and `inspect.mjs` on it first and report
-what they find, then critique the screenshots with `references/critique.md`. For a redesign, draw a
-direction and proceed from step 2, keeping the page's real content and working behaviour.
+**Redesign, restyle or review of an existing page or app screen.**
+
+1. **Record the before.** Run the project as it is and inspect it into its own folder
+   (`inspect.mjs <url> --out .taste-skill/before`, with `--app` for an app screen) and lint its
+   source. Read the code: the framework, the styling method (Tailwind v3 or v4, CSS modules,
+   styled-components, plain CSS), the components, and what must survive: routes, forms, data,
+   behaviour, the brand's own assets.
+2. **A review stops here.** Critique the before screenshots with `references/critique.md`, list the
+   findings with the inspector's measurements, and name the three changes that would move the page
+   most.
+3. **Keep the stack, the content and what works.** No framework or styling-library migration; check the
+   dependency file before adding anything. A restyle keeps the layout and takes type, colour and
+   components from a dealt direction (`--keep` whatever the brand fixes); a redesign deals a full
+   direction and rebuilds the sections from its blueprints inside the existing components. Either way
+   proceed from step 2 of the run with the page's real content.
+4. **Order of work, biggest effect for least risk:** type (faces and scale), colour (one ground, one
+   ink, one accent), the frame (margins, section rhythm, a title on the first screen and a heading on
+   every section), states (hover, focus, loading, empty, error), then the stock components (icon
+   cards, pill badges, gradient blobs, card grids) replaced by the dealt blueprints.
+5. **Prove it.** Inspect again into `.taste-skill/after`, compare before and after at every width,
+   click through every link, form and menu that worked before, and report the before and after
+   measurements side by side.

 **A component or a single section, not a page.** Skip the draw unless there is no direction to follow.
 Match the surrounding design, apply the house rules and the laws, and still inspect the result.