CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

expo-tailwind-setup

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

52

Quality

65%

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 ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/expo-tailwind-setup/SKILL.md

The canonical home for this skill is expo-tailwind-setup in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

57%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 delivers genuinely executable, complete code for an unusual setup and explains little that Claude already knows, but it is a monolithic ~470-line file with duplicated platform CSS, no validation checkpoints, and a missing app-entry CSS import step. Offloading the component library to bundle files and adding a verify step would lift it substantially.

Suggestions

Move the ~250-line CSS component wrapper library (src/tw/index.tsx, image.tsx, animated.tsx) into scripts/ or references/ files and keep only the pattern plus one example inline in SKILL.md.

Add the missing setup step for importing src/global.css in the app entry, plus a validation checkpoint such as 'restart Metro with --clear and confirm Tailwind classes render on a test screen before continuing'.

Deduplicate the '@media ios/android' blocks repeated between Global CSS and Platform-Specific Styles, and isolate pinned preview versions (nativewind@5.0.0-preview.2, react-native-css nightly, lightningcss 1.30.1) in a clearly labeled version-compat note.

DimensionReasoningScore

Conciseness

The body is largely efficient, code-first content Claude cannot infer, but the platform-specific '@media ios/android' CSS is duplicated verbatim between the Global CSS and Platform-Specific Styles sections, and time-sensitive pinned versions ('nativewind@5.0.0-preview.2', 'react-native-css@0.0.0-nightly.5ce6396', 'lightningcss: 1.30.1') appear outside any deprecated/old-patterns section. This matches the 'mostly efficient but could be tightened' anchor rather than anchor 4's minor trimmable instances.

3 / 5

Actionability

The install command, Metro/PostCSS configs, complete component wrapper code, and usage example are copy-paste ready, but one key detail is missing: the setup never shows importing 'src/global.css' into the app entry, and troubleshooting ('Ensure you have the CSS file imported in your app entry') reveals this was a needed step. That minor gap keeps it below the 'fully executable, covers common cases' anchor.

4 / 5

Workflow Clarity

A sequence is implied by section order (install, configure, create wrappers, use), but steps are not enumerated and there are no validation checkpoints (e.g., restarting Metro with --clear or verifying styles render before proceeding); the troubleshooting section only loosely substitutes for feedback loops. This fits the 'steps listed but validation gaps, checkpoints missing or implicit' anchor.

3 / 5

Progressive Disclosure

Section headers make the ~470-line body navigable, but it is a monolith: roughly 250 lines of reusable component-wrapper library code ('src/tw/index.tsx', 'image.tsx', 'animated.tsx') are inlined when they clearly belong in scripts/ or references/ bundle files, and no bundle files exist at all. This matches the 'some structure but content that should be separate is inline' anchor; it does not drop to anchor 2 because the section organization itself is good.

3 / 5

Total

13

/

20

Passed

Description

57%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 is highly specific about the toolchain and distinctly scoped, but it describes only one generic action and completely lacks 'when to use' trigger guidance. Adding a 'Use when...' clause with natural user phrases would substantially improve it.

Suggestions

Add an explicit trigger clause, e.g. 'Use when setting up Tailwind CSS, NativeWind, or className-based styling in an Expo / React Native project.'

Enumerate the concrete actions covered (configure Metro and PostCSS, create the global CSS file, build CSS-enabled component wrappers) rather than the single generic 'Set up'.

Include natural synonyms users would say such as 'React Native styling' or 'className in React Native' to broaden trigger coverage.

DimensionReasoningScore

Specificity

The description names a precise domain ('Tailwind CSS v4 in Expo with react-native-css and NativeWind v5') but offers only a single generic action ('Set up'), matching the anchor for domain plus 1-2 concrete actions without comprehensive coverage. It is clearly below anchor 4, which requires several specific actions, and above anchor 2, which lacks a real action.

3 / 5

Completeness

The 'what' is clear (set up Tailwind v4 in Expo using these specific libraries), but there is no 'Use when...' clause or equivalent trigger guidance anywhere; the 'when' is only weakly implied. Per the judging guidelines, a missing 'Use when' clause caps completeness at 3.

3 / 5

Trigger Term Quality

Terms like 'Tailwind CSS v4', 'Expo', 'NativeWind v5', and 'universal styling' are natural phrases a user would say, but common variations such as 'React Native styling', 'className in React Native', or 'mobile CSS' are absent. This fits the anchor for some relevant keywords while missing common variations or synonyms.

3 / 5

Distinctiveness Conflict Risk

The description pins a highly specific toolchain (Expo + Tailwind v4 + react-native-css + NativeWind v5) that no other plausible skill would claim, giving it a clear niche with distinct triggers and minimal conflict risk.

5 / 5

Total

14

/

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

plugins/AI-Agents-Safe-Coding-Skills-claude/skills/expo-tailwind-setup/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.