Provides consistent design patterns and constraints for building interfaces.
Install
mkdir -p .claude/skills/ui-skills-t-sunm && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13803" && unzip -o skill.zip -d .claude/skills/ui-skills-t-sunm && rm skill.zipInstalls to .claude/skills/ui-skills-t-sunm
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Opinionated, evolving constraints to guide agents when building interfacesKey capabilities
- →Guide agents in building interfaces
- →Apply opinionated constraints to UI development
- →Ensure adherence to evolving interface standards
- →Provide standardized rules for UI development
- →Assist with consistent component building
- →Standardize interface patterns
How it works
The skill provides opinionated and evolving constraints to guide agents in building interfaces, ensuring adherence to specific design patterns and interface standards.
Inputs & outputs
When to use ui-skills
- →Consistent component building
- →Applying UI design constraints
- →Standardizing interface patterns
About this skill
Ui Skills
Overview
Opinionated, evolving constraints to guide agents when building interfaces
When to Use This Skill
Use this skill when you need to work with opinionated, evolving constraints to guide agents when building interfaces.
Instructions
This skill provides guidance and patterns for opinionated, evolving constraints to guide agents when building interfaces.
For more information, see the source repository.
When not to use it
- →When the user does not want opinionated constraints
- →When the project is not related to UI development
- →When the goal is not to guide agents in building interfaces
Limitations
- →The skill provides opinionated, evolving constraints.
- →It is used to guide agents when building interfaces.
- →It ensures AI agents adhere to specific design patterns and evolving interface standards.
How it compares
This skill provides a predefined set of opinionated and evolving constraints for UI development, ensuring consistency and adherence to specific standards, unlike a generic approach that might lack such guidance.
Compared to similar skills
ui-skills side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| ui-skills (this skill) | 0 | 5mo | No flags | Beginner |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| ui-styling | 12 | 9mo | Review | Beginner |
| elegant-design | 21 | 5mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by T-Sunm
View all by T-Sunm →You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
elegant-design
rand
Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
design-lab
0xdesign
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.
frontend-design-pro
claudekit
Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.