gts-library-workflows
GTS Library Workflows
Use this skill to perform common GTS Central Library workflows. Keep execution aligned with repo conventions.
Workflow Index
add-icon.md: Add a new SVG icon to the sprite system and update types/story.add-token.md: Add a new design token following Style Dictionary + DTCG conventions.build-tokens.md: Build and validate design tokens via Style Dictionary.compare-preprod-header.md: Compare library Header component against pre-prod retailer header withagent-browser(auth + checklist).commit-and-push.md: Commit staged changes and push using the repo format.convert-color.md: Convert between hex and OKLCH for token work.create-component.md: Create a new component following library conventions (files, CVA, Base UI, Storybook).
More from jonathanwillisdesign/gts-central-library
gts-design-system-integration
Integrate and implement apps and screens using gts-central-library tokens, styles, and components. Use when adding the design system to Vite, Next.js, Lovable, or React apps; migrating from shadcn or parallel token systems; setting up Tailwind v4 with GTS css; implementing configurator-style layouts; or troubleshooting token/theme/style mismatches.
12vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
8implement-design
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.
7