belos-street/ui-templates
skills/ui-templates/SKILL.md
Collection of distinctive UI design templates. Each template provides a complete design system with colors, typography, components, and layouts. Use these when building production-ready interfaces.
$ install --global
skillsauthnpx skillsauth add belos-street/skill-kit ui-templatesInstall 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: Apr 27, 2026, 3:21 AM108.3s31 files scanned
SKILL.md
- name:
- ui-templates
- title:
- UI Templates
- description:
- Collection of distinctive UI design templates. Each template provides a complete design system with colors, typography, components, and layouts. Use these when building production-ready interfaces.
- tags:
- ui, template, design-system, theme
UI Templates
A collection of distinctive UI design templates with complete design systems.
Inspiration
This collection is inspired by designprompts.dev - AI-Powered Design Style Explorer.
Design Templates
| Template | Description | Reference | |----------|-------------|-----------| | Academia | Scholarly gravitas meets timeless elegance. Channels the atmosphere of centuries-old university libraries and Renaissance manuscripts. | references/academia.md | | Art Deco | The visual embodiment of the Roaring Twenties—opulence, mathematical precision, and architectural grandeur. | references/art-deco.md | | Bauhaus | Form follows function with pure geometric beauty and primary color theory. Constructivist modernism. | references/bauhaus.md | | Bold Typography | Typography isn't decoration—it's the entire visual language. Poster design translated to web. | references/bold-typography.md | | Botanical | Digital ode to nature—breathes, flows, and grounds itself in organic beauty. Soft, sophisticated, and deeply intentional. | references/botanical.md | | Claymorphism | High-fidelity simulation of premium digital clay. Tactile, voluminous, and physically grounded. | references/claymorphism.md | | Cyberpunk | "High-Tech, Low-Life." Digital dystopia colliding with high-tech noir reality. Neon, glitch, and industrial brutality. | references/cyberpunk.md | | Enterprise | Modern enterprise SaaS aesthetic—professional yet approachable, sophisticated yet friendly. | references/enterprise.md | | Flat Design | Removes all artifice. Rejects three-dimensionality—hierarchy through size, color, and typography only. | references/flat-design.md | | Industrial | Industrial Realism—tactile precision, mechanical reliability, and the soul of physical objects. | references/industrial.md | | Kinetic | Typography is the entire visual structure. Text becomes image, headline becomes hero, motion becomes rhythm. | references/kinetic.md | | Luxury | Elegance through restraint, precision, and depth. High-end fashion magazine aesthetic. | references/luxury.md | | Material Design | Material You (MD3)—organic, expressive system with soft curves and tonal surfaces. | references/material-design.md | | Maximalism | MORE IS MORE. Sensory overload, visual abundance, and unapologetic excess. Y2K-meets-Gen-Z aesthetic. | references/maximalism.md | | Minimal Dark | Atmospheric depth through layers of darkness. Warm amber accents glow like embers in the night. | references/minimal-dark.md | | Modern Dark | Precision, depth, and fluidity. Cinematic meets technical minimalism. Premium developer tools aesthetic. | references/modern-dark.md | | Monochrome | Reduction to essence—black, white, and typography. Design as discipline where restraint becomes expression. | references/monochrome.md | | Neo Brutalism | Digital punk rebellion. Vibrant, performative, intentionally distinct. Thick hard-edged lines and solid offset shadows. | references/neo-brutalism.md | | Neumorphism | Physical depth through dual shadows—tactile, calm, modern, and physically grounded. | references/neumorphism.md | | Newsprint | Editorial newspaper style reimagined for web. High-contrast typography, grid-based layouts, sharp geometric precision. | references/newsprint.md | | Organic | Embraces wabi-sabi—warmth, softness, and natural connection. No straight lines in nature. | references/organic.md | | Playful Geometric | Optimism, clarity, and tactile fun. Stable grid, wild decoration. Memphis Group inspired. | references/playful-geometric.md | | Professional | Typographic elegance through classical restraint. Editorial, timeless, warm, refined. | references/professional.md | | Retro | Raw, unfiltered aesthetic of the early web. 90s nostalgia—beveled buttons, system fonts, playful chaos. | references/retro.md | | SaaS | Modern SaaS dashboard style. Clarity through structure, character through bold detail. | references/saas.md | | Sketch | Hand-drawn style celebrates authentic imperfection. Organic, playful irregularity like sketches on paper. | references/sketch.md | | Swiss Minimalist | International Typographic Style—objective communication, mathematical precision, and logical structure. | references/swiss-minimalist.md | | Terminal | CLI aesthetic homage. Brutally functional, high-contrast, authentically retro. Monospace supremacy. | references/terminal.md | | Vaporwave | Digital nostalgia meets neon future. 80s retro-futurism, synthetic reality drenched in retro-futuristic excess. | references/vaporwave.md | | Web3 | Bitcoin DeFi aesthetic—sophisticated fusion of precision engineering, cryptographic trust, and digital gold. | references/web3.md |
Usage
- Choose a design template that matches your project needs
- Read the design system documentation in the reference file
- Implement using the provided color tokens, typography, and components
- Follow the layout and animation guidelines for consistency
Template Structure
Each template includes:
- Design Philosophy: Core principles and vibe
- Design Tokens: Colors, typography, spacing, borders, shadows
- Components: Buttons, cards, inputs, icons
- Layout: Grid systems, responsive breakpoints
- Animation: Transitions and micro-interactions
- Accessibility: Focus states, contrast requirements
Related Skills
belos-street/zustand
development
VerifiedTrustedCommunity
Modern, lightweight state management for React
6SKILL.mdUpdated May 14, 2026
belos-street/writing-plans
development
VerifiedTrustedCommunity
Use when you have a spec or requirements for a multi-step task, before touching code
6SKILL.mdUpdated May 14, 2026
belos-street/vue
development
VerifiedTrustedCommunity
Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.
6SKILL.mdUpdated May 14, 2026
belos-street/vue-router-best-practices
tools
VerifiedTrustedCommunity
Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
6SKILL.mdUpdated May 14, 2026