{"id":"e5c84812-30f0-45b6-9479-0b6a92bfbce7","shortId":"LWUc8G","kind":"skill","title":"editorial","tagline":"Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Editorial Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Editorial.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\n\n\n## Style Foundations\n- Visual style: modern, editorial\n- Typography scale: 14/16/18/24/32/40 | Fonts: primary=Gelasio, display=Gelasio, mono=Ubuntu Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, secondary, neutral, success | Tokens: primary=#111111, secondary=#f1f1f1, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\n- Spacing scale: 8pt baseline grid\n\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, screen-reader tested labels, reduced-motion support, 44px+ touch targets, high-contrast support\n\n## Writing Tone\nconcise, confident, helpful, clear, friendly, professional, action-oriented, low-jargon\n\n## Rules: Do\n- prefer semantic tokens over raw values\n- preserve visual hierarchy\n- keep interaction states explicit\n- design for empty/loading/error states\n- ensure responsive behavior by default\n- document accessibility rationale\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":["editorial","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-editorial","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/editorial","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,461 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.101Z","embedding":null,"createdAt":"2026-04-18T22:11:19.039Z","updatedAt":"2026-05-02T12:53:53.101Z","lastSeenAt":"2026-05-02T12:53:53.101Z","tsv":"'1':229 '100':68 '111111':85 '111827':97 '14/16/18/24/32/40':58 '16a34a':89 '2':240 '2.2':105 '200':69 '3':251 '300':70 '4':260 '400':71 '44px':127 '5':270 '500':72 '6':282 '600':73 '700':74 '800':75 '8pt':100 '900':76 'aa':106 'accept':263,327 'access':103,173,201,262,323,408,429,432 'action':143 'action-ori':142 'activ':354 'add':271 'adject':396 'aesthet':427 'alon':397 'altern':215 'ambigu':187,395 'anatomi':254,318 'anchor':398 'anti':273,336 'anti-pattern':272,335 'aria':117 'author':31,227 'avoid':178,182,186 'baselin':101 'behavior':169,190,259,322,362,379 'brand':49 'case':382 'checklist':287,342 'clariti':203 'clear':139 'code':293 'color':77,373 'color-token':372 'compon':196,248,253,315,343,471 'component-level':247,314 'concis':136,221 'concret':207,456 'confid':137 'conflict':425 'consist':197,417 'constraint':245,434 'content':267,329 'content-writ':266 'context':307 'contrast':132,180 'creat':34 'criteria':264,328 'd97706':91 'danger':92 'dc2626':93 'default':171,208,349 'defin':241,346 'depend':393 'describ':360 'design':18,28,48,163,232,301,310 'design-system':27,300 'direct':43 'disabl':355 'display':62 'do-rul':449 'document':172 'edg':381 'editori':1,5,17,33,55 'eleg':14 'empti':385 'empty/loading/error':165 'end':283 'engin':46 'ensur':167 'error':357 'everi':407,448 'exampl':334,406,433,460 'execut':291 'exist':279,470 'expect':189,269,345 'experi':16 'expert':26 'explain':210 'explicit':162,376 'f1f1f1':87 'ffffff':95 'first':109,194 'flag':424 'focus':112,225,352 'focus-vis':351 'follow':191 'font':59 'foundat':51,193,244,313 'friend':140 'gate':389 'gelasio':61,63 'generat':299 'goal':309 'grid':12,102 'guidanc':39,219,250,303,468 'guidelin':30,226 'help':138 'hierarchi':158 'high':131 'high-contrast':130 'hover':350 'html':115 'implement':37,224,340,414 'implementation-focus':223 'implementation-readi':36 'includ':261,377,466 'inconsist':183,280 'inspir':4 'intent':233 'interact':110,160,258,361 'introduc':462 'jargon':147 'keep':159,218 'keyboard':108,364 'keyboard-first':107 'label':122,188,384 'languag':435 'layout':6 'least':454 'level':249,316 'load':356 'local':422 'long':383 'low':146,179 'low-jargon':145 'magazin':3 'magazine-inspir':2 'migrat':276,467 'mission':22 'modern':54 'mono':64,66 'motion':125 'must':410,437 'negoti':441 'neutral':81 'new':464 'non':440 'non-negoti':439 'note':277 'novelti':205 'off':213 'one':235,420,455 'one-off':419 'opinion':220 'optim':423 'orient':144 'output':296 'overflow':387 'pair':447 'palett':78 'pattern':274,337,465 'pointer':365 'possibl':217 'practic':35 'prefer':150,415 'preserv':156 'primari':60,79,84 'priorit':200,431 'profession':141 'prohibit':339 'propos':238 'provid':206 'qa':286,341 'qualiti':388 'rational':174 'raw':154 'read':15 'reader':120 'readi':38 'recommend':446 'reduc':124 'reduced-mot':123 'refin':8 'relev':359 'requir':295,324,347 'respons':168,321,378 'restat':230 'review':294 'rhythm':185 'rule':148,175,239,317,344,391,400,442,451 'scale':57,99 'screen':119 'screen-read':118 'secondari':80,86 'semant':114,151 'sentenc':236 'serif':9 'skill':20 'skill-editorial' 'source-bergside' 'space':98,184,369 'specifi':252 'standard':332 'state':113,161,166,255,320,348,368,386 'statement':409 'structur':11,297,306 'style':50,53 'success':82,88 'support':126,133 'surfac':94 'system':19,29,302,416 't-exampl':458 'target':129 'test':121 'testabl':326,412 'text':96,181 'threshold':404 'token':83,152,242,311,374,403 'tone':135,331 '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':128,367 'trade':212 'trade-off':211 'typographi':10,56,370 'ubuntu':65 'ui':281 'uncertain':199 'univers':21 'usag':375 'use':44,304,436 'valu':155 'variant':256,319 'visibl':111,353 'visual':52,157 'warn':90 'wcag':104 'weight':67 'workflow':228 'write':134,268","prices":[{"id":"a16cd3cc-138a-4ffa-960b-d188ae4c2b79","listingId":"e5c84812-30f0-45b6-9479-0b6a92bfbce7","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:19.039Z"}],"sources":[{"listingId":"e5c84812-30f0-45b6-9479-0b6a92bfbce7","source":"github","sourceId":"bergside/awesome-design-skills/editorial","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/editorial","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:19.039Z","lastSeenAt":"2026-05-02T12:53:53.101Z"}],"details":{"listingId":"e5c84812-30f0-45b6-9479-0b6a92bfbce7","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"editorial","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":"c11908636da72ad04df79144630b8454d5215f79","skill_md_path":"skills/editorial/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/editorial"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"editorial","license":"MIT","description":"Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/editorial"},"updatedAt":"2026-05-02T12:53:53.101Z"}}