Tessli

Code and reasoning, in the formats agents read.

Coding agents install Tessli items with the shadcn CLI, keep the rules in one small file and can query both through a local MCP server. They get the same code, notes and rules people see in the library.

Browse the librarySet up local MCP

Install with the shadcn CLI.

Run these in a project set up with shadcn/ui. Items use semantic theme tokens, so they take on your project’s theme rather than Tessli’s.

One item

Adds the item as one component file, with the shadcn/ui primitives it needs. This one is Pricing tiers compared on the limits that matter; every item page shows its own command.

npx shadcn@latest add online-scope-lab/tessli/pricing-tiers

The rules file

Adds TESSLI.md to the project root, where your agent’s instructions can point to it.

npx shadcn@latest add online-scope-lab/tessli/rules

TESSLI.md keeps every rule in reach.

A compact index generated from the rule files: one line per rule, with the rule and how to check it. Small enough for an agent to read before every UI task.

Rules
39 in 10 areas, from hierarchy to accessibility
Size
7.3 KB of Markdown
Review
All drafts until a maintainer signs them
Installs to
TESSLI.md at the project root
- H-01 Give each section, card or dialog at most one primary-styled action. | Count primary-styled actions per section and dialog at 1440 and 390: one at most.
- H-02 One h1 per page; nest h2–h4 in order. Level follows structure, size follows style. | Run axe heading-order or list the outline: one h1, no skipped levels.
- H-03 Use at most one uppercase eyebrow per page, and only if it adds information. | Count uppercase, letter-spaced labels over headings: one per page at most.
Read TESSLI.mdRead the rules with their reasons

How an agent uses Tessli.

Five steps, in order. They are packaged as an Agent Skill, skills/tessli/SKILL.md, that an agent can load directly.

  1. Read the rules

    Read TESSLI.md before any UI work, or call get_rules.

  2. Find an item

    Call search_items with a short brief, or browse the library. Read “Use when” and “Avoid when” before choosing.

  3. Install it

    Run the item’s shadcn command. It lands in components/<slug>.tsx with its shadcn/ui dependencies.

  4. Adapt it

    Swap the demo content for the project’s real content. Keep the semantic tokens and the project’s own theme.

  5. Check it

    Render at 1440, 768 and 390 px and run the check line of every rule the item lists. Fix what fails, then check again.

Read the Agent Skill on GitHub

Local MCP server.

A read-only process your MCP client starts from a checkout of the repository. It reads the same committed data as this site, makes no network requests and writes nothing.

Run it

It needs Node.js 22.18 or later. Install the locked dependencies, then npm run mcp starts the server and waits for a client on standard input.

git clone https://github.com/Online-Scope-Lab/tessli.git
cd tessli/web
npm ci
npm run mcp

Add it to your client

Point the client at the server file with an absolute path on your machine. Field names vary by client.

{
  "mcpServers": {
    "tessli": {
      "command": "node",
      "args": ["/absolute/path/to/tessli/web/mcp/server.ts"]
    }
  }
}
Open the Tessli repository

5 read-only tools

search_items
Matching items, best first, each with its rule ids and install command.Input: A brief, such as “pricing section for two plans”.
get_item
The item's code, notes, rule statements and install command.Input: One item slug, such as pricing-tiers.
get_rules
The full index, or rules with id, statement and check.Input: Optional: rule ids, a category (states) or a brief.
find_sources
Up to eight sources with the reasons each one fits.Input: A task, with optional surface, framework, needs and exclusions.
get_source
The public source profile, status included.Input: One source slug or stable ID, such as land-book.

There is no hosted or remote Tessli MCP. Don’t configure an endpoint for it.

What an agent gets.

The same records the website renders, from 12 items and 39 rules to the curated sources.

For each item

  • The code, and the install command
  • When to use it and when not to
  • The rules it follows
  • The common AI default it replaces, and why this is better
  • How people break it when adapting it
  • States, responsive behaviour and accessibility notes
  • Credits and review status

For each rule

  • The rule in one line
  • Why it matters
  • How to check it
  • The default it guards against
  • The items that apply it

For each source

  • What it is for and what to explore
  • How to access it
  • Its limitations
  • Alternatives, and how each differs
  • Its status; archived sources name a replacement

Plain files at stable URLs.

No integration needed: send an agent one of these URLs, or let it fetch them itself.

llms.txt
What Tessli is, its routes, install commands and boundaries, with counts taken from the data.
/rules/TESSLI.md
The rules index, the same file the rules install adds.
/library/<slug>/item.json and item.md
An item’s code, full notes, rules and install command. Example: pricing-tiers JSON, pricing-tiers Markdown.
/resources/<slug>/profile.json and profile.md
A source’s purpose, access routes, limitations and alternatives. Example: Land-book JSON, Land-book Markdown.

What Tessli does not claim.

  • That it makes AI-generated UI better. That claim waits for a published, blinded comparison scored by people. Until then, Tessli says only that its library is explained, open and installable.
  • That its items and rules are reviewed. 0 of 12 items and 0 of 39 rules are signed by a maintainer today; the rest are marked community or draft wherever they appear.
  • That a source is the best. Source profiles are curator notes kept in the repository, not live checks of the provider. Confirm access, pricing and licences with the provider.
  • Hosted access. The MCP server runs only on your machine. It never contacts a provider, reads credentials or writes state.