prism-ui

prism-ui is a skill for Claude Code from tonone-ai/tonone. It costs 45 tokens per session (2,312 once invoked), scanned A, original, MIT.

A coding workflow for building complete, responsive, accessible web screens from a visual specification or written description. It first checks the project's framework, styles, routes, APIs, and reusable components before writing the screen code.

In plain words
What is it for?
Use it to build a page, implement a screen, or add a frontend feature with real data and existing project conventions.
Why use it?
It avoids producing a disconnected mock-up or replacing patterns the project already uses. It helps turn a design into working frontend code that fits the existing application.

Skill for Claude Code

Written for Claude Code: allowed-tools in frontmatter. Also seen: names the TodoWrite tool; mentions Claude Code.

Part of the engineering-team plugin — 80 skills shipped together

Good fit Use it to build a page, implement a screen, or add a frontend feature with real data and existing project conventions.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/tonone-ai/tonone/prism-ui
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add tonone-ai/tonone --skill prism-ui
Clone the repo
git clone --depth 1 https://github.com/tonone-ai/tonone

Made for: Claude Code.

Or install engineering-team, the plugin that ships this one along with the rest of its 80 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for prism-ui

README.md
[![agentmods](https://agentmods.dev/badge/skills/tonone-ai/tonone/prism-ui/github.svg)](https://agentmods.dev/skills/tonone-ai/tonone/prism-ui)
Your own site
<a href="https://agentmods.dev/skills/tonone-ai/tonone/prism-ui"><img src="https://agentmods.dev/badge/skills/tonone-ai/tonone/prism-ui/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for prism-ui

Your own site · 80×15
<a href="https://agentmods.dev/skills/tonone-ai/tonone/prism-ui"><img src="https://agentmods.dev/badge/skills/tonone-ai/tonone/prism-ui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 45 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,312 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00045 $0.02312
Opus 5.5 $0.00018 $0.00925
Sonnet 5.5 $0.00009 $0.00462
Haiku 4.5 $0.00005 $0.00231

Measured 17d ago against content hash c5ea425cd462, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

prism-ui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 17d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

bundle/engineering-team/skills/prism-ui/SKILL.md · 248 lines

How it starts

The opening of the file, as written. The whole thing — 248 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Implement a UI Screen or Feature

You are Prism — the frontend and developer experience engineer from the Engineering Team. Given a Form visual spec (or a description of what to build), you write the implementation — complete, responsive, accessible, wired to real data. Not a wireframe, not a scaffold, the actual code.

Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.

Steps

Step 0: Read the Environment

Before writing anything:

  1. Check package.json — framework, styling, state management, existing component libraries
  2. Check for design tokens: tailwind.config.*, CSS custom property files, Form's token output
  3. Check for TypeScript: tsconfig.json
  4. Scan existing pages/screens: src/app/, src/pages/, app/, pages/ — understand routing conventions, layout wrappers, and component patterns in use
  5. Check for API layer: existing fetch utilities, API routes, tRPC setup, GraphQL schema, server actions
  6. Check for existing shared components: src/components/, ui/ — reuse what exists before writing new

If no frontend exists and there's no spec for the stack, default to: Next.js App Router + TypeScript + Tailwind CSS + Radix UI primitives.

Stop if design tokens are missing. Ask Form for the token file. Do not invent visual values.

Step 1: Read the Spec

Form's visual spec is the contract. Before writing a line, extract:

  • Layout — page structure, grid, spacing system in use
  • Components — which components appear; check if they already exist in the codebase
  • Typography — which scale steps map to which roles (heading, label, body, caption)
  • Color usage — which semantic tokens apply to which surfaces
  • States — what does loading look like? Error? Empty? The spec may not cover all of these; implement the gaps using the token system and flag what you assumed
  • Responsive behavior — how does the layout change at mobile/tablet/desktop? If unspecified, implement sensible defaults and flag

Read the full file on GitHub · 248 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 17d ago First seen · 248 lines · 45 tokens per session scan A c5ea425cd462

Subscribe to this mod's changes

prism-ui is a skill published in the GitHub repository tonone-ai/tonone (76 stars, last pushed 9d ago), licensed MIT. It adds 45 tokens to every session and 2,312 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-27.

Related

Other skills, from other repositories

scroll-craft

Build premium scroll-driven landing pages for service, product, food, and drink brands. Plan the visitor journey, page grammar, emotional peak, and bespoke signature move. Create dimensional heroes with independent visual planes, restrained motion, and separate mobile composition. Use supplied photos and footage or…

nateherkai/scroll-craft · 177 tokens

principle-experience-first

Apply when product, UX, or feature-scope tradeoffs come up. Choose user delight over implementation convenience; ship fewer polished features over more rough ones.

michael-denyer/pstack-claude · 37 tokens

principle-redesign-from-first-principles

Apply when integrating a new requirement into an existing design.

michael-denyer/pstack-claude · 21 tokens

design-inventory

Use to run the Claude Design to ClosedLoop pipeline against the current web-ui. Stage A inventories a design export zip into schema-validated findings (typed design units - screens, regions like nav bars, standalone components like a chat dialog; UX and behavioral changes; Storybook component reuse mapping; token…

closedloop-ai/claude-plugins · 173 tokens

outsystems-design-to-app

Beta Feature. This skill is a Beta Feature: a non-final OutSystems capability provided to collect customer feedback. It can change significantly, including through breaking changes, or be discontinued. The first time you use this skill in a conversation, tell the user it's a Beta Feature and share .

OutSystems/outsystems-mcp · 222 tokens

software-android-design

Designs and audits native Android interfaces. Use when reviewing Compose layout, typography, color, motion, or adaptive patterns on a verified emulator build.

vasilyu1983/AI-Agents-public · 34 tokens