메뉴
Brand a TutorialKit (Astro interactive-tutorial) project for Patterson Companies, or scaffold a new Patterson-branded TutorialKit starter. Use when the user mentions TutorialKit, interactive tutorials, or hands-on training content in the Patterson brand.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Design anything on-brand for Patterson Companies (oral & animal health distribution). Use whenever the user asks for Patterson-branded UI, pages, mocks, decks, components, styling, colors, typography, or brand review. Contains tokens, components, logos, fonts, and framework adapters.
Build a Patterson-branded web page (marketing, landing, informational). Use when the user asks for a Patterson web page, landing page, or site section. Scaffolds a React shell with sticky nav, navy hero, content band, and footer wired to brand tokens and components.
Build screens in the style of the Patterson Companies corporate website. Use when the user asks for corporate-site pages, investor/newsroom pages, or wants to extend the pattersoncompanies.com look. Ships header, footer, home, what-we-do and newsroom screens as React components.
Build a Patterson Companies branded slide deck (16:9 presentation). Use when the user asks for a Patterson deck, presentation, slides, or company overview. Scaffolds from the official deck template with cover, divider, stats, comparison, quote, table, photo-band and closing archetypes.
Build Patterson-branded documentation sites and doc pages. Use when the user asks for Patterson docs, a documentation site, developer docs, knowledge base, or help center. Ships a VitePress/Diátaxis-styled React UI kit and a standalone docs page template.
Build a Patterson Companies executive briefing deck. Use when the user asks for an executive deck, leadership briefing, board-style presentation, or formal readout in the Patterson brand. Denser, editorial layout compared to the standard deck.
| name | tutorialkit-theme |
| description | Brand a TutorialKit (Astro interactive-tutorial) project for Patterson Companies, or scaffold a new Patterson-branded TutorialKit starter. Use when the user mentions TutorialKit, interactive tutorials, or hands-on training content in the Patterson brand. |
| user-invocable | true |
Patterson theme for TutorialKit (Astro-based interactive tutorials): a runnable starter project with the canonical theme.css, brand logos, and a static theme-preview page.
Everything lives under ${CLAUDE_PLUGIN_ROOT}/ds/, laid out exactly like the Patterson design-system source tree, so every relative reference inside the files (../../styles.css, ../../assets/brand/…, ../../_ds_bundle.js) resolves without edits.
Copy the snapshot into the user's project, preserving the tree:
cp -R "${CLAUDE_PLUGIN_ROOT}/ds" ./patterson
If the project already has a patterson/ design-system folder from another Patterson plugin, merge instead of duplicating — only add the subfolders that are missing.
The working entry point is then patterson/templates/tutorialkit/README.md.
Edit CONTENT in place; keep the structure, class names, and token usage intact. Never inline raw hex colors — use the CSS variables.
Open the entry file in a browser (or a static server) to preview.
ds/templates/tutorialkit/ — runnable TutorialKit starter (Astro + UnoCSS): theme.css (the canonical brand theme), astro.config.mjs, uno.config.ts, src/, public/ (logo.svg, logo-dark.svg)ds/ui_kits/tutorialkit/index.html — static preview of the themed TutorialKit shell (renders entirely from --tk-* vars)ds/assets/brand/ — logo lockupstheme.css into the project root and public/logo*.svg; every color is a --tk-* variable TutorialKit reads natively.ds/templates/tutorialkit/ folder, then bun install && bun run dev (or npm equivalents). See its README.theme.css — never copy values out of it; change the token, and both update.#003767 (primary), Sky #00A8E1 (accent, hovers, stats). Secondary blue #147EC2. Tertiary green #7BC24D, teal #00817D, purple #522E91 — data/infographics only, never page chrome. Body gray #58585B, light gray #ECECEC.All of this is encoded as CSS custom properties in ds/tokens/*.css (linked via ds/styles.css). Always style with the --pat-*, --surface-*, --space-*, --fs-*, --shadow-* variables rather than raw hexes.