{"id":"a2418e7e-f6f4-4944-9841-953b53dddd12","shortId":"LtedkP","kind":"skill","title":"friendly","tagline":"Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Friendly Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Friendly.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nFriendly UI/UX design focuses on creating approachable, intuitive, and engaging experiences through, rounded elements, ample whitespace, and, soft, pastel, color, palettes\n\n## Style Foundations\n- Visual style: bold, playful, premium\n- Typography scale: 14/16/18/24/32/40 | Fonts: primary=Noto Serif Display, display=Noto Serif Display, mono=Space Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, secondary, neutral | Tokens: primary=#F2D9DC, secondary=#D9F2D8, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\n- Spacing scale: compact density mode\n\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states\n\n## Writing Tone\nconcise, confident, helpful\n\n## Rules: Do\n- prefer semantic tokens over raw values\n- preserve visual hierarchy\n- keep interaction states explicit\n\n## Rules: Don't\n- avoid low contrast text\n- avoid inconsistent spacing rhythm\n- avoid ambiguous labels\n\n## Expected Behavior\n- Follow the foundations first, then component consistency.\n- When uncertain, prioritize accessibility and clarity over novelty.\n- Provide concrete defaults and explain trade-offs when alternatives are possible.\n- Keep guidance opinionated, concise, and implementation-focused.\n\n## Guideline Authoring Workflow\n1. Restate the design intent in one sentence before proposing rules.\n2. Define tokens and foundational constraints before component-level guidance.\n3. Specify component anatomy, states, variants, and interaction behavior.\n4. Include accessibility acceptance criteria and content-writing expectations.\n5. Add anti-patterns and migration notes for existing inconsistent UI.\n6. End with a QA checklist that can be executed in code review.\n\n## Required Output Structure\nWhen generating design-system guidance, use this structure:\n- Context and goals\n- Design tokens and foundations\n- Component-level rules (anatomy, variants, states, responsive behavior)\n- Accessibility requirements and testable acceptance criteria\n- Content and tone standards with examples\n- Anti-patterns and prohibited implementations\n- QA checklist\n\n## Component Rule Expectations\n- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).\n- Describe interaction behavior for keyboard, pointer, and touch.\n- State spacing, typography, and color-token usage explicitly.\n- Include responsive behavior and edge cases (long labels, empty states, overflow).\n\n## Quality Gates\n- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.\n- Every accessibility statement must be testable in implementation.\n- Prefer system consistency over one-off local optimizations.\n- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.\n\n## Example Constraint Language\n- Use \"must\" for non-negotiable rules and \"should\" for recommendations.\n- Pair every do-rule with at least one concrete don't-example.\n- If introducing a new pattern, include migration guidance for existing components.\n\n<!-- TYPEUI_SH_MANAGED_END -->","tags":["friendly","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-friendly","topic-agent-skills","topic-agentic-ai","topic-agentic-workflow","topic-agents","topic-ai-agents","topic-ai-tools","topic-awesome","topic-awesome-list","topic-awesome-readme","topic-claude-design","topic-codex","topic-cursor"],"categories":["awesome-design-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/bergside/awesome-design-skills/friendly","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add bergside/awesome-design-skills","source_repo":"https://github.com/bergside/awesome-design-skills","install_from":"skills.sh"}},"qualityScore":"0.589","qualityRationale":"deterministic score 0.59 from registry signals: · indexed on github topic:agent-skills · 277 github stars · SKILL.md body (3,351 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-05-02T12:53:53.665Z","embedding":null,"createdAt":"2026-04-18T22:11:24.357Z","updatedAt":"2026-05-02T12:53:53.665Z","lastSeenAt":"2026-05-02T12:53:53.665Z","tsv":"'1':211 '100':92 '111827':120 '14/16/18/24/32/40':78 '16a34a':112 '2':222 '2.2':128 '200':93 '3':233 '300':94 '4':242 '400':95 '5':252 '500':96 '6':264 '600':97 '700':98 '800':99 '900':100 'aa':129 'accept':245,309 'access':126,183,244,305,390,411,414 'activ':336 'add':253 'adject':378 'aesthet':409 'alon':379 'altern':197 'ambigu':169,377 'ampl':8,62 'anatomi':236,300 'anchor':380 'anti':255,318 'anti-pattern':254,317 'approach':2,54 'author':29,209 'avoid':160,164,168 'behavior':172,241,304,344,361 'bold':73 'brand':47 'case':364 'checklist':269,324 'clariti':185 'code':275 'color':13,67,101,355 'color-token':354 'compact':123 'compon':178,230,235,297,325,453 'component-level':229,296 'concis':139,203 'concret':189,438 'confid':140 'conflict':407 'consist':179,399 'constraint':227,416 'content':249,311 'content-writ':248 'context':289 'contrast':162 'creat':32,53 'criteria':246,310 'd97706':114 'd9f2d8':110 'danger':115 'dc2626':116 'default':190,331 'defin':223,328 'densiti':124 'depend':375 'describ':342 'design':4,16,26,46,50,214,283,292 'design-system':25,282 'direct':41 'disabl':337 'display':83,84,87 'do-rul':431 'edg':363 'element':7,61 'empti':367 'end':265 'engag':57 'engin':44 'error':339 'everi':389,430 'exampl':316,388,415,442 'execut':273 'exist':261,452 'expect':171,251,327 'experi':58 'expert':24 'explain':192 'explicit':156,358 'f2d9dc':108 'ffffff':118 'first':132,176 'flag':406 'focus':51,135,207,334 'focus-vis':333 'follow':173 'font':79 'foundat':70,175,226,295 'friend':1,15,31,48 'gate':371 'generat':281 'goal':291 'guidanc':37,201,232,285,450 'guidelin':28,208 'help':141 'hierarchi':152 'hover':332 'implement':35,206,322,396 'implementation-focus':205 'implementation-readi':34 'includ':243,359,448 'inconsist':165,262 'intent':215 'interact':133,154,240,343 'introduc':444 'intuit':3,55 'keep':153,200 'keyboard':131,346 'keyboard-first':130 'label':170,366 'languag':417 'least':436 'level':231,298 'load':338 'local':404 'long':365 'low':161 'migrat':258,449 'mission':20 'mode':125 'mono':88,90 'must':392,419 'negoti':423 'neutral':105 'new':446 'non':422 'non-negoti':421 'note':259 'noto':81,85 'novelti':187 'off':195 'one':217,402,437 'one-off':401 'opinion':202 'optim':405 'output':278 'overflow':369 'pair':429 'palett':14,68,102 'pastel':12,66 'pattern':256,319,447 'play':74 'pointer':347 'possibl':199 'practic':33 'prefer':144,397 'premium':75 'preserv':150 'primari':80,103,107 'priorit':182,413 'prohibit':321 'propos':220 'provid':188 'qa':268,323 'qualiti':370 'raw':148 'readi':36 'recommend':428 'relev':341 'requir':277,306,329 'respons':303,360 'restat':212 'review':276 'rhythm':167 'round':6,60 'rule':142,157,221,299,326,373,382,424,433 'scale':77,122 'secondari':104,109 'semant':145 'sentenc':218 'serif':82,86 'skill':18 'skill-friendly' 'soft':11,65 'source-bergside' 'space':89,121,166,351 'specifi':234 'standard':314 'state':136,155,237,302,330,350,368 'statement':391 'structur':279,288 'style':69,72 'success':111 'surfac':117 'system':17,27,284,398 't-exampl':440 'testabl':308,394 'text':119,163 'threshold':386 'token':106,146,224,293,356,385 'tone':138,313 'topic-agent-skills' 'topic-agentic-ai' 'topic-agentic-workflow' 'topic-agents' 'topic-ai-agents' 'topic-ai-tools' 'topic-awesome' 'topic-awesome-list' 'topic-awesome-readme' 'topic-claude-design' 'topic-codex' 'topic-cursor' 'touch':349 'trade':194 'trade-off':193 'typographi':76,352 'ui':263 'ui/ux':49 'uncertain':181 'univers':19 'usag':357 'use':42,286,418 'valu':149 'variant':238,301 'visibl':134,335 'visual':71,151 'warn':113 'wcag':127 'weight':91 'whitespac':9,63 'workflow':210 'write':137,250","prices":[{"id":"edce0cb1-ef32-4c37-8b5a-acc90fd232d1","listingId":"a2418e7e-f6f4-4944-9841-953b53dddd12","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"bergside","category":"awesome-design-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:11:24.357Z"}],"sources":[{"listingId":"a2418e7e-f6f4-4944-9841-953b53dddd12","source":"github","sourceId":"bergside/awesome-design-skills/friendly","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/friendly","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:24.357Z","lastSeenAt":"2026-05-02T12:53:53.665Z"}],"details":{"listingId":"a2418e7e-f6f4-4944-9841-953b53dddd12","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"friendly","github":{"repo":"bergside/awesome-design-skills","stars":277,"topics":["agent-skills","agentic-ai","agentic-workflow","agents","ai","ai-agents","ai-tools","awesome","awesome-list","awesome-readme","claude-design","codex","cursor","design","design-md","design-system","google-stitch","skills"],"license":"mit","html_url":"https://github.com/bergside/awesome-design-skills","pushed_at":"2026-05-01T09:16:36Z","description":"List of awesome DESIGN.md and SKILL.md design skill files for agentic tools like Claude Design, Google Stitch, Codex, Cursor, and other AI tools","skill_md_sha":"31790434a733eed51208cd32a798c077e137c935","skill_md_path":"skills/friendly/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/friendly"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"friendly","license":"MIT","description":"Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/friendly"},"updatedAt":"2026-05-02T12:53:53.665Z"}}