feat: [PKTS-236] Claude Code skills for consumers and contributors - #98
Open
FreddKM wants to merge 12 commits into
Open
feat: [PKTS-236] Claude Code skills for consumers and contributors#98FreddKM wants to merge 12 commits into
FreddKM wants to merge 12 commits into
Conversation
Adds 11 Claude Code skills and a shared CLAUDE.md foundation to help both consumers (using Packets in their apps) and contributors (building and maintaining Packets) work more effectively with the design system. Consumer skills (prefixed pkts-, intended for use in any repo): - pkts-find: component discovery by description or use case - pkts-react: React import and usage code generation - pkts-web: Web Component HTML/JS usage code generation - pkts-css: CSS class names and markup generation Contributor skills (repo-scoped, no prefix): - review-react/web/css: convention checkers per platform - scaffold-react/web/css: boilerplate generators per platform - component-audit: cross-platform parity and coverage report Also includes: - CLAUDE.md at repo root with naming conventions, file paths, platform parity tables, architecture patterns, and spacing token reference - component-catalog.md with all 49 components, platform availability, and keywords for fuzzy matching - README.md and contributing.md updated with skills documentation Skills are forward-compatible with the MCP Skills over MCP standard (SEP-2640, currently in review) and will work across MCP-compatible AI clients once that spec ships.
…accessibility guidance, Step 0 monorepo check; fix dark.json background token missing type field; remove @beta from consumer skill install instructions
Deploying packets-design-system with
|
| Latest commit: |
b884222
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b179cf5d.packets-design-system.pages.dev |
| Branch Preview URL: | https://feat-pkts-236-claude-skills.packets-design-system.pages.dev |
Deploying packets-design-system-staging with
|
| Latest commit: |
b884222
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://9b56c21d.packets-design-system-staging.pages.dev |
| Branch Preview URL: | https://feat-pkts-236-claude-skills.packets-design-system-staging.pages.dev |
added 8 commits
August 19, 2026 22:49
…c/components/, fix grep -oP to -oE for macOS compatibility, add dark mode block to scaffold-css template
…ts-find, add border-width token table to review-css, deduplicate index.ts read in pkts-web, add variantless story template to scaffold-web
…ls now universal)
… Web-only; InputDate/Range have no CSS; SkeletonChip is CSS-only); fix docs MDX path; add changeset for dark.json patch
…rename folder per client)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements AI coding skills for the Packets Design System, giving both consumers and internal contributors AI-assisted workflows in Claude Code, Cursor, Windsurf, and any MCP-compatible client. Skills follow the MCP Skills standard and are auto-loaded when the repo (or the copied
.claude/directory) is open.Changes:
Consumer skills (for developers building apps with Packets):
pkts-find: identifies the right Packets component for a described needpkts-react: generates correct React import and usage code for any componentpkts-web: generates correct Web Component usage codepkts-css: generates correct CSS class and HTML markup usageContributor skills (for working inside this repo):
scaffold-react,scaffold-web,scaffold-css: scaffold new components with correct boilerplate and barrel registrationreview-react,review-web,review-css: review components against conventions before opening a PRcomponent-audit: cross-platform parity report (what is missing where, missing stories, missing docs)generate-component-docs: generate a complete MDX doc page for a componentset-alias-colors: update alias color tokens and rebuild CSS in one guided flowSupporting files:
CLAUDE.md: naming conventions, file paths, platform parity table, architecture patterns, spacing token scale — auto-loaded in every session so skills stay leanpkts-find/references/component-catalog.md: lightweight component catalog (all 57 components) used by pkts-find, component-audit, and review skills without loading full sourceset-alias-colors/references/alias-token-map.md: alias token reference with defaults and core palette stepsBug fixes in this branch:
packages/design-tokens/tokens/color/dark.json: background token was missing"type": "color", causing Style Dictionary to skip it during build — dark background CSS custom property was absent from compiled output. Changeset included for patch release.CLAUDE.mdplatform parity table: corrected three wrong entries (Badge/Card/Icon listed as Web-only when they have CSS; InputDate/InputDateRange listed as all-three when they have no CSS; SkeletonChip listed as React-only when it is CSS-only).generate-component-docs: wrong MDX output path (src/instead ofsrc/components/) and macOS-incompatiblegrep -oPflag (changed to-oE).scaffold-css: template was missing a.dark .pkts-*block, causing generated components to have broken dark mode.pkts-find: removed parity-gap trigger phrases that belong tocomponent-audit.review-css: added border-width token table so the check is actionable.scaffold-web: story template now has a variantless form alongside the variant form.pkts-web: removed redundant double-read ofcomponents/index.tsin Step 2.@betainstall tags now that v2.0.2 is stable.Test plan:
/pkts-react PktsButton— confirm correct import and JSX with variant prop/pkts-web PktsButton— confirm<pkts-button>usage with attributes/pkts-css button— confirm.pkts-buttonclass and modifier table/pkts-find "loading indicator"— confirm PktsSpinner recommended/set-alias-colors— test with hex, RGB, HSL inputs; verify build runs and both dist files update/component-audit— confirm parity gaps reported without loading component sourcedark.jsonbuild produces a--pkts-color-dark-backgroundproperty instyles.css