CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

building-native-ui

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

Quality

74%

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 ./skills/building-native-ui/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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

This is a strong, dense guidelines body: opinionated, executable rules with real imports and props, complete navigation code examples, and a clearly signaled one-level reference structure. The only weaknesses are mild redundancy in the Expo Go section, no error-recovery loop for the run-the-app workflow, and inline layout code that could be deferred to the existing reference files.

DimensionReasoningScore

Conciseness

The body is dense, imperative guidance ("Never use legacy expo-permissions", "expo-audio not expo-av", "Use CSS boxShadow style prop. NEVER use legacy React Native shadow") with no explanation of concepts Claude already knows. It fits anchor 4 ('Efficient; minor instances of over-explanation that could be trimmed') — the 'Running the App' section repeats its point ("CRITICAL: Always try Expo Go first" then "If you're unsure, try Expo Go first") and could be tightened. It is above anchor 3 because padding is genuinely minor, and below anchor 5 because of that repetition and a few soft bullets ('to make more delightful experiences').

4 / 5

Actionability

Nearly every rule is directly executable: exact package choices ("expo-audio not expo-av", "react-native-safe-area-context not SafeAreaView"), exact props ("contentInsetAdjustmentBehavior='automatic'", "{ borderCurve: 'continuous' }"), and complete copy-paste-ready examples for Link, context menus, previews, modals, form sheets, and NativeTabs/Stack layouts with real imports ("expo-router/stack", "expo-router/unstable-native-tabs"). This matches anchor 5 ('Fully executable; copy-paste ready code or commands; specific examples cover the common cases').

5 / 5

Workflow Clarity

The main multi-step process (running the app) is clearly sequenced with numbered steps and a checkpoint: "1. Start with Expo Go... 2. Check if features work: Test your app thoroughly in Expo Go. 3. Only create custom builds when required", followed by explicit decision criteria for each branch. This fits anchor 4 ('Clear sequence with most checkpoints present'). It is not 5 because there is no error-recovery guidance (e.g., what to do when a feature turns out unsupported in Expo Go), and not 3 because the sequence and its checkpoint are explicit rather than implicit.

4 / 5

Progressive Disclosure

An annotated one-level-deep References block lists 14 reference files with scope summaries, and the Routes section signals one inline ("See ./references/route-structure.md for detailed route conventions"), while the body keeps core rules inline. This matches anchor 4 ('Good structure; most content is appropriately placed; references mostly clear; minor organization gaps'): no bundle files were provided to verify, only the Routes section points to its reference inline (Styling/Navigation never cite tabs.md, toolbar-and-headers.md, etc.), and the ~50-line 'Common route structure' layout code arguably belongs in route-structure.md/tabs.md. It is above anchor 3 because the split is deliberate and clearly signaled, and below anchor 5 because of those gaps.

4 / 5

Total

17

/

20

Passed

Description

56%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 identifies a specific, distinctive domain (Expo Router apps) with a decent spread of natural topic keywords, but it reads as a table-of-contents rather than a capability statement: no concrete actions, no 'when to use this skill' trigger clause, and mild fluff ('complete guide', 'beautiful'). It is functional for triggering but below the standard of the good examples.

Suggestions

State concrete actions instead of topic coverage, e.g., 'Builds and styles Expo Router apps: configures native stacks, tabs, form sheets, and SF Symbol icons; writes Reanimated animations and CSS boxShadow styles.'

Add an explicit trigger clause, e.g., 'Use when building or refactoring an Expo / React Native app with Expo Router, or when adding navigation, native tabs, or iOS-style UI.'

Include the common synonyms users actually say — 'React Native', 'Expo', 'iOS/Android' — and drop the fluff words 'complete' and 'beautiful'.

DimensionReasoningScore

Specificity

"Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs" names the domain but describes no concrete actions — 'Covers X, Y, Z' is a topic enumeration, and 'complete guide'/'beautiful' are fluff. This matches anchor 2 ('Names the domain but actions are minimal or generic'); it is above anchor 1 because the domain is specific, but below anchor 3 because no executable action verb (e.g., 'build', 'configure', 'migrate') is stated concretely.

2 / 5

Completeness

The 'what' is stated (a guide covering fundamentals, styling, components, navigation, animations, patterns, native tabs for Expo Router apps), but there is no 'when' — no 'Use when...' clause or equivalent trigger guidance, which per the judging guidelines caps completeness at 3. It fits anchor 3 exactly ('Has a clear what but when is missing'); it cannot be 4 because the trigger context is entirely absent, and not 2 because the 'what' is not vague.

3 / 5

Trigger Term Quality

Includes strong natural terms — "Expo Router", "styling", "components", "navigation", "animations", "native tabs" — that users building Expo apps would plausibly say. It matches anchor 4 ('Good keyword coverage; a few natural terms missing') but not anchor 5, since common synonyms like 'React Native', 'Expo app', or 'iOS/Android' are absent; it is above anchor 3 because far more than one or two relevant keywords are present.

4 / 5

Distinctiveness Conflict Risk

"Expo Router" carves out a clear niche (Expo/React Native app UI), so the description is mostly distinct with minor overlap risk against a general React Native or Expo development skill — matching anchor 4. It is below anchor 5 because terms like 'styling', 'components', and 'animations' could overlap with generic UI/frontend skills, and above anchor 3 because the Expo Router framing is highly specific rather than 'somewhat specific'.

4 / 5

Total

13

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

administrakt0r/AI-Agents-Safe-Coding-Skills

Path

skills/building-native-ui/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.