hoangnguyen0403/common-ui-design
skills/common/common-ui-design/SKILL.md
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).
$ install --global
skillsauthnpx skillsauth add hoangnguyen0403/agent-skills-standard common-ui-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 10, 2026, 2:41 AM147.0s4 files scanned
SKILL.md
- name:
- common-ui-design
- description:
- 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).
UI Design Direction
Priority: P0 (FOUNDATIONAL)
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
Related Skills
hoangnguyen0403/specialist-pr-reviewer
development
VerifiedTrustedCommunity
Summarizes GitHub PR, GitLab MR, or Azure DevOps PR metadata, review threads, changed files, and template completeness. Use during review-ticket or code-review workflows when PR/MR context exists.
498SKILL.mdUpdated May 23, 2026
hoangnguyen0403/typescript-tooling
tools
VerifiedTrustedCommunity
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling.
498SKILL.mdUpdated May 21, 2026
hoangnguyen0403/typescript-security
development
VerifiedTrustedCommunity
Validate input, secure auth tokens, and prevent injection attacks in TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration.
498SKILL.mdUpdated May 21, 2026
hoangnguyen0403/typescript-language
development
VerifiedTrustedCommunity
Apply modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings.
498SKILL.mdUpdated May 21, 2026