Techsio avatar

Techsio

Official

@techsiocz

0Followers
|
9Public Repos
|
71Published Skills

Enterprise UI-kit and storefront-data architecture for React and Next.js, focusing on token-based design systems and headless commerce integration.

Skills Distribution
DomainUI/UX & Crea...Design System Engi.. (45%)Headless Commerce .. (35%)Frontend Component.. (20%)

Agent Skills by Techsio

Showing 71 vetted skills indexed across 1 GitHub repositories.

TechsioCZTechsioCZ
2

component-to-figma

Map code-native components to Figma with strict token inheritance.

Official
Advanced
TechsioCZTechsioCZ
2

figma-token-binding

Migrate UI components from derivation-based tokens to Figma-exported tokens.

Official
Advanced
TechsioCZTechsioCZ
2

framework-consumer-integration

Integrate React and Next.js 16+ apps with UI-kit adapters for Link and Image.

Official
Intermediate
TechsioCZTechsioCZ
2

phone-input-usage

Integrate PhoneInput compound parts with country selection and validation in React.

Official
Intermediate
TechsioCZTechsioCZ
2

icon-usage

Guide token-based and Iconify icon usage in @techsio/ui-kit with accessibility rules.

Official
Intermediate
TechsioCZTechsioCZ
2

footer-usage

Organize and render reusable site footers with @techsio/ui-kit Footer primitives.

Official
Intermediate
TechsioCZTechsioCZ
2

component-authoring

Guide component creation and refactoring for @techsio/ui-kit with tokens and Storybook.

Official
Intermediate
TechsioCZTechsioCZ
2

tooltip-usage

Document Tooltip wrapper patterns and props for UI-kit components.

Official
Intermediate
TechsioCZTechsioCZ
2

radio-group-usage

Implement exclusive option selection in React forms with Zag.js and @techsio/ui-kit.

Official
Intermediate
TechsioCZTechsioCZ
2

popover-usage

Create anchored, non-blocking UI content with Zag.js Popover components.

Official
Intermediate
TechsioCZTechsioCZ
2

carousel-usage

Implement slide-based navigation in Zag.js apps with a reusable Carousel component.

Official
Intermediate
TechsioCZTechsioCZ
2

label-usage

Label UI form fields with a reusable Label component using htmlFor.

Official
Intermediate
TechsioCZTechsioCZ
2

search-form-usage

Create accessible React search forms with labeled input, controls, and submit actions.

Official
Intermediate
TechsioCZTechsioCZ
2

textarea-usage

Configure @techsio/ui-kit Textarea for multi-line input with styling and validation.

Official
Intermediate
TechsioCZTechsioCZ
2

rating-usage

Integrate accessible @techsio/ui-kit Rating components with ZagJS wrapper.

Official
Intermediate
TechsioCZTechsioCZ
2

table-usage

Build semantic data tables with @techsio/ui-kit Table components.

Official
Intermediate
TechsioCZTechsioCZ
2

image-usage

Render framework-agnostic Image components with adapters like NextImage.

Official
Intermediate
TechsioCZTechsioCZ
2

steps-usage

Coordinate multi-step UI workflows with Zag.js Steps and @techsio/ui-kit components.

Official
Intermediate
TechsioCZTechsioCZ
2

tabs-usage

Generate Zag.js Tabs UI patterns with configurable orientation and activation for @techsio/ui-kit apps.

Official
Intermediate
TechsioCZTechsioCZ
2

link-usage

Expose the low-level Link atom for inline navigation in React apps.

Official
Intermediate
TechsioCZTechsioCZ
2

app-token-initialization

Initialize app token layers for @techsio/ui-kit apps with a minimal override strategy.

Official
Intermediate
TechsioCZTechsioCZ
2

form-checkbox-usage

Render accessible labeled checkboxes with validation using FormCheckbox and ZagJS.

Official
Intermediate
TechsioCZTechsioCZ
2

numeric-input-usage

Implement accessible NumericInput usage with locale and validation props in React.

Official
Intermediate
TechsioCZTechsioCZ
2

link-button-usage

Render navigation elements as Buttons while preserving framework routing behavior.

Official
Intermediate

Frequently Asked Questions About Techsio

FAQPage Schema
What 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.