Compétences ui-skills
🎨

ui-skills

Sûr

Build Consistent User Interfaces with Design Constraints

AI agents often produce inconsistent UI code across different sessions. This skill provides opinionated design constraints and patterns to ensure consistent, accessible interface generation every time.

Prend en charge: Claude Codex Code(CC)
🥉 74 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez Ă  utiliser

Tester

Utilisation de "ui-skills". Generate a card component using ui-skills patterns

RĂ©sultat attendu:

A reusable Card component with consistent padding, border radius, shadow tokens, and support for header, body, and footer slots. Includes hover states and accessibility attributes.

Utilisation de "ui-skills". Create a modal dialog following ui-skills constraints

RĂ©sultat attendu:

A Modal component with focus trap, escape key handling, backdrop click detection, and proper ARIA roles for screen readers.

Audit de sécurité

Sûr
v1 • 2/25/2026

This skill contains documentation-only content (SKILL.md) with no executable code. Static analysis flagged URLs and patterns that are false positives - the URLs are GitHub repository references in documentation, not network requests. No security risks detected.

1
Fichiers analysés
23
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
50
Communauté
100
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

Frontend Developer Building a Design System

Use this skill to generate consistent component patterns that follow established design principles and accessibility standards.

AI Agent Creating UI Components

Enable AI coding assistants to produce UI code that adheres to your team's design constraints and patterns.

Startup Team Standardizing UI Development

Establish a shared vocabulary of UI patterns for small teams without dedicated design resources.

Essayez ces prompts

Generate a Basic Button Component 
Using the ui-skills patterns, generate a button component with primary, secondary, and disabled states. Include accessibility attributes and focus states.
Create a Form Input with Validation 
Apply ui-skills constraints to create a text input component with label, placeholder, error state, and validation messaging. Follow WCAG guidelines.
Build a Responsive Navigation Component 
Using ui-skills patterns, create a navigation component that works across desktop and mobile. Include keyboard navigation and screen reader support.
Design a Data Table with Sorting 
Apply ui-skills constraints to generate a data table component with sortable columns, row selection, and pagination. Ensure accessibility compliance.

Bonnes pratiques

  • Always define design tokens (spacing, colors, typography) before generating components
  • Test components with keyboard navigation and screen readers during development
  • Document component props, states, and usage examples for team consistency

Éviter

  • Hardcoding color values instead of using design system tokens
  • Ignoring focus states and keyboard navigation in interactive elements
  • Creating overly complex components that should be split into smaller units

Foire aux questions

What frameworks does this skill support?
This skill focuses on React-based component patterns but the design principles apply to any frontend framework.
Does this skill generate actual CSS code?
No, it provides component structure and patterns. Styling should be applied using your existing design system or CSS framework.
How do I integrate this with my existing design system?
Map your design tokens (spacing, colors, typography) to the patterns in this skill before generating components.
Can I customize the accessibility requirements?
Yes, the skill uses WCAG as a baseline but you can specify additional requirements in your prompts.
Is this skill suitable for mobile-first development?
Yes, the patterns support responsive design and mobile-first approaches with appropriate constraints.
How often are the design patterns updated?
The patterns evolve based on community feedback and emerging best practices in UI development.

Détails du développeur

Auteur

sickn33

Licence

MIT

DĂ©pĂ´t

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/ui-skills

RĂ©f

main

Structure de fichiers

đź“„ SKILL.md