CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

tranmere-web-brand-guidelines

Apply Tranmere-Web's established archive UI language when designing or changing site pages, React components, result lists, player tables, match reports, team sheets, honours, filters, statistics and calls to action. Use for any visual or interaction work in packages/site that should match the Results, Match and Players pages.

72

Quality

91%

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

SKILL.md
Quality
Evals
Security

Quality

Content

86%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.

A tight, well-structured instruction-only skill: concrete design tokens, linkability rules, and real source-of-truth file paths, with a genuine one-level reference file carrying the detailed patterns. The main gaps are the unnamed lint command and the absence of any fix-and-retry guidance after the lint/build verification steps.

Suggestions

Name the actual lint command(s) in step 7 (e.g. the specific eslint/tsc invocation for packages/site) instead of 'the narrowest relevant lint command', so the verification step is executable without guesswork.

Add a brief error-recovery instruction after the lint/build step (fix issues and re-run until clean) to close the workflow feedback loop.

Inline one short JSX snippet combining the eyebrow/heading tokens so step 4's typography rules are copy-paste ready rather than assembled from prose.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence: 'Use sharp or near-sharp bordered panels. Standard surfaces are bg-[#fffdf8]…' — every line is a project-specific instruction with no padding, no explanation of concepts Claude already knows, and no verbosity. It fits the 'every token earns its place' anchor, not the level-4 anchor since there are no over-explanations to trim.

5 / 5

Actionability

Mostly executable guidance with concrete tokens and commands: 'max-w-7xl, responsive px-6 sm:px-10 lg:px-12', 'bg-[#fffdf8], bg-[#e8e2d6], and border-[#071a2b]/15', route patterns like '/page/player/<name>' and '/match/<season>/<date>', and real source paths ('packages/site/components/apps/partials/ResultTable.tsx'). It falls short of a 5 because 'Run the narrowest relevant lint command' names no actual command, and no code snippet shows a token combination in place.

4 / 5

Workflow Clarity

The 7-step workflow is clearly sequenced (inspect first, shell, scannable fact, typography, responsive disclosure, linkability, verify) and ends with checkpoints ('Run the narrowest relevant lint command. Run the site build for structural changes'). It does not reach 5 because there is no error-recovery loop — what to do when lint or the build fails is left implicit — which the level-5 anchor requires.

4 / 5

Progressive Disclosure

The body is a well-organized overview with a clearly signaled, one-level-deep reference: 'Read [references/ui-patterns.md](references/ui-patterns.md) before making a substantial UI change' and 'Follow the exact patterns and tokens in [references/ui-patterns.md] for:' followed by an itemized list of what it covers. The referenced file exists, matches those topics, and points nowhere deeper; at 47 lines the split is appropriate with no content that belongs in the reference inlined.

5 / 5

Total

18

/

20

Passed

Description

92%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.

A strong description: third-person, specific, and comprehensive on both what the skill does and when to use it, with a well-scoped trigger tied to packages/site and named archive pages. The only weakness is modest synonym coverage in the trigger terms.

DimensionReasoningScore

Specificity

Concrete and comprehensive: 'Apply Tranmere-Web's established archive UI language when designing or changing site pages, React components, result lists, player tables, match reports, team sheets, honours, filters, statistics and calls to action' enumerates a full list of specific targets plus the action, matching the level-5 anchor (multiple specific concrete items, comprehensive coverage) rather than level 4's 'minor gaps in coverage'.

5 / 5

Completeness

Both parts are explicit with concrete trigger phrases: the 'what' is 'Apply Tranmere-Web's established archive UI language when designing or changing…' and the 'when' is 'Use for any visual or interaction work in packages/site that should match the Results, Match and Players pages.' This matches the level-5 anchor exactly; level 4 would require the when-clause to be less explicit.

5 / 5

Trigger Term Quality

Good natural-term coverage: 'site pages', 'React components', 'result lists', 'player tables', 'match reports', 'team sheets', 'honours', 'filters', 'statistics', 'calls to action', 'visual or interaction work' — phrases a user of this repo would plausibly say. It sits below the level-5 anchor because a few natural synonyms users might use ('brand', 'styling', 'colours', 'design system') are absent.

4 / 5

Distinctiveness Conflict Risk

A clear niche with minimal conflict risk: the proper noun 'Tranmere-Web', the archive-UI domain, and the scoping to 'packages/site' and the 'Results, Match and Players pages' make it hard to trigger for the wrong skill — matching the level-5 'clear niche with distinct triggers' anchor rather than level 4's 'minor overlap risk with closely related skills'.

5 / 5

Total

19

/

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

chrisowen491/tranmere-web

Path

.agents/skills/tranmere-web-brand-guidelines/SKILL.md

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.