expo-tailwind-setup
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
71
56%
Does it follow best practices?
Impact
100%
4.54xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./plugins/expo/skills/expo-tailwind-setup/SKILL.mdQuality
Discovery
54%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 benefits from highly specific technology names that serve as excellent trigger terms and make it very distinctive. However, it only describes a single action ('Set up') without elaborating on sub-tasks, and critically lacks any 'Use when...' clause to guide Claude on when to select this skill. Adding explicit trigger guidance and expanding the capability list would significantly improve it.
Suggestions
Add a 'Use when...' clause, e.g., 'Use when the user wants to add Tailwind CSS styling to an Expo or React Native project, or mentions NativeWind, react-native-css, or universal styling setup.'
Expand the capability list beyond just 'Set up' to include specific actions like 'configure babel/metro, install dependencies, resolve common NativeWind v5 configuration issues, add theme customization'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Tailwind CSS v4 in Expo) and a general action ('Set up'), but only describes one action rather than listing multiple concrete capabilities like configuration steps, troubleshooting, or specific setup tasks. | 2 / 3 |
Completeness | Describes 'what' (set up Tailwind CSS v4 in Expo) but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill. Per rubric guidelines, missing 'Use when...' caps completeness at 2, and the 'what' is also thin, warranting a 1. | 1 / 3 |
Trigger Term Quality | Includes highly specific and natural trigger terms users would actually say: 'Tailwind CSS v4', 'Expo', 'react-native-css', 'NativeWind v5', 'universal styling'. These are the exact technology names a developer would mention when needing this skill. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive due to the very specific technology stack combination (Tailwind CSS v4 + Expo + react-native-css + NativeWind v5). This is unlikely to conflict with other skills given the narrow, well-defined niche. | 3 / 3 |
Total | 9 / 12 Passed |
Implementation
57%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill excels at actionability with complete, production-ready code for every configuration file and component wrapper needed. However, it's a monolithic document that would benefit significantly from splitting the large component implementations and Apple color system into separate referenced files. The workflow lacks explicit sequencing numbers and validation checkpoints to confirm each setup step succeeded.
Suggestions
Split the component wrappers (src/tw/index.tsx, src/tw/image.tsx, src/tw/animated.tsx) and Apple system colors CSS into separate bundle files, referencing them from the main SKILL.md with clear links
Add an explicit numbered workflow (Step 1, Step 2, etc.) with validation checkpoints like 'Run npx expo start and verify no Metro errors' after config setup and 'Confirm className styles render' after component setup
Remove the overview bullet list explaining what each package is — Claude doesn't need to be told what Tailwind CSS or PostCSS are
Trim the 'Key Differences from NativeWind v4' section to only the non-obvious items (e.g., keep #5 about component wrappers, drop #3 about CSS imports which is standard Tailwind v4 knowledge)
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The overview section explaining what each tool is ('Modern CSS-first configuration', 'CSS runtime for React Native') is unnecessary padding Claude doesn't need. The note about autoprefixer and postcss is helpful, but the 'Key Differences' section and some explanatory text could be tightened. The component wrapper code is necessarily long but justified. | 2 / 3 |
Actionability | Excellent actionability — every step includes fully executable, copy-paste ready code: bash install commands, complete config files, full component implementations with TypeScript types, and usage examples. The component wrappers are production-ready, not pseudocode. | 3 / 3 |
Workflow Clarity | The setup steps are implicitly sequenced (install → config files → components → usage) but lack explicit ordering, validation checkpoints, or verification steps. There's no 'run the app and verify styles work' step, no feedback loop for common setup failures beyond a brief troubleshooting section at the end. | 2 / 3 |
Progressive Disclosure | This is a monolithic wall of content — over 300 lines with no references to external files. The Apple system colors section, the full component wrapper implementations, and the animated components could all be split into separate referenced files. Everything is inline, making the skill heavy to load. | 1 / 3 |
Total | 8 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
- Repository
- expo/skills
- Commit
09ee211
- 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.