المهارات ui-skills
🎨

ui-skills

آمن

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.

يدعم: Claude Codex Code(CC)
🥉 74 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "ui-skills". Generate a card component using ui-skills patterns

النتيجة المتوقعة:

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.

استخدام "ui-skills". Create a modal dialog following ui-skills constraints

النتيجة المتوقعة:

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

التدقيق الأمني

آمن
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
الملفات التي تم فحصها
23
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

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.

جرّب هذه الموجهات

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.

أفضل الممارسات

  • 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

تجنب

  • 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

الأسئلة المتكررة

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.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📄 SKILL.md