Agent skill · software engineering · jeremylongshore

prism-ui

Implement a complete UI screen or feature from a Form visual spec. Use when asked to "build a page", "implement this screen", "build the frontend for this feature", or "create this UI".

Why this skill is useful

Provides a structured approach to implementing UI components with specific patterns and optimizations that the AI wouldn't reliably generate on its own.

What it needs

Requires python3 installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.

What this skill does

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. …

How to use it

Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:

@skills jeremylongshore/prism-ui

View the source on GitHub

Browse the @skills marketplace