Habilidades baseline-ui
📦
baseline-ui
Seguro
Apply UI Quality Standards
AI-generated interfaces often lack consistency and accessibility. This skill enforces opinionated UI standards for Tailwind CSS, accessible components, performance best practices, and design constraints.
Soporta: Claude Codex Code(CC)
1
Descargar el ZIP de la skill
2
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
3
Activa y empieza a usar
Pruébalo
Usando "baseline-ui". /baseline-ui
Resultado esperado:
- Violation found: Line 23 uses `h-screen`
- Why it matters: `h-screen` causes layout issues on mobile browsers with dynamic toolbars
- Fix: Replace with `h-dvh` for dynamic viewport height
- Violation found: Line 51 animates `width` property
- Why it matters: Layout property changes trigger reflow, causing janky animations
- Fix: Use `transform: scaleX()` instead with origin-aligned transform
Usando "baseline-ui". /baseline-ui Button.tsx
Resultado esperado:
- Button.tsx - Accessibility Violation: Icon-only button lacks aria-label
- Impact: Screen readers cannot announce the button purpose
- Fix: Add `aria-label="Edit settings"` to the button element
- Button.tsx - Animation Violation: Button has custom letter-spacing
- Impact: Modifying tracking breaks visual rhythm and accessibility
- Fix: Remove `tracking-wide` unless explicitly requested by design
Auditoría de seguridad
Segurov2 • 2/10/2026
All 54 static findings are FALSE POSITIVES. The scanner misinterpreted Markdown documentation syntax (backtick characters) as Ruby shell commands and UI terminology as security threats. This skill is pure documentation with no executable code, network requests, or security risks.
1
Archivos escaneados
86
Líneas analizadas
4
hallazgos
2
Auditorías totales
Problemas de riesgo medio (1)
SKILL.md:12SKILL.md:15SKILL.md:24SKILL.md:25SKILL.md:26SKILL.md:30SKILL.md:33SKILL.md:39SKILL.md:41SKILL.md:42SKILL.md:44SKILL.md:49SKILL.md:50SKILL.md:51SKILL.md:52SKILL.md:53SKILL.md:55SKILL.md:61SKILL.md:62SKILL.md:63SKILL.md:64SKILL.md:68SKILL.md:69SKILL.md:73SKILL.md:74SKILL.md:75
Backtick Syntax Misinterpretation
Scanner flagged 48 locations as 'Ruby/shell backtick execution' but these are Markdown code block syntax in documentation, not executable code.
Problemas de riesgo bajo (3)
Documentation URL Reference
Scanner flagged line 33 URL as 'Hardcoded URL' but this is a documentation reference link.
UI Terminology Misinterpretation
Scanner misinterpreted UI terms (baseline, AlertDialog, gradients) as cryptographic/security terms.
CSS Property Misinterpretation
Scanner misinterpreted CSS property names (background, images) as system reconnaissance terms.
Auditado por: claude Ver historial de auditorías →
Puntuación de calidad
38
Arquitectura
100
Mantenibilidad
87
Contenido
31
Comunidad
94
Seguridad
83
Cumplimiento de la especificación
Lo que puedes crear
Front-End Developer Review
Use /baseline-ui to review React components against established quality standards before committing code.
AI Assistant Guidelines
Configure AI assistants to follow consistent UI patterns when generating interface code.
Design System Documentation
Establish and enforce team-wide UI standards for React component development.
Prueba estos prompts
Quick Constraint Check
/baseline-ui Review all UI code in this conversation against the baseline constraints. Report any violations with the exact line, why it matters, and a concrete fix.
Component Review
/baseline-ui <file> Apply the baseline constraints to this file. For each violation provide: the exact code snippet, one sentence explaining the impact, and a specific code-level suggestion.
Animation Audit
Review the following React components for animation violations: - Are only compositor props animated? - Are layout properties avoided? - Does animation respect reduced-motion preferences? Identify any issues and suggest fixes.
Accessibility Validation
Check these components for accessibility compliance: - Icon-only buttons have aria-labels? - AlertDialog is used for destructive actions? - Error messages appear near their inputs? - Keyboard and focus behavior uses primitives?
Mejores prácticas
- Use the /baseline-ui command at the start of UI-focused conversations to establish constraints upfront
- Run /baseline-ui before submitting PRs that include React component changes
- Combine with component library documentation to ensure compatibility with Base UI, React Aria, or Radix primitives
Evitar
- Ignoring animation constraints that trigger layout reflow, causing janky user experiences
- Mixing primitive systems (Base UI + Radix) within the same interaction surface
- Using arbitrary z-index values instead of a documented scale
Preguntas frecuentes
Does this skill modify my code files?
No. The skill only reviews code and provides recommendations. You must apply fixes manually.
Which CSS frameworks are supported?
The skill is designed for Tailwind CSS. It can be adapted to other utility-first frameworks with custom configuration.
What React component libraries work best?
Base UI, React Aria, and Radix Primitives are officially supported. The skill requires accessible primitives for keyboard and focus behavior.
Can I skip constraints for specific components?
Yes. The skill can be invoked selectively. Document exceptions in code comments for team clarity.
Does this work with Next.js or other frameworks?
Yes. The constraints are framework-agnostic. Only the animation guidelines depend on React and framer-motion.
How do I add custom constraints?
Fork the skill and modify SKILL.md. Your team can maintain a private version with additional rules.