Flx

AI skills

Flx blocks are copied into your repo and owned by you. The Flx skill is a short guide so assistants use the right props, *-example.tsx files, and @flx installs—without reinventing markup.

With the skill installed, you can ask for things like:

The skill does not replace the shadcn CLI. Use npx shadcn@latest for adds; use the Flx skill so the model respects Flx-specific shapes (e.g. image: { src, alt } vs media: { url, title }).

Install

From any project where you want the skill available (your app repo, a monorepo package, etc.):

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

To install straight 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).

Learn more about the open ecosystem at skills.sh.

What’s included

Registry and shadcn CLI

How @flx/<block> maps to the registry URL, what goes in components.json, and that npx shadcn@latest add is how blocks land in your tree.

Small, real examples

The skill includes concrete prompts and tiny TSX snippets (e.g. GridTwoColumns with a real image URL, Cta with ctaEnabled) so the model doesn’t guess.

Example files

Many blocks ship *-example.tsx. The skill tells assistants to treat that file as the prop shape reference and to swap demo copy/URLs for your production content.

Shared pieces

Cta, ctaEnabled, image field shapes, and registryDependencies so installs stay complete.

Anti-patterns

Brief list: wrong aliases, invented props, skipping dependencies, replacing blocks with ad-hoc divs.

How it works

  1. Discovery — Standard Agent Skill: SKILL.md in .agents/skills/ui-flx/.
  2. Install — npx skills links or copies into your agent’s skills directory (e.g. .agents/skills/ for Cursor).
  3. Activation — Metadata loads first; full instructions when the task matches Flx / @flx / blocks.
  4. Together with shadcn — Optional: shadcn/ui skill for primitives, themes, and components.json.

Learn more