building-ui

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

Quality

64%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./src/ii_agent/agents/skills/builtin/expo-building-ui/SKILL.md

The canonical home for this skill is building-native-ui in freekmurze/dotfiles

Quality

Content

57%

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

The skill is highly actionable with executable code and well-organized, real one-level-deep references, but it is significantly padded by a large generic UX/design-system section (including broken repetitive text) that restates concepts Claude already knows, and the main workflow lacks explicit validation checkpoints.

Suggestions

Cut or move the generic 'UI/UX DESIGN SYSTEM' platitudes (onboarding, white space, cognitive load, etc.) into a reference file, keeping only Expo-specific guidance inline; fix or delete the broken repetitive 'Use the right ...' sentence at line 395.

Add an explicit validation step to the 'Running the App' workflow, e.g. 'Verify the build runs in Expo Go before considering a custom build; if a native module is missing, only then run npx expo run:ios.'

Resolve the conflicting icon guidance: the Library Preferences / references point to expo-symbols while the body mandates @expo/vector-icons and forbids FontAwesome — state a single canonical rule.

Dimension	Reasoning	Score
Conciseness	A large block of the 'UI/UX DESIGN SYSTEM' section restates generic mobile-UX platitudes Claude already knows ('Utilize white space', 'Reducing cognitive load', 'Buttons drive actions'), and line 395 degenerates into broken repetition ('Use the right file format. Use the right file size. Use the right compression...'), matching anchor 1 (verbose, explains concepts Claude knows, padded); not 2 because the padding is substantial rather than incidental.	1 / 3
Actionability	The technical core gives fully executable, copy-paste-ready code for Link, Stack.Screen, context menus, form sheets, NativeTabs layouts, boxShadow, and the babel.config.js worklets plugin, plus concrete library directives ('expo-audio not expo-av', 'useWindowDimensions over Dimensions.get()'), matching anchor 3; not 2 because the examples are complete and runnable rather than pseudocode.	3 / 3
Workflow Clarity	The 'Running the App' section lays out a clear numbered sequence (try Expo Go → test → custom build only when required) but has no validation/feedback checkpoint, matching anchor 2 (steps present, checkpoints missing/implicit); not 3 because no explicit validation or error-recovery loop is given, and not 1 because a real sequence does exist.	2 / 3
Progressive Disclosure	A well-signaled References section lists 11 one-level-deep reference files (all verified to exist in ./references/) with one-line descriptions, and the body points into them appropriately ('See ./references/route-structure.md for detailed route conventions'), matching anchor 3 (clear overview with well-signaled one-level-deep references, easy navigation); not 2 because references are clearly signaled and real rather than ambiguous.	3 / 3
	Total	9 / 12 Passed

Description

72%

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 clearly scopes the skill to Expo Router with natural trigger terms and a distinct niche, but it lists topic areas rather than concrete actions and lacks any explicit 'Use when...' trigger guidance, which caps completeness.

Suggestions

Replace the topic list with concrete actions, e.g. 'Build, style, and navigate Expo Router apps with native tabs, animations, and forms.'

Add an explicit trigger clause: 'Use when building or styling Expo Router / React Native apps, or when the user mentions Expo Router, native tabs, or Expo navigation.'

Drop filler like 'beautiful' and 'patterns' that add no scoping value.

Dimension	Reasoning	Score
Specificity	It names the domain ('Expo Router') and lists topic areas ('styling, components, navigation, animations, patterns, and native tabs'), but these are nouns/topics rather than concrete actions like 'build', 'configure', or 'migrate'; anchor 2 (names domain and some actions, not comprehensive) fits, and it is not 3 because no list of concrete executable actions is given.	2 / 3
Completeness	It answers 'what' ('Complete guide for building beautiful apps with Expo Router') but provides no 'Use when...' clause or equivalent explicit trigger guidance, so per the rubric completeness is capped at 2; not 3 because 'when' is entirely missing.	2 / 3
Trigger Term Quality	Natural terms a user would say are well covered — 'Expo Router', 'navigation', 'animations', 'native tabs', 'styling', 'components' — matching the anchor 3 'good coverage of natural terms'; not 2 because the key terms users actually voice when asking for Expo UI help are present.	3 / 3
Distinctiveness Conflict Risk	'Expo Router' with 'native tabs' is a clear, specific niche with distinct triggers unlikely to collide with other skills, matching anchor 3; not 2 because the framing is tightly scoped to Expo Router rather than a generic 'mobile app' or 'UI' skill.	3 / 3
	Total	10 / 12 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: Intelligent-Internet/ii-agent
Path: src/ii_agent/agents/skills/builtin/expo-building-ui/SKILL.md
Commit: 0e57985

Reviewed: 12 minutes ago

Table of Contents

Discovery Implementation Validation

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.