frontend-ui
Frontend UI Design
Create visually distinctive, aesthetically pleasing frontend interfaces that avoid generic "AI slop" patterns.
When to Use
Use this skill when:
- User requests frontend UI creation (HTML, CSS, JavaScript, or React)
- User asks to build a webpage, landing page, or web interface
- User wants to create visual components or layouts
- User mentions design, aesthetics, or "make it look good"
- User asks for dashboard, portfolio, or application UI
Core Principle
CRITICAL: Without explicit aesthetic guidance, Claude defaults to generic, conservative designs (white backgrounds, purple accents, Inter/Roboto fonts, predictable layouts). This skill provides research-backed strategies to create distinctive, visually interesting interfaces.
The Four Design Dimensions
More from womendefiningai/claude-code-skills
code-reviewer
Research-backed code review skill with OWASP Top 10 security checks, SAST tool integration (SonarQube, CodeQL, Snyk), performance pattern detection, and automated quality standards enforcement. Auto-invoked for code review, security audit, PR analysis, and bug checking. Implements 2025 best practices with 92% faster vulnerability remediation.
19code-refactoring
Proactively monitors file sizes and suggests refactoring BEFORE editing. Auto-invoked when files exceed size thresholds (150/200/300 lines) or complexity patterns detected. Works across JavaScript/TypeScript, Python, and general codebases. Prevents accidental complexity growth.
10ui-ux-audit
Mandatory audit workflow for UI/UX changes that reads current state FIRST, checks for redundancy, respects clean design philosophy, and identifies genuine gaps before implementation. Auto-invoked when user mentions UI, UX, design, layout, homepage, page improvements, visual changes, or interface modifications.
6skill-builder
Guide users through creating new Claude Code Skills with proper structure, validation, and best practices
6feature-orchestrator
Research-backed feature implementation workflow enforcing gap analysis, incremental planning, agent coordination, and continuous integration best practices. Auto-invoked for ALL feature implementation requests to prevent code duplication and ensure CLAUDE.md compliance.
6skill-contributor
Guides contributors through adding new skills to the claude-code-skills repository via Pull Request with proper validation and documentation
5