[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6R34FE3BQX6YMG3T96CEYKZ":3,"skill-same:01M6R34FE3BQX6YMG3T96CEYKZ":85},{"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":55,"commitSha":56,"skillDirectory":57,"forksCount":14,"repositoryHtmlUrl":58,"repositoryHomepageUrl":59,"ownerHtmlUrl":60,"ownerBlogUrl":59,"ownerDescription":6,"updatedAt":61,"install":62,"resources":74},"01M6R34FE3BQX6YMG3T96CEYKZ","design-system",null,"Use when changing jaeunda.log visual design, Quartz layout, typography, colors, responsive behavior, home-page components, article styling, tag\u002Flist pages, or UI polish. Ensures every agent follows the repository's actual design system and produces consistent output from the same input.","jaeunda\u002Fjaeunda.github.io","jaeunda","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F130204907?v=4","01M6R348G0CWC8A2CHP7PJTXP4","daeun","01M6R348N2HXYAW14TCCVT94HN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fjaeunda\u002Fjaeunda.github.io\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fdesign-system\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],"design system","system","design","log","when","true","output","input","pages","article","layout","visual","visual design","use","behavior","page","ui polish","polish","repository","components","2026-11-10 10:12:30",false,"---\nname: design-system\ndescription: \"Use when changing jaeunda.log visual design, Quartz layout, typography, colors, responsive behavior, home-page components, article styling, tag\u002Flist pages, or UI polish. Ensures every agent follows the repository's actual design system and produces consistent output from the same input.\"\nuser-invocable: true\n---\n\n# jaeunda.log Design System\n\nUse this skill before any visual, layout, styling, or component-facing change in\nthis Quartz 4 blog.\n\n## Source Of Truth\n\nActual code is the source of truth. Before editing a design-system surface, read\nthe relevant files first:\n\n- `quartz.config.ts`: theme colors, fonts, site settings\n- `quartz.layout.ts`: page component placement\n- `quartz\u002Fstyles\u002Fcustom.scss`: project-specific CSS patterns\n- `quartz\u002Fstyles\u002Fvariables.scss`: breakpoints and layout constants\n- `quartz\u002Fcomponents\u002FSiteNav.tsx`: the site's one navigation bar\n- `quartz\u002Fcomponents\u002FHomeStack.tsx`: the whole home page — featured, layers, index\n- `quartz\u002Fcomponents\u002FPostRow.tsx`: the one post row, used by every listing\n- `quartz\u002Fcomponents\u002FPostKicker.tsx`: the layer line above a post's title\n- `quartz\u002Fcomponents\u002FPostDek.tsx`: the post's `description` under its title\n- `quartz\u002Fcomponents\u002FpostMeta.ts`: layers, editorial rank, the date\u002Flength\n  contract\n- `quartz\u002Fstyles\u002Ffonts.scss`: the type stack plus `--surface`, `--shadow`,\n  `--shadow-lift`, `--lift-ease`\n- `quartz\u002Fcomponents\u002Fscripts\u002FhomeStack.inline.ts`: home layer filtering\n- `content\u002Findex.md`: the home masthead copy\n\n- `quartz\u002Fstyles\u002Feditorial.scss`: **the visual layer** — frame, ground, type,\n  nav, home, rows, post header, outline rail and the whole markdown body. It\n  is included last by `custom.scss` and decides the look; `custom.scss` rules\n  underneath are the structural base it overrides.\n\nFor the current design read `references\u002Fblueprint-2026-09.md` first — it is the\ndrawing the visual layer was built from. Its **type and colour** sections are\nsuperseded by the 2026-09-23 entry in `references\u002Fdesign-system.md`, which put\nthe display serif and the warm olive palette back; its layout, component and\n\"ruled, not raised\" sections still stand. The reference holds the history and\nthe component contracts.\n\n## Non-Negotiable Principles\n\n1. **A 1080px frame, used.** The home page is one column across it — masthead,\n   a horizontal chooser (`pinned`, then each layer, six posts each), and the\n   open group's three-column grid; a post is the post at a 680px measure + a\n   240px outline rail, on the right; lists carry a metadata column. Do not\n   leave the width as air, and do not widen past it.\n2. **Olive is the only colour.** `--olive-600` (`#4f5e3c`) carries links,\n   active state, the wordmark and a layer number, and nothing else on the page\n   is a colour. Every neutral is hue-free and chosen for contrast: a near-white\n   `--ground` (`#fbfbfa`) under near-black `--ink` (16.9:1). The logo stays\n   Fraunces olive. Use the tokens in editorial.scss before adding a colour.\n3. **Type splits by who is speaking.** Three voices, and they do not trade\n   places. **Fraunces** is the display serif: the wordmark, the home masthead,\n   every post title, the list-page titles and the article's own h2\u002Fh3.\n   **Noto Sans KR** is everything read as prose — body copy, descriptions,\n   h4–h6 and readable UI controls — and it picks up the Hangul inside a\n   Fraunces heading, because Fraunces carries no Korean; that mixed line is\n   intended. **IBM Plex Mono** is anything a program could have printed (dates,\n   counts, lengths, tags, nav, labels, layer and outline numbers, key\u002Fvalue\n   rows), lowercase, a step smaller, never negatively tracked. Prose and mono\n   never share a run of text, and mono never carries Korean. No console\n   costume: no `$` prompts, cursors, or green-on-black.\n4. **Ruled, not raised.** Structure is hairlines — one per row of the home\n   grid, and never two where one will do. There are no resting shadows, hover\n   lifts, or 999px pills. The radius is 0 for structure and `--r` (3px) for\n   code, inline code and chips. Emphasis is a rule: olive marks what is open,\n   current, or hovered.\n5. Keep body reading dense but breathable: compact line height, larger paragraph\n   spacing, and asymmetric heading margins.\n6. Keep hierarchy subtle. Important text uses `var(--dark)` or\n   `var(--tertiary)`; metadata uses `var(--gray)`.\n7. Never use `var(--lightgray)` for metadata or body-adjacent text. It is for\n   borders and faint surfaces.\n8. Mobile text must never touch viewport edges. Preserve the `.center` padding\n   floor of 20px on mobile.\n9. Prefer small, restrained changes that match the existing Quartz structure.\n   Do not introduce landing-page or marketing styling.\n10. **Nothing rests raised.** Not the home grid's cells, not the foot-of-post\n    `ReadNext`, not rows, the article body, code blocks, tables or callouts.\n    The search overlay is the only floating layer. A new resting card or shadow\n    is a design change that needs a reason and a log entry.\n11. **Motion belongs to lists and controls, never to prose.** Entrances and\n    reveals run on the home page and on lists; nothing in an article body ever\n    moves. All of it sits behind `prefers-reduced-motion: no-preference`, and no\n    animation may be the only thing that makes content visible.\n\n## Deterministic Workflow\n\nWhen handling a design request:\n\n1. Identify the request domain: color, typography, article content, home page,\n   list pages, sidebar, mobile layout, or interaction.\n2. Read the relevant source files listed above, plus\n   `references\u002Fdesign-system.md` for expected values.\n3. If the reference and code disagree, follow the code and update the reference\n   in the same change.\n4. Reuse existing classes, variables, and component patterns. Add new selectors\n   only near the related section in `custom.scss`.\n5. For any token or pattern change, add a one-line entry to the Design Decisions\n   Log in `references\u002Fdesign-system.md`.\n6. If the change adds or reorders posts, judge `rank` for every post in the\n   affected layer — see **Editorial Rank** in the reference. Appending is not\n   ranking.\n7. Validate the behavior that changed. For CSS-only changes at minimum run\n   `git diff --check`; for build-impacting changes also run the project check or\n   build command available in `package.json`.\n\n## Editing Rules\n\n- Add colors in `quartz.config.ts` only when existing `light`, `lightgray`,\n  `gray`, `darkgray`, `dark`, `secondary`, `tertiary`, `highlight`, or\n  `textHighlight` cannot express the need.\n- Keep article styling under the existing `article { ... }` block in\n  `custom.scss` unless the behavior is page-specific.\n- Never hardcode a shadow. `--shadow` \u002F `--shadow-lift` in `fonts.scss` are the\n  only two, they are the portfolio's values verbatim, and anything that travels\n  uses `--lift-ease`. Travel distances are fixed: cards -3px, tabs -2px, pills\n  -1px, arrows +3px on X.\n- `custom.scss` is sectioned by banner comments. Keep home-page styles under\n  `── Home ──` \u002F `── Featured post ──` \u002F `── Layers ──`, the row under\n  `── Shared post row ──`, navigation under `── Top bar ──` and\n  `── Site shell ──`, and content padding under `── 콘텐츠 좌우 패딩 ──`.\n  Add new selectors beside the related section, not at the end of the file.\n- For home interactions, preserve `data-home-stack`, `data-hs-featured`,\n  `data-layer` on both the layer tabs and the post rows, and `aria-pressed` as\n  the open-tab marker. On Topics, preserve `data-topic-switcher`,\n  `data-topic-strip`, `data-topic` on chips and panels, and `aria-current`.\n- Preserve Cmd\u002FCtrl\u002FShift\u002Fmiddle-click default navigation on tag chips.\n- A listing that needs a post row calls `PostRow`. Do not write the row markup\n  again — it was written three times and two copies drifted.\n\n## Output Standard\n\nWhen reporting a design-system change, include:\n\n- Files changed\n- The design-system decision made\n- Validation run, or why it was not run\n","# jaeunda.log Design System\n\nUse this skill before any visual, layout, styling, or component-facing change in\nthis Quartz 4 blog.\n\n## Source Of Truth\n\nActual code is the source of truth. Before editing a design-system surface, read\nthe relevant files first:\n\n- `quartz.config.ts`: theme colors, fonts, site settings\n- `quartz.layout.ts`: page component placement\n- `quartz\u002Fstyles\u002Fcustom.scss`: project-specific CSS patterns\n- `quartz\u002Fstyles\u002Fvariables.scss`: breakpoints and layout constants\n- `quartz\u002Fcomponents\u002FSiteNav.tsx`: the site's one navigation bar\n- `quartz\u002Fcomponents\u002FHomeStack.tsx`: the whole home page — featured, layers, index\n- `quartz\u002Fcomponents\u002FPostRow.tsx`: the one post row, used by every listing\n- `quartz\u002Fcomponents\u002FPostKicker.tsx`: the layer line above a post's title\n- `quartz\u002Fcomponents\u002FPostDek.tsx`: the post's `description` under its title\n- `quartz\u002Fcomponents\u002FpostMeta.ts`: layers, editorial rank, the date\u002Flength\n  contract\n- `quartz\u002Fstyles\u002Ffonts.scss`: the type stack plus `--surface`, `--shadow`,\n  `--shadow-lift`, `--lift-ease`\n- `quartz\u002Fcomponents\u002Fscripts\u002FhomeStack.inline.ts`: home layer filtering\n- `content\u002Findex.md`: the home masthead copy\n\n- `quartz\u002Fstyles\u002Feditorial.scss`: **the visual layer** — frame, ground, type,\n  nav, home, rows, post header, outline rail and the whole markdown body. It\n  is included last by `custom.scss` and decides the look; `custom.scss` rules\n  underneath are the structural base it overrides.\n\nFor the current design read `references\u002Fblueprint-2026-09.md` first — it is the\ndrawing the visual layer was built from. Its **type and colour** sections are\nsuperseded by the 2026-09-23 entry in `references\u002Fdesign-system.md`, which put\nthe display serif and the warm olive palette back; its layout, component and\n\"ruled, not raised\" sections still stand. The reference holds the history and\nthe component contracts.\n\n## Non-Negotiable Principles\n\n1. **A 1080px frame, used.** The home page is one column across it — masthead,\n   a horizontal chooser (`pinned`, then each layer, six posts each), and the\n   open group's three-column grid; a post is the post at a 680px measure + a\n   240px outline rail, on the right; lists carry a metadata column. Do not\n   leave the width as air, and do not widen past it.\n2. **Olive is the only colour.** `--olive-600` (`#4f5e3c`) carries links,\n   active state, the wordmark and a layer number, and nothing else on the page\n   is a colour. Every neutral is hue-free and chosen for contrast: a near-white\n   `--ground` (`#fbfbfa`) under near-black `--ink` (16.9:1). The logo stays\n   Fraunces olive. Use the tokens in editorial.scss before adding a colour.\n3. **Type splits by who is speaking.** Three voices, and they do not trade\n   places. **Fraunces** is the display serif: the wordmark, the home masthead,\n   every post title, the list-page titles and the article's own h2\u002Fh3.\n   **Noto Sans KR** is everything read as prose — body copy, descriptions,\n   h4–h6 and readable UI controls — and it picks up the Hangul inside a\n   Fraunces heading, because Fraunces carries no Korean; that mixed line is\n   intended. **IBM Plex Mono** is anything a program could have printed (dates,\n   counts, lengths, tags, nav, labels, layer and outline numbers, key\u002Fvalue\n   rows), lowercase, a step smaller, never negatively tracked. Prose and mono\n   never share a run of text, and mono never carries Korean. No console\n   costume: no `$` prompts, cursors, or green-on-black.\n4. **Ruled, not raised.** Structure is hairlines — one per row of the home\n   grid, and never two where one will do. There are no resting shadows, hover\n   lifts, or 999px pills. The radius is 0 for structure and `--r` (3px) for\n   code, inline code and chips. Emphasis is a rule: olive marks what is open,\n   current, or hovered.\n5. Keep body reading dense but breathable: compact line height, larger paragraph\n   spacing, and asymmetric heading margins.\n6. Keep hierarchy subtle. Important text uses `var(--dark)` or\n   `var(--tertiary)`; metadata uses `var(--gray)`.\n7. Never use `var(--lightgray)` for metadata or body-adjacent text. It is for\n   borders and faint surfaces.\n8. Mobile text must never touch viewport edges. Preserve the `.center` padding\n   floor of 20px on mobile.\n9. Prefer small, restrained changes that match the existing Quartz structure.\n   Do not introduce landing-page or marketing styling.\n10. **Nothing rests raised.** Not the home grid's cells, not the foot-of-post\n    `ReadNext`, not rows, the article body, code blocks, tables or callouts.\n    The search overlay is the only floating layer. A new resting card or shadow\n    is a design change that needs a reason and a log entry.\n11. **Motion belongs to lists and controls, never to prose.** Entrances and\n    reveals run on the home page and on lists; nothing in an article body ever\n    moves. All of it sits behind `prefers-reduced-motion: no-preference`, and no\n    animation may be the only thing that makes content visible.\n\n## Deterministic Workflow\n\nWhen handling a design request:\n\n1. Identify the request domain: color, typography, article content, home page,\n   list pages, sidebar, mobile layout, or interaction.\n2. Read the relevant source files listed above, plus\n   `references\u002Fdesign-system.md` for expected values.\n3. If the reference and code disagree, follow the code and update the reference\n   in the same change.\n4. Reuse existing classes, variables, and component patterns. Add new selectors\n   only near the related section in `custom.scss`.\n5. For any token or pattern change, add a one-line entry to the Design Decisions\n   Log in `references\u002Fdesign-system.md`.\n6. If the change adds or reorders posts, judge `rank` for every post in the\n   affected layer — see **Editorial Rank** in the reference. Appending is not\n   ranking.\n7. Validate the behavior that changed. For CSS-only changes at minimum run\n   `git diff --check`; for build-impacting changes also run the project check or\n   build command available in `package.json`.\n\n## Editing Rules\n\n- Add colors in `quartz.config.ts` only when existing `light`, `lightgray`,\n  `gray`, `darkgray`, `dark`, `secondary`, `tertiary`, `highlight`, or\n  `textHighlight` cannot express the need.\n- Keep article styling under the existing `article { ... }` block in\n  `custom.scss` unless the behavior is page-specific.\n- Never hardcode a shadow. `--shadow` \u002F `--shadow-lift` in `fonts.scss` are the\n  only two, they are the portfolio's values verbatim, and anything that travels\n  uses `--lift-ease`. Travel distances are fixed: cards -3px, tabs -2px, pills\n  -1px, arrows +3px on X.\n- `custom.scss` is sectioned by banner comments. Keep home-page styles under\n  `── Home ──` \u002F `── Featured post ──` \u002F `── Layers ──`, the row under\n  `── Shared post row ──`, navigation under `── Top bar ──` and\n  `── Site shell ──`, and content padding under `── 콘텐츠 좌우 패딩 ──`.\n  Add new selectors beside the related section, not at the end of the file.\n- For home interactions, preserve `data-home-stack`, `data-hs-featured`,\n  `data-layer` on both the layer tabs and the post rows, and `aria-pressed` as\n  the open-tab marker. On Topics, preserve `data-topic-switcher`,\n  `data-topic-strip`, `data-topic` on chips and panels, and `aria-current`.\n- Preserve Cmd\u002FCtrl\u002FShift\u002Fmiddle-click default navigation on tag chips.\n- A listing that needs a post row calls `PostRow`. Do not write the row markup\n  again — it was written three times and two copies drifted.\n\n## Output Standard\n\nWhen reporting a design-system change, include:\n\n- Files changed\n- The design-system decision made\n- Validation run, or why it was not run\n",{"name":5,"description":7,"user-invocable":54},true,"main","a7481b1c06fafc4cc38ffdd8d045ea378adbcce1",".agent\u002Fskills\u002Fdesign-system","https:\u002F\u002Fgithub.com\u002Fjaeunda\u002Fjaeunda.github.io","https:\u002F\u002Fjaeunda.github.io\u002F","https:\u002F\u002Fgithub.com\u002Fjaeunda","2026-10-24 19:45:07",{"source":8,"skillName":5,"commands":63,"prompt":73,"zipAvailable":54},[64,67,70],{"tool":65,"command":66},"npx","npx skills add jaeunda\u002Fjaeunda.github.io --skill design-system",{"tool":68,"command":69},"bunx","bunx skills add jaeunda\u002Fjaeunda.github.io --skill design-system",{"tool":71,"command":72},"pnpm","pnpm dlx skills add jaeunda\u002Fjaeunda.github.io --skill design-system","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjaeunda\u002Fjaeunda.github.io\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fdesign-system\u002FSKILL.md",[75,81],{"path":76,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":79,"sourceHtmlUrl":80},"agents\u002Fopenai.yml","REFERENCE","参考文档",220,"https:\u002F\u002Fgithub.com\u002Fjaeunda\u002Fjaeunda.github.io\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fdesign-system\u002Fagents\u002Fopenai.yml",{"path":82,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":83,"sourceHtmlUrl":84},"references\u002Fdesign-system.md",208461,"https:\u002F\u002Fgithub.com\u002Fjaeunda\u002Fjaeunda.github.io\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fdesign-system\u002Freferences\u002Fdesign-system.md",[86,95,102],{"skillNo":87,"name":88,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":49},"01M6R351JJ5H06YW2Y019GVAFS","github-workflow","https:\u002F\u002Fgithub.com\u002Fjaeunda\u002Fjaeunda.github.io\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fgithub-workflow\u002FSKILL.md",[],[92,93,94],"github workflow","workflow","github",{"skillNo":96,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":101,"publishedAt":49},"01M6R34YJFEX4TVF5PD47Y3YT2","https:\u002F\u002Fgithub.com\u002Fjaeunda\u002Fjaeunda.github.io\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fdesign-system\u002FSKILL.md",[99,100],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[30,29,31],{"skillNo":103,"name":88,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":110,"publishedAt":49},"01M6R34S9C8N0HHT2WXZ985CBH","Handles the repository's GitHub delivery workflow end to end: issue creation, issue-number-linked branch creation, validation, conventional commit, push, and pull request creation.","https:\u002F\u002Fgithub.com\u002Fjaeunda\u002Fjaeunda.github.io\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fgithub-workflow\u002FSKILL.md",[107],{"categoryNo":108,"categoryName":109,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[93,92,94,111,112,113,114,115,116,47,117,118,119,120,121,122,123,124,125],"issue creation","commit","pull request","validation","pull","push","request","conventional commit","number","false","end","creation","delivery","issue","branch"]