elite-frontend-ux
Create distinctive, production-grade frontend interfaces with expert-level UX design. Use when building SaaS dashboards, landing pages, marketing sites, React/Vue components, HTML/CSS layouts, or any web UI. Combines bold aesthetic direction with systematic design tokens, WCAG accessibility, conversion optimization, and Tailwind/React best practices. Produces polished, memorable interfaces that avoid generic AI aesthetics while meeting professional standards. type: reference
Best use case
elite-frontend-ux is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Create distinctive, production-grade frontend interfaces with expert-level UX design. Use when building SaaS dashboards, landing pages, marketing sites, React/Vue components, HTML/CSS layouts, or any web UI. Combines bold aesthetic direction with systematic design tokens, WCAG accessibility, conversion optimization, and Tailwind/React best practices. Produces polished, memorable interfaces that avoid generic AI aesthetics while meeting professional standards. type: reference
Teams using elite-frontend-ux should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/elite-frontend-ux/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How elite-frontend-ux Compares
| Feature / Agent | elite-frontend-ux | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Create distinctive, production-grade frontend interfaces with expert-level UX design. Use when building SaaS dashboards, landing pages, marketing sites, React/Vue components, HTML/CSS layouts, or any web UI. Combines bold aesthetic direction with systematic design tokens, WCAG accessibility, conversion optimization, and Tailwind/React best practices. Produces polished, memorable interfaces that avoid generic AI aesthetics while meeting professional standards. type: reference
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Elite Frontend Ux ## Sub-Skills - [Trigger](trigger/SKILL.md) - [Phase 0 — Context Analysis (Answer Before Writing Any Code)](phase-0-context-analysis-answer-before-writing-any/SKILL.md) - [1. Aesthetic Commitment (Choose ONE, COMMIT)](1-aesthetic-commitment-choose-one-commit/SKILL.md) - [2. Design Token System](2-design-token-system/SKILL.md) - [Contrast (WCAG 2.1 AA) (+4)](contrast-wcag-21-aa/SKILL.md) - [Layout (+3)](layout/SKILL.md) - [Above-the-Fold Essentials (+4)](above-the-fold-essentials/SKILL.md) - [Required: cn() Helper (+3)](required-cn-helper/SKILL.md) - [Compound Components (prefer over prop soup) (+3)](compound-components-prefer-over-prop-soup/SKILL.md) - [8. Anti-Patterns (Never Do)](8-anti-patterns-never-do/SKILL.md) - [9. Pre-Delivery Checklist](9-pre-delivery-checklist/SKILL.md) - [10. Implementation Order](10-implementation-order/SKILL.md)
Related Skills
baoyu-article-illustrator
Article illustrations: type × style × palette consistency.
vscode-extensions
VS Code productivity optimization with essential extensions, settings sync, profiles, keybindings, snippets, and workspace configuration
git-advanced
Advanced git workflows including rebase, worktrees, bisect, hooks, and monorepo patterns
docker
Complete Docker containerization patterns with multi-stage builds for development and production workflows
sphinx
Generate comprehensive Python documentation with Sphinx. Covers autodoc for API extraction, Napoleon for Google/NumPy docstrings, intersphinx for cross-references, and multiple output formats including HTML, PDF, and ePub.
pandoc
Universal document converter for transforming Markdown to PDF, DOCX, HTML, LaTeX, and 40+ other formats. Covers templates, filters, citations with BibTeX/CSL, and batch conversion automation scripts.
marp
Create professional Markdown-based slide presentations with Marp. Covers themes, directives, speaker notes, presenter view, and export to PDF, HTML, and PPTX formats. Includes VS Code integration, CLI usage, and CI/CD automation.
docusaurus
Build modern documentation websites with Docusaurus. Covers docs, blog, pages, versioning, i18n, search integration, and deployment patterns. React-based with MDX support for interactive documentation.
slack-api
Slack bot development and workspace automation using Web API, Events API, Socket Mode, and Block Kit for building interactive messaging applications
miro-api
Miro whiteboard automation using REST API v2 and Python SDK for creating boards, frames, shapes, connectors, and collaborative visual workflows
calendly-api
Calendly scheduling automation using REST API v2 for managing event types, availability, bookings, webhooks, and scheduling workflows
mkdocs
Build professional project documentation with MkDocs and Material theme. Covers site configuration, navigation, plugins, search optimization, versioning with mike, and deployment to GitHub Pages.