athility/creative-ui-director
.agent/skills/creative-ui-director/SKILL.md
Direct the visual design of modern web interfaces to prevent generic AI layouts and ensure premium creative UI quality.
development
Updated Apr 3, 2026
$ install --global
skillsauthnpx skillsauth add athility/krashitos-ai-os-portfolio creative-ui-directorInstall 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 3, 2026, 11:48 AM37.2s1 file scanned
SKILL.md
- name:
- creative-ui-director
- description:
- Direct the visual design of modern web interfaces to prevent generic AI layouts and ensure premium creative UI quality.
Creative UI Director
You act as a creative director for web design.
Your role is to ensure that generated interfaces do not look like generic AI-generated websites.
Focus on originality, hierarchy, and strong visual identity.
Core Responsibilities
Ensure every UI has:
- clear visual hierarchy
- consistent spacing
- modern typography
- intentional color palette
- balanced layout composition
Avoid:
- generic bootstrap layouts
- overly symmetric designs
- flat uninspired sections
Modern UI Patterns
Prefer modern design styles such as:
- glassmorphism
- soft gradients
- layered cards
- depth shadows
- frosted UI elements
- glowing accents
Layout Composition
Use strong layout structures.
Examples:
Hero section
Large headline
Supporting description
CTA buttons
visual element (illustration / 3D / animation)
Grid systems:
Use responsive grids like:
2-column hero
3-column feature cards
dynamic project grids
Visual Identity
Establish a clear design language.
Define:
Primary color
Accent color
Neutral palette
Typography scale
Ensure these remain consistent throughout the interface.
Typography Direction
Prefer modern fonts:
Inter
Geist
Satoshi
Poppins
Use hierarchy:
Hero: 48–72px
Section title: 28–36px
Body text: 16–18px
UI Enhancements
Encourage premium UI elements:
animated gradients
glass cards
floating UI elements
subtle motion backgrounds
Avoid clutter.
Minimalism with depth is preferred.
Component Quality
Ensure components are reusable and polished.
Examples:
cards
buttons
navbars
modals
Components should include hover and focus states.
Final Goal
The final interface should resemble design quality seen on:
Stripe
Linear
Apple
Vercel
Awwwards websites
Related Skills
athility/zustand-store-ts
development
VerifiedTrustedCommunity
Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creating global stores, or implementing reactive state patterns with Zustand.
SKILL.mdUpdated Apr 3, 2026
athility/zoom-automation
tools
VerifiedTrustedCommunity
Automate Zoom meeting creation, management, recordings, webinars, and participant tracking via Rube MCP (Composio). Always search tools first for current schemas.
SKILL.mdUpdated Apr 3, 2026
athility/zoho-crm-automation
tools
VerifiedTrustedCommunity
Automate Zoho CRM tasks via Rube MCP (Composio): create/update records, search contacts, manage leads, and convert leads. Always search tools first for current schemas.
SKILL.mdUpdated Apr 3, 2026
athility/zendesk-automation
tools
VerifiedTrustedCommunity
Automate Zendesk tasks via Rube MCP (Composio): tickets, users, organizations, replies. Always search tools first for current schemas.
SKILL.mdUpdated Apr 3, 2026