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.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「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.
安全審計
安全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.
品質評分
你能建構什麼
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.
試試這些提示
Using the ui-skills patterns, generate a button component with primary, secondary, and disabled states. Include accessibility attributes and focus states.
Apply ui-skills constraints to create a text input component with label, placeholder, error state, and validation messaging. Follow WCAG guidelines.
Using ui-skills patterns, create a navigation component that works across desktop and mobile. Include keyboard navigation and screen reader support.
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