● Communauté
oil-oil
⚡ Instantané
OilOil UI/UX Guide
par oil-oil · oil-oil/oiloil-ui-ux-guide
Modern UI/UX guidance covering CRAP, HCI laws, and design system thinking.
A skill that teaches Claude design fundamentals — CRAP principle, Hick's law, Fitts's law, Gestalt — and how to apply them to wireframes and component design. Catches the 'AI design slop' that makes everything look like the same dashboard.
Pourquoi l'utiliser
Fonctionnalités clés
- CRAP principle checklist (Contrast, Repetition, Alignment, Proximity)
- Common HCI laws with concrete examples
- Design system thinking (tokens, components, patterns)
- Critique mode: 'review this UI against these principles'
- Pairs well with frontend code-gen skills
Démo en direct
Aperçu en pratique
oiloil-ui-ux-guide-skill.replay
▶ prêt
Cas d'usage
Usages concrets : OilOil UI/UX Guide
Quand l'utiliser : You built a screen and want a structured critique before shipping.
Prérequis
- Server/skill installed and authenticated — See repo README
Déroulement
-
Submit
Using the UI/UX skill, review attached screenshot of the settings page.✓ Copié
→ Critique grouped by CRAP + HCI laws
-
Prioritize
Rank the issues by impact and tell me the top 3 to fix.✓ Copié
→ Top-3 list with reasoning
Résultat : A short, ranked action list rather than 30 vibes.
Pièges
- Visual critique from a screenshot misses interaction issues. Pair with a real Playwright walkthrough for flows. — Visual critique from a screenshot misses interaction issues. Pair with a real Playwright walkthrough for flows.
Coût et limites
Coût d'exécution
- Quota d'API
- See provider docs for rate limits
- Tokens par appel
- Varies by tool
- Monétaire
- See repo README for pricing details
- Astuce
- Cache tool results and avoid repeated identical calls.
Sécurité
Permissions, secrets, portée
Stockage des identifiants : Use environment variables; never commit secrets
Sortie de données : Tool calls go to the provider's API as documented
Dépannage
Erreurs courantes et correctifs
critique is too generic
Provide the screen's purpose and audience. The skill's quality improves with context.
Vérifier : Re-run with context
skill doesn't see images
Ensure your Claude client supports image input; otherwise paste a Figma/HTML render.
Vérifier : Test with a plain image first
Alternatives
OilOil UI/UX Guide vs autres
| Alternative | Quand l'utiliser | Compromis |
|---|
| ai-friendly-web-design-skill | You want web-design-specific guidance | Narrower scope |