kilimcininkoroglu/frontend-design
claude/skills/frontend-design/SKILL.md
This skill MUST be invoked when the user says "frontend yap", "UI tasarla", "component oluştur", "sayfa yap", "design ref", "design system", "DESIGN.md", "site gibi yap", "GitHub tarzı", "Vercel tarzı", "Anthropic tarzı", "generate design system", "design system oluştur", or any variation requesting frontend code generation, design system reference loading, or UI building. Builds distinctive production-grade interfaces and provides a 27-site design system catalog with URL-based generator.
$ install --global
skillsauthnpx skillsauth add kilimcininkoroglu/cli-tweaks 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: May 6, 2026, 8:03 AM414.7s32 files scanned
SKILL.md
- name:
- frontend-design
- description:
- >
- argument-hint:
- [use <site> | generate <url> | extract [path] | list]
Frontend Design
Create distinctive, production-grade frontend interfaces. Load real-world design systems for reference or generate new ones from any URL.
What To Do Right Now
Path A: Design system operations (use, generate, extract, list)
If the user's command includes use, generate, extract, or list:
/frontend-design use github→ Readsubcommands/use.mdand follow it. STOP./frontend-design generate <url>→ Readsubcommands/generate.mdand follow it. STOP./frontend-design extract [path]→ Readsubcommands/extract.mdand follow it. STOP./frontend-design list→ Print the catalog table from the bottom of this file.
For subcommand routing:
- Read the full content of the matching subcommand file using the Read tool.
- Execute its instructions as your complete workflow.
- STOP. Do not continue reading this file.
Path B: Build frontend (default)
If no subcommand — build distinctive frontend code following the Design Guidelines below.
If a design system was loaded via Path A earlier in this conversation, use those tokens (colors, fonts, spacing, components). Otherwise, make bold creative choices.
Design Guidelines
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. Use these for inspiration but design one that is true to the aesthetic direction.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
Frontend Aesthetics
- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive choices that elevate the design. Pair a distinctive display font with a refined body font.
- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays.
Anti-Patterns (NEVER)
- Generic AI aesthetics: overused fonts (Inter, Roboto, Arial), cliched purple gradients on white, predictable layouts
- Cookie-cutter design that lacks context-specific character
- Same choices across generations (vary themes, fonts, aesthetics every time)
- Holding back — show what can truly be created when committing fully to a distinctive vision
- Gradients of any kind — no linear, radial, or mesh gradients anywhere
- Unnecessary hover effects — only add hover states when they serve a clear functional purpose
Implementation
Match complexity to the vision. Maximalist designs need elaborate code with extensive animations. Minimalist designs need restraint, precision, careful spacing and typography. Elegance comes from executing the vision well.
Design System Catalog (28 Sites)
Use /frontend-design use <name> to load any of these into context:
Social Media
| Site | Directory | Description |
|------------|------------------|--------------------------------------------------|
| X (Twitter)| catalog/x/ | Dark mode dominant, blue accent, minimalist |
| TikTok | catalog/tiktok/ | Vibrant cyan/pink gradient, neon on dark |
| Reddit | catalog/reddit/ | Orange-red #FF4500, card-based layout |
| Discord | catalog/discord/| Blurple #5865F2, gaming aesthetic |
| LinkedIn | catalog/linkedin/| Corporate blue #0A66C2, structured |
| Snapchat | catalog/snapchat/| Yellow #FFFC00, playful UI |
| Threads | catalog/threads/| Clean black/white, Instagram-adjacent |
| Mastodon | catalog/mastodon/| Purple #6364FF, open-source aesthetic |
E-commerce & Retail
| Site | Directory | Description |
|------------|-------------------|-------------------------------------------------|
| Amazon | catalog/amazon/ | Orange #FF9900, dense product layouts |
| Shopify | catalog/shopify/| Green #008060, Polaris design system |
| Etsy | catalog/etsy/ | Orange-coral #F56400, artisan aesthetic |
| eBay | catalog/ebay/ | Blue #3665F3, multicolor logo |
| Target | catalog/target/ | Red #CC0000, clean shopping UI |
| Walmart | catalog/walmart/| Blue #0071DC, utility-focused |
Travel & Food
| Site | Directory | Description |
|-------------|---------------------|-----------------------------------------------|
| Booking.com | catalog/booking/ | Deep blue #003580, yellow CTAs |
| DoorDash | catalog/doordash/ | Red #FF3008, restaurant-focused |
| Starbucks | catalog/starbucks/| Green #00704A, warm inviting UI |
Gaming
| Site | Directory | Description |
|--------------|-----------------------|---------------------------------------------|
| Steam | catalog/steam/ | Dark blue #1b2838, cyan accent |
| Epic Games | catalog/epicgames/ | Dark theme, blue #0074e4, cinematic |
| PlayStation | catalog/playstation/| Blue #003791, premium gaming |
| Xbox | catalog/xbox/ | Green #107C10, Fluent Design |
| Twitch | catalog/twitch/ | Purple #9146FF, live content focus |
Developer Tools & AI
| Site | Directory | Description |
|------------|---------------------|------------------------------------------------|
| GitHub | catalog/github/ | Primer system, octicon icons |
| Vercel | catalog/vercel/ | Black-white precision, Geist font |
| Supabase | catalog/supabase/ | Emerald #3ECF8E, code-first |
| OpenAI | catalog/openai/ | Clean white/dark, ChatGPT green |
| Anthropic | catalog/anthropic/| Warm terracotta #DA7756, editorial |
| Hacker | catalog/hacker/ | Matrix green #00ff41, terminal-native dark |
Subcommand Reference
- For
/frontend-design use: see subcommands/use.md - For
/frontend-design generate: see subcommands/generate.md - For
/frontend-design extract: see subcommands/extract.md
Related Skills
kilimcininkoroglu/version-update-skill-creator
development
VerifiedTrustedCommunity
This skill MUST be invoked when the user says "version update skill oluştur", "create version update skill", "versiyon skill'i oluştur", "update-version skill", "version-update skill yap" or any variation requesting creation of a project-local version update skill. SHOULD also invoke when user mentions "versiyon güncelleme skill'i kur", "setup version bumping", or asks to automate version management for the current project. Scans the project for version files, build commands, and changelog, then generates a tailored version-update skill in .factory/skills/.
6SKILL.mdUpdated May 6, 2026
kilimcininkoroglu/task-plan
development
VerifiedTrustedCommunity
This skill MUST be invoked when the user says "task-plan", "görev planla", "break down this PRD", "create tasks from spec", "PRD'yi parçala", "görevleri oluştur" or any variation requesting task breakdown from a specification document. SHOULD also invoke when user mentions "feature breakdown", "sprint planning", "task tracking", or wants to manage a structured development workflow with features and tasks.
6SKILL.mdUpdated May 6, 2026
kilimcininkoroglu/redate-commits
testing
VerifiedTrustedCommunity
This skill MUST be invoked when the user says "commit tarihlerini değiştir", "redate commits", "spread commits", "backdate" or any variation requesting git commit date rewriting across a date range. Rewrites both author and committer dates using git filter-branch, distributing commits realistically across the specified period.
6SKILL.mdUpdated May 6, 2026
kilimcininkoroglu/ios-uikit
development
VerifiedTrustedCommunity
This skill MUST be invoked when the user says "UIKit", "iOS geliştirme", "programmatic UI", "table view", "collection view", "Auto Layout", "UIViewController", "UINavigationController", "Core Animation", "UIKit review", "UIKit build", "iOS view controller", "UIKit pattern", "programmatic layout", or any variation requesting UIKit development, review, or improvement. Covers programmatic UIKit with Auto Layout, table/collection views, navigation, animation, networking, architecture, and 20 reference documents with production-ready patterns.
6SKILL.mdUpdated May 6, 2026