{"id":"4be9dba4-6fc9-4ef9-a7f7-5166650d619b","shortId":"LB4Zjn","kind":"skill","title":"designbrief","tagline":"A library of UI design direction files that provide style guardrails for building tasteful, consistent interfaces. Use when building any UI — select a style or let the AI recommend one based on the project context.","description":"# designbrief\n\nA library of rich design direction files — one per UI style — that provide guardrails for building tasteful, consistent interfaces without prescribing exact values.\n\n## How It Works\n\nEach style is a standalone markdown file in `styles/` that defines the **design DNA** of a visual direction: typography families, color theory, spacing philosophy, border/shadow characteristics, layout principles, component behavior, and implementation guidance.\n\nThese are **guardrails, not templates**. They define *what kind of* font, color, spacing — not the exact values. The developer (or AI) makes specific choices within the style's constraints.\n\n## When This Skill Activates\n\nUse this skill when the user:\n- Asks to build any UI, page, component, or app\n- Mentions a specific design style by name\n- Asks for style recommendations or comparisons\n- Wants to change the visual direction of an existing project\n\n## Workflow\n\n### 1. Determine the Style\n\n**If the user specifies a style** (e.g., \"use Bauhaus\", \"make it glassmorphic\"):\n- Read the corresponding file from `styles/{style-name}.md`\n- Apply its guardrails to all UI decisions\n\n**If the user does NOT specify a style**:\n- Read `styles/_index.md` for the full catalog with mood/industry tags\n- Ask the user what mood, audience, and industry they're targeting\n- Recommend 2-3 styles with brief reasoning\n- Let them choose, then load the full style file\n\n### 2. Apply the Style\n\nWhen generating UI code, use the style file as your design system:\n\n- **Typography**: Choose specific fonts from within the style's recommended families/characteristics\n- **Colors**: Build a palette that follows the style's color theory and contrast rules\n- **Spacing**: Apply the style's spacing philosophy (generous vs. tight, rhythmic vs. uniform)\n- **Components**: Shape buttons, cards, inputs, navbars according to the style's component guidance\n- **Layout**: Follow the style's grid and composition principles\n- **Effects**: Apply borders, shadows, blur, gradients per the style's visual depth rules\n- **Dark/Light Mode**: Check the style's Dark Mode & Light Mode section. If the user hasn't specified, use the style's recommended primary mode. If they ask for both, implement the style's palette adaptation for each.\n- **Responsive**: Apply the style's Responsive & Mobile guidance. Ensure touch targets (44px minimum), compress spacing and typography for mobile, and handle any performance concerns (e.g., heavy blur on mobile devices).\n- **Content & Voice**: Match headline tone, body copy style, CTA language, and microcopy personality to the style's Content & Voice section.\n- **Icons & Illustrations**: Choose icon sets and illustration approaches that match the style's guidance.\n- **Accessibility**: Verify contrast ratios per the style's Accessibility section. Implement style-appropriate focus states. Add `prefers-reduced-motion` fallbacks for animations.\n\n### 3. Teach Along the Way\n\nWhen making a design decision, briefly explain *why* (one sentence) to help the user build taste over time. For example: \"Using a warm off-white (#FAF8F5) instead of pure white because Japandi draws from natural materials — pure white feels clinical, not crafted.\" This is optional but encouraged, especially when the user is learning.\n\n### 4. Stay Consistent\n\nOnce a style is selected for a project:\n- Reference the style file for every new component or page\n- Do not mix styles unless explicitly asked to create a hybrid\n- When in doubt about a design decision, re-read the relevant section of the style file\n- The style's \"Don'ts\" section is as important as its \"Do's\"\n- Ensure dark mode, responsive behavior, content tone, and accessibility remain consistent across all pages\n\n## File Structure\n\n```\nstyles/\n├── _index.md              # Catalog of all styles with tags, mood, best-for\n├── bauhaus.md             # Each style is a rich guardrail document\n├── glassmorphism.md\n├── neubrutalism.md\n├── flat-design.md\n├── ... (21 styles total)\n```\n\n## Style File Anatomy\n\nEvery style file follows this structure:\n\n0. **Non-Negotiables** — The 3 defining characteristics that MUST be present for the style to be recognizable\n1. **Identity** — Name, origin, mood keywords, best-for industries\n2. **Typography** — Font families/characteristics, scale philosophy, weight usage\n3. **Color** — Palette theory, contrast approach, accent strategy\n4. **Spacing & Layout** — Grid system, whitespace philosophy, rhythm, composition\n5. **Borders & Shadows** — Radius, depth, elevation, visual effects\n6. **Components** — How buttons, cards, inputs, navbars, modals should look and feel\n7. **Motion** — Animation philosophy, transition characteristics\n8. **Dark Mode & Light Mode** — Palette adaptation, mode preference, implementation\n9. **Responsive & Mobile** — Typography scaling, spacing compression, layout collapse, touch targets, performance\n10. **Content & Voice** — Headline tone, body copy style, CTA language, microcopy personality\n11. **Icons & Illustrations** — Icon style, illustration approach, photography direction\n12. **Accessibility** — Contrast verification, focus states, motion sensitivity, screen reader considerations\n13. **Do's and Don'ts** — Critical guardrails to maintain style integrity\n14. **Implementation Hints** — Tailwind classes, CSS custom properties, token ranges\n\n## Important Notes\n\n- These files define *direction*, not *specification*. Two projects using the same style should look related but not identical.\n- Always prioritize readability and accessibility over style purity. If a style's aesthetic conflicts with usability, usability wins. Check the style's Accessibility section for known risks and remediation.\n- The user can override any guardrail — the style file is a starting point, not a cage.\n- When building for mobile, follow the style's Responsive & Mobile section — adapt the principles to touch targets and smaller viewports rather than abandoning them.\n- Match the content tone to the visual style. A Neubrutalism site with corporate copy feels wrong; a Corporate Modern site with slang feels unprofessional. The Content & Voice section guides this.\n- When teaching: good design is not arbitrary. Every rule exists for a reason — the \"why\" matters more than the \"what.\" Help users understand the reasoning behind choices so they build taste over time.","tags":["designbrief","heiberg-industries","agent-skills","claude","copilot","cursor","design","llm","tailwind"],"capabilities":["skill","source-heiberg-industries","skill-designbrief","topic-agent-skills","topic-claude","topic-copilot","topic-cursor","topic-design","topic-llm","topic-tailwind"],"categories":["designbrief"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/Heiberg-Industries/designbrief","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add Heiberg-Industries/designbrief","source_repo":"https://github.com/Heiberg-Industries/designbrief","install_from":"skills.sh"}},"qualityScore":"0.455","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 10 github stars · SKILL.md body (6,338 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-23T13:04:26.920Z","embedding":null,"createdAt":"2026-04-23T13:04:26.920Z","updatedAt":"2026-04-23T13:04:26.920Z","lastSeenAt":"2026-04-23T13:04:26.920Z","tsv":"'-3':232 '0':632 '1':169,650 '10':733 '11':745 '12':754 '13':765 '14':777 '2':231,246,660 '21':620 '3':460,637,668 '4':519,676 '44px':383 '5':685 '6':693 '7':705 '8':711 '9':721 'abandon':874 'accent':674 'access':436,444,589,755,811,829 'accord':306 'across':592 'activ':129 'adapt':369,717,863 'add':452 'aesthet':819 'ai':29,117 'along':462 'alway':807 'anatomi':625 'anim':459,707 'app':144 'appli':195,247,288,323,373 'approach':429,673,751 'appropri':449 'arbitrari':912 'ask':136,152,219,361,546 'audienc':224 'base':32 'bauhaus':181 'bauhaus.md':609 'behavior':93,585 'behind':931 'best':607,657 'best-for':606,656 'blur':326,398 'bodi':407,738 'border':324,686 'border/shadow':88 'brief':235 'briefli':470 'build':14,20,53,138,274,479,853,935 'button':302,696 'cage':851 'card':303,697 'catalog':215,599 'chang':160 'characterist':89,639,710 'check':337,825 'choic':120,932 'choos':239,263,424 'class':781 'clinic':505 'code':253 'collaps':729 'color':84,108,273,282,669 'comparison':157 'compon':92,142,300,311,537,694 'composit':320,684 'compress':385,727 'concern':395 'conflict':820 'consider':764 'consist':16,55,521,591 'constraint':125 'content':402,419,586,734,878,901 'context':36 'contrast':285,438,672,756 'copi':408,739,889 'corpor':888,893 'correspond':187 'craft':507 'creat':548 'critic':771 'css':782 'cta':410,741 'custom':783 'dark':341,582,712 'dark/light':335 'decis':201,469,557 'defin':74,103,638,791 'depth':333,689 'design':6,42,76,148,260,468,556,909 'designbrief':1,37 'determin':170 'develop':115 'devic':401 'direct':7,43,81,163,753,792 'dna':77 'document':616 'doubt':553 'draw':498 'e.g':179,396 'effect':322,692 'elev':690 'encourag':512 'ensur':380,581 'especi':513 'everi':535,626,913 'exact':59,112 'exampl':484 'exist':166,915 'explain':471 'explicit':545 'faf8f5':491 'fallback':457 'famili':83 'families/characteristics':272,663 'feel':504,704,890,898 'file':8,44,70,188,245,257,533,567,595,624,628,790,844 'flat-design.md':619 'focus':450,758 'follow':278,314,629,856 'font':107,265,662 'full':214,243 'generat':251 'generous':294 'glassmorph':184 'glassmorphism.md':617 'good':908 'gradient':327 'grid':318,679 'guardrail':12,51,99,197,615,772,841 'guid':904 'guidanc':96,312,379,435 'handl':392 'hasn':349 'headlin':405,736 'heavi':397 'help':476,926 'hint':779 'hybrid':550 'icon':422,425,746,748 'ident':651,806 'illustr':423,428,747,750 'implement':95,364,446,720,778 'import':576,787 'index.md':598 'industri':226,659 'input':304,698 'instead':492 'integr':776 'interfac':17,56 'japandi':497 'keyword':655 'kind':105 'known':832 'languag':411,742 'layout':90,313,678,728 'learn':518 'let':27,237 'librari':3,39 'light':343,714 'load':241 'look':702,802 'maintain':774 'make':118,182,466 'markdown':69 'match':404,431,876 'materi':501 'matter':921 'md':194 'mention':145 'microcopi':413,743 'minimum':384 'mix':542 'mobil':378,390,400,723,855,861 'modal':700 'mode':336,342,344,358,583,713,715,718 'modern':894 'mood':223,605,654 'mood/industry':217 'motion':456,706,760 'must':641 'name':151,193,652 'natur':500 'navbar':305,699 'negoti':635 'neubrut':885 'neubrutalism.md':618 'new':536 'non':634 'non-negoti':633 'note':788 'off-whit':488 'one':31,45,473 'option':510 'origin':653 'overrid':839 'page':141,539,594 'palett':276,368,670,716 'per':46,328,440 'perform':394,732 'person':414,744 'philosophi':87,293,665,682,708 'photographi':752 'point':848 'prefer':454,719 'prefers-reduced-mot':453 'prescrib':58 'present':643 'primari':357 'principl':91,321,865 'priorit':808 'project':35,167,529,796 'properti':784 'provid':10,50 'pure':494,502 'puriti':814 'radius':688 'rang':786 'rather':872 'ratio':439 're':228,559 're-read':558 'read':185,210,560 'readabl':809 'reader':763 'reason':236,918,930 'recogniz':649 'recommend':30,155,230,271,356 'reduc':455 'refer':530 'relat':803 'relev':562 'remain':590 'remedi':835 'respons':372,377,584,722,860 'rhythm':683 'rhythmic':297 'rich':41,614 'risk':833 'rule':286,334,914 'scale':664,725 'screen':762 'section':345,421,445,563,573,830,862,903 'select':23,526 'sensit':761 'sentenc':474 'set':426 'shadow':325,687 'shape':301 'site':886,895 'skill':128,132 'skill-designbrief' 'slang':897 'smaller':870 'source-heiberg-industries' 'space':86,109,287,292,386,677,726 'specif':119,147,264,794 'specifi':176,207,351 'standalon':68 'start':847 'state':451,759 'stay':520 'strategi':675 'structur':596,631 'style':11,25,48,65,72,123,149,154,172,178,190,192,209,233,244,249,256,269,280,290,309,316,330,339,354,366,375,409,417,433,442,448,524,532,543,566,569,597,602,611,621,623,627,646,740,749,775,800,813,817,827,843,858,883 'style-appropri':447 'style-nam':191 'styles/_index.md':211 'system':261,680 'tag':218,604 'tailwind':780 'target':229,382,731,868 'tast':15,54,480,936 'teach':461,907 'templat':101 'theori':85,283,671 'tight':296 'time':482,938 'token':785 'tone':406,587,737,879 'topic-agent-skills' 'topic-claude' 'topic-copilot' 'topic-cursor' 'topic-design' 'topic-llm' 'topic-tailwind' 'total':622 'touch':381,730,867 'transit':709 'ts':572,770 'two':795 'typographi':82,262,388,661,724 'ui':5,22,47,140,200,252 'understand':928 'uniform':299 'unless':544 'unprofession':899 'usabl':822,823 'usag':667 'use':18,130,180,254,352,485,797 'user':135,175,204,221,348,478,516,837,927 'valu':60,113 'verif':757 'verifi':437 'viewport':871 'visual':80,162,332,691,882 'voic':403,420,735,902 'vs':295,298 'want':158 'warm':487 'way':464 'weight':666 'white':490,495,503 'whitespac':681 'win':824 'within':121,267 'without':57 'work':63 'workflow':168 'wrong':891","prices":[{"id":"d1c0e80b-26ba-48f3-b7e0-71f186faa9bb","listingId":"4be9dba4-6fc9-4ef9-a7f7-5166650d619b","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"Heiberg-Industries","category":"designbrief","install_from":"skills.sh"},"createdAt":"2026-04-23T13:04:26.920Z"}],"sources":[{"listingId":"4be9dba4-6fc9-4ef9-a7f7-5166650d619b","source":"github","sourceId":"Heiberg-Industries/designbrief","sourceUrl":"https://github.com/Heiberg-Industries/designbrief","isPrimary":false,"firstSeenAt":"2026-04-23T13:04:26.920Z","lastSeenAt":"2026-04-23T13:04:26.920Z"}],"details":{"listingId":"4be9dba4-6fc9-4ef9-a7f7-5166650d619b","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"Heiberg-Industries","slug":"designbrief","github":{"repo":"Heiberg-Industries/designbrief","stars":10,"topics":["agent-skills","ai","claude","copilot","cursor","design","llm","tailwind","ui"],"license":"mit","html_url":"https://github.com/Heiberg-Industries/designbrief","pushed_at":"2026-02-20T14:26:46Z","description":"Design guardrails, not templates. A library of UI design direction files that give LLMs (and humans) the context to build tasteful, consistent interfaces in any style.","skill_md_sha":"47f3eae211fe4dd0031ad11ab99714348b69cd96","skill_md_path":"SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/Heiberg-Industries/designbrief"},"layout":"root","source":"github","category":"designbrief","frontmatter":{"name":"designbrief","description":"A library of UI design direction files that provide style guardrails for building tasteful, consistent interfaces. Use when building any UI — select a style or let the AI recommend one based on the project context."},"skills_sh_url":"https://skills.sh/Heiberg-Industries/designbrief"},"updatedAt":"2026-04-23T13:04:26.920Z"}}