We will use it to invite you to the team.
``` ## Navigate with the keyboard Primitives provide keyboard behavior, but the final composition still needs testing. Custom styles must not hide focus or block controls. - Tab and Shift+Tab should traverse controls in a logical order. - Visible focus must retain sufficient contrast. - Escape should close panels and return focus to their trigger. - Tabs, menus and option groups should respond to the appropriate arrow keys. ## Structure before appearance Respect heading hierarchy, use links for navigation and buttons for actions. Include DialogTitle and DialogDescription in panels and captions when a table needs context. Color must not be the only signal for error, success or selection. Add text and relationships such as aria-describedby; announce relevant changes in status regions. ## Adaptation and motion Test 200% zoom, mobile sizes and reduced-motion preferences. An attractive example does not replace reviewing the entire flow with a keyboard and screen reader. Test theme variants separately: customizing tokens changes contrast and can affect text, borders and interactive states. Source: https://www.kivora.pro/docs/accesibilidad --- # Using agents Install the Kivora skill and share its instructions with your agent. ## A skill for building with Kivora kivora-ui teaches an agent to integrate @kivora/nextjs into React web and Next.js, compose components, and customize themes. It includes installation, API, and styling references and links to maintained documentation. For React Native it points to the native guide instead of applying web APIs. npx skills runs the skills installer. skills add copies instructions into the agent environment; it does not install the Kivora library or configure your application. To install the library, follow the installation guide or use @kivora/init in a compatible project. - [Install the library](https://www.kivora.pro/docs/instalacion) ## Install the skill in your project You need Node.js with npm/npx and access to the repository. Run the command from your project root. The installer lets you choose target agents; project installation is the default. The remote command becomes available when skills/kivora-ui is published on the default branch of kivora-ui/docs. If the repository is private, you need credentials with access. ```bash npx skills add kivora-ui/docs --skill kivora-ui ``` ## Choose agents and scope Each line is an alternative: list without installing, install for a specific agent, or install globally across your projects. Use --skill with multiple names if the repository adds more skills; currently we distribute kivora-ui. ```bash npx skills add kivora-ui/docs --list npx skills add kivora-ui/docs --skill kivora-ui -a codex npx skills add kivora-ui/docs --skill kivora-ui -a claude-code npx skills add kivora-ui/docs --skill kivora-ui -g ``` ## Ask for a concrete task After installation, start an agent session that can discover the skill. Ask: “Use the kivora-ui skill to create a project form with validation and Kivora components.” Automatic selection depends on the agent and task; you can also invoke it explicitly using your tool’s mechanism. The skill guides decisions and consults the installed version’s types. It does not guarantee that the agent uses it for every request. Review changes and check your application flows. ## Update and try it from the repository skills update updates installed skills. The two local-path commands run from a kivora-ui/docs checkout and let you discover or install this skill before publication. Publishing changes on GitHub does not automatically update installed copies. ```bash npx skills list npx skills update npx skills add ./skills/kivora-ui --list npx skills add ./skills/kivora-ui ``` ## Resources for users and agents - [Skill source code](https://github.com/kivora-ui/docs/tree/main/skills/kivora-ui) - [Skills installer reference](https://github.com/vercel-labs/skills) - [Documentation index for agents](https://www.kivora.pro/llms.txt) - [Full documentation as text](https://www.kivora.pro/llms-full.txt) Source: https://www.kivora.pro/docs/agentes --- # AspectRatio Keep stable proportions for images and visual content. ## How to use it Set ratio to width divided by height. Give the container a width so its height can be calculated. ## Import ```tsx import { AspectRatio } from "@kivora/nextjs"; ``` Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native. ## Example ```tsx{``}
```
## API: Code
```typescript
Code: React.ForwardRefExoticComponentEnter a valid email.