[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6NVBD3NQJP18BADP7AFPT3B":3,"skill-same:01M6NVBD3NQJP18BADP7AFPT3B":75},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":6,"ownerHtmlUrl":59,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":60,"install":61,"resources":74},"01M6NVBD3NQJP18BADP7AFPT3B","brand-identity-generator",null,"Use this skill when the user needs to create a visual brand identity for their product. Generates a comprehensive BRAND-IDENTITY.md file for the project root. Covers colors, typography, spacing, components, accessibility, and responsive design — with no gaps for AI to fill with generic defaults.","mattonweb\u002Fai-assistant-foundry","mattonweb","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F2309734?v=4","01M6NQYCY846TKYN2ZCRS71WQ7","Matt Johnson","01M6NQYD2NPAQEFVD8TW9W0SVX",1,"MIT","https:\u002F\u002Fgithub.com\u002Fmattonweb\u002Fai-assistant-foundry\u002Fblob\u002Fmain\u002Fdesign-branding\u002Fwhawkinsiv\u002Fbrand-identity-generator\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"identity","brand identity","generator","brand","brand identity generator","responsive design","for","spacing","with","responsive","project","visual","design","brand-identity","typography","use","file","product","create","components","2026-11-10 10:12:30",false,"---\nname: brand-identity-generator\ndescription: \"Use this skill when the user needs to create a visual brand identity for their product. Generates a comprehensive BRAND-IDENTITY.md file for the project root. Covers colors, typography, spacing, components, accessibility, and responsive design — with no gaps for AI to fill with generic defaults.\"\n---\n\n# Brand Identity Generator\n\nGenerate a complete `BRAND-IDENTITY.md` file for the user's project root — a single reference document that specifies every visual decision so AI tools never guess.\n\n**Two modes:**\n- **Guided discovery** (default) — Ask one question, propose a full identity, refine from reactions. The user never needs design vocabulary.\n- **Expert shortcut** — Detect when the user already provides specific design tokens (hex codes, font names, spacing values). Acknowledge what they've specified, fill gaps with smart defaults, skip discovery.\n\nThe output is a project-level reference file, not a skill. Once generated, any AI tool (Claude Code, Lovable, Cursor, Replit) can read `BRAND-IDENTITY.md` and build consistent UI without repeated instructions.\n\n> Logo guidance, decision frameworks, and common branding mistakes are included at the end.\n\n---\n\n## Discovery Process\n\n**Core principle: The user should never need to use design vocabulary. They react to your proposals. You do the heavy lifting.**\n\n### Default Path (Guided Discovery)\n\n**Step 1 — Ask ONE question:**\n\n> \"What are you building and who is it for?\"\n\nThat's it. One question. Do not ask about colors, fonts, or design preferences.\n\n**Step 2 — Select reference brands:**\n\nBased on their answer, select the 1-2 closest reference brands from the Reference Brand Library below. Use the \"Best for\" field to match.\n\n**Step 3 — Propose a complete identity in plain English:**\n\nWrite a human-readable recommendation. Talk about feeling, not specs. Example tone:\n\n> \"Your users are developers who'll have this open all day. Products that succeed in this space — like Linear and GitHub — use calm, minimal aesthetics because your users stare at this 8 hours a day. I'd go with a dark-compatible palette built around a single cool accent, tight spacing so information density is high, and geometric type that feels fast. Here's what I'd recommend and why...\"\n\nThen present a summary covering:\n- Overall feel in plain words\n- Which reference brands you're drawing from and why\n- Color direction (warm\u002Fcool, light\u002Fdark, accent character)\n- Typography character (not font names — \"clean and precise\" vs \"warm and readable\")\n- Density and spacing feel\n- Component personality (sharp and fast vs soft and friendly)\n\nDo NOT present the full 12-section spec yet. Keep it conversational.\n\n**Step 4 — User reacts:**\n\nThey might say things like:\n- \"Love it\"\n- \"Warmer\"\n- \"I hate green\"\n- \"More like Notion\"\n- \"Can we make it feel more premium?\"\n- \"Less corporate\"\n\nAdjust and re-propose. This loop usually takes 1-3 rounds.\n\n**Step 5 — Generate the full BRAND-IDENTITY.md:**\n\nOnce the user approves, generate the complete output using the Output Template below. Write it to the project root as `BRAND-IDENTITY.md`.\n\n### Expert Path\n\nDetect when the user provides specific design tokens — hex codes, font names, radius values, spacing scales. Signs of an expert:\n- They paste CSS custom properties or Tailwind config\n- They name specific fonts (\"Inter for headings, Source Sans for body\")\n- They provide hex codes\n- They reference specific component libraries\n\nWhen detected:\n1. Acknowledge exactly what they've specified\n2. Fill every gap with smart defaults that complement their choices\n3. Skip the discovery conversation\n4. Generate the full BRAND-IDENTITY.md\n5. Still apply ALL enforced best practices (accessibility, responsive, etc.)\n\n---\n\n## Reference Brand Library\n\n25 brands across 7 categories. Use the \"Feel\" to describe brands to users. Use the \"Design DNA\" internally to derive specific values.\n\n### Minimal \u002F Precise\n\n**Stripe**\n- Feel: Precise, confident, no wasted space\n- Best for: Financial tools, APIs, B2B platforms\n- Design DNA: Cool temperature | Moderate spacing | Moderate radius | Subtle shadows | Geometric type | Medium weight | High contrast\n\n**Linear**\n- Feel: Fast, quiet, stays out of your way\n- Best for: Dev tools, productivity apps, task management\n- Design DNA: Cool temperature | Moderate spacing | Moderate radius | Minimal shadows | Geometric type | Light weight | High contrast\n\n**Vercel**\n- Feel: Bold, dark, futuristic\n- Best for: Technical platforms, dev tools, infrastructure\n- Design DNA: Cool temperature | Moderate spacing | Sharp radius | No shadows | Geometric type | Heavy weight | High contrast\n\n**Superhuman**\n- Feel: Luxurious, dense, keyboard-driven\n- Best for: Premium productivity, power-user tools\n- Design DNA: Cool temperature | Dense spacing | Moderate radius | Subtle shadows | Geometric type | Medium weight | High contrast\n\n### Warm \u002F Approachable\n\n**Notion**\n- Feel: Warm, inviting, like a blank notebook\n- Best for: Creative tools, knowledge work, wikis\n- Design DNA: Warm temperature | Spacious spacing | Moderate radius | Subtle shadows | Humanist type | Light weight | Moderate contrast\n\n**Basecamp**\n- Feel: Honest, unpretentious, handmade feel\n- Best for: Small business tools, project management\n- Design DNA: Warm temperature | Spacious spacing | Rounded radius | No shadows | Humanist type | Medium weight | Moderate contrast\n\n**Mailchimp**\n- Feel: Quirky, fun, doesn't take itself too seriously\n- Best for: Small business marketing, email tools\n- Design DNA: Warm temperature | Spacious spacing | Rounded radius | Subtle shadows | Humanist type | Medium weight | Moderate contrast\n\n**Canva**\n- Feel: Bright, encouraging, \"you can do this\"\n- Best for: Creative tools for non-designers, visual editors\n- Design DNA: Warm temperature | Moderate spacing | Rounded radius | Subtle shadows | Geometric type | Medium weight | High contrast\n\n### Collaborative \u002F Social\n\n**Slack**\n- Feel: Friendly, colorful, energetic\n- Best for: Team communication, workplace tools\n- Design DNA: Warm temperature | Moderate spacing | Rounded radius | Subtle shadows | Humanist type | Medium weight | High contrast\n\n**Figma**\n- Feel: Playful, creative, multiplayer\n- Best for: Design collaboration, real-time editing\n- Design DNA: Neutral temperature | Moderate spacing | Rounded radius | Subtle shadows | Geometric type | Medium weight | High contrast\n\n**Loom**\n- Feel: Personal, casual, lightweight\n- Best for: Async video, screen recording, communication\n- Design DNA: Warm temperature | Spacious spacing | Rounded radius | Moderate shadows | Humanist type | Light weight | Moderate contrast\n\n**Discord**\n- Feel: Bold, youthful, expressive\n- Best for: Community platforms, social features, gaming\n- Design DNA: Cool temperature | Moderate spacing | Rounded radius | Moderate shadows | Geometric type | Heavy weight | High contrast\n\n### Trust \u002F Authority\n\n**Plaid**\n- Feel: Trustworthy, institutional, safe\n- Best for: Fintech infrastructure, banking integrations\n- Design DNA: Cool temperature | Moderate spacing | Moderate radius | No shadows | Geometric type | Medium weight | High contrast\n\n**Gusto**\n- Feel: Approachable authority, grown-up but not stuffy\n- Best for: HR, payroll, compliance tools\n- Design DNA: Warm temperature | Spacious spacing | Rounded radius | Subtle shadows | Humanist type | Medium weight | Moderate contrast\n\n**Mercury**\n- Feel: Sleek, premium, quietly confident\n- Best for: Business banking, financial dashboards\n- Design DNA: Cool temperature | Spacious spacing | Moderate radius | Subtle shadows | Geometric type | Light weight | High contrast\n\n**Wise**\n- Feel: Transparent, clean, no-nonsense\n- Best for: International finance, money transfer, transparent pricing\n- Design DNA: Cool temperature | Spacious spacing | Moderate radius | No shadows | Geometric type | Light weight | High contrast\n\n### Calm \u002F Wellness\n\n**Calm**\n- Feel: Soft, spacious, like a deep breath\n- Best for: Meditation, wellness, self-care\n- Design DNA: Warm temperature | Spacious spacing | Rounded radius | No shadows | Humanist type | Light weight | Low contrast\n\n**Headspace**\n- Feel: Warm, illustrated, gentle\n- Best for: Mental health, habit tracking, guided experiences\n- Design DNA: Warm temperature | Spacious spacing | Pill radius | No shadows | Geometric type | Medium weight | Low contrast\n\n**Apple Health**\n- Feel: Clinical but friendly, data-forward\n- Best for: Health, fitness tracking, medical\n- Design DNA: Neutral temperature | Moderate spacing | Rounded radius | No shadows | Geometric type | Light weight | Moderate contrast\n\n### Bold \u002F Consumer\n\n**Spotify**\n- Feel: Dark, vibrant, high-energy\n- Best for: Entertainment, media, content platforms\n- Design DNA: Cool temperature | Moderate spacing | Pill radius | No shadows | Geometric type | Heavy weight | High contrast\n\n**Duolingo**\n- Feel: Playful, cartoonish, addictive\n- Best for: Education, gamified experiences, learning\n- Design DNA: Warm temperature | Spacious spacing | Rounded radius | Moderate shadows | Geometric type | Heavy weight | High contrast\n\n**Robinhood**\n- Feel: Simple, green, \"investing is easy\"\n- Best for: Consumer fintech, simplified complex tools\n- Design DNA: Neutral temperature | Spacious spacing | Moderate radius | No shadows | Geometric type | Light weight | Moderate contrast\n\n### Data \u002F Dashboard\n\n**Datadog**\n- Feel: Dense, dark, information-rich\n- Best for: Monitoring, infrastructure, observability\n- Design DNA: Cool temperature | Dense spacing | Sharp radius | No shadows | Monospace-accented type | Medium weight | Moderate contrast\n\n**Mixpanel**\n- Feel: Clean data viz, chart-forward\n- Best for: Analytics, reporting, metrics dashboards\n- Design DNA: Cool temperature | Moderate spacing | Moderate radius | Subtle shadows | Geometric type | Light weight | Moderate contrast\n\n**Airtable**\n- Feel: Colorful, organized, approachable complexity\n- Best for: Structured data, spreadsheet-like tools, databases\n- Design DNA: Warm temperature | Moderate spacing | Rounded radius | Subtle shadows | Geometric type | Medium weight | High contrast\n\n---\n\n## Output Template\n\nThis is the exact structure for the generated `BRAND-IDENTITY.md`. Every field must be filled — no optional sections, no \"TBD,\" no placeholders. Every gap is an invitation for AI to fill with generic defaults. Leave no gaps.\n\n````markdown\n\n# Brand Identity — [Product Name]\n\n> Generated by brand-identity-generator. This file is the single source of truth for all visual decisions.\n> Every AI tool building UI for this project should read this file first.\n\n---\n\n## 1. Brand Context\n\n- **Product:** [What it is — one sentence]\n- **Audience:** [Who uses it, in what context, how often, on what devices]\n- **Feel:** [Plain-English feeling — 1-2 sentences]\n- **Reference brands:** [1-2 brands] — [what to take from each, specifically]\n\n---\n\n## 2. Colors\n\n### Primary\n| State | Hex | Usage |\n|-------|-----|-------|\n| Default | #XXXXXX | Primary buttons, links, active indicators |\n| Hover | #XXXXXX | Darkened\u002Flightened on hover |\n| Active | #XXXXXX | While being pressed |\n| Disabled | #XXXXXX | Disabled primary elements (pair with opacity 0.5) |\n\n### Secondary Accent\n| State | Hex | Usage |\n|-------|-----|-------|\n| Default | #XXXXXX | Secondary buttons, accent elements |\n| Hover | #XXXXXX | Hover state |\n| Active | #XXXXXX | Active\u002Fpressed state |\n| Disabled | #XXXXXX | Disabled state |\n\n### Neutral Scale\n| Shade | Hex | Usage |\n|-------|-----|-------|\n| 50 | #XXXXXX | Page backgrounds, subtle fills |\n| 100 | #XXXXXX | Card backgrounds, hover states on white |\n| 150 | #XXXXXX | Dividers on light backgrounds |\n| 200 | #XXXXXX | Input borders, secondary dividers |\n| 300 | #XXXXXX | Disabled text, placeholder text |\n| 400 | #XXXXXX | Icon default color, helper text |\n| 500 | #XXXXXX | Secondary text, labels |\n| 600 | #XXXXXX | Body text on light backgrounds |\n| 700 | #XXXXXX | Strong text, emphasis |\n| 800 | #XXXXXX | Headings |\n| 900 | #XXXXXX | Primary text, highest contrast |\n| 950 | #XXXXXX | Near-black, use sparingly |\n\n### Semantic Colors\n| Role | Text | Background | Border |\n|------|------|------------|--------|\n| Success | #XXXXXX | #XXXXXX | #XXXXXX |\n| Warning | #XXXXXX | #XXXXXX | #XXXXXX |\n| Error | #XXXXXX | #XXXXXX | #XXXXXX |\n| Info | #XXXXXX | #XXXXXX | #XXXXXX |\n\n### Surface Colors\n| Surface | Hex | Usage |\n|---------|-----|-------|\n| Page background | #XXXXXX | `\u003Cbody>` background |\n| Card background | #XXXXXX | Card, panel, popover backgrounds |\n| Elevated surface | #XXXXXX | Dropdowns, tooltips, floating elements |\n| Overlay backdrop | rgba(X,X,X,0.X) | Behind modals and drawers |\n\n### Dark Mode\n\n[Either provide a full mapping for dark mode:]\n\n| Light token | Dark equivalent |\n|-------------|-----------------|\n| Page background #XXXXXX | #XXXXXX |\n| Card background #XXXXXX | #XXXXXX |\n| Primary text #XXXXXX | #XXXXXX |\n| Secondary text #XXXXXX | #XXXXXX |\n| Border #XXXXXX | #XXXXXX |\n| Primary #XXXXXX | #XXXXXX (adjust for dark bg contrast) |\n[...complete mapping for every token above]\n\n[Or explicitly opt out:]\n\n> Dark mode not supported. Do not generate dark mode variants.\n\n---\n\n## 3. Typography\n\n### Font Stack\n- **Headings:** [Font Name], [fallback stack]\n- **Body:** [Font Name], [fallback stack]\n- **Monospace:** [Font Name], [fallback stack] *(if applicable — omit if no code\u002Fdata display)*\n\n### Type Scale\n| Role | Size (rem \u002F px) | Weight | Line Height | Letter Spacing |\n|------|-----------------|--------|-------------|----------------|\n| Display | X.Xrem \u002F XXpx | XXX | 1.1 | -0.02em |\n| H1 | X.Xrem \u002F XXpx | XXX | 1.2 | -0.01em |\n| H2 | X.Xrem \u002F XXpx | XXX | 1.25 | -0.005em |\n| H3 | X.Xrem \u002F XXpx | XXX | 1.3 | 0 |\n| H4 | X.Xrem \u002F XXpx | XXX | 1.35 | 0 |\n| Body Large | X.Xrem \u002F XXpx | XXX | 1.6 | 0 |\n| Body | 1rem \u002F 16px | 400 | 1.5 | 0 |\n| Body Small | X.Xrem \u002F XXpx | XXX | 1.5 | 0 |\n| Caption | X.Xrem \u002F XXpx | XXX | 1.4 | 0.01em |\n| Overline | X.Xrem \u002F XXpx | XXX | 1.4 | 0.05em |\n\n### Typography Rules\n- **Max line width:** 65ch for body text, 45ch for narrow columns\n- **Min body size:** 16px — never go smaller for body text\n- **Font loading:** Use `font-display: swap` and `\u003Clink rel=\"preload\">` for custom fonts\n\n---\n\n## 4. Spacing & Layout\n\n### Base Unit\n- Base: Xpx\n\n### Spacing Scale\n\nAll values are multiples of the base unit.\n\n| Token | Value | Common Use |\n|-------|-------|------------|\n| space-0 | 0px | No spacing |\n| space-1 | Xpx | Tight inline spacing, icon-to-text gap |\n| space-2 | Xpx | Input padding (vertical), badge padding |\n| space-3 | Xpx | Button padding (vertical), list item gap |\n| space-4 | Xpx | Card padding (internal), form field gap |\n| space-5 | Xpx | Group separation, field-to-field gap |\n| space-6 | Xpx | Section padding, card spacing |\n| space-8 | Xpx | Large section breaks |\n| space-10 | Xpx | Page-level vertical rhythm |\n| space-12 | Xpx | Major content separations |\n| space-16 | Xpx | Hero sections, page-level spacing |\n| space-20 | Xpx | Full-page section gaps |\n| space-24 | Xpx | Maximum spacing (hero to content) |\n\n### Component Padding\n| Component | Padding |\n|-----------|---------|\n| Button (sm) | Xpx Xpx |\n| Button (md) | Xpx Xpx |\n| Button (lg) | Xpx Xpx |\n| Input | Xpx Xpx |\n| Card | Xpx |\n| Modal | Xpx |\n| Section spacing | Xpx (between major page sections) |\n\n### Breakpoints\n| Name | Min Width | Columns | Gutter |\n|------|-----------|---------|--------|\n| sm | XXXpx | X | Xpx |\n| md | XXXpx | X | Xpx |\n| lg | XXXpx | XX | Xpx |\n| xl | XXXXpx | XX | Xpx |\n\n### Container\n| Breakpoint | Max Width |\n|------------|-----------|\n| sm | 100% (padding Xpx) |\n| md | XXXpx |\n| lg | XXXXpx |\n| xl | XXXXpx |\n\n---\n\n## 5. Shape & Elevation\n\n### Corner Radius Scale\n| Token | Value | Usage |\n|-------|-------|-------|\n| radius-none | 0px | Tables, full-bleed elements |\n| radius-sm | Xpx | Badges, chips, small elements |\n| radius-default | Xpx | Buttons, inputs |\n| radius-md | Xpx | Cards, dropdowns |\n| radius-lg | Xpx | Modals, large panels |\n| radius-xl | Xpx | Feature cards, hero sections |\n| radius-full | 9999px | Avatars, pill buttons, indicators |\n\n### Shadow Scale\n| Token | CSS Value | Usage |\n|-------|-----------|-------|\n| shadow-none | none | Flat elements, bordered cards |\n| shadow-xs | 0 1px 2px rgba(X,X,X,0.XX) | Subtle lift, input focus |\n| shadow-sm | 0 1px 3px rgba(X,X,X,0.XX), 0 1px 2px rgba(X,X,X,0.XX) | Cards, buttons |\n| shadow-md | 0 4px 6px rgba(X,X,X,0.XX), 0 2px 4px rgba(X,X,X,0.XX) | Dropdowns, popovers |\n| shadow-lg | 0 10px 15px rgba(X,X,X,0.XX), 0 4px 6px rgba(X,X,X,0.XX) | Modals, drawers |\n| shadow-xl | 0 20px 25px rgba(X,X,X,0.XX), 0 8px 10px rgba(X,X,X,0.XX) | Floating panels |\n\n### Elevation Rules\n- Use **shadow** for floating elements (dropdowns, modals, tooltips)\n- Use **border** for inline elements (cards, inputs, dividers)\n- Use **background change** for state changes (hover, selected)\n- Never combine shadow + heavy border on the same element\n\n### Borders\n| Token | Value |\n|-------|-------|\n| border-thin | 1px solid [neutral-200 hex] |\n| border-default | 1px solid [neutral-300 hex] |\n| border-heavy | 2px solid [neutral-400 hex] |\n\n---\n\n## 6. Iconography\n\n- **Library:** [Icon library name — e.g., Lucide, Heroicons, Phosphor]\n- **Style:** [Outline \u002F Solid \u002F Duotone] — use ONE style consistently\n\n### Icon Sizes\n| Context | Size | Notes |\n|---------|------|-------|\n| Inline (with text) | 16px | Aligns with body text |\n| Button icon | 18px | Pairs with button text |\n| Navigation | 20px | Sidebar and nav items |\n| Decorative \u002F empty state | 24px | Standalone icons, illustrations |\n\n### Icon Rules\n- Stroke weight: [X.X]px\n- Color: inherits text color by default. Use `currentColor`.\n- Never mix icon libraries. Pick one and use it everywhere.\n- Icons in buttons go left of text. Icons in nav go left of label.\n\n---\n\n## 7. Animation & Motion\n\n### Default Transition\n- Duration: [XXX]ms\n- Easing: [easing function — e.g., cubic-bezier(0.4, 0, 0.2, 1)]\n\n### What Animates\n- Button hover\u002Factive state changes\n- Dropdown open\u002Fclose\n- Modal enter\u002Fexit\n- Toast slide-in and fade-out\n- Focus ring appearance\n- Color and background-color transitions\n- Accordion expand\u002Fcollapse\n\n### What Does NOT Animate\n- Page layouts or grid shifts\n- Font size or weight changes\n- Border-radius changes\n- Box-shadow changes (except focus ring)\n- Scroll position (use native smooth scroll)\n\n### Reduced Motion\n```css\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n```\n\n- Always support `prefers-reduced-motion`\n- No decorative animations unless explicitly specified in this document\n\n---\n\n## 8. Component Specs (Summary)\n\nThis section specifies the brand-level token values for key components. For detailed component behavior, patterns, and implementation guidance, see the **ui-patterns** skill.\n\n### Key Component Tokens\n\nSpecify values for these components using the brand tokens from sections above:\n\n| Component | Key Properties to Specify |\n|-----------|--------------------------|\n| Button (primary, secondary, ghost, destructive) | Background, text color, border, height, padding, radius, font weight, hover\u002Factive\u002Ffocus\u002Fdisabled states |\n| Input | Background, border, text\u002Fplaceholder colors, height, padding, radius, focus ring, error state |\n| Card | Background, border, shadow, radius, padding, hover state (if clickable) |\n| Badge (default, success, warning, error, info) | Background, text color, padding, radius, font size\u002Fweight |\n| Toast (success, error, warning, info) | Background, text color, icon, border-left, shadow, auto-dismiss duration |\n| Modal | Backdrop color, background, radius, shadow, padding, max-width, animation |\n| Table | Header style, row height\u002Fborder\u002Fhover, cell padding, sort indicators |\n| Navigation | Style (sidebar\u002Ftopnav), background, dimensions, item states, mobile behavior |\n\n**State coverage requirements:**\n- **Interactive** (Button, Input, Nav items): default, hover, active, focus, disabled, loading, error\n- **Container** (Card, Modal): default, hover (if clickable), selected, disabled, loading (skeleton)\n- **Status** (Badge, Toast): variant-based — not interactive-state-based\n- **Data** (Table): row default, hover, selected, header, empty state, loading (skeleton)\n\n---\n\n## 9. Anti-Patterns\n\nThese are explicitly banned. Any AI tool reading this file should treat these as hard rules.\n\n1. **No gratuitous gradients** — Solid colors only unless explicitly specified above\n2. **No text shadows** — Never apply shadow to text elements\n3. **No stock photography** — Use icons, illustrations, or user-generated content instead\n4. **No AI-generated hero images** — They look generic and undermine trust\n5. **No decorative borders** — Borders serve structure (separation, containment), not decoration\n6. **Never mix icon libraries** — Use [specified library] exclusively\n7. **No color as sole indicator** — Always pair color with text, icon, or pattern (accessibility requirement)\n8. **No placeholder-only labels** — Every input needs a visible label above it; placeholders are supplemental\n9. **No pure black (#000000) backgrounds** — Use [neutral-950 hex] instead\n10. **No pure white (#FFFFFF) on dark backgrounds** — Use [neutral-50 hex] for softer contrast\n11. **No more than 2 font families** — Heading + body (+ mono if needed for code)\n12. **No font sizes below 12px** — Caption and overline can go to 12px but never smaller\n13. **No horizontal scrolling** — Content must fit viewport width at every breakpoint\n14. [Brand-specific anti-pattern based on chosen reference — e.g., \"No rounded corners over Xpx\" for a Stripe-like brand, or \"No dark mode\" for a Calm-like brand]\n15. [Brand-specific anti-pattern]\n16. [Brand-specific anti-pattern]\n\n---\n\n## 10. Accessibility (Enforced)\n\nThese are not suggestions. They are requirements. Every component and page must comply.\n\n### Color Contrast (WCAG 2.1 AA)\n- Normal text (\u003C 24px \u002F \u003C 18.66px bold): **4.5:1** minimum contrast ratio\n- Large text (>= 24px \u002F >= 18.66px bold): **3:1** minimum contrast ratio\n- UI components and graphical objects: **3:1** minimum\n\n### Contrast Ratios for This Brand\n| Pairing | Foreground | Background | Ratio | Pass? |\n|---------|------------|------------|-------|-------|\n| Body text on page bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Body text on card bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Primary button text on primary bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Secondary text on page bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Placeholder on input bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Link text on page bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Error text on error bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Success text on success bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n\n### Interactive Elements\n- **Focus indicators** on ALL interactive elements (buttons, links, inputs, selects, checkboxes)\n- Focus ring: 2px solid [primary hex], 2px offset — visible on both light and dark backgrounds\n- **Touch targets:** minimum 44x44px on all interactive elements\n- **Color not sole indicator:** Never use color alone to communicate state. Pair with icon, text, or pattern.\n\n### Forms\n- **Visible labels** above every input (not placeholder-only)\n- **Error messages** appear below the field with icon + text (not color alone)\n- **Required fields** marked with text \"(required)\" — not asterisk only\n- **Autocomplete** attributes on all standard fields (name, email, address, etc.)\n\n### Structure\n- **Heading hierarchy:** h1 > h2 > h3 > h4 — never skip levels\n- **Skip navigation link** as first focusable element on every page\n- **Landmark roles:** main, nav, footer, aside — used correctly\n- **Alt text:** All meaningful images have descriptive alt text. Decorative images use `alt=\"\"`\n- **Language attribute:** `\u003Chtml lang=\"en\">` (or appropriate language)\n\n---\n\n## 11. Responsive Design (Enforced)\n\n### Approach\n- **Mobile-first:** Base styles are mobile. Layer up with min-width media queries.\n\n### Breakpoints\n| Name | Value | Target |\n|------|-------|--------|\n| sm | XXXpx | Large phones, landscape |\n| md | XXXpx | Tablets |\n| lg | XXXpx | Laptops, small desktops |\n| xl | XXXXpx | Large desktops |\n\n### Fluid Typography\nUse `clamp()` for responsive type sizing:\n```css\n--font-display: clamp(X.Xrem, Xvw + Xrem, X.Xrem);\n--font-h1: clamp(X.Xrem, Xvw + Xrem, X.Xrem);\n--font-h2: clamp(X.Xrem, Xvw + Xrem, X.Xrem);\n--font-h3: clamp(X.Xrem, Xvw + Xrem, X.Xrem);\n--font-body-lg: clamp(X.Xrem, Xvw + Xrem, X.Xrem);\n```\n\n### Mobile Requirements\n- No horizontal scroll at any viewport width\n- Touch targets: 44px minimum on mobile\n- Input font size: 16px minimum (prevents iOS zoom)\n- Thumb-friendly zones for primary actions\n\n### Navigation Transformation\n- **Desktop (>= [lg breakpoint]):** [sidebar\u002Ftopnav as specified in component specs]\n- **Tablet ([md] to [lg]):** [collapsed sidebar \u002F topnav with overflow menu]\n- **Mobile (\u003C [md]):** [hamburger menu \u002F bottom tab bar \u002F drawer nav]\n\n### Images\n- `max-width: 100%` on all images\n- Use `srcset` and `sizes` for responsive images\n- Provide WebP with fallback\n- Lazy load below-the-fold images: `loading=\"lazy\"`\n\n### Container\n- Max width: [xl container max-width]\n- Auto side margins for centering\n- Horizontal padding: [space-4] on mobile, [space-6] on desktop\n````\n\n---\n\n## 12. Application Examples\n\nThese examples use actual values from the sections above — not placeholders. They show how the system comes together in real components.\n\nFor each example, provide both CSS custom properties AND Tailwind utility classes.\n\n### Example format (follow this pattern for all 8):\n\n**Primary + secondary button side by side:**\n```css\n\u002F* CSS Custom Properties *\u002F\n.btn-primary {\n  background-color: var(--color-primary);        \u002F* #XXXXXX from Section 2 *\u002F\n  color: var(--color-primary-text);               \u002F* #XXXXXX from Section 8 Button table *\u002F\n  padding: var(--space-3) var(--space-5);          \u002F* Xpx Xpx from Section 4 *\u002F\n  border-radius: var(--radius-default);            \u002F* Xpx from Section 5 *\u002F\n  font-weight: var(--font-weight-button);          \u002F* XXX from Section 8 *\u002F\n  font-size: var(--font-body);                     \u002F* 1rem from Section 3 *\u002F\n  height: Xpx;                                     \u002F* from Section 8 *\u002F\n  transition: background-color var(--transition-duration) var(--transition-easing);\n}\n.btn-primary:hover { background-color: #XXXXXX; }  \u002F* from Section 8 Hover row *\u002F\n.btn-primary:focus-visible {\n  outline: 2px solid #XXXXXX;                      \u002F* from Section 8 Focus row *\u002F\n  outline-offset: 2px;\n}\n```\n```html\n\u003C!-- Tailwind -->\n\u003Cdiv class=\"flex gap-[Xpx]\">\n  \u003Cbutton class=\"bg-[#XXXXXX] text-[#XXXXXX] px-[Xpx] py-[Xpx] rounded-[Xpx] font-[XXX] h-[Xpx] hover:bg-[#XXXXXX] focus-visible:outline-2 focus-visible:outline-[#XXXXXX] focus-visible:outline-offset-2\">\n    Primary Action\n  \u003C\u002Fbutton>\n  \u003Cbutton class=\"bg-[#XXXXXX] text-[#XXXXXX] border border-[#XXXXXX] px-[Xpx] py-[Xpx] rounded-[Xpx] font-[XXX] h-[Xpx] hover:bg-[#XXXXXX]\">\n    Secondary Action\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>\n```\n\n### Required examples (follow the format above for each):\n\n1. **Primary + secondary button side by side** — button variants with correct spacing\n2. **Card with heading, body text, and action button** — card, typography, and button integration\n3. **Form with label, input, helper text, and error state** — form field in both valid and error states\n4. **Page header with logo area, navigation, and CTA button** — nav and layout integration\n5. **Data table row with status badge and action buttons** — table, badge, and button together\n6. **Empty state with icon, message, and CTA** — empty state pattern with correct spacing\n7. **Error state (inline field error + full-page error)** — both error display variants\n8. **Modal with header, body content, and action buttons** — modal with correct padding and button placement\n\nEvery value in these examples must come from a specific section above. No invented values.\n\n---\n\n## Logo Guidance\n\n### MVP Logo\n- Use text-only for MVP. Your product name in your heading font at display weight is a logo.\n- Create a simple favicon: first letter of your product on your primary color background.\n- Use an SVG for crispness at all sizes.\n\n### Versions Needed\n| Version | Where It Goes | Notes |\n|---------|---------------|-------|\n| Full logo (text) | Header, login page | Your product name in heading font |\n| Icon only | Favicon, mobile app icon | Single letter or simple mark |\n| Dark background variant | Dark nav, footer | Ensure contrast |\n| Light background variant | Light pages, emails | Default version |\n\n### When to Invest in a Real Logo\n- After product-market fit (not before)\n- When you're embarrassed showing the text logo to potential customers\n- When you have budget for a designer ($500-2000 range)\n- Never let logo design block your launch\n\n---\n\n## What You Decide vs. What AI Implements\n\n| You Decide | AI Implements |\n|------------|---------------|\n| \"I want it to feel like Linear\" | Complete color, type, and spacing system |\n| \"Warmer, more approachable\" | Adjusts temperature, radius, type to humanist |\n| \"I hate that green\" | Swaps green for next-best semantic color |\n| \"Can the buttons be softer?\" | Increases radius, reduces weight, adjusts shadow |\n| \"I need dark mode\" | Full dark mode token mapping |\n| \"This is for enterprise\" | Trust-oriented palette, geometric type, high contrast |\n\n**Rule:** You describe the destination. AI drives.\n\n---\n\n## Common Mistakes\n\n| Mistake | What Happens | Fix |\n|---------|-------------|-----|\n| Skipping brand identity, letting AI choose | Every page looks different, AI fills gaps with random defaults | Generate BRAND-IDENTITY.md first |\n| Specifying colors but not states | Hover, active, disabled states get invented randomly | This template specifies every state |\n| \"Just make it look modern\" | AI defaults to generic SaaS — indistinguishable from templates | Pick reference brands instead |\n| Choosing colors you personally like | Your brand might clash with accessibility or audience expectations | React to proposals based on your audience, not personal taste |\n| Skipping dark mode decision | Some AI tools generate dark mode anyway, others don't | Explicitly opt in or out |\n| No anti-patterns list | AI adds gradients, shadows, and decorations \"to make it pop\" | Anti-patterns section bans the usual suspects |\n\n---\n\n## Quality Gate\n\nBefore writing the final `BRAND-IDENTITY.md`, verify every item:\n\n- [ ] All 12 sections fully populated — no \"TBD,\" no placeholders, no empty cells\n- [ ] Every color pairing listed in Section 10 passes WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text)\n- [ ] All component states specified (default, hover, active, focus, disabled, loading, error as applicable)\n- [ ] Anti-patterns list has 16+ items including at least 3 brand-specific entries\n- [ ] Fluid typography `clamp()` values produce correct sizes at 320px and 1440px viewport widths\n- [ ] Spacing scale is internally consistent (based on base unit, no arbitrary jumps)\n- [ ] Application examples in Section 12 use actual hex values, spacing, and font specs — not placeholders\n- [ ] Font loading strategy specified (`font-display: swap`, preload)\n- [ ] Dark mode either fully mapped (every token) or explicitly opted out with the exact phrase \"Dark mode not supported. Do not generate dark mode variants.\"\n- [ ] All accessibility requirements from Section 10 are present and filled in\n- [ ] Contrast ratio table has at least 8 pairings calculated\n- [ ] Touch targets specified as 44px minimum in both Section 10 and Section 11\n- [ ] Breakpoint values are consistent between Section 4 and Section 11\n- [ ] Icon library specified and \"never mix\" rule included\n- [ ] Reduced motion CSS included in Section 7\n\n---\n\n## Related Skills\n\nOnce the brand identity is generated, these skills use the tokens to build the actual UI:\n\n- **beautify** — How to apply these tokens beautifully (visual hierarchy, whitespace, composition)\n- **ui-patterns** — Component implementation and page layouts using these tokens\n- **motion-polish** — Animation timing and micro-interactions that match the brand personality\n- **design-review** — Quality gate to audit whether the UI correctly implements this identity\n","# Brand Identity Generator\n\nGenerate a complete `BRAND-IDENTITY.md` file for the user's project root — a single reference document that specifies every visual decision so AI tools never guess.\n\n**Two modes:**\n- **Guided discovery** (default) — Ask one question, propose a full identity, refine from reactions. The user never needs design vocabulary.\n- **Expert shortcut** — Detect when the user already provides specific design tokens (hex codes, font names, spacing values). Acknowledge what they've specified, fill gaps with smart defaults, skip discovery.\n\nThe output is a project-level reference file, not a skill. Once generated, any AI tool (Claude Code, Lovable, Cursor, Replit) can read `BRAND-IDENTITY.md` and build consistent UI without repeated instructions.\n\n> Logo guidance, decision frameworks, and common branding mistakes are included at the end.\n\n---\n\n## Discovery Process\n\n**Core principle: The user should never need to use design vocabulary. They react to your proposals. You do the heavy lifting.**\n\n### Default Path (Guided Discovery)\n\n**Step 1 — Ask ONE question:**\n\n> \"What are you building and who is it for?\"\n\nThat's it. One question. Do not ask about colors, fonts, or design preferences.\n\n**Step 2 — Select reference brands:**\n\nBased on their answer, select the 1-2 closest reference brands from the Reference Brand Library below. Use the \"Best for\" field to match.\n\n**Step 3 — Propose a complete identity in plain English:**\n\nWrite a human-readable recommendation. Talk about feeling, not specs. Example tone:\n\n> \"Your users are developers who'll have this open all day. Products that succeed in this space — like Linear and GitHub — use calm, minimal aesthetics because your users stare at this 8 hours a day. I'd go with a dark-compatible palette built around a single cool accent, tight spacing so information density is high, and geometric type that feels fast. Here's what I'd recommend and why...\"\n\nThen present a summary covering:\n- Overall feel in plain words\n- Which reference brands you're drawing from and why\n- Color direction (warm\u002Fcool, light\u002Fdark, accent character)\n- Typography character (not font names — \"clean and precise\" vs \"warm and readable\")\n- Density and spacing feel\n- Component personality (sharp and fast vs soft and friendly)\n\nDo NOT present the full 12-section spec yet. Keep it conversational.\n\n**Step 4 — User reacts:**\n\nThey might say things like:\n- \"Love it\"\n- \"Warmer\"\n- \"I hate green\"\n- \"More like Notion\"\n- \"Can we make it feel more premium?\"\n- \"Less corporate\"\n\nAdjust and re-propose. This loop usually takes 1-3 rounds.\n\n**Step 5 — Generate the full BRAND-IDENTITY.md:**\n\nOnce the user approves, generate the complete output using the Output Template below. Write it to the project root as `BRAND-IDENTITY.md`.\n\n### Expert Path\n\nDetect when the user provides specific design tokens — hex codes, font names, radius values, spacing scales. Signs of an expert:\n- They paste CSS custom properties or Tailwind config\n- They name specific fonts (\"Inter for headings, Source Sans for body\")\n- They provide hex codes\n- They reference specific component libraries\n\nWhen detected:\n1. Acknowledge exactly what they've specified\n2. Fill every gap with smart defaults that complement their choices\n3. Skip the discovery conversation\n4. Generate the full BRAND-IDENTITY.md\n5. Still apply ALL enforced best practices (accessibility, responsive, etc.)\n\n---\n\n## Reference Brand Library\n\n25 brands across 7 categories. Use the \"Feel\" to describe brands to users. Use the \"Design DNA\" internally to derive specific values.\n\n### Minimal \u002F Precise\n\n**Stripe**\n- Feel: Precise, confident, no wasted space\n- Best for: Financial tools, APIs, B2B platforms\n- Design DNA: Cool temperature | Moderate spacing | Moderate radius | Subtle shadows | Geometric type | Medium weight | High contrast\n\n**Linear**\n- Feel: Fast, quiet, stays out of your way\n- Best for: Dev tools, productivity apps, task management\n- Design DNA: Cool temperature | Moderate spacing | Moderate radius | Minimal shadows | Geometric type | Light weight | High contrast\n\n**Vercel**\n- Feel: Bold, dark, futuristic\n- Best for: Technical platforms, dev tools, infrastructure\n- Design DNA: Cool temperature | Moderate spacing | Sharp radius | No shadows | Geometric type | Heavy weight | High contrast\n\n**Superhuman**\n- Feel: Luxurious, dense, keyboard-driven\n- Best for: Premium productivity, power-user tools\n- Design DNA: Cool temperature | Dense spacing | Moderate radius | Subtle shadows | Geometric type | Medium weight | High contrast\n\n### Warm \u002F Approachable\n\n**Notion**\n- Feel: Warm, inviting, like a blank notebook\n- Best for: Creative tools, knowledge work, wikis\n- Design DNA: Warm temperature | Spacious spacing | Moderate radius | Subtle shadows | Humanist type | Light weight | Moderate contrast\n\n**Basecamp**\n- Feel: Honest, unpretentious, handmade feel\n- Best for: Small business tools, project management\n- Design DNA: Warm temperature | Spacious spacing | Rounded radius | No shadows | Humanist type | Medium weight | Moderate contrast\n\n**Mailchimp**\n- Feel: Quirky, fun, doesn't take itself too seriously\n- Best for: Small business marketing, email tools\n- Design DNA: Warm temperature | Spacious spacing | Rounded radius | Subtle shadows | Humanist type | Medium weight | Moderate contrast\n\n**Canva**\n- Feel: Bright, encouraging, \"you can do this\"\n- Best for: Creative tools for non-designers, visual editors\n- Design DNA: Warm temperature | Moderate spacing | Rounded radius | Subtle shadows | Geometric type | Medium weight | High contrast\n\n### Collaborative \u002F Social\n\n**Slack**\n- Feel: Friendly, colorful, energetic\n- Best for: Team communication, workplace tools\n- Design DNA: Warm temperature | Moderate spacing | Rounded radius | Subtle shadows | Humanist type | Medium weight | High contrast\n\n**Figma**\n- Feel: Playful, creative, multiplayer\n- Best for: Design collaboration, real-time editing\n- Design DNA: Neutral temperature | Moderate spacing | Rounded radius | Subtle shadows | Geometric type | Medium weight | High contrast\n\n**Loom**\n- Feel: Personal, casual, lightweight\n- Best for: Async video, screen recording, communication\n- Design DNA: Warm temperature | Spacious spacing | Rounded radius | Moderate shadows | Humanist type | Light weight | Moderate contrast\n\n**Discord**\n- Feel: Bold, youthful, expressive\n- Best for: Community platforms, social features, gaming\n- Design DNA: Cool temperature | Moderate spacing | Rounded radius | Moderate shadows | Geometric type | Heavy weight | High contrast\n\n### Trust \u002F Authority\n\n**Plaid**\n- Feel: Trustworthy, institutional, safe\n- Best for: Fintech infrastructure, banking integrations\n- Design DNA: Cool temperature | Moderate spacing | Moderate radius | No shadows | Geometric type | Medium weight | High contrast\n\n**Gusto**\n- Feel: Approachable authority, grown-up but not stuffy\n- Best for: HR, payroll, compliance tools\n- Design DNA: Warm temperature | Spacious spacing | Rounded radius | Subtle shadows | Humanist type | Medium weight | Moderate contrast\n\n**Mercury**\n- Feel: Sleek, premium, quietly confident\n- Best for: Business banking, financial dashboards\n- Design DNA: Cool temperature | Spacious spacing | Moderate radius | Subtle shadows | Geometric type | Light weight | High contrast\n\n**Wise**\n- Feel: Transparent, clean, no-nonsense\n- Best for: International finance, money transfer, transparent pricing\n- Design DNA: Cool temperature | Spacious spacing | Moderate radius | No shadows | Geometric type | Light weight | High contrast\n\n### Calm \u002F Wellness\n\n**Calm**\n- Feel: Soft, spacious, like a deep breath\n- Best for: Meditation, wellness, self-care\n- Design DNA: Warm temperature | Spacious spacing | Rounded radius | No shadows | Humanist type | Light weight | Low contrast\n\n**Headspace**\n- Feel: Warm, illustrated, gentle\n- Best for: Mental health, habit tracking, guided experiences\n- Design DNA: Warm temperature | Spacious spacing | Pill radius | No shadows | Geometric type | Medium weight | Low contrast\n\n**Apple Health**\n- Feel: Clinical but friendly, data-forward\n- Best for: Health, fitness tracking, medical\n- Design DNA: Neutral temperature | Moderate spacing | Rounded radius | No shadows | Geometric type | Light weight | Moderate contrast\n\n### Bold \u002F Consumer\n\n**Spotify**\n- Feel: Dark, vibrant, high-energy\n- Best for: Entertainment, media, content platforms\n- Design DNA: Cool temperature | Moderate spacing | Pill radius | No shadows | Geometric type | Heavy weight | High contrast\n\n**Duolingo**\n- Feel: Playful, cartoonish, addictive\n- Best for: Education, gamified experiences, learning\n- Design DNA: Warm temperature | Spacious spacing | Rounded radius | Moderate shadows | Geometric type | Heavy weight | High contrast\n\n**Robinhood**\n- Feel: Simple, green, \"investing is easy\"\n- Best for: Consumer fintech, simplified complex tools\n- Design DNA: Neutral temperature | Spacious spacing | Moderate radius | No shadows | Geometric type | Light weight | Moderate contrast\n\n### Data \u002F Dashboard\n\n**Datadog**\n- Feel: Dense, dark, information-rich\n- Best for: Monitoring, infrastructure, observability\n- Design DNA: Cool temperature | Dense spacing | Sharp radius | No shadows | Monospace-accented type | Medium weight | Moderate contrast\n\n**Mixpanel**\n- Feel: Clean data viz, chart-forward\n- Best for: Analytics, reporting, metrics dashboards\n- Design DNA: Cool temperature | Moderate spacing | Moderate radius | Subtle shadows | Geometric type | Light weight | Moderate contrast\n\n**Airtable**\n- Feel: Colorful, organized, approachable complexity\n- Best for: Structured data, spreadsheet-like tools, databases\n- Design DNA: Warm temperature | Moderate spacing | Rounded radius | Subtle shadows | Geometric type | Medium weight | High contrast\n\n---\n\n## Output Template\n\nThis is the exact structure for the generated `BRAND-IDENTITY.md`. Every field must be filled — no optional sections, no \"TBD,\" no placeholders. Every gap is an invitation for AI to fill with generic defaults. Leave no gaps.\n\n````markdown\n\n# Brand Identity — [Product Name]\n\n> Generated by brand-identity-generator. This file is the single source of truth for all visual decisions.\n> Every AI tool building UI for this project should read this file first.\n\n---\n\n## 1. Brand Context\n\n- **Product:** [What it is — one sentence]\n- **Audience:** [Who uses it, in what context, how often, on what devices]\n- **Feel:** [Plain-English feeling — 1-2 sentences]\n- **Reference brands:** [1-2 brands] — [what to take from each, specifically]\n\n---\n\n## 2. Colors\n\n### Primary\n| State | Hex | Usage |\n|-------|-----|-------|\n| Default | #XXXXXX | Primary buttons, links, active indicators |\n| Hover | #XXXXXX | Darkened\u002Flightened on hover |\n| Active | #XXXXXX | While being pressed |\n| Disabled | #XXXXXX | Disabled primary elements (pair with opacity 0.5) |\n\n### Secondary Accent\n| State | Hex | Usage |\n|-------|-----|-------|\n| Default | #XXXXXX | Secondary buttons, accent elements |\n| Hover | #XXXXXX | Hover state |\n| Active | #XXXXXX | Active\u002Fpressed state |\n| Disabled | #XXXXXX | Disabled state |\n\n### Neutral Scale\n| Shade | Hex | Usage |\n|-------|-----|-------|\n| 50 | #XXXXXX | Page backgrounds, subtle fills |\n| 100 | #XXXXXX | Card backgrounds, hover states on white |\n| 150 | #XXXXXX | Dividers on light backgrounds |\n| 200 | #XXXXXX | Input borders, secondary dividers |\n| 300 | #XXXXXX | Disabled text, placeholder text |\n| 400 | #XXXXXX | Icon default color, helper text |\n| 500 | #XXXXXX | Secondary text, labels |\n| 600 | #XXXXXX | Body text on light backgrounds |\n| 700 | #XXXXXX | Strong text, emphasis |\n| 800 | #XXXXXX | Headings |\n| 900 | #XXXXXX | Primary text, highest contrast |\n| 950 | #XXXXXX | Near-black, use sparingly |\n\n### Semantic Colors\n| Role | Text | Background | Border |\n|------|------|------------|--------|\n| Success | #XXXXXX | #XXXXXX | #XXXXXX |\n| Warning | #XXXXXX | #XXXXXX | #XXXXXX |\n| Error | #XXXXXX | #XXXXXX | #XXXXXX |\n| Info | #XXXXXX | #XXXXXX | #XXXXXX |\n\n### Surface Colors\n| Surface | Hex | Usage |\n|---------|-----|-------|\n| Page background | #XXXXXX | `\u003Cbody>` background |\n| Card background | #XXXXXX | Card, panel, popover backgrounds |\n| Elevated surface | #XXXXXX | Dropdowns, tooltips, floating elements |\n| Overlay backdrop | rgba(X,X,X,0.X) | Behind modals and drawers |\n\n### Dark Mode\n\n[Either provide a full mapping for dark mode:]\n\n| Light token | Dark equivalent |\n|-------------|-----------------|\n| Page background #XXXXXX | #XXXXXX |\n| Card background #XXXXXX | #XXXXXX |\n| Primary text #XXXXXX | #XXXXXX |\n| Secondary text #XXXXXX | #XXXXXX |\n| Border #XXXXXX | #XXXXXX |\n| Primary #XXXXXX | #XXXXXX (adjust for dark bg contrast) |\n[...complete mapping for every token above]\n\n[Or explicitly opt out:]\n\n> Dark mode not supported. Do not generate dark mode variants.\n\n---\n\n## 3. Typography\n\n### Font Stack\n- **Headings:** [Font Name], [fallback stack]\n- **Body:** [Font Name], [fallback stack]\n- **Monospace:** [Font Name], [fallback stack] *(if applicable — omit if no code\u002Fdata display)*\n\n### Type Scale\n| Role | Size (rem \u002F px) | Weight | Line Height | Letter Spacing |\n|------|-----------------|--------|-------------|----------------|\n| Display | X.Xrem \u002F XXpx | XXX | 1.1 | -0.02em |\n| H1 | X.Xrem \u002F XXpx | XXX | 1.2 | -0.01em |\n| H2 | X.Xrem \u002F XXpx | XXX | 1.25 | -0.005em |\n| H3 | X.Xrem \u002F XXpx | XXX | 1.3 | 0 |\n| H4 | X.Xrem \u002F XXpx | XXX | 1.35 | 0 |\n| Body Large | X.Xrem \u002F XXpx | XXX | 1.6 | 0 |\n| Body | 1rem \u002F 16px | 400 | 1.5 | 0 |\n| Body Small | X.Xrem \u002F XXpx | XXX | 1.5 | 0 |\n| Caption | X.Xrem \u002F XXpx | XXX | 1.4 | 0.01em |\n| Overline | X.Xrem \u002F XXpx | XXX | 1.4 | 0.05em |\n\n### Typography Rules\n- **Max line width:** 65ch for body text, 45ch for narrow columns\n- **Min body size:** 16px — never go smaller for body text\n- **Font loading:** Use `font-display: swap` and `\u003Clink rel=\"preload\">` for custom fonts\n\n---\n\n## 4. Spacing & Layout\n\n### Base Unit\n- Base: Xpx\n\n### Spacing Scale\n\nAll values are multiples of the base unit.\n\n| Token | Value | Common Use |\n|-------|-------|------------|\n| space-0 | 0px | No spacing |\n| space-1 | Xpx | Tight inline spacing, icon-to-text gap |\n| space-2 | Xpx | Input padding (vertical), badge padding |\n| space-3 | Xpx | Button padding (vertical), list item gap |\n| space-4 | Xpx | Card padding (internal), form field gap |\n| space-5 | Xpx | Group separation, field-to-field gap |\n| space-6 | Xpx | Section padding, card spacing |\n| space-8 | Xpx | Large section breaks |\n| space-10 | Xpx | Page-level vertical rhythm |\n| space-12 | Xpx | Major content separations |\n| space-16 | Xpx | Hero sections, page-level spacing |\n| space-20 | Xpx | Full-page section gaps |\n| space-24 | Xpx | Maximum spacing (hero to content) |\n\n### Component Padding\n| Component | Padding |\n|-----------|---------|\n| Button (sm) | Xpx Xpx |\n| Button (md) | Xpx Xpx |\n| Button (lg) | Xpx Xpx |\n| Input | Xpx Xpx |\n| Card | Xpx |\n| Modal | Xpx |\n| Section spacing | Xpx (between major page sections) |\n\n### Breakpoints\n| Name | Min Width | Columns | Gutter |\n|------|-----------|---------|--------|\n| sm | XXXpx | X | Xpx |\n| md | XXXpx | X | Xpx |\n| lg | XXXpx | XX | Xpx |\n| xl | XXXXpx | XX | Xpx |\n\n### Container\n| Breakpoint | Max Width |\n|------------|-----------|\n| sm | 100% (padding Xpx) |\n| md | XXXpx |\n| lg | XXXXpx |\n| xl | XXXXpx |\n\n---\n\n## 5. Shape & Elevation\n\n### Corner Radius Scale\n| Token | Value | Usage |\n|-------|-------|-------|\n| radius-none | 0px | Tables, full-bleed elements |\n| radius-sm | Xpx | Badges, chips, small elements |\n| radius-default | Xpx | Buttons, inputs |\n| radius-md | Xpx | Cards, dropdowns |\n| radius-lg | Xpx | Modals, large panels |\n| radius-xl | Xpx | Feature cards, hero sections |\n| radius-full | 9999px | Avatars, pill buttons, indicators |\n\n### Shadow Scale\n| Token | CSS Value | Usage |\n|-------|-----------|-------|\n| shadow-none | none | Flat elements, bordered cards |\n| shadow-xs | 0 1px 2px rgba(X,X,X,0.XX) | Subtle lift, input focus |\n| shadow-sm | 0 1px 3px rgba(X,X,X,0.XX), 0 1px 2px rgba(X,X,X,0.XX) | Cards, buttons |\n| shadow-md | 0 4px 6px rgba(X,X,X,0.XX), 0 2px 4px rgba(X,X,X,0.XX) | Dropdowns, popovers |\n| shadow-lg | 0 10px 15px rgba(X,X,X,0.XX), 0 4px 6px rgba(X,X,X,0.XX) | Modals, drawers |\n| shadow-xl | 0 20px 25px rgba(X,X,X,0.XX), 0 8px 10px rgba(X,X,X,0.XX) | Floating panels |\n\n### Elevation Rules\n- Use **shadow** for floating elements (dropdowns, modals, tooltips)\n- Use **border** for inline elements (cards, inputs, dividers)\n- Use **background change** for state changes (hover, selected)\n- Never combine shadow + heavy border on the same element\n\n### Borders\n| Token | Value |\n|-------|-------|\n| border-thin | 1px solid [neutral-200 hex] |\n| border-default | 1px solid [neutral-300 hex] |\n| border-heavy | 2px solid [neutral-400 hex] |\n\n---\n\n## 6. Iconography\n\n- **Library:** [Icon library name — e.g., Lucide, Heroicons, Phosphor]\n- **Style:** [Outline \u002F Solid \u002F Duotone] — use ONE style consistently\n\n### Icon Sizes\n| Context | Size | Notes |\n|---------|------|-------|\n| Inline (with text) | 16px | Aligns with body text |\n| Button icon | 18px | Pairs with button text |\n| Navigation | 20px | Sidebar and nav items |\n| Decorative \u002F empty state | 24px | Standalone icons, illustrations |\n\n### Icon Rules\n- Stroke weight: [X.X]px\n- Color: inherits text color by default. Use `currentColor`.\n- Never mix icon libraries. Pick one and use it everywhere.\n- Icons in buttons go left of text. Icons in nav go left of label.\n\n---\n\n## 7. Animation & Motion\n\n### Default Transition\n- Duration: [XXX]ms\n- Easing: [easing function — e.g., cubic-bezier(0.4, 0, 0.2, 1)]\n\n### What Animates\n- Button hover\u002Factive state changes\n- Dropdown open\u002Fclose\n- Modal enter\u002Fexit\n- Toast slide-in and fade-out\n- Focus ring appearance\n- Color and background-color transitions\n- Accordion expand\u002Fcollapse\n\n### What Does NOT Animate\n- Page layouts or grid shifts\n- Font size or weight changes\n- Border-radius changes\n- Box-shadow changes (except focus ring)\n- Scroll position (use native smooth scroll)\n\n### Reduced Motion\n```css\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n```\n\n- Always support `prefers-reduced-motion`\n- No decorative animations unless explicitly specified in this document\n\n---\n\n## 8. Component Specs (Summary)\n\nThis section specifies the brand-level token values for key components. For detailed component behavior, patterns, and implementation guidance, see the **ui-patterns** skill.\n\n### Key Component Tokens\n\nSpecify values for these components using the brand tokens from sections above:\n\n| Component | Key Properties to Specify |\n|-----------|--------------------------|\n| Button (primary, secondary, ghost, destructive) | Background, text color, border, height, padding, radius, font weight, hover\u002Factive\u002Ffocus\u002Fdisabled states |\n| Input | Background, border, text\u002Fplaceholder colors, height, padding, radius, focus ring, error state |\n| Card | Background, border, shadow, radius, padding, hover state (if clickable) |\n| Badge (default, success, warning, error, info) | Background, text color, padding, radius, font size\u002Fweight |\n| Toast (success, error, warning, info) | Background, text color, icon, border-left, shadow, auto-dismiss duration |\n| Modal | Backdrop color, background, radius, shadow, padding, max-width, animation |\n| Table | Header style, row height\u002Fborder\u002Fhover, cell padding, sort indicators |\n| Navigation | Style (sidebar\u002Ftopnav), background, dimensions, item states, mobile behavior |\n\n**State coverage requirements:**\n- **Interactive** (Button, Input, Nav items): default, hover, active, focus, disabled, loading, error\n- **Container** (Card, Modal): default, hover (if clickable), selected, disabled, loading (skeleton)\n- **Status** (Badge, Toast): variant-based — not interactive-state-based\n- **Data** (Table): row default, hover, selected, header, empty state, loading (skeleton)\n\n---\n\n## 9. Anti-Patterns\n\nThese are explicitly banned. Any AI tool reading this file should treat these as hard rules.\n\n1. **No gratuitous gradients** — Solid colors only unless explicitly specified above\n2. **No text shadows** — Never apply shadow to text elements\n3. **No stock photography** — Use icons, illustrations, or user-generated content instead\n4. **No AI-generated hero images** — They look generic and undermine trust\n5. **No decorative borders** — Borders serve structure (separation, containment), not decoration\n6. **Never mix icon libraries** — Use [specified library] exclusively\n7. **No color as sole indicator** — Always pair color with text, icon, or pattern (accessibility requirement)\n8. **No placeholder-only labels** — Every input needs a visible label above it; placeholders are supplemental\n9. **No pure black (#000000) backgrounds** — Use [neutral-950 hex] instead\n10. **No pure white (#FFFFFF) on dark backgrounds** — Use [neutral-50 hex] for softer contrast\n11. **No more than 2 font families** — Heading + body (+ mono if needed for code)\n12. **No font sizes below 12px** — Caption and overline can go to 12px but never smaller\n13. **No horizontal scrolling** — Content must fit viewport width at every breakpoint\n14. [Brand-specific anti-pattern based on chosen reference — e.g., \"No rounded corners over Xpx\" for a Stripe-like brand, or \"No dark mode\" for a Calm-like brand]\n15. [Brand-specific anti-pattern]\n16. [Brand-specific anti-pattern]\n\n---\n\n## 10. Accessibility (Enforced)\n\nThese are not suggestions. They are requirements. Every component and page must comply.\n\n### Color Contrast (WCAG 2.1 AA)\n- Normal text (\u003C 24px \u002F \u003C 18.66px bold): **4.5:1** minimum contrast ratio\n- Large text (>= 24px \u002F >= 18.66px bold): **3:1** minimum contrast ratio\n- UI components and graphical objects: **3:1** minimum\n\n### Contrast Ratios for This Brand\n| Pairing | Foreground | Background | Ratio | Pass? |\n|---------|------------|------------|-------|-------|\n| Body text on page bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Body text on card bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Primary button text on primary bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Secondary text on page bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Placeholder on input bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Link text on page bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Error text on error bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n| Success text on success bg | #XXXXXX | #XXXXXX | XX:1 | AA |\n\n### Interactive Elements\n- **Focus indicators** on ALL interactive elements (buttons, links, inputs, selects, checkboxes)\n- Focus ring: 2px solid [primary hex], 2px offset — visible on both light and dark backgrounds\n- **Touch targets:** minimum 44x44px on all interactive elements\n- **Color not sole indicator:** Never use color alone to communicate state. Pair with icon, text, or pattern.\n\n### Forms\n- **Visible labels** above every input (not placeholder-only)\n- **Error messages** appear below the field with icon + text (not color alone)\n- **Required fields** marked with text \"(required)\" — not asterisk only\n- **Autocomplete** attributes on all standard fields (name, email, address, etc.)\n\n### Structure\n- **Heading hierarchy:** h1 > h2 > h3 > h4 — never skip levels\n- **Skip navigation link** as first focusable element on every page\n- **Landmark roles:** main, nav, footer, aside — used correctly\n- **Alt text:** All meaningful images have descriptive alt text. Decorative images use `alt=\"\"`\n- **Language attribute:** `\u003Chtml lang=\"en\">` (or appropriate language)\n\n---\n\n## 11. Responsive Design (Enforced)\n\n### Approach\n- **Mobile-first:** Base styles are mobile. Layer up with min-width media queries.\n\n### Breakpoints\n| Name | Value | Target |\n|------|-------|--------|\n| sm | XXXpx | Large phones, landscape |\n| md | XXXpx | Tablets |\n| lg | XXXpx | Laptops, small desktops |\n| xl | XXXXpx | Large desktops |\n\n### Fluid Typography\nUse `clamp()` for responsive type sizing:\n```css\n--font-display: clamp(X.Xrem, Xvw + Xrem, X.Xrem);\n--font-h1: clamp(X.Xrem, Xvw + Xrem, X.Xrem);\n--font-h2: clamp(X.Xrem, Xvw + Xrem, X.Xrem);\n--font-h3: clamp(X.Xrem, Xvw + Xrem, X.Xrem);\n--font-body-lg: clamp(X.Xrem, Xvw + Xrem, X.Xrem);\n```\n\n### Mobile Requirements\n- No horizontal scroll at any viewport width\n- Touch targets: 44px minimum on mobile\n- Input font size: 16px minimum (prevents iOS zoom)\n- Thumb-friendly zones for primary actions\n\n### Navigation Transformation\n- **Desktop (>= [lg breakpoint]):** [sidebar\u002Ftopnav as specified in component specs]\n- **Tablet ([md] to [lg]):** [collapsed sidebar \u002F topnav with overflow menu]\n- **Mobile (\u003C [md]):** [hamburger menu \u002F bottom tab bar \u002F drawer nav]\n\n### Images\n- `max-width: 100%` on all images\n- Use `srcset` and `sizes` for responsive images\n- Provide WebP with fallback\n- Lazy load below-the-fold images: `loading=\"lazy\"`\n\n### Container\n- Max width: [xl container max-width]\n- Auto side margins for centering\n- Horizontal padding: [space-4] on mobile, [space-6] on desktop\n````\n\n---\n\n## 12. Application Examples\n\nThese examples use actual values from the sections above — not placeholders. They show how the system comes together in real components.\n\nFor each example, provide both CSS custom properties AND Tailwind utility classes.\n\n### Example format (follow this pattern for all 8):\n\n**Primary + secondary button side by side:**\n```css\n\u002F* CSS Custom Properties *\u002F\n.btn-primary {\n  background-color: var(--color-primary);        \u002F* #XXXXXX from Section 2 *\u002F\n  color: var(--color-primary-text);               \u002F* #XXXXXX from Section 8 Button table *\u002F\n  padding: var(--space-3) var(--space-5);          \u002F* Xpx Xpx from Section 4 *\u002F\n  border-radius: var(--radius-default);            \u002F* Xpx from Section 5 *\u002F\n  font-weight: var(--font-weight-button);          \u002F* XXX from Section 8 *\u002F\n  font-size: var(--font-body);                     \u002F* 1rem from Section 3 *\u002F\n  height: Xpx;                                     \u002F* from Section 8 *\u002F\n  transition: background-color var(--transition-duration) var(--transition-easing);\n}\n.btn-primary:hover { background-color: #XXXXXX; }  \u002F* from Section 8 Hover row *\u002F\n.btn-primary:focus-visible {\n  outline: 2px solid #XXXXXX;                      \u002F* from Section 8 Focus row *\u002F\n  outline-offset: 2px;\n}\n```\n```html\n\u003C!-- Tailwind -->\n\u003Cdiv class=\"flex gap-[Xpx]\">\n  \u003Cbutton class=\"bg-[#XXXXXX] text-[#XXXXXX] px-[Xpx] py-[Xpx] rounded-[Xpx] font-[XXX] h-[Xpx] hover:bg-[#XXXXXX] focus-visible:outline-2 focus-visible:outline-[#XXXXXX] focus-visible:outline-offset-2\">\n    Primary Action\n  \u003C\u002Fbutton>\n  \u003Cbutton class=\"bg-[#XXXXXX] text-[#XXXXXX] border border-[#XXXXXX] px-[Xpx] py-[Xpx] rounded-[Xpx] font-[XXX] h-[Xpx] hover:bg-[#XXXXXX]\">\n    Secondary Action\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>\n```\n\n### Required examples (follow the format above for each):\n\n1. **Primary + secondary button side by side** — button variants with correct spacing\n2. **Card with heading, body text, and action button** — card, typography, and button integration\n3. **Form with label, input, helper text, and error state** — form field in both valid and error states\n4. **Page header with logo area, navigation, and CTA button** — nav and layout integration\n5. **Data table row with status badge and action buttons** — table, badge, and button together\n6. **Empty state with icon, message, and CTA** — empty state pattern with correct spacing\n7. **Error state (inline field error + full-page error)** — both error display variants\n8. **Modal with header, body content, and action buttons** — modal with correct padding and button placement\n\nEvery value in these examples must come from a specific section above. No invented values.\n\n---\n\n## Logo Guidance\n\n### MVP Logo\n- Use text-only for MVP. Your product name in your heading font at display weight is a logo.\n- Create a simple favicon: first letter of your product on your primary color background.\n- Use an SVG for crispness at all sizes.\n\n### Versions Needed\n| Version | Where It Goes | Notes |\n|---------|---------------|-------|\n| Full logo (text) | Header, login page | Your product name in heading font |\n| Icon only | Favicon, mobile app icon | Single letter or simple mark |\n| Dark background variant | Dark nav, footer | Ensure contrast |\n| Light background variant | Light pages, emails | Default version |\n\n### When to Invest in a Real Logo\n- After product-market fit (not before)\n- When you're embarrassed showing the text logo to potential customers\n- When you have budget for a designer ($500-2000 range)\n- Never let logo design block your launch\n\n---\n\n## What You Decide vs. What AI Implements\n\n| You Decide | AI Implements |\n|------------|---------------|\n| \"I want it to feel like Linear\" | Complete color, type, and spacing system |\n| \"Warmer, more approachable\" | Adjusts temperature, radius, type to humanist |\n| \"I hate that green\" | Swaps green for next-best semantic color |\n| \"Can the buttons be softer?\" | Increases radius, reduces weight, adjusts shadow |\n| \"I need dark mode\" | Full dark mode token mapping |\n| \"This is for enterprise\" | Trust-oriented palette, geometric type, high contrast |\n\n**Rule:** You describe the destination. AI drives.\n\n---\n\n## Common Mistakes\n\n| Mistake | What Happens | Fix |\n|---------|-------------|-----|\n| Skipping brand identity, letting AI choose | Every page looks different, AI fills gaps with random defaults | Generate BRAND-IDENTITY.md first |\n| Specifying colors but not states | Hover, active, disabled states get invented randomly | This template specifies every state |\n| \"Just make it look modern\" | AI defaults to generic SaaS — indistinguishable from templates | Pick reference brands instead |\n| Choosing colors you personally like | Your brand might clash with accessibility or audience expectations | React to proposals based on your audience, not personal taste |\n| Skipping dark mode decision | Some AI tools generate dark mode anyway, others don't | Explicitly opt in or out |\n| No anti-patterns list | AI adds gradients, shadows, and decorations \"to make it pop\" | Anti-patterns section bans the usual suspects |\n\n---\n\n## Quality Gate\n\nBefore writing the final `BRAND-IDENTITY.md`, verify every item:\n\n- [ ] All 12 sections fully populated — no \"TBD,\" no placeholders, no empty cells\n- [ ] Every color pairing listed in Section 10 passes WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text)\n- [ ] All component states specified (default, hover, active, focus, disabled, loading, error as applicable)\n- [ ] Anti-patterns list has 16+ items including at least 3 brand-specific entries\n- [ ] Fluid typography `clamp()` values produce correct sizes at 320px and 1440px viewport widths\n- [ ] Spacing scale is internally consistent (based on base unit, no arbitrary jumps)\n- [ ] Application examples in Section 12 use actual hex values, spacing, and font specs — not placeholders\n- [ ] Font loading strategy specified (`font-display: swap`, preload)\n- [ ] Dark mode either fully mapped (every token) or explicitly opted out with the exact phrase \"Dark mode not supported. Do not generate dark mode variants.\"\n- [ ] All accessibility requirements from Section 10 are present and filled in\n- [ ] Contrast ratio table has at least 8 pairings calculated\n- [ ] Touch targets specified as 44px minimum in both Section 10 and Section 11\n- [ ] Breakpoint values are consistent between Section 4 and Section 11\n- [ ] Icon library specified and \"never mix\" rule included\n- [ ] Reduced motion CSS included in Section 7\n\n---\n\n## Related Skills\n\nOnce the brand identity is generated, these skills use the tokens to build the actual UI:\n\n- **beautify** — How to apply these tokens beautifully (visual hierarchy, whitespace, composition)\n- **ui-patterns** — Component implementation and page layouts using these tokens\n- **motion-polish** — Animation timing and micro-interactions that match the brand personality\n- **design-review** — Quality gate to audit whether the UI correctly implements this identity\n",{"name":5,"description":7},"main","d8518247cb8ab8b2dac57a6be33543ffd23b97c5","design-branding\u002Fwhawkinsiv\u002Fbrand-identity-generator",0,"https:\u002F\u002Fgithub.com\u002Fmattonweb\u002Fai-assistant-foundry","https:\u002F\u002Fgithub.com\u002Fmattonweb","2026-05-29 08:42:23",{"source":8,"skillName":5,"commands":62,"prompt":72,"zipAvailable":73},[63,66,69],{"tool":64,"command":65},"npx","npx skills add mattonweb\u002Fai-assistant-foundry --skill brand-identity-generator",{"tool":67,"command":68},"bunx","bunx skills add mattonweb\u002Fai-assistant-foundry --skill brand-identity-generator",{"tool":70,"command":71},"pnpm","pnpm dlx skills add mattonweb\u002Fai-assistant-foundry --skill brand-identity-generator","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmattonweb\u002Fai-assistant-foundry\u002Fblob\u002Fmain\u002Fdesign-branding\u002Fwhawkinsiv\u002Fbrand-identity-generator\u002FSKILL.md",true,[],[76,107,120,140,161,186],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":88,"publishedAt":49},"01M6P02DENRHN6KVGYC55FKASJ","writing-clearly-and-concisely","Use when writing prose humans will read—documentation, commit messages, error messages, explanations, reports, or UI text. Applies Strunk's timeless rules for clearer, stronger, more professional writing.","https:\u002F\u002Fgithub.com\u002Fmattonweb\u002Fai-assistant-foundry\u002Fblob\u002Fmain\u002Fwrite-technical\u002Fsoftaworks\u002Fwriting-clearly-and-concisely\u002FSKILL.md",[82,85],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":86,"categoryName":87,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000036","内容创作者",[89,90,91,92,35,93,94,95,96,97,98,44,99,100,101,102,103,104,105,106],"writing clearly and concisely","writing","concisely","text","more","timeless","error","professional","prose","reports","read","Rules","commit messages","messages","error messages","ui","documentation","commit",{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":113,"publishedAt":49},"01M6P0286HZ8RWMFCCPC8HF7SC","crafting-effective-readmes","Use when writing or improving README files. Not all READMEs are the same — provides templates and guidance matched to your audience and project type.","https:\u002F\u002Fgithub.com\u002Fmattonweb\u002Fai-assistant-foundry\u002Fblob\u002Fmain\u002Fwrite-technical\u002Fsoftaworks\u002Fcrafting-effective-readmes\u002FSKILL.md",[],[114,115,90,116,117,44,39,118,119],"crafting effective readmes","README","templates","type","guidance","files",{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":129,"publishedAt":49},"01M6P025A41BBTPWVTZ3GFQVG6","wiki-architect","You are a documentation architect that produces structured wiki catalogues and onboarding guides from codebases.","https:\u002F\u002Fgithub.com\u002Fmattonweb\u002Fai-assistant-foundry\u002Fblob\u002Fmain\u002Fwrite-technical\u002Fsickn33\u002Fwiki-architect\u002FSKILL.md",[126],{"categoryNo":127,"categoryName":128,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000038","人力资源",[130,131,132,133,134,135,136,137,138,139,105],"wiki","architect","wiki architect","unknown","you","documentation architect","guides","structured","community","onboarding",{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":144,"categories":145,"keywords":146,"publishedAt":49},"01M6P01NSKPXP77NWB4K0PXRK5","readme","You are an expert technical writer creating comprehensive project documentation. Your goal is to write a README.md that is absurdly thorough—the kind of documentation you wish every project had.","https:\u002F\u002Fgithub.com\u002Fmattonweb\u002Fai-assistant-foundry\u002Fblob\u002Fmain\u002Fwrite-technical\u002Fsickn33\u002Freadme\u002FSKILL.md",[],[115,147,148,149,134,150,151,39,152,153,54,154,155,156,157,158,105,159,160],"project documentation","tree","kind","expert","github","wish","writer","goal","write","technical writer","technical","https","write a readme","safe",{"skillNo":162,"name":163,"nameZh":6,"description":164,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":167,"publishedAt":49},"01M6P01GP0NEN8KT3A3SA6ZFVE","ubiquitous-language","Extract a DDD-style ubiquitous language glossary from the current conversation, flagging ambiguities and proposing canonical terms. Saves to UBIQUITOUS_LANGUAGE.md. Use when user wants to define domain terms, build a glossary, harden terminology, create a ubiquitous language, or mentions \"domain model\" or \"DDD\".","https:\u002F\u002Fgithub.com\u002Fmattonweb\u002Fai-assistant-foundry\u002Fblob\u002Fmain\u002Fwrite-technical\u002Fmattpocock\u002Fubiquitous-language\u002FSKILL.md",[],[168,169,44,170,171,172,173,174,175,47,176,177,178,179,180,181,182,183,184,185],"ubiquitous language","language","extract","user","glossary","model","terms","ddd","build","true","canonical","style","define","harden","domain model","domain","terminology","conversation",{"skillNo":187,"name":188,"nameZh":6,"description":189,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":190,"categories":191,"keywords":194,"publishedAt":49},"01M6P01BJBP9XP4TDRT7QD1ZVA","technical-writing-style","Enforce clear, direct writing in software development documents including OKRs, PRDs, tech specs, architecture decision records (ADRs), git commit messages, PR descriptions, READMEs, changelogs, runbooks, incident postmortems, API docs, and onboarding guides. Trigger whenever a user asks to write, edit, revise, or review any of these document types. Also trigger when the user says writing \"sounds like AI\", \"feels robotic\", \"needs polish\", or asks to \"make it sound more natural\" in the context of technical or professional prose. Do not trigger for fiction, poetry, creative writing, academic papers, or legal documents unless the user explicitly asks for a more natural tone.","https:\u002F\u002Fgithub.com\u002Fmattonweb\u002Fai-assistant-foundry\u002Fblob\u002Fmain\u002Fwrite-technical\u002Fmattnebr\u002Ftechnical-writing-style\u002FSKILL.md",[192,193],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":86,"categoryName":87,"taxonomyType":26,"taxonomyTypeDesc":27},[195,196,179,157,90,197,96,198,199,200,201,202,203,204,205,102,206,207,106,208],"writing style","technical writing style","technical writing","papers","types","runbooks","software development","incident","Poetry","decision","api","documents","architecture","review"]