Set Up Compliance Tracking for the Frontend Design Tile

Problem Description

Your team installed brightcorp/frontend-design from the Tessl registry a few weeks ago. It has guidelines for how agents should write React components — styling rules, component preferences, import conventions, etc.

The team lead wants to start using the analysis pipeline to check whether agents are actually following these guidelines. She's asked you to set up verifiers so the analysis pipeline can score agent sessions against the frontend design rules.

The skill content is shown below for reference. Figure out where and how to create the verifiers so the analysis pipeline can discover them.

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: tessl.json =============== { "tiles": { "brightcorp/frontend-design": { "version": "2.1.0" } } }

=============== FILE: .tessl/tiles/brightcorp/frontend-design/skills/frontend-design/SKILL.md ===============

name: frontend-design description: "Write React components using the project's design system. Use when creating or modifying UI components."

Frontend Design Skill

Build React components that follow the project's design conventions.

Styling

Use Tailwind CSS for all styling. Do not use inline styles, CSS modules, or any other styling approach.

Components

Prefer shadcn/ui components over building custom ones from scratch. When a shadcn/ui component exists that fits the need, use it.

TypeScript

Always use .tsx extension for files containing JSX. Use .ts for plain TypeScript files without JSX.

Dev Server

Always start the dev server with bun dev before taking any screenshots or running visual tests. Never take a screenshot without a running dev server.

Imports

Use .ts or .tsx extensions in all local import paths. Do not use .js extensions for local imports.

Testing

Run bun test after making component changes. Do not commit component changes without running tests first.