AI Skills

Flexnative blocks are copied into your repo and owned by you. The AI skill exists to help assistants work with the real source code, follow the right patterns, and avoid guessing around the structure.

The goal is simple: make AI understand how Flexnative is meant to be used. That includes the registry, the example files, shared pieces like Cta, and the way blocks are installed and customized.

With the skill installed, assistants should understand things like:

• how @flx/<block> maps to the registry
• how *-example.tsx files show the intended prop shape
• how shared pieces like Cta are reused across blocks
• how to swap demo content for real project content
• how to keep installs complete by respecting registryDependencies

This matters because Flexnative is designed to make UI easier to generate, easier to customize, and easier to keep consistent across different projects.

Here are a few examples of the kind of prompts this skill should support:

• “Add GridTwoColumns with this Unsplash URL as the image and a CTA to /pricing.”
• “Why doesn’t my CTA show?”
  (usually because ctaEnabled is missing or false)
• “Run npx shadcn@latest add @flx/primary-item-grid and show usage from the example file.”
• “Match registryDependencies for this block so nothing is missing.”

The skill does not replace the shadcn CLI.

Use npx shadcn@latest to add blocks. Use the Flexnative skill so the model respects the Flexnative shapes, like image: { src, alt } instead of inventing a different API.

Install

From any project where you want the skill available:

npx skills add felipemenezes098/ui-flx --skill ui-flx

To install directly from the skill folder URL:

npx skills add https://github.com/felipemenezes098/ui-flx/tree/main/.agents/skills/ui-flx

Pick your agent when prompted. Cursor, Claude Code, Codex, and others are supported by the Skills CLI.

What’s included

Registry and shadcn CLI

How @flx/<block> maps to the registry URL, what belongs in components.json, and how blocks land in your project with npx shadcn@latest add.

Small, real examples

The skill includes concrete prompts and small TSX snippets so the model does not guess. That includes things like GridTwoColumns with a real image URL and Cta with ctaEnabled.

Example files

Many blocks ship with *-example.tsx files. The skill should treat those files as the source of truth for the expected prop shape and use them as the reference when generating or updating code.

Shared pieces

Shared components like Cta, fields like ctaEnabled, image shapes, and registryDependencies are part of the system too. The assistant should keep those pieces intact so installs stay complete.

Anti-patterns

The skill also helps avoid common mistakes: wrong aliases, invented props, skipped dependencies, and replacing blocks with ad-hoc divs.

How it works

1. Discovery — The skill lives in .agents/skills/ui-flx/ with a SKILL.md file.
2. Install — npx skills copies or links it into the agent’s skills directory.
3. Activation — Metadata loads first, and the full instructions apply when the task matches Flexnative, @flx, or the blocks.
4. Together with shadcn — You can optionally use the shadcn/ui skill for primitives, themes, and components.json.

Learn more

• Introduction — Registry URL and first @flx add
• Blocks — Browse the block catalog
• skills.sh — Discover other skills
• Skills CLI — add, list, remove, agents