gts-design-system-integration
GTS Design System Integration
Quick Workflow
- Identify the app type and current styling stack.
- Align dependencies and Tailwind v4 tooling.
- Set up one Tailwind css entrypoint and correct import order.
- Import GTS css once at the app root.
- Remove conflicting token/theme/global style sources.
- Apply GTS layout and typography patterns.
- For complex pages (for example configurator screens), compose reusable layout sections and variant-driven states.
- Validate build, lint, and visual output.
Load These References
- Always read
references/guidelines.md. - Always read
references/shadcn-compatibility.md. - Always read
references/tailwind-style-usage.md. - Always read
references/tailwind-utility-inventory.md. - Read
references/app-integration-playbook.mdfor app-specific steps.
More from jonathanwillisdesign/gts-central-library
gts-library-workflows
Workflow guide for the GTS Central Library (components, icons, tokens, color conversion, token builds, and commit/push). Use when Codex is asked to perform or guide these tasks in this repo.
8vercel-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