CtrlK
BlogDocsLog inGet started
Tessl Logo

building-ui-ux

Use when implementing user interfaces or user experiences - guides through exploration of design variations, frontend setup, iteration, and proper integration

56

Quality

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.agency/plugins/nori/skills/building-ui-ux/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

67%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a well-structured, actionable process guide with a clear five-phase sequence, a user feedback loop, and concrete examples for the key mechanics (dev server startup, variation stacking, integration checklist). Its main weakness is redundancy between the <required> todo block, the Overview, and the phases themselves, plus a few high-level integration steps without concrete commands.

Suggestions

Collapse the duplication: drop the <required> 7-step todo list or the Overview's core-principle restatement, since both restate the five phases that follow.

Give the Phase 5 integration steps concrete verification commands (e.g. how to smoke-test a form submission or check a route renders) so the checkpoints are executable like Phase 2's dev-server instructions.

Add a quick check that the dev server started successfully (curl the URL or watch for the ready log) before announcing the URL to the user.

DimensionReasoningScore

Conciseness

The body is mostly lean, but there is real redundancy: the <required> 7-step todo list restates the five phases that follow it, and the Overview section repeats the same core principle and the description text. This matches anchor 3 ('mostly efficient but includes some unnecessary explanation or could be tightened') rather than 4, where only minor trimming would be needed.

3 / 5

Actionability

Concrete, executable guidance dominates: exact user prompts to ask, specific commands ("npm run dev", "npm start"), a runnable React stacking example, and a concrete integration-point checklist. A few steps remain high-level ('Add proper state management', 'Implement error handling'), which keeps it at anchor 4 rather than 5.

4 / 5

Workflow Clarity

Five clearly sequenced phases with an explicit feedback loop ('Continue asking for feedback until satisfied') and end-state checkpoints ('Test all interactive elements', 'Verify accessibility basics'). It falls short of anchor 5 because the validation steps tell what to check but not how, and there is no check that the dev server actually started before proceeding.

4 / 5

Progressive Disclosure

No bundle files exist, and the 123-line body is organized into a clean overview-plus-five-phase structure with headers that make navigation easy. Nothing inlined clearly belongs in a separate file, so this lands at anchor 4 ('good structure; most content is appropriately placed') rather than 5, which is reserved for content split across well-signaled reference files.

4 / 5

Total

15

/

20

Passed

Description

58%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description has a correct "Use when..." trigger structure and names the domain, but the capability list is generic process language and it misses the natural synonyms (UI, UI/UX, design, mockup) users would most likely say. It is functional but sits in the middle of the rubric range rather than exemplifying it.

Suggestions

Rewrite the 'what' with concrete actions in third person, e.g. 'Builds and compares UI design variations, starts the dev server for live preview, iterates on user feedback, and wires the final UI to routing, state, and API layers.'

Add natural trigger synonyms to the 'when' clause — 'UI', 'UI/UX', 'design', 'mockup', 'wireframe' — so the skill fires on the phrases users actually say.

Narrow the trigger scope (e.g. 'when building or restyling web/app interfaces and choosing between design directions') to reduce overlap with visualization and branding skills.

DimensionReasoningScore

Specificity

The description names the domain ("user interfaces or user experiences") and lists several actions ("exploration of design variations, frontend setup, iteration, and proper integration"), but the actions are generic process words rather than concrete capabilities like "build design variations" or "wire components to APIs". It sits between anchor 3 and 4, closer to 3 because none of the named actions are truly specific.

3 / 5

Completeness

Both halves are present: an explicit trigger ("Use when implementing user interfaces or user experiences") and a "what" ("guides through exploration of design variations, frontend setup, iteration, and proper integration"). It is not a 5 because the "what" leans on the vague verb "guides through" and the "when" lacks concrete trigger phrases like "UI", "design", or "mockups"; it is above 3 because both what and when are explicitly stated.

4 / 5

Trigger Term Quality

Relevant keywords exist ("user interfaces", "user experiences", "frontend") but common variations users would actually say are missing: "UI", "UI/UX", "design", "mockup", "wireframe". This matches anchor 3 ("some relevant keywords but missing common variations or synonyms") rather than 4, which requires good coverage of natural terms.

3 / 5

Distinctiveness Conflict Risk

"Implementing user interfaces or user experiences" is a broad trigger that overlaps with adjacent skills (data visualization dashboards, brand/styling skills, frontend build skills). It is somewhat specific to UI-building but not a clear niche with distinct triggers, matching anchor 3 rather than 4.

3 / 5

Total

13

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
microsoft/FluidFramework
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.