@stacksjs/defaults 0.70.206 → 0.70.208

package/ai/skills/stacks-brandkit/SKILL.md

@@ -0,0 +1,811 @@
+---
+name: stacks-brandkit
+description: Use when defining or exploring a brand identity for a Stacks project and you want premium brand-kit REFERENCE IMAGES first - logo directions, palettes, typography specimens, identity boards, and application/mockup decks. Generates IMAGES ONLY, never code. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems with intentional logo concepting, sparse type, strong symbolic meaning, and disciplined palettes a coding step can build against.
+license: MIT
+compatibility: Bun >= 1.3.0, TypeScript
+allowed-tools: Read Edit Write Bash Grep Glob
+---
+
+# stacks-brandkit
+
+Output = reference images only. Hand the frames to `stacks-design-taste` or `stacks-image-to-code` to implement in stx + Crosswind. The art direction here is framework-agnostic: it defines a brand world (logo, palette, type, applications) as images, not code, so the identity can be implemented on any stack.
+
+Related skills: `stacks-imagegen-web` (website section reference images), `stacks-imagegen-mobile` (mobile screen reference images), `stacks-design-taste` and `stacks-image-to-code` (turn the palette, type, and marks into stx + Crosswind).
+
+# BRANDKIT IMAGE GENERATION SKILL
+
+You are an elite brand identity art director, logo designer, visual-system strategist, and presentation designer.
+
+Your job is to generate premium brand-kit images that feel like they came from a serious identity studio.
+
+This skill generates images only. It does not write code, stx, Crosswind, or HTML. The boards are the deliverable; implementation happens later in a separate step.
+
+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 x 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
+
+Allowed layouts:
+- `3 x 3` full identity system
+- `2 x 3` cinematic brand deck overview
+- `2 x 2` compact concept board
+- `1 x 3` horizontal brand strip
+- `4 x 2` wide contact-sheet layout
+- custom layout when requested
+
+If the user gives references, match their quality and rhythm, not their exact content.
+
+---
+
+# 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
+
+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 x 3 PANEL SYSTEM
+
+Use this if no layout is specified:
+
+## 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.
+
+## 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 x 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
+- cliche 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
+
+When the user provides 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:
+- category: [category]
+- audience: [audience]
+- personality: [traits]
+- core metaphor: [metaphor]
+- logo idea: [how the mark combines symbol + name + category meaning]
+
+Layout:
+[3x3 / 2x3 / 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 real-world logos.
+
+Typography:
+readable, minimal, high hierarchy, no tiny fake text.
+
+Logo:
+professional, symbolic, simple, ownable, based on the brand's purpose, repeated 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
+
+These boards are the deliverable; a later step (`stacks-design-taste` / `stacks-image-to-code`) turns the palette, type, and marks into stx + Crosswind.