llms.txt
+26 −23
https://ui.frontic.com/llms.txt
− > Vue components for commerce storefronts, built for teams where an AI agent writes most of the code. `add` copies an item's source into the project, shadcn-style, and keeps the look out of it: no colour, radius or type style sits in a component. Items wear recipe classes, recipes live in `library/DESIGN.md`, tokens in `library/brand.json`, and `build` compiles both into `frontic.css`, so a change to a token or a recipe restyles every component that wears it. Interactive items build on Reka UI, − Frontic UI is not a React library, and not a package components are imported from: after `add` the source is the project's own. Its components start from shadcn-vue's, but it is not a theme over them: the look changes in two files, never through a class on a component. `check` lints a project against its brand, failing by default on classes outside the brand's theme, such as `bg-blue-500` or `text-[13px]`, colour pairs below contrast, and recipe tokens the brand lacks. Needs Vue 3 and Tailwind C− Each item below links to one markdown file with everything needed to build with it: install command, examples, the API of every part (props, events, slots, data attributes), the recipes it wears, and the source of every file it installs (re-export barrels left out). It is the same text the MCP server and `npx @frontic/ui docs <item>` return. An item's file sits where `add` installs the item, plus `.md`, so `components/<ui|sections|templates>/<name>.md`: Button installs to `components/ui/button/`− npx @frontic/ui build # after editing library/brand.json or library/DESIGN.md− Breaking in 0.13.0, the newest release. Code or habits from an earlier Frontic UI need these changes; [CHANGELOG.md](https://ui.frontic.com/CHANGELOG.md) has every release.− - **CLI:** `view` prints the registry records as JSON and drops `--json`; the markdown moved to `docs`. `search --type` becomes `--tier`, which takes `ui`, `sections`, `templates`, `lib` or `composables`.− - **MCP:** `view_registry_items` is removed; use `get_item_docs`. Its tier filter takes the folder names above. Skills installed before 0.13.0 name the removed tool; run `skills` again.− - **Registry:** Item examples are `<name>.example.vue`. Served `registryDependencies` no longer include what only an example uses. `r/v2/<name>.md` is no longer served.− - **Recipes:** The toggle recipe's hover no longer sets a background.− - [AGENTS.md](https://ui.frontic.com/AGENTS.md): The rules for an agent working in a project's components: read an item's API before using it, pick a variant instead of styling, take colour only from the brand.− - [Account Access](https://ui.frontic.com/components/sections/account-access.md): Sign-in and security settings card: a pending-change notice, email and password with change actions, a two-factor switch, and account deletion.− - [Cart Summary](https://ui.frontic.com/components/sections/cart-summary.md): Cart card with an item count, product lines with images and line totals, subtotal, shipping and savings rows, the total with its tax note, and a secure checkout button.− - [Delivery Slot](https://ui.frontic.com/components/sections/delivery-slot.md): Delivery card with standard and express tabs, a calendar of bookable days, a row of time windows, the chosen slot with its price, and a confirm button.− - [Footer Minimal](https://ui.frontic.com/components/sections/footer-minimal.md): Single-row footer with the logo, a few links and social icons under a rule.− - [Recent Orders](https://ui.frontic.com/components/sections/recent-orders.md): Order history card: a table of orders with date, items, status and total, a per-order menu to view, track, get the invoice or start a return, and pagination.− - [Return Request](https://ui.frontic.com/components/sections/return-request.md): Return form card that picks the items to send back, skipping final-sale ones, with a reason, a note, where the refund goes, the refund total and a request action.− - [Product Card Minimal](https://ui.frontic.com/components/sections/product-card-minimal.md): Quiet linked product tile with colour pills, name and subtitle, rating, colour count and price.− - [Product Options](https://ui.frontic.com/components/sections/product-options.md): Product buy box with the product shot, price and rating, colour swatches, size choice with sold-out sizes, a quantity stepper, and add-to-cart and wishlist actions.− - [Review Cards](https://ui.frontic.com/components/sections/review-cards.md): Review section with the average score, distribution bars, a write-a-review prompt, and dated reviews marked when the purchase is verified.− - [Review List](https://ui.frontic.com/components/sections/review-list.md): Review list with avatars, author and date, star ratings, a verified-purchase mark, and the review text.− - [brand.json](https://ui.frontic.com/brand.json): A project's `library/brand.json` in the default brand: colour roles such as `color.action.primary` and `color.commerce.buy` with their `-foreground` and `-hover` pairs, text styles, radius, shadows and fonts as W3C design tokens. Recipes name them as `{colors.buy}` (the role in any group under `color`), `{rounded.md}` (`radius.md`) and `{typography.heading}` (`text.heading`). Edit a token, run `build`, then `check` holds every colour pair to AA − - [DESIGN.md](https://ui.frontic.com/DESIGN.md): A project's `library/DESIGN.md` with every item added, in the default brand: per recipe a base, variant axes and defaults, each value naming a token, never a colour.− - [frontic.css](https://ui.frontic.com/frontic.css): The stylesheet `build` compiles from the default brand and every recipe: the tokens as Tailwind theme variables, each recipe as classes.+ > Vue components for commerce storefronts, built for teams where an AI agent writes most of the code. `add` copies an item's source into the project, shadcn-style, and keeps the look out of it: no colour, radius or type style sits in a component. Items wear recipe classes: a component’s recipes live in its `<name>.json` beside its source, the families and states they extend in `library/recipes/`, tokens in `library/brand.json`, and `build` compiles both into `frontic.css`, so a change to a token+ Frontic UI is not a React library, and not a package components are imported from: after `add` the source is the project's own. Its components start from shadcn-vue's, but it is not a theme over them: the look changes in two files, never through a class on a component. `check` lints a project against its brand, failing by default on classes outside the brand's theme, such as `bg-blue-500` or `text-[13px]`, colour pairs below contrast, and recipe tokens the brand lacks. Needs Vue 3 and Tailwind C+ Each item below links to one markdown file with everything needed to build with it: install command, examples, the API of every part (props, events, slots, data attributes), the recipes it wears, and the source of every file it installs (re-export barrels left out). It is the same text the MCP server and `npx @frontic/ui docs <item>` return. An item's file sits where `add` installs the item, plus `.md`, so `components/<ui|sections|templates>/<name>.md`: Button installs to `components/ui/button/`+ npx @frontic/ui build # after editing library/brand.json or a recipe file+ Breaking in 0.15.0, the newest release. Code or habits from an earlier Frontic UI need these changes; [CHANGELOG.md](https://ui.frontic.com/CHANGELOG.md) has every release.+ - **Recipes:** A one-recipe file from 0.14 (`library/recipes/<recipe>.json`) is refused, and the message shows the shape to write. The CLI has no migration: run `add` again for each installed item, which writes the new files, or merge the files by hand.+ - **Registry:** Each item's source is one manifest, `<tier>/<name>/<name>.json`, holding its metadata and its trees; the source `registry.json` and the `*.recipe.json` files are gone. What the registry serves keeps its shape.+ - **Site:** Old `*.recipe.json` and `/recipes/<part>.json` URLs 404, with no redirect.+ - **Registry:** Account access emits `delete` only after its confirmation dialog unless `confirm` is false. Product cards' title is `data-slot="product-card-title"` wearing `fui-product-card-title`, and `product-card-gallery-title` is gone; Basic, Gallery, Minimal and Horizontal show a square photo unless given a ratio; product options no longer emit `addToCart` without a size when the product has sizes. Shipping address emits continue only once every field is filled, and an empty country shows + - [AGENTS.md](https://ui.frontic.com/components/AGENTS.md): The rules for an agent working in a project's components: read an item's API before using it, pick a variant instead of styling, take colour only from the brand.+ - [frontic-ui-review skill](https://ui.frontic.com/skills/frontic-ui-review/SKILL.md): The brief of a review subagent: renders a page at phone and desktop width, compares it with its source, reports what to fix and where.+ - [Account Access](https://ui.frontic.com/components/sections/account-access.md): Sign-in and security settings card: a pending-change notice, email and password with change actions, a two-factor switch, and account deletion behind a confirmation dialog.+ - [Cart Summary](https://ui.frontic.com/components/sections/cart-summary.md): Cart card with an item count, linked product lines with images and line totals, subtotal, shipping (free, priced or worked out at checkout) and savings rows, the total with its tax note, and a secure checkout button that stays off while the cart is empty.+ - [Delivery Slot](https://ui.frontic.com/components/sections/delivery-slot.md): Delivery card with standard and express tabs, a calendar of bookable days, a row of time windows with booked-out ones named, the chosen slot with its price, and a confirm button that asks for a day and a window before standard delivery.+ - [Footer Minimal](https://ui.frontic.com/components/sections/footer-minimal.md): Single-row footer with the logo, a labelled row of links and optional social icons under a rule.+ - [Recent Orders](https://ui.frontic.com/components/sections/recent-orders.md): Order history card: a table of orders with date, items, status and total, a per-order menu to view, track, get the invoice or start a return, pagination, and a note when there are no orders yet.+ - [Return Request](https://ui.frontic.com/components/sections/return-request.md): Return form card that picks the items to send back, skipping and dimming final-sale ones, with a reason, a note, where the refund goes, the refund total and a request action that sends the reason and refund method shown.+ - [Product Card Minimal](https://ui.frontic.com/components/sections/product-card-minimal.md): Quiet product tile with colour pills, name and subtitle, rating, colour count and price; linked as a whole when it has no colour pills.+ - [Product Options](https://ui.frontic.com/components/sections/product-options.md): Product buy box with the product shot, price and rating, colour swatches with sold-out colours crossed out, a size choice that must be made before adding, with sold-out sizes, a quantity stepper, and add-to-cart and wishlist actions.+ - [Review Cards](https://ui.frontic.com/components/sections/review-cards.md): Review section with the average score, distribution bars, a write-a-review prompt, and dated reviews marked when the purchase is verified, or a note when there are none yet.+ - [Review List](https://ui.frontic.com/components/sections/review-list.md): Review list with avatars, author and date, star ratings, a verified-purchase mark, and the review text, or a note when there are none yet.+ - [Focus](https://ui.frontic.com/lib/focus.md): Whether the last input was a key or a pointer, which decides if an overlay's focus shows a ring.+ - [brand.json](https://ui.frontic.com/brand.json): A project's `library/brand.json` in the default brand: colour roles such as `color.action.primary` and `color.commerce.buy` with their `-foreground` pairs and the `-hover` the contract derives for the colours a component hovers, text styles, radius, shadows and fonts as W3C design tokens. Recipes name them as `{colors.buy}` (the role in any group under `color`), `{rounded.md}` (`radius.md`) and `{typography.heading}` (`text.heading`). Edit a tok+ - [DESIGN.md](https://ui.frontic.com/DESIGN.md): A project's `library/DESIGN.md` in the default brand: the brand's prose, how its tokens and recipes are meant to be used.+ - [recipes/](https://ui.frontic.com/recipes/): The families and shared states, one file each at `/recipes/<name>.json`; a component’s own recipe and its parts’ are in its manifest, `/components/<tier>/<name>/<name>.json`. Each item’s docs link the ones it wears. Per recipe a base, variant axes and defaults, each value naming a token, never a colour.+ - [frontic.css](https://ui.frontic.com/frontic.css): The stylesheet `build` compiles from the default brand and every recipe: an `@import` of each font package the brand names, the tokens as Tailwind theme variables, each recipe as classes.