common-ui-design
A design-first approach to building interfaces with a focus on intentional aesthetics and consistent styling.
Install
mkdir -p .claude/skills/common-ui-design && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18656" && unzip -o skill.zip -d .claude/skills/common-ui-design && rm skill.zipInstalls to .claude/skills/common-ui-design
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.
Design distinctive, production-grade frontend UI with bold aesthetic choices. Use when building web components, pages, interfaces, dashboards, or applications in any framework (React, Next.js, Angular, Vue, HTML/CSS).Key capabilities
- →Commit to deliberate aesthetic direction before coding
- →Define purpose and tone for UI design
- →Establish visual differentiation for interfaces
- →Select distinctive typography and color themes
- →Plan motion and spatial composition for UI
How it works
The skill enforces a design-thinking phase to clarify purpose, tone, and differentiation, then provides guidelines for aesthetic dimensions like typography, color, motion, and spatial composition.
Inputs & outputs
When to use common-ui-design
- →Designing a dashboard
- →Building a landing page
- →Creating UI components
- →Improving interface aesthetics
About this skill
UI Design Direction
Priority: P0 (CRITICAL)
Before writing any code, commit to deliberate aesthetic direction.
Phase 0: Design Thinking (Mandatory Pre-Code)
Answer these before touching implementation:
- Purpose: What problem this UI solve? Who uses it?
- Tone: Pick one extreme and commit — brutally minimal | maximalist | retro-futuristic | editorial/magazine | luxury/refined | brutalist/raw | playful/toy-like | organic/natural | art deco | industrial/utilitarian
- Differentiation: Name one thing user will remember about this interface.
Bold maximalism and refined minimalism both work — intentionality, not intensity, key.
Aesthetic Dimensions
Typography
- Pair distinctive display font + refined body font; never default to system fonts.
- Self-host via
next/font,@font-face, or Google Fonts API — never CDN<link>in production. - See Font Pairing & Tone Examples
Color & Theme
- Dominant color + sharp accent > timid, evenly-distributed palettes.
- Use CSS custom properties (
--color-primary,--color-accent) for consistency. - Commit: dark or light — don't default to light because it feels "safe".
Motion
- One well-orchestrated entrance (staggered reveals,
animation-delay) > scattered micro-interactions. - CSS-first:
@keyframes,transition,animation-delay; React: Motion library for complex sequences. - See Motion Patterns
Spatial Composition
- Break grid intentionally: asymmetry, overlap, diagonal flow, grid-breaking elements.
- Generous negative space OR controlled density — never accidental middleground.
Backgrounds & Depth
- Create atmosphere: gradient meshes, noise textures, layered transparencies, grain overlays.
- Dramatic shadows and decorative borders should match chosen tone.
- Solid white/gray backgrounds = missed creative opportunity.
Anti-Patterns
- No generic font defaults: Inter/Roboto/Arial/system-ui produce forgettable UIs; choose characterful fonts.
- No purple-gradient-on-white: Most overused AI aesthetic; commit to something context-specific.
- No scattered animations: One orchestrated entrance beats ten random hover effects.
- No accidental layouts: Every spacing and positioning decision must serve aesthetic intent.
- No same aesthetic twice: Vary light/dark, font style, tone — never converge on single style.
References
- Tone Palette & Font Pairings — load when choosing aesthetic direction or fonts
- Motion Patterns — load when implementing animations or transitions
Canonical response anchors
When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
-
aesthetic
-
Additional task-grounded exact anchors: typography
When not to use it
- →When using generic font defaults like Inter/Roboto/Arial
- →When using purple-gradient-on-white aesthetics
- →When creating scattered animations instead of orchestrated ones
Limitations
- →Requires commitment to deliberate aesthetic direction
- →Avoids generic font defaults
- →Avoids purple-gradient-on-white aesthetics
How it compares
This skill mandates a pre-coding design phase with specific aesthetic choices and anti-patterns, ensuring a distinctive and intentional UI, unlike directly implementing without a clear design vision.
Compared to similar skills
common-ui-design side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| common-ui-design (this skill) | 0 | 2mo | No flags | Intermediate |
| ui-ux-pro-max | 0 | 1mo | Review | Beginner |
| ui-ux-pro-max | 0 | 2mo | Review | Intermediate |
| ui-ux-pro-max | 0 | 5mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by HoangNguyen0403
View all by HoangNguyen0403 →You might also like
ui-ux-pro-max
darkmatter
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, cr
ui-ux-pro-max
majiayu000
Frontend UI/UX design intelligence - activate FIRST when user requests beautiful, stunning, gorgeous, or aesthetic interfaces. The primary skill for design decisions before implementation. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Nati
ui-ux-pro-max
IvanLi-CN
UI/UX design intelligence with searchable database
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.
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.
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.