rustams/frontend-design
.cursor/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, or applications (e.g. websites, landing pages, dashboards, React/Vue components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
development
Updated Apr 17, 2026
$ install --global
skillsauthnpx skillsauth add rustams/inbound 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 24, 2026, 8:59 PM2.2s1 file scanned
SKILL.md
- name:
- frontend-design
- description:
- Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, or applications (e.g. websites, landing pages, dashboards, React/Vue components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
- license:
- Apache-2.0 (see https://www.apache.org/licenses/LICENSE-2.0)
- source:
- https://github.com/anthropics/skills/tree/main/skills/frontend-design
Frontend Design (Anthropic)
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
Use this skill for frontend/UI tasks in this project (Nuxt 3, Vue, Битрикс24 UI Kit): when building new pages, improving visuals, or creating standalone UI artifacts.
Битрикс24 projects: When working on UI/design for this Битрикс24 app — all components must come from B24 UI Kit (B24Button, B24Input, B24Card, etc.). Do NOT use Nuxt UI or other libraries for design «improvements». Combine with develop-b24-frontend for constraints.
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, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft pastel, industrial, etc. Execute with precision.
- Constraints: Framework (e.g. Nuxt 3, Vue), performance, accessibility, Битрикс24 UI Kit if applicable.
- Differentiation: What makes this unforgettable?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality.
Then implement working code 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 Guidelines
- Typography: Distinctive, characterful fonts. Avoid generic Arial/Inter; pair a display font with a refined body font.
- Color & Theme: Cohesive palette. Use CSS variables. Dominant colors with sharp accents.
- Motion: Animations for effects and micro-interactions. CSS-first; Motion library for React when available. High-impact moments (e.g. staggered page load).
- Spatial Composition: Unexpected layouts, asymmetry, overlap, grid-breaking elements, generous negative space or controlled density.
- Backgrounds & Details: Atmosphere and depth — gradient meshes, noise, geometric patterns, layered transparencies, shadows, grain overlays.
NEVER use generic AI aesthetics: overused fonts (Inter, Roboto, Arial), purple-on-white gradients, predictable layouts. Vary themes, fonts, and aesthetics. Match implementation complexity to the vision — maximalist needs elaborate code; minimalist needs restraint and precision.
Remember: commit fully to a distinctive vision and execute it well.
Related Skills
rustams/tool-design
tools
VerifiedTrustedCommunity
This skill should be used when the user asks to "design agent tools", "create tool descriptions", "reduce tool complexity", "implement MCP tools", or mentions tool consolidation, architectural reduction, tool naming conventions, or agent-tool interfaces.
SKILL.mdUpdated Apr 17, 2026
rustams/project-development
development
VerifiedTrustedCommunity
This skill should be used when the user asks to "start an LLM project", "design batch pipeline", "evaluate task-model fit", "structure agent project", or mentions pipeline architecture, agent-assisted development, cost estimation, or choosing between LLM and traditional approaches.
SKILL.mdUpdated Apr 17, 2026
rustams/product-manager-skills
development
VerifiedTrustedCommunity
PM skill for Claude Code, Codex, Cursor, and Windsurf. Diagnoses SaaS metrics, critiques PRDs, plans roadmaps, runs discovery, coaches PM career transitions, and pressure-tests AI product decisions. Six knowledge domains, 12 templates, 30+ frameworks, and an opinionated interaction style that labels assumptions and names tradeoffs.
SKILL.mdUpdated Apr 17, 2026
rustams/navigate-b24-project
development
VerifiedTrustedCommunity
Understand the Битрикс24 Starter Kit project structure. Use this skill to find where specific code (frontend, backend, infrastructure) is located.
SKILL.mdUpdated Apr 17, 2026