메뉴
Typstスライドに合うSVG図解を作成し、スライドへ組み込む。（図の情報設計はimpeccable/layoutを主に参照）
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.
Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system.
Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.
Typstスライドをビルドし、PDF化したときの詰まり、はみ出し、過密を確認して修正する。（構図の意図はlayout/impeccableを主に参照）
| name | typst-svg |
| description | Typstスライドに合うSVG図解を作成し、スライドへ組み込む。（図の情報設計はimpeccable/layoutを主に参照） |
Typstスライドに挿入するSVG図解を作るためのスキル。
図が伝えるべきメッセージや視線の流れは .agents/skills/impeccable・layout を主に決め、このスキルは パレットに沿った SVG の作成と Typst への埋め込みを扱う。
template/assets/svg/examples/assets/svg/assets/svg/docs/style-guide.md のパレットに合わせるtemplate/style.typ の colors / theme に合わせる（ここに独自色を増やさない）。
#2C2A4A#B89B4F#DADAD8, カード面 #EFEEEC#2B2F3A、補足: #5A6070#C8C8C5#3A7D44 / #C78B2A / #B94A48 / #3A6EA5#image("assets/svg/name.svg") として挿入するmise run build で確認する.agents/skills/typst-svg を使って、Typstのコンパイルフローを示すSVGを作り、template/main.typ に挿入して