luan/frontend-design
skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design quality. Triggers: 'build UI', 'design component', 'create page', 'frontend', 'make it look good'. Works with any framework or vanilla HTML/CSS/JS.
$ install --global
skillsauthnpx skillsauth add luan/dot-claude frontend-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: Apr 30, 2026, 1:09 PM10.6s1 file scanned
SKILL.md
- name:
- frontend-design
- description:
- Create distinctive, production-grade frontend interfaces with high design quality. Triggers: 'build UI', 'design component', 'create page', 'frontend', 'make it look good'. Works with any framework or vanilla HTML/CSS/JS.
- user-invocable:
- true
Frontend Design
Create distinctive, production-grade interfaces that avoid the generic "AI slop" aesthetic.
Workflow
- Detect stack: Read
package.json/equivalent, check existing component patterns, match project conventions. Greenfield → ask user or infer. - Design direction: Commit to a clear aesthetic before writing code — see below.
- Implement: Working code in whatever stack fits (React, Vue, Svelte, vanilla HTML/CSS/JS, Flutter, SwiftUI, terminal UI).
- Verify: Check the result matches the chosen direction, not generic defaults.
Design Thinking
Before coding, commit to a specific aesthetic direction:
- Purpose — What problem does this solve? Who uses it?
- Tone — Pick a concrete aesthetic (brutalist, editorial, retro-futuristic, luxury, playful, etc.) and commit fully. A strong point of view looks intentional; mixing styles looks accidental.
- Differentiation — What's the one thing someone will remember about this interface?
Banned Patterns
These produce the "AI-generated" look — sameness across every output:
- Fonts: Inter, Roboto, Arial, Space Grotesk, system fonts — the defaults every AI reaches for. Pick fonts that reinforce the aesthetic (Google Fonts has thousands).
- Colors: Purple gradients on white — the canonical AI palette. Build palettes from brand/purpose. Dominant color + sharp accents > rainbow.
- Layouts: Cookie-cutter symmetry, predictable card grids — telegraph "template." Break the grid.
Every generation must vary. Never converge on the same fonts, palettes, or layout patterns across sessions.
Execution
- Match complexity to vision: maximalist → elaborate animations; minimalist → precision in spacing and typography
- Typography: pair a distinctive display font with a refined body font
- Color: CSS variables/design tokens for consistency
- Motion: CSS-first; libraries (Motion, GSAP) when stack supports. One orchestrated page load > scattered micro-interactions
- Spatial: asymmetry, overlap, grid-breaking, generous negative space OR controlled density — pick one
- Backgrounds: atmosphere and depth over flat solid colors (gradients, noise, patterns, layered transparencies)
Related Skills
luan/sym
tools
VerifiedTrustedCommunity
Tree-sitter indexed code navigator (ct sym CLI). Use INSTEAD OF Read/Grep/Glob/Bash when exploring existing code, understanding how something works, locating a symbol, tracing the call graph up (impact) or down (trace), finding implementations of an interface, scoping a diff to one symbol, or preparing to edit code you have not read yet. Triggers: 'how does X work', 'explain this class/file/symbol', 'walk me through X', 'what does X do', 'where is X defined', 'who calls X', 'what does X call', 'find implementations of', 'what breaks if I change X', 'outline this file', 'map imports', 'show me this symbol', exploring unfamiliar repo, tracing call graph, scoping diff to a symbol, preparing to edit code I haven't read, about to Read a file over ~500 lines to understand it. Do NOT use for: writing new code from scratch, editing prose or config, running tests, or when a stack trace already names the file and line.
4SKILL.mdUpdated Apr 22, 2026
luan/vibe
development
VerifiedTrustedCommunity
Fully autonomous development workflow from prompt to commit. Chains spec → develop → review → commit. Triggers: /vibe, 'vibe this', 'autonomous workflow', 'just do it all', 'build this end-to-end', 'full pipeline', 'handle everything'.
4SKILL.mdUpdated Apr 21, 2026
luan/vault-sweep
development
VerifiedTrustedCommunity
Comprehensive vault maintenance — cross-references blueprints against codebase state to produce a maintenance plan: archive consumed artifacts, audit docs for staleness, propose new docs for undocumented stable systems. Triggers: 'vault sweep', 'sweep the vault', 'clean up vault', 'vault maintenance', 'what can we archive', 'audit blueprints', 'vault hygiene', 'blueprint cleanup'. Use whenever the user wants a holistic view of vault health rather than archiving a single artifact (that's /archive). Also use when the user asks what's stale, what needs docs, or whether artifacts can be cleaned up.
4SKILL.mdUpdated Apr 21, 2026
luan/test-plan
development
VerifiedTrustedCommunity
Analyze current diff, classify changes by risk, and produce structured manual test plan. Triggers: 'test plan', 'what should I test', 'manual testing', 'verification steps', 'QA checklist'. Exits early for trivial changes. Do NOT use when: writing automated tests — use /develop with TDD. Do NOT use when: reviewing code quality — use /crit instead.
4SKILL.mdUpdated Apr 21, 2026