Set up VTEX IO React apps with interfaces, schemas, and styling.
npx skills add https://github.com/exilonX/ap2 --skill vtex-io-react-apps-exilonx
Please help me install this Agent Skill. Skill: vtex-io-react-apps Source: https://github.com/exilonX/ap2/tree/main/.agents/skills/vtex-io-react-apps Command: npx skills add https://github.com/exilonX/ap2 --skill vtex-io-react-apps-exilonx
It prevents VTEX Store Framework React storefront and admin UI integrations from failing due to missing interfaces, incorrect styling conventions, broken Site Editor schemas, or unsafe client-side API calls.
store/interfaces.json so theme blocks correctly resolve to React root exports and can render on the storefront.store/contentSchemas.json so component props are editable via Site Editor using JSON Schema.vtex.css-handles for storefront styling and vtex.styleguide for admin UIs, while fetching data via GraphQL with useQuery rather than direct browser API calls.Use the skill to implement a VTEX IO React storefront component by adding the required store/interfaces.json entry, creating any needed store/contentSchemas.json definitions for Site Editor, and wiring the React root export under react/ with vtex.css-handles styling.
High-intent search queries and answers about installing and using this skill.
You make a React component editable in the VTEX IO Site Editor by defining a JSON Schema in `store/contentSchemas.json` that maps your component props, allowing the Site Editor to render configuration fields for your storefront blocks.
VTEX IO storefront blocks fail to render when `store/interfaces.json` is missing the required interface mapping that links your theme block to the correct React root export under the `/react` directory, preventing the Store Framework from resolving the component.
The correct way to style VTEX IO admin UI components is using the `vtex.styleguide` library, whereas storefront components require `vtex.css-handles` to apply CSS classes that safely integrate with the Store Framework theme.
You should not use direct browser API calls for data fetching in VTEX IO React apps; instead, use GraphQL `useQuery` from `react-apollo` to safely fetch data and ensure reliable storefront rendering.
Yes, you need `react-intl` messages for VTEX IO Store Framework components to provide internationalization, ensuring your custom storefront blocks and admin interfaces support multiple languages correctly.
Without `store/interfaces.json`, your custom storefront blocks cannot resolve to React root exports, meaning the VTEX Store Framework will fail to render your components or recognize them within the theme JSON structure.
exilonXValidate VTEX IO React component mappings against store/interfaces.json and theme blocks.
vtexdocsBuilds VTEX IO React components for storefront blocks and admin panels using interfaces.json and GraphQL data fetching via useQuery.
exilonXDevelops WCAG-compliant, cross-browser compatible websites and web applications using modern HTML, CSS, and JavaScript frameworks.
vtexCoordinate React components with VTEX IO interfaces.json and contentSchemas.json.