expo-tailwind-setup

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

4.54x

Quality

68%

Does it follow best practices?

Impact

100%

4.54x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/expo/skills/expo-tailwind-setup/SKILL.md

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

Quality

Content

71%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 highly actionable, executable setup guide with pinned versions and complete configs, weakened mainly by inlined component-library code that belongs in bundle files and some duplicated CSS sections. Adding a verification step after configuration and splitting the wrappers into real source files would improve both clarity and disclosure.

Suggestions

Move the src/tw component wrappers (index.tsx, image.tsx, animated.tsx) into a references/ or scripts/ bundle file and keep only a short usage snippet in SKILL.md, which would cut the body roughly in half.

Add an explicit verification checkpoint after configuration (e.g. 'Run npx expo start and confirm the Usage example renders styled output before proceeding').

De-duplicate the platform-specific '@media ios'/'@media android' blocks that appear in both the global.css section and the 'Platform-Specific Styles' section, and reduce the commented-out babel config to a single sentence.

Dimension	Reasoning	Score
Conciseness	The body is code-dominant and assumes Claude's competence (no beginner explanations), but it duplicates the '@media ios'/'@media android' blocks in both global.css and the 'Platform-Specific Styles' section, and carries a ~12-line commented-out babel config that could be condensed to a one-line note.	3 / 5
Actionability	Everything is copy-paste executable: a pinned install command (nativewind@5.0.0-preview.2, react-native-css@0.0.0-nightly.5ce6396, lightningcss resolution), complete metro.config.js, postcss.config.mjs, global.css, full component wrappers, and a working usage example.	5 / 5
Workflow Clarity	Sections form a clear install → config → wrappers → usage sequence with concrete commands per step, and the Troubleshooting section provides error-recovery checks ('Styles not applying', 'Platform colors not working'). The gap keeping it from 5 is the absence of an explicit post-setup verification step (e.g. start the dev server and confirm styles render).	4 / 5
Progressive Disclosure	The single SKILL.md is well-sectioned with clear headings, but ~200 lines of reference-grade component library code (src/tw/index.tsx, image.tsx, animated.tsx) are inlined rather than shipped as bundle files; there are no references/ or scripts/ files at all. Good structure, but content that should be separate is inline.	3 / 5
	Total	15 / 20 Passed

Description

65%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 distinctive, domain-specific description with good natural keywords, but it is a single-action statement with no 'when to use' trigger clause, limiting both completeness and its usefulness for skill selection. Adding an explicit usage trigger and one or two more concrete capabilities would lift it substantially.

Suggestions

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

Mention the concrete deliverables the skill produces (Metro/PostCSS config, global.css, className-compatible component wrappers) so the 'what' is comprehensive rather than a single 'Set up' action.

Include adjacent natural phrases users say, such as 'React Native styling', 'className support', or 'dark mode / platform colors', to broaden trigger coverage.

Dimension	Reasoning	Score
Specificity	Names the domain precisely ('Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling') but offers only one concrete action ('Set up'), which is not comprehensive coverage of what the skill actually guides (install, config, component wrappers, theming).	3 / 5
Completeness	The 'what' is clear (set up Tailwind v4 + NativeWind v5 in Expo), but there is no 'Use when...' clause or equivalent trigger guidance anywhere in the description, which caps completeness at 3 per the judging guidelines.	3 / 5
Trigger Term Quality	Natural keywords users would say are present (Tailwind, Tailwind CSS, Expo, NativeWind, styling), but common variations and adjacent phrases (React Native styling, className, dark mode) are missing, so coverage is good rather than comprehensive.	4 / 5
Distinctiveness Conflict Risk	The exact named stack with versions (Tailwind v4, Expo, react-native-css, NativeWind v5) carves out a clear niche with minimal risk of triggering for a wrong skill such as generic web Tailwind setup.	5 / 5
	Total	15 / 20 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: openai/plugins
Path: plugins/expo/skills/expo-tailwind-setup/SKILL.md
Commit: 5fd93af

Reviewed: 7 days 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.