Techsio
Official@techsiocz
Enterprise UI-kit and storefront-data architecture for React and Next.js, focusing on token-based design systems and headless commerce integration.
Agent Skills by Techsio
Showing 71 vetted skills indexed across 1 GitHub repositories.
component-to-figma
Map code-native components to Figma with strict token inheritance.
figma-token-binding
Migrate UI components from derivation-based tokens to Figma-exported tokens.
framework-consumer-integration
Integrate React and Next.js 16+ apps with UI-kit adapters for Link and Image.
phone-input-usage
Integrate PhoneInput compound parts with country selection and validation in React.
icon-usage
Guide token-based and Iconify icon usage in @techsio/ui-kit with accessibility rules.
footer-usage
Organize and render reusable site footers with @techsio/ui-kit Footer primitives.
component-authoring
Guide component creation and refactoring for @techsio/ui-kit with tokens and Storybook.
tooltip-usage
Document Tooltip wrapper patterns and props for UI-kit components.
radio-group-usage
Implement exclusive option selection in React forms with Zag.js and @techsio/ui-kit.
popover-usage
Create anchored, non-blocking UI content with Zag.js Popover components.
carousel-usage
Implement slide-based navigation in Zag.js apps with a reusable Carousel component.
label-usage
Label UI form fields with a reusable Label component using htmlFor.
search-form-usage
Create accessible React search forms with labeled input, controls, and submit actions.
textarea-usage
Configure @techsio/ui-kit Textarea for multi-line input with styling and validation.
rating-usage
Integrate accessible @techsio/ui-kit Rating components with ZagJS wrapper.
table-usage
Build semantic data tables with @techsio/ui-kit Table components.
image-usage
Render framework-agnostic Image components with adapters like NextImage.
steps-usage
Coordinate multi-step UI workflows with Zag.js Steps and @techsio/ui-kit components.
tabs-usage
Generate Zag.js Tabs UI patterns with configurable orientation and activation for @techsio/ui-kit apps.
link-usage
Expose the low-level Link atom for inline navigation in React apps.
app-token-initialization
Initialize app token layers for @techsio/ui-kit apps with a minimal override strategy.
form-checkbox-usage
Render accessible labeled checkboxes with validation using FormCheckbox and ZagJS.
numeric-input-usage
Implement accessible NumericInput usage with locale and validation props in React.
link-button-usage
Render navigation elements as Buttons while preserving framework routing behavior.
Frequently Asked Questions About Techsio
FAQPage SchemaWhat specific tasks can I perform using these UI-kit skills?▼
You can build accessible, token-driven React interfaces using Zag.js primitives, manage design system consistency between Figma and code, and implement complex storefront data flows including cart, checkout, and SSR-prefetched product catalogs.
Which personas benefit most from these technical skills?▼
Frontend engineers, design system architects, and commerce developers working within React and Next.js ecosystems will find these skills essential for maintaining scalable, accessible, and performant enterprise-grade web applications.
What are the primary dependencies for implementing these storefront-data skills?▼
These skills require a React-based environment, specifically Next.js for SSR capabilities, and integration with Medusa-based backend architectures for managing storefront data, authentication sessions, and cart state.